/* ==========================================================================
   Portal del Docente — Sistema Visual (Documento Maestro, Sección 13.118)
   Framework PAE. Identidad propia — nunca reutiliza el CSS del Portal
   del Padre. Sin JavaScript, sin dependencias externas, sin CDN.
   ========================================================================== */

:root {
	--pae-color-primario: #2271b1;
	--pae-color-texto: #1d2327;
	--pae-color-texto-suave: #646970;
	--pae-color-borde: #ccd0d4;
	--pae-color-fondo: #f6f7f7;
	--pae-color-superficie: #ffffff;
	--pae-color-alerta: #b32d2e;
	--pae-radio: 8px;
	--pae-sombra: 0 1px 2px rgba(0, 0, 0, 0.06);
	--pae-espacio-xs: 6px;
	--pae-espacio-sm: 10px;
	--pae-espacio-md: 16px;
	--pae-espacio-lg: 24px;
	--pae-alto-barra-inferior: 60px;
}

.pae-docente * {
	box-sizing: border-box;
}

.pae-docente {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--pae-color-texto);
	background: var(--pae-color-fondo);
	min-height: 100vh;
	margin: 0;
}

/* ---------- Encabezado superior (Desktop/Tablet) ---------- */

.pae-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--pae-espacio-sm) var(--pae-espacio-lg);
	background: var(--pae-color-superficie);
	border-bottom: 1px solid var(--pae-color-borde);
}

.pae-header__marca {
	font-weight: 600;
	font-size: 15px;
	color: var(--pae-color-texto);
	text-decoration: none;
}

.pae-header__acciones {
	display: flex;
	align-items: center;
	gap: var(--pae-espacio-md);
}

.pae-header__usuario {
	display: flex;
	align-items: center;
	gap: var(--pae-espacio-xs);
	color: var(--pae-color-texto);
	text-decoration: none;
	font-size: 14px;
}

.pae-header__usuario:hover {
	color: var(--pae-color-primario);
}

.pae-header__salir {
	color: var(--pae-color-texto-suave);
	text-decoration: none;
	font-size: 14px;
}

.pae-header__salir:hover {
	color: var(--pae-color-alerta);
}

/* ---------- Contenedor general ---------- */

.pae-contenedor {
	max-width: 960px;
	margin: 0 auto;
	padding: var(--pae-espacio-lg) var(--pae-espacio-md);
}

.pae-contenedor--con-barra-inferior {
	padding-bottom: calc(var(--pae-alto-barra-inferior) + var(--pae-espacio-lg));
}

.pae-titulo {
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 var(--pae-espacio-md);
}

.pae-subtitulo {
	font-size: 16px;
	font-weight: 600;
	margin: var(--pae-espacio-lg) 0 var(--pae-espacio-sm);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* ---------- Resumen (contadores/badges) ---------- */

.pae-resumen {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pae-espacio-sm);
	margin-bottom: var(--pae-espacio-lg);
}

.pae-resumen__item {
	background: var(--pae-color-superficie);
	border: 1px solid var(--pae-color-borde);
	border-radius: var(--pae-radio);
	box-shadow: var(--pae-sombra);
	padding: var(--pae-espacio-md);
	text-decoration: none;
	color: inherit;
	display: block;
}

.pae-resumen__item--accionable {
	position: relative;
}

.pae-resumen__item--accionable:hover {
	border-color: var(--pae-color-primario);
}

.pae-resumen__etiqueta {
	font-size: 12px;
	color: var(--pae-color-texto-suave);
	margin: 0 0 4px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.pae-resumen__valor {
	font-size: 26px;
	font-weight: 700;
	margin: 0;
}

.pae-resumen__valor--alerta {
	color: var(--pae-color-alerta);
}

/* ---------- Tarjetas de Carga Académica (operativas) ---------- */

.pae-cargas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pae-espacio-md);
	margin-bottom: var(--pae-espacio-lg);
}

.pae-carga-card {
	background: var(--pae-color-superficie);
	border: 1px solid var(--pae-color-borde);
	border-radius: var(--pae-radio);
	box-shadow: var(--pae-sombra);
	padding: var(--pae-espacio-md);
}

.pae-carga-card__titulo {
	display: flex;
	align-items: center;
	gap: var(--pae-espacio-xs);
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 2px;
}

.pae-carga-card__detalle {
	font-size: 13px;
	color: var(--pae-color-texto-suave);
	margin: 0 0 var(--pae-espacio-md);
}

.pae-carga-card__acciones {
	display: flex;
	gap: var(--pae-espacio-sm);
	flex-wrap: wrap;
}

/* ---------- Botones ---------- */

.pae-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 16px;
	border-radius: var(--pae-radio);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	min-height: 40px;
	line-height: 1.2;
}

.pae-btn--primario {
	background: var(--pae-color-primario);
	color: #fff;
	border-color: var(--pae-color-primario);
}

.pae-btn--secundario {
	background: var(--pae-color-superficie);
	color: var(--pae-color-texto);
	border-color: var(--pae-color-borde);
}

.pae-btn--secundario:hover {
	border-color: var(--pae-color-primario);
	color: var(--pae-color-primario);
}

.pae-btn--bloque {
	width: 100%;
}

/* ---------- Tarjeta genérica de sección ---------- */

.pae-card {
	background: var(--pae-color-superficie);
	border: 1px solid var(--pae-color-borde);
	border-radius: var(--pae-radio);
	box-shadow: var(--pae-sombra);
	padding: var(--pae-espacio-md);
	margin-bottom: var(--pae-espacio-lg);
}

