/* ================================================= */
/* === 1. ESTILOS BASE (ESCRITORIO - MAYOR A 600PX) === */
/* ================================================= */

/* Acá se definen propiedades generales. Pero no se imponen a las particulares */
body{ 
	text-align: left; /* Alineación hor del texto */ 
	font-family: Ubuntu, sans-serif; /* Tipo de fuente (añado 'sans-serif' como fallback) */
	color: black; /* Color de fuente */
}

#cabecera{
    color: white; 
	background-color: #000066;
	width: 100%; 
	box-sizing: border-box; /* Asegura que padding y border no añadan ancho extra */
	padding:5px 10px 5px 10px;
	margin: 0px;
	border:0px;
}

/* Define propiedades de la barra izquierda (50% en escritorio) */
#bloqueizq{ 
	width: 50%; /* Le asigno un 50% del ancho total en pantallas grandes */
	box-sizing: border-box;
	padding:0px 10px 0px 10px;
	margin: 0px;
	vertical-align: top;
	border:0px;
	float: left; /* Ubicación relativa del bloque */
}

/* Define propiedades de la barra derecha (50% en escritorio) */
#bloqueder{ 
	width: 50%; /* Le asigno un 50% del ancho total en pantallas grandes */
	box-sizing: border-box;
	padding:0px 10px 0px 10px;
	margin: 0px;
	border:0px;
	float: right; /* Ubicación relativa del bloque */
}

/* Define propiedades de la sección principal (contenedor genérico) */
#contenedor1{ 
	width: 100%; /* Ocupa el 100% del ancho */
	background-color: #ffffff;
    /* height:600; -> (Eliminar alturas fijas ayuda a la responsividad) */
	box-sizing: border-box;
	padding:10px 10px 10px 10px;
	margin: 0px;
	border:0px;
	float: left; /* ubicación relativa del bloque */
}

/* Define propiedades de la sección completa */
#completo{ 
	width: 100%; /* Le asigno un % del ancho total */
	box-sizing: border-box;
	padding:0px 10px 0px 10px;
	margin: 0px;
	border:0px;
	float: left; /* ubicación relativa del bloque */
}

/* Estilo para la imagen que flota a la derecha */
#imagender{
	width: 150px; /* Ancho fijo para escritorio */
	margin: 5px; /* Define un pequeño margen alrededor */
	float: right; /* Ubicación relativa del bloque a la derecha */
	/* float: top; -> (Esto no existe en CSS, float solo puede ser left, right o none) */
}

/* Estilos para la fila de 3 columnas en escritorio */
#fila{
    width:100%; 
    float: left; 
    background-color: #EFF6F6; 
    border-color: blue;
}
#celdaizq{
    width: 33%; 
    float: left; 
    text-align:center;
}
#celdacen{
    width: 34%; 
    float:left; 
    text-align:center; 
}
#celdader{
    width: 33%; 
    float: right; 
    text-align:center; 
}

/* Estilos para iframes */
iframe{
    width: 100%; 
    height: 760px; /* Altura que se reducirá en móviles */
}


/* ================================================= */
/* === 2. MEDIA QUERY (ESTILOS PARA MÓVILES Y TABLETS PEQUEÑAS) === */
/* ================================================= */

/* Aplica los siguientes estilos cuando el ancho de la pantalla es de 600px o menos */
@media screen and (max-width: 600px) {

    /* HACE QUE LOS BLOQUES DE 50% SE APILEN */
    /* En pantallas pequeñas, ocupan el 100% y eliminamos el 'float' */
    #bloqueizq, #bloqueder {
        width: 100%; /* Ocupa todo el ancho disponible */
        float: none; /* Eliminar el float para que se apilen verticalmente */
        margin-bottom: 15px; /* Espacio extra entre los bloques apilados */
    }

    /* HACE QUE LAS CELDAS DE LA FILA SE APILEN */
    /* Las celdas también ocupan el 100% y eliminamos el 'float' */
    #celdaizq, #celdacen, #celdader {
        width: 100%;
        float: none;
        margin-bottom: 10px; /* Espacio entre celdas apiladas */
        padding: 10px 0; /* Añadir un poco de padding vertical */
    }

    /* GESTIÓN DE IMAGEN EN MÓVIL */
    #imagender {
        width: 80%; /* Hacerla más grande pero aún controlable */
        max-width: 150px; /* Mantener un máximo */
        float: none; /* Eliminar el float */
        display: block; /* Convertirla en un bloque para poder centrarla */
        margin-left: auto;
        margin-right: auto; /* Centra la imagen horizontalmente */
    }

    /* AJUSTE DE IFRAME */
    iframe {
        height: 350px; /* Reduce la altura del iframe en móviles */
    }
}