/*
 * Hoja de estilos única del Portal del Padre de Familia.
 * Portal Académico Escolar™
 *
 * Basada en las variables (design tokens) y componentes ya definidos
 * en el Documento Maestro de UX/UI congelado del Portal del Padre.
 * Sin dependencias externas, sin JavaScript.
 */

:root {
	/* Color institucional (fijo por ahora; sujeto a configuración por colegio en una fase futura). */
	--pae-color-primario: #1E2A4A;
	--pae-color-primario-oscuro: #16203A;
	--pae-color-texto: #222222;
	--pae-color-texto-secundario: #555555;
	--pae-color-fondo: #F7F7F8;
	--pae-color-superficie: #FFFFFF;
	--pae-color-borde: #E0E0E0;

	/* Colores semánticos de estado (reservados exclusivamente para estado, nunca decorativos). */
	--pae-color-exito: #2F8C5A;
	--pae-color-exito-fondo: #EAF7EF;
	--pae-color-advertencia: #C9A227;
	--pae-color-advertencia-fondo: #FDF6E3;
	--pae-color-error: #8A1F11;
	--pae-color-error-fondo: #FDECEB;
	--pae-color-neutro: #6B7280;
	--pae-color-neutro-fondo: #F1F1F2;

	/* Tipografía. */
	--pae-fuente-base: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pae-texto-titulo: 1.5rem;
	--pae-texto-subtitulo: 1.15rem;
	--pae-texto-cuerpo: 1rem;
	--pae-texto-secundario: 0.875rem;
	--pae-texto-pequeno: 0.75rem;

	/* Espaciado (escala de 4px). */
	--pae-espacio-xs: 4px;
	--pae-espacio-sm: 8px;
	--pae-espacio-md: 16px;
	--pae-espacio-lg: 24px;
	--pae-espacio-xl: 32px;

	/* Bordes y sombras. */
	--pae-radio-borde: 8px;
	--pae-sombra-tarjeta: 0 1px 3px rgba(0, 0, 0, 0.08);

	/* Altura de la Barra Inferior fija (para reservar espacio en el contenido de cada pantalla). */
	--pae-alto-barra-inferior: 64px;
}

body.pae-portal-padre {
	margin: 0;
	font-family: var(--pae-fuente-base);
	color: var(--pae-color-texto);
	background-color: var(--pae-color-fondo);
	font-size: var(--pae-texto-cuerpo);
	/* UX.1: reserva el espacio ya previsto por --pae-alto-barra-inferior
	   (declarada desde el diseño original con ese propósito explícito,
	   nunca aplicada hasta ahora) — evita que el contenido de cualquier
	   pantalla quede oculto detrás de la Barra Inferior fija. */
	padding-bottom: var(--pae-alto-barra-inferior);
}

/* Contenedor responsive. */
.pae-contenedor-sm { max-width: 420px; margin: 0 auto; padding: 0 var(--pae-espacio-md); }
.pae-contenedor-md { max-width: 720px; margin: 0 auto; padding: 0 var(--pae-espacio-md); }
.pae-contenedor-lg { max-width: 960px; margin: 0 auto; padding: 0 var(--pae-espacio-md); }

/* Encabezado institucional (variante Portal, reservado para la Tarea de Inicio). */
.pae-encabezado {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--pae-alto-barra-inferior);
	padding: 0 var(--pae-espacio-lg);
	background-color: var(--pae-color-superficie);
	border-bottom: 1px solid var(--pae-color-borde);
}
.pae-encabezado-identidad { display: flex; align-items: center; gap: var(--pae-espacio-sm); }
.pae-encabezado-identidad img {
	max-height: 32px;
	max-width: 160px;
	width: auto;
	height: auto;
}
.pae-encabezado-identidad span { font-weight: 600; }
.pae-encabezado-estudiante { text-align: right; font-size: var(--pae-texto-secundario); }
.pae-encabezado-estudiante .pae-cambiar-estudiante { display: block; color: var(--pae-color-primario); text-decoration: none; font-size: var(--pae-texto-pequeno); }
.pae-encabezado-estudiante .pae-cambiar-estudiante:hover { text-decoration: underline; }