/* ---------- Tabla de Entregas (Documento Maestro, Sección 13.152-A) ----------
   Desktop/Tablet: tabla normal. Móvil (ver @media 600px): se transforma en
   tarjetas apiladas, una por Entrega — sin scroll horizontal, con el botón
   Descargar siempre visible al final de cada tarjeta. */

.pae-tabla-entregas {
	width: 100%;
	border-collapse: collapse;
	margin: var(--pae-espacio-sm) 0 var(--pae-espacio-md);
	font-size: 14px;
}

.pae-tabla-entregas th,
.pae-tabla-entregas td {
	text-align: left;
	padding: var(--pae-espacio-sm);
	border-bottom: 1px solid var(--pae-color-borde);
}

.pae-tabla-entregas th {
	font-size: 12px;
	color: var(--pae-color-texto-suave);
	font-weight: 600;
}

.pae-tabla-entregas tbody tr:last-child td {
	border-bottom: none;
}

.pae-enlace-ver-todas {
	font-size: 13px;
	color: var(--pae-color-primario);
	text-decoration: none;
}

/* ---------- Avisos ---------- */

.pae-avisos {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pae-avisos li {
	padding: var(--pae-espacio-sm) 0;
	border-bottom: 1px solid var(--pae-color-borde);
	font-size: 14px;
}

.pae-avisos li:last-child {
	border-bottom: none;
}

/* ---------- Barra de navegación inferior (móvil) ---------- */

.pae-barra-inferior {
	display: none;
}

/* ---------- Iconos ---------- */

.pae-icono {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	vertical-align: middle;
}

.pae-icono--sm {
	width: 14px;
	height: 14px;
}

/* ---------- Accesibilidad ---------- */

.pae-solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

a:focus-visible,
button:focus-visible,
.pae-btn:focus-visible {
	outline: 2px solid var(--pae-color-primario);
	outline-offset: 2px;
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {
	.pae-resumen {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Móvil — activa la barra de navegación inferior, encabezado compacto
   ========================================================================== */

@media (max-width: 600px) {
	.pae-header {
		padding: var(--pae-espacio-sm) var(--pae-espacio-md);
	}

	.pae-header__marca-texto {
		display: none;
	}

	.pae-header__salir-texto {
		display: none;
	}

	.pae-contenedor {
		padding: var(--pae-espacio-md) var(--pae-espacio-sm);
	}

	.pae-cargas {
		grid-template-columns: 1fr;
	}

	.pae-resumen {
		grid-template-columns: repeat(2, 1fr);
	}

	.pae-carga-card__acciones {
		flex-direction: column;
	}

	.pae-btn {
		min-height: 44px;
	}

	/* Documento Maestro, Sección 13.152-A — la tabla de Entregas se
	   transforma en tarjetas apiladas: encabezado oculto, cada fila
	   pasa a ser un bloque, cada celda una línea con su etiqueta
	   (vía `data-label`, agregado en la plantilla) delante del valor
	   — sin ningún scroll horizontal, botón Descargar siempre visible
	   al final de la tarjeta. */
	.pae-tabla-entregas thead {
		display: none;
	}

	.pae-tabla-entregas,
	.pae-tabla-entregas tbody,
	.pae-tabla-entregas tr,
	.pae-tabla-entregas td {
		display: block;
		width: 100%;
	}

	.pae-tabla-entregas tr {
		background: var(--pae-color-superficie);
		border: 1px solid var(--pae-color-borde);
		border-radius: var(--pae-radio);
		box-shadow: var(--pae-sombra);
		margin-bottom: var(--pae-espacio-sm);
		padding: var(--pae-espacio-sm) var(--pae-espacio-md);
	}

	/* Documento Maestro, Sección 13.154 — corrección de causa raíz:
	   en la versión anterior, cada `<td>` era un contenedor `flex`
	   (etiqueta a la izquierda, valor a la derecha). Un nombre de
	   archivo largo, al ser un nodo de texto sin punto de quiebre,
	   se comporta como un "flex item" con `min-width: auto` — fuerza
	   al `<td>` (y con él, a toda la tarjeta) a expandirse más allá
	   del ancho de pantalla, empujando el botón Descargar fuera del
	   viewport y obligando a un desplazamiento horizontal. Corregido
	   apilando cada celda en bloque (etiqueta arriba, valor abajo,
	   con ajuste de línea) — elimina el desbordamiento en su causa,
	   sin necesitar ningún cambio de markup. */
	.pae-tabla-entregas td {
		border-bottom: none;
		padding: 6px 0;
		display: block;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.pae-tabla-entregas td::before {
		content: attr(data-label);
		display: block;
		font-size: 12px;
		font-weight: 600;
		color: var(--pae-color-texto-suave);
		margin-bottom: 2px;
	}

	.pae-tabla-entregas td:last-child {
		margin-top: var(--pae-espacio-sm);
	}

	.pae-tabla-entregas td:last-child::before {
		display: none;
	}

	.pae-tabla-entregas td:last-child .pae-btn {
		width: 100%;
	}

	.pae-barra-inferior {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background: var(--pae-color-superficie);
		border-top: 1px solid var(--pae-color-borde);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.pae-barra-inferior__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 8px 0;
		text-decoration: none;
		color: var(--pae-color-texto-suave);
		font-size: 11px;
		min-height: var(--pae-alto-barra-inferior);
	}

	.pae-barra-inferior__item--activo {
		color: var(--pae-color-primario);
	}
}