/* Barra Inferior de Navegación (reservada para la Tarea de Inicio). */
.pae-barra-inferior {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--pae-alto-barra-inferior);
	display: flex;
	background-color: var(--pae-color-superficie);
	border-top: 1px solid var(--pae-color-borde);
	z-index: 10;
}
.pae-barra-inferior a {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-decoration: none;
	color: var(--pae-color-texto-secundario);
	font-size: var(--pae-texto-pequeno);
	min-height: 44px;
}
.pae-barra-inferior a.pae-activo { color: var(--pae-color-primario); font-weight: 600; }
.pae-barra-inferior a .pae-icono { font-size: 1.25rem; }

/* Tarjeta (contenedor genérico). */
.pae-tarjeta {
	background-color: var(--pae-color-superficie);
	border-radius: var(--pae-radio-borde);
	box-shadow: var(--pae-sombra-tarjeta);
	padding: var(--pae-espacio-lg);
	margin-bottom: var(--pae-espacio-md);
}
.pae-tarjeta-destacada { border: 2px solid var(--pae-color-primario); }

/* Tarjeta Grande de Acceso (reservada para la Tarea de Inicio). */
.pae-tarjeta-grande {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pae-espacio-sm);
	background-color: var(--pae-color-superficie);
	border-radius: var(--pae-radio-borde);
	box-shadow: var(--pae-sombra-tarjeta);
	padding: var(--pae-espacio-lg);
	text-decoration: none;
	color: var(--pae-color-texto);
	font-weight: 600;
	min-height: 96px;
}
.pae-tarjeta-grande .pae-icono { font-size: 2rem; }

/* Botón. */
.pae-boton {
	display: inline-block;
	padding: 13px var(--pae-espacio-lg);
	font-size: var(--pae-texto-cuerpo);
	font-weight: 600;
	border-radius: var(--pae-radio-borde);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	border: none;
	min-height: 44px;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.pae-boton-primario { background-color: #16203A; color: #ffffff; }
.pae-boton-primario:hover { background-color: #0F1729; }
.pae-boton-secundario { background-color: transparent; color: var(--pae-color-texto); border: 1px solid var(--pae-color-borde); }
.pae-boton-secundario:hover { background-color: var(--pae-color-fondo); }
.pae-boton-ancho-completo { display: block; width: 100%; }

/* Insignia / Badge de estado. */
.pae-insignia {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: var(--pae-texto-pequeno);
	font-weight: 600;
}
.pae-insignia-exito { background-color: var(--pae-color-exito-fondo); color: var(--pae-color-exito); }
.pae-insignia-advertencia { background-color: var(--pae-color-advertencia-fondo); color: var(--pae-color-advertencia); }
.pae-insignia-error { background-color: var(--pae-color-error-fondo); color: var(--pae-color-error); }
.pae-insignia-neutro { background-color: var(--pae-color-neutro-fondo); color: var(--pae-color-neutro); }

/* Mensaje (éxito / advertencia / error / información). */
.pae-mensaje {
	border-radius: var(--pae-radio-borde);
	padding: 12px 16px;
	margin-bottom: var(--pae-espacio-md);
	font-size: var(--pae-texto-secundario);
}
.pae-mensaje-exito { background-color: var(--pae-color-exito-fondo); color: var(--pae-color-exito); }
.pae-mensaje-advertencia { background-color: var(--pae-color-advertencia-fondo); color: #7a601a; }
.pae-mensaje-error { background-color: var(--pae-color-error-fondo); color: var(--pae-color-error); }
.pae-mensaje-informacion { background-color: var(--pae-color-neutro-fondo); color: var(--pae-color-texto-secundario); }

/* Avatar de iniciales. */
.pae-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--pae-color-primario);
	color: #ffffff;
	font-weight: 600;
	flex-shrink: 0;
}
.pae-avatar-sm { width: 32px; height: 32px; font-size: var(--pae-texto-pequeno); }
.pae-avatar-md { width: 48px; height: 48px; font-size: var(--pae-texto-cuerpo); }
.pae-avatar-lg { width: 80px; height: 80px; font-size: var(--pae-texto-titulo); }

/* Campos de formulario. */
.pae-campo { margin-bottom: var(--pae-espacio-md); }
.pae-campo label { display: block; margin-bottom: 6px; font-size: var(--pae-texto-secundario); color: #333333; font-weight: 500; }
.pae-campo input[type="text"],
.pae-campo input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 16px;
	border: 1px solid #cccccc;
	border-radius: 6px;
}
.pae-campo-checkbox { display: flex; align-items: center; gap: var(--pae-espacio-sm); margin-bottom: var(--pae-espacio-lg); font-size: var(--pae-texto-secundario); color: #333333; }