/* deltav_academia/public/css/academia.css. Marca VAP sobre las páginas de alumnos (lo agrega inyectar.py).
   Reglas: MARCA-VAP.md de deltav-group, aprobada por Fabricio el 12 oct 2026. Seis colores, tres familias,
   esquinas rectas, sin sombras ni degradados, texto en negro o marfil, líneas de negro al 26 %.
   LMS pinta con los tokens de frappe-ui (--surface-*, --ink-*, --outline-*): aquí se reasignan a los de VAP.
   Los selectores de LMS (sidebar, header-frame) salen de LMS 2.67.1; revisar al actualizar LMS. */

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-variable.woff2") format("woff2");
	font-weight: 200 800;
	font-display: swap;
}
@font-face {
	font-family: "Barlow Condensed";
	src: url("../fonts/barlow-condensed-800.woff2") format("woff2");
	font-weight: 800;
	font-display: swap;
}
@font-face {
	font-family: "DM Mono";
	src: url("../fonts/dm-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "DM Mono";
	src: url("../fonts/dm-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

:root {
	--vap-naranja: #f05223;
	--vap-negro: #111313;
	--vap-negro-2: #1c1f1f;
	--vap-marfil: #eeece4;
	--vap-marfil-claro: #f8f6ef;
	--vap-titanio: #7a7e7a;
	--vap-linea: rgb(17 19 19 / 26%);
	--vap-impacto: "Barlow Condensed", "Arial Narrow", sans-serif;
	--vap-lectura: Manrope, Arial, sans-serif;
	--vap-dato: "DM Mono", ui-monospace, monospace;
}

/* Siempre claro: el tema oscuro de LMS no existe en VAP. */
:root,
[data-theme="light"],
[data-theme="dark"] {
	color-scheme: light;

	--surface-base: var(--vap-marfil-claro);
	--surface-alpha-base: var(--vap-marfil-claro);
	--surface-elevation-1: var(--vap-marfil-claro);
	--surface-elevation-2: var(--vap-marfil-claro);
	--surface-elevation-3: var(--vap-marfil-claro);
	--surface-alpha-elevation-1: var(--vap-marfil-claro);
	--surface-alpha-elevation-2: var(--vap-marfil-claro);
	--surface-alpha-elevation-3: var(--vap-marfil-claro);
	--surface-sidebar: var(--vap-marfil);
	--surface-alpha-sidebar: var(--vap-marfil);
	/* 1: paneles; 2-5: estados (pasar el puntero, seleccionado), mezclas de negro sobre marfil. */
	--surface-gray-1: var(--vap-marfil);
	--surface-gray-2: color-mix(in srgb, var(--vap-negro) 6%, var(--vap-marfil));
	--surface-gray-3: color-mix(in srgb, var(--vap-negro) 12%, var(--vap-marfil));
	--surface-gray-4: color-mix(in srgb, var(--vap-negro) 20%, var(--vap-marfil));
	--surface-gray-5: color-mix(in srgb, var(--vap-negro) 35%, var(--vap-marfil));
	--surface-gray-6: var(--vap-titanio);
	/* 7-10: botón principal negro y sus estados. */
	--surface-gray-7: var(--vap-negro);
	--surface-gray-8: var(--vap-negro-2);
	--surface-gray-9: var(--vap-negro-2);
	--surface-gray-10: var(--vap-negro);

	/* Texto en negro o marfil; la jerarquía la da el peso. Titanio sólo para ayudas y desactivados. */
	--ink-base: var(--vap-marfil-claro);
	--ink-gray-1: var(--vap-marfil-claro);
	--ink-gray-2: var(--vap-marfil);
	--ink-gray-3: var(--vap-titanio);
	--ink-gray-4: var(--vap-titanio);
	--ink-gray-5: var(--vap-negro-2);
	--ink-gray-6: var(--vap-negro-2);
	--ink-gray-7: var(--vap-negro-2);
	--ink-gray-8: var(--vap-negro);
	--ink-gray-9: var(--vap-negro);
	--ink-blue-link: var(--vap-negro);

	/* Azul de LMS (avisos, estado de la tarea): VAP no tiene azul. Fondos claros en marfil, texto en negro. */
	--surface-blue-1: var(--surface-gray-2);
	--surface-blue-2: var(--surface-gray-2);
	--surface-blue-3: var(--surface-gray-3);
	--surface-blue-4: var(--surface-gray-3);
	--surface-blue-5: var(--vap-negro);
	--surface-blue-6: var(--vap-negro);
	--surface-blue-7: var(--vap-negro);
	--surface-blue-8: var(--vap-negro);
	--surface-blue-9: var(--vap-negro);
	--surface-blue-10: var(--vap-negro);
	--ink-blue-1: var(--vap-marfil-claro);
	--ink-blue-2: var(--vap-marfil-claro);
	--ink-blue-3: var(--vap-marfil-claro);
	--ink-blue-4: var(--vap-negro);
	--ink-blue-5: var(--vap-negro);
	--ink-blue-6: var(--vap-negro);
	--ink-blue-7: var(--vap-negro);
	--ink-blue-8: var(--vap-negro);
	--ink-blue-9: var(--vap-negro);
	--outline-blue-1: var(--vap-linea);
	--outline-blue-2: var(--vap-linea);
	--outline-blue-3: var(--vap-linea);
	--outline-blue-4: var(--vap-negro);
	--outline-blue-5: var(--vap-negro);
	--outline-blue-6: var(--vap-negro);
	--outline-blue-7: var(--vap-negro);
	--outline-blue-8: var(--vap-negro);
	--outline-blue-9: var(--vap-negro);
	--outline-blue-10: var(--vap-negro);
	/* Verde de LMS (respuesta correcta, lección vista): negro, que sí se ve sobre marfil. */
	--surface-green-1: var(--surface-gray-2);
	--surface-green-2: var(--surface-gray-2);
	--surface-green-3: var(--surface-gray-3);
	--surface-green-4: var(--surface-gray-3);
	--surface-green-5: var(--vap-negro);
	--surface-green-6: var(--vap-negro);
	--surface-green-7: var(--vap-negro);
	--surface-green-8: var(--vap-negro);
	--surface-green-9: var(--vap-negro);
	--surface-green-10: var(--vap-negro);
	--ink-green-1: var(--vap-marfil-claro);
	--ink-green-2: var(--vap-marfil-claro);
	--ink-green-3: var(--vap-marfil-claro);
	--ink-green-4: var(--vap-negro);
	--ink-green-5: var(--vap-negro);
	--ink-green-6: var(--vap-negro);
	--ink-green-7: var(--vap-negro);
	--ink-green-8: var(--vap-negro);
	--ink-green-9: var(--vap-negro);

	--outline-gray-1: var(--vap-linea);
	--outline-gray-2: var(--vap-linea);
	--outline-gray-3: var(--vap-linea);
	--outline-gray-4: var(--vap-negro);
	--outline-gray-5: var(--vap-negro);
	--outline-gray-6: var(--vap-negro);
	--outline-gray-7: var(--vap-negro);
	--outline-gray-8: var(--vap-negro);
	--outline-gray-9: var(--vap-negro);
	--outline-elevation-1: var(--vap-linea);
	--outline-elevation-2: var(--vap-linea);
	--outline-alpha-gray-1: var(--vap-linea);
	--outline-alpha-gray-2: var(--vap-linea);
	--outline-alpha-gray-3: var(--vap-linea);
	--outline-alpha-elevation-1: var(--vap-linea);
	--outline-alpha-elevation-2: var(--vap-linea);

	/* Sin sombras: lo que flota (menús, diálogos) lleva un marco de 1 px. */
	--elevation-sm: 0 0 0 1px var(--vap-linea);
	--elevation-base: 0 0 0 1px var(--vap-linea);
	--elevation-md: 0 0 0 1px var(--vap-linea);
	--elevation-lg: 0 0 0 1px var(--vap-linea);
	--elevation-xl: 0 0 0 1px var(--vap-linea);
	--elevation-2xl: 0 0 0 1px var(--vap-linea);
	--focus-outline-default: 2px solid var(--vap-naranja);

	--radius-1: 0px;
	--radius-2: 0px;
	--radius-3: 0px;
	--radius-4: 0px;
	--radius-5: 0px;
	--radius-6: 0px;
	--radius-7: 0px;
	--radius-8: 0px;
	--radius-9: 0px;
	--radius-full: 0px;
}

/* Esquinas rectas también donde LMS pone radios fijos. */
*,
*::before,
*::after {
	border-radius: 0 !important;
}

html,
body,
button,
input,
select,
textarea {
	font-family: var(--vap-lectura) !important;
}

/* Títulos: Barlow Condensed 800 en mayúsculas. */
h1,
h2,
.text-4xl-semibold,
.text-5xl-semibold,
.text-6xl-semibold,
.text-3xl-semibold,
.text-3xl-bold {
	font-family: var(--vap-impacto) !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 0 !important;
	line-height: 0.9 !important;
	text-wrap: balance;
}
.text-4xl-semibold,
.text-5xl-semibold,
.text-6xl-semibold {
	font-size: 34px !important;
}
.text-3xl-semibold,
.text-3xl-bold {
	font-size: 28px !important;
}
h3 {
	font-weight: 700;
}

/* Botones: Manrope 700. */
button {
	font-weight: 700;
}

/* Navegación lateral: DM Mono 500 en mayúsculas; activo y al pasar el puntero, naranja con texto negro. */
.bg-surface-sidebar .text-p-sm {
	font-family: var(--vap-dato);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.bg-surface-sidebar button.h-7:hover,
.bg-surface-sidebar button.h-7.bg-surface-elevation-3 {
	background: var(--vap-naranja);
	color: var(--vap-negro);
}

/* Encabezado de cada página: línea de 1 px, título en DM Mono. */
.header-frame {
	border-bottom-color: var(--vap-linea);
}
/* Insignia «Published» junto al nombre del curso: LMS la muestra a todos y sólo le sirve a quien lo edita. */
.header-frame .bg-surface-green-2 {
	display: none;
}

/* Video de la lección: LMS le da un alto fijo (15 o 30 rem). Los videos de los cursos son 16:9. */
.embed-tool iframe[src*="cloudflarestream.com"],
.embed-tool iframe[src*="videodelivery.net"] {
	height: auto !important;
	aspect-ratio: 16 / 9;
}

/* Examen revisado (components/Quiz.vue, answerIconClass). Si el alumno falla, LMS marca la respuesta
   correcta con un círculo con raya en verde y las demás con el mismo círculo en gris. Aquí el verde es
   negro: la correcta lleva la palomita (ícono de lucide, licencia ISC) y las demás quedan en titanio. */
.lucide-minus-circle.text-ink-green-4 {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
}
.w-4.h-4.shrink-0.lucide-minus-circle:not([class*="text-ink-"]) {
	color: var(--vap-titanio);
}

/* Tarea (pantalla de la entrega, sola o dentro de la lección). academia.js pone las clases.
   Barra del editor: negritas, cursivas, listas, deshacer y rehacer. Para contestar no hacen falta
   títulos, colores, tablas, imágenes ni videos. */
html.academia-entrega
	div:has(> button[aria-label="Bold"])
	> :not(
		button[aria-label="Bold"],
		button[aria-label="Italic"],
		button[aria-label="Bullet List"],
		button[aria-label="Ordered List"],
		button[aria-label="Undo"],
		button[aria-label="Redo"]
	) {
	display: none;
}

/* Dentro de la lección: una columna, sin desplazamiento propio. academia.js le da al marco el alto
   del contenido; así se ve la respuesta modelo. */
html.academia-incrustada #scrollContainer > div,
html.academia-incrustada #scrollContainer > div > .grid,
html.academia-incrustada #scrollContainer > div > .grid > div {
	height: auto;
	overflow: visible;
}
html.academia-incrustada #scrollContainer > div > .grid {
	grid-template-columns: minmax(0, 1fr);
}
html.academia-incrustada #scrollContainer > div > .grid > div:first-child {
	border-inline-end-width: 0;
	border-bottom: 1px solid var(--vap-linea);
}

/* Respuesta modelo: tareas.py la pone en los comentarios de la entrega. Marca naranja a la izquierda. */
html.academia-entrega .mt-8.p-3.border.bg-surface-gray-2 {
	padding: 16px 20px;
	border-width: 0 0 0 4px;
	border-color: var(--vap-naranja);
	background: var(--vap-marfil);
}
html.academia-entrega .mt-8.p-3.border.bg-surface-gray-2 > .mb-4 {
	margin-bottom: 8px;
	font-family: var(--vap-dato);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vap-negro);
}
html.academia-entrega .mt-8.p-3.border.bg-surface-gray-2 ul,
html.academia-entrega .mt-8.p-3.border.bg-surface-gray-2 ol {
	margin: 4px 0;
	padding-left: 1.25rem;
	list-style: disc;
}
html.academia-entrega .mt-8.p-3.border.bg-surface-gray-2 ol {
	list-style: decimal;
}

/* Sin cuenta: invitación en lugar de la tarea y del examen. */
.academia-oculto {
	display: none !important;
}
.academia-sin-cuenta {
	padding: 40px 24px;
	border: 1px solid var(--vap-linea);
	text-align: center;
}
.academia-sin-cuenta p {
	margin: 8px 0 0;
	font-size: 16px;
}
/* Abajo deja aire para el botón «Capítulos» que LMS pone en el celular. */
.academia-sin-cuenta-leccion {
	max-width: 640px;
	margin: 40px 16px 24px;
}
@media (min-width: 672px) {
	.academia-sin-cuenta-leccion {
		margin: 40px auto 24px;
	}
}
.academia-sin-cuenta .academia-etiqueta {
	margin: 0;
	font-size: 12px;
}
.academia-sin-cuenta-botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}
.academia-sin-cuenta-botones .academia-boton {
	display: inline-flex;
	flex: 1 1 200px;
	max-width: 280px;
	align-items: center;
	justify-content: center;
	margin: 0;
	text-decoration: none;
}

/* Inicio de sesión y registro (páginas de Frappe, fuera de /lms): botones de 52 px y campos de 48 px.
   16 px en los campos para que el iPhone no acerque la página al escribir. */
.es-button {
	min-height: 52px;
	font-size: 16px;
	font-weight: 700;
}
.page-card .form-control {
	min-height: 48px;
	font-size: 16px;
}
.page-card .app-logo {
	width: 56px;
	height: 56px;
}

/* Páginas web de Frappe (aviso de privacidad): website.bundle.css pone el fondo blanco y el texto gris
   directo en body, sin tokens. Barra con DM Mono en mayúsculas, como la navegación de /lms. */
body {
	background-color: var(--vap-marfil-claro);
	color: var(--vap-negro);
}
.navbar {
	background-color: var(--vap-marfil-claro) !important;
	border-bottom: 1px solid var(--vap-linea);
}
.navbar .nav-link {
	font-family: var(--vap-dato);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vap-negro) !important;
}
.navbar-brand img {
	height: 36px;
	width: auto;
}
.academia-privacidad a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Calculadora de fechas (/calculadora, Curso 3). Texto negro: el naranja sólo en bloques y marcas,
   porque sobre marfil no da contraste para letra chica. */
.academia-calculadora {
	max-width: 640px;
	margin: 0 auto;
	padding: 32px 0 64px;
}
.academia-calculadora h1 {
	font-family: var(--vap-impacto);
	font-weight: 800;
	font-size: clamp(36px, 8vw, 56px);
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--vap-negro);
	margin: 8px 0 16px;
}
.academia-etiqueta {
	font-family: var(--vap-dato);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vap-negro-2);
	margin: 0;
}
.academia-entrada {
	font-size: 18px;
	line-height: 1.5;
	margin: 0 0 32px;
}
/* Cada fecha: día, mes y año en tres casillas, más el botón «Calendario». Diseño aprobado por Fabricio
   el 26 oct 2026. El foco va en negro: el naranja marca la casilla con error. */
.academia-calculadora :focus-visible,
.academia-hoja :focus-visible {
	outline: 2px solid var(--vap-negro);
	outline-offset: 2px;
	box-shadow: none;
}
.academia-campo {
	min-width: 0;
	margin: 24px 0 0;
	padding: 0;
	border: 0;
}
.academia-campo legend {
	width: auto;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--vap-negro);
}
.academia-campo legend span {
	font-weight: 400;
}
.academia-campo .academia-ayuda {
	margin-top: 4px;
}
.academia-fila {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	margin-top: 8px;
}
.academia-caja {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.academia-caja label {
	display: block;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--vap-negro);
}
.academia-caja input {
	box-sizing: border-box;
	height: 52px;
	margin: 0;
	padding: 0 12px;
	font-family: var(--vap-lectura);
	font-size: 18px;
	font-weight: 600;
	color: var(--vap-negro);
	background: #fff;
	border: 1px solid var(--vap-negro);
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.academia-caja input[aria-invalid="true"] {
	border: 2px solid var(--vap-naranja);
	padding: 0 11px;
}
.academia-caja input[data-parte="d"] {
	width: 56px;
}
.academia-caja input[data-parte="m"] {
	width: 64px;
}
.academia-caja input[data-parte="a"] {
	width: 84px;
}
.academia-abrir {
	flex: 1 1 128px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: var(--vap-negro);
	color: var(--vap-marfil-claro);
	font-family: var(--vap-lectura);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.academia-abrir[aria-expanded="true"] {
	outline: 2px solid var(--vap-naranja);
	outline-offset: 2px;
}
@media (min-width: 720px) {
	.academia-caja input {
		padding: 0 14px;
	}
	.academia-caja input[aria-invalid="true"] {
		padding: 0 13px;
	}
	.academia-caja input[data-parte="d"] {
		width: 64px;
	}
	.academia-caja input[data-parte="m"] {
		width: 80px;
	}
	.academia-caja input[data-parte="a"] {
		width: 104px;
	}
	.academia-abrir {
		flex: 0 0 160px;
	}
}
/* Debajo de la fecha: la fecha en palabras (cuadro negro) o el error (cuadro naranja). */
.academia-aviso {
	min-height: 31px;
}
.academia-aviso p {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}
.academia-aviso p::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: 7px;
	background: var(--vap-negro);
}
.academia-aviso .academia-aviso-mal {
	font-weight: 700;
}
.academia-aviso .academia-aviso-mal::before {
	background: var(--vap-naranja);
}
.academia-ayuda {
	font-size: 14px;
	line-height: 1.5;
	color: var(--vap-negro-2);
	margin: 8px 0 0;
}
.academia-boton {
	display: block;
	width: 100%;
	min-height: 52px;
	margin-top: 24px;
	border: 0;
	border-radius: 0;
	background: var(--vap-naranja);
	color: var(--vap-negro);
	font-family: var(--vap-lectura);
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
}
.academia-boton:hover,
.academia-boton-secundario {
	background: var(--vap-negro);
	color: var(--vap-marfil-claro);
}
.academia-boton-secundario:hover {
	background: var(--vap-naranja);
	color: var(--vap-negro);
}
.academia-resultado {
	margin-top: 48px;
	scroll-margin-top: 80px;
}
.academia-fecha {
	padding: 20px 0;
	border-top: 1px solid var(--vap-linea);
}
.academia-fecha-uso {
	border-top: 4px solid var(--vap-naranja);
}
.academia-fecha-valor {
	font-family: var(--vap-impacto);
	font-weight: 800;
	font-size: 28px;
	line-height: 1.05;
	text-transform: uppercase;
	margin: 6px 0;
}
.academia-fecha-estado {
	font-family: var(--vap-dato);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}
.academia-fecha-estado::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	background: var(--vap-naranja);
}
.academia-linea {
	display: block;
	width: 100%;
	max-width: 480px;
	height: auto;
	margin: 24px 0 8px;
}
.academia-linea .linea-eje,
.academia-linea .linea-vence {
	stroke: var(--vap-negro);
	stroke-width: 2;
}
.academia-linea .linea-uso {
	fill: var(--vap-naranja);
}
.academia-linea .linea-renovacion {
	fill: var(--vap-titanio);
	opacity: 0.45;
}
.academia-linea .linea-punto {
	fill: var(--vap-negro);
}
.academia-linea .linea-hoy {
	stroke: var(--vap-naranja);
	stroke-width: 2;
	stroke-dasharray: 3 3;
}
.academia-linea .linea-texto {
	font-family: var(--vap-dato);
	font-size: 12px;
	text-transform: uppercase;
	fill: var(--vap-negro);
}
.academia-notas {
	margin: 32px 0 0;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.6;
}

/* Calendario para elegir la fecha (calculadora.js). En celular, hoja que cubre la pantalla y va
   por pasos: año, mes y día. En compu, panel debajo de la fecha con año, mes y día a la vista. */
/* Anuncios para lectores de pantalla (cambio de mes). */
.cal-anuncio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
html.academia-sin-desplazar,
html.academia-sin-desplazar body {
	overflow: hidden;
}
:where(.academia-hoja, .academia-panel) button {
	margin: 0;
	font-family: var(--vap-lectura);
	color: var(--vap-negro);
	border-radius: 0;
	cursor: pointer;
}
:where(.academia-hoja, .academia-panel) button:disabled {
	cursor: default;
}
.academia-hoja {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0; /* sin «inset»: iPhone con iOS anterior a 14.5 */
	z-index: 1100;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: var(--vap-negro);
	font-family: var(--vap-lectura);
}
.academia-hoja[hidden] {
	display: none;
}
.academia-hoja .cal-arriba {
	flex: none;
	padding: 0 16px 12px;
	border-bottom: 1px solid var(--vap-negro);
}
.cal-barra {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 56px;
}
.cal-cerrar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
}
.academia-hoja .cal-cerrar {
	margin-left: -10px;
}
.cal-titulo {
	margin: 0;
	font-family: var(--vap-dato);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vap-negro);
}
.academia-hoja .cal-titulo {
	flex: 1;
}
.cal-borrar {
	height: 44px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cal-grande {
	font-family: var(--vap-impacto);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	color: var(--vap-negro);
}
.academia-hoja .cal-grande {
	margin: 0 0 12px;
	font-size: 34px;
}
.cal-pasos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.cal-pestana {
	height: 44px;
	padding: 0 4px;
	border: 1px solid var(--vap-negro);
	background: #fff;
	font-family: var(--vap-dato);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.cal-pestana[aria-current="step"] {
	background: var(--vap-negro);
	color: var(--vap-marfil-claro);
}
.cal-pestana:disabled {
	opacity: 0.4;
}
.academia-hoja .cal-medio {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
}
.academia-hoja .cal-abajo {
	flex: none;
	padding: 12px 16px max(16px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--vap-linea);
}
.cal-listo {
	display: block;
	width: 100%;
	height: 52px;
	border: 0;
	background: var(--vap-naranja);
	font-size: 16px;
	font-weight: 800;
}
.cal-listo:disabled {
	background: var(--vap-marfil);
	color: var(--vap-titanio);
}
.cal-subtitulo {
	margin: 0 0 12px;
	font-family: var(--vap-dato);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vap-negro-2);
}
.cal-fichas {
	display: grid;
	gap: 8px;
}
.cal-fichas-anios {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cal-fichas-meses {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cal-ficha {
	height: 52px;
	padding: 0;
	border: 1px solid var(--vap-negro);
	background: #fff;
	font-family: var(--vap-dato);
	font-weight: 500;
	font-size: 16px;
	text-transform: uppercase;
}
.cal-ficha[aria-pressed="true"] {
	background: var(--vap-naranja);
}
.cal-ficha:disabled {
	border-color: var(--vap-linea);
	color: var(--vap-titanio);
	text-decoration: line-through;
}
.cal-mes-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 48px;
}
.cal-flecha {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--vap-negro);
	background: #fff;
}
.cal-flecha:disabled {
	opacity: 0.4;
}
.cal-mes {
	margin: 0;
	font-family: var(--vap-dato);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vap-negro);
}
.cal-rejilla {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	margin-top: 8px;
}
.cal-rejilla abbr[title] {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	border: 0;
	font-family: var(--vap-dato);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--vap-negro-2);
	cursor: default;
}
.cal-celda {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
}
.cal-dia {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid transparent;
	background: #fff;
	font-size: 17px;
	font-weight: 600;
}
.cal-dia[aria-current="date"] {
	border-color: var(--vap-negro);
	font-weight: 800;
}
.cal-dia[aria-pressed="true"] {
	border-color: var(--vap-negro);
	background: var(--vap-naranja);
	font-weight: 800;
}
.cal-dia:disabled {
	color: var(--vap-titanio);
	text-decoration: line-through;
}
.academia-panel {
	margin-top: 12px;
	border: 1px solid var(--vap-negro);
	background: #fff;
	color: var(--vap-negro);
}
.academia-panel .cal-arriba {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--vap-linea);
}
.academia-panel .cal-titulo {
	font-size: 12px;
	color: var(--vap-negro-2);
}
.academia-panel .cal-grande {
	margin: 6px 0 0;
	font-size: 28px;
}
.academia-panel .cal-cerrar {
	margin: -6px -10px 0 0;
}
.academia-panel .cal-medio {
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr);
}
.cal-col-anios {
	padding: 16px 8px 16px 12px;
	border-right: 1px solid var(--vap-linea);
}
.cal-col-anios .cal-subtitulo,
.cal-col-dias .cal-subtitulo {
	margin: 0;
}
.cal-lista-anios {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 412px;
	margin-top: 4px;
	padding: 4px;
	overflow-y: auto;
}
.cal-anio {
	flex: none;
	height: 40px;
	padding: 0;
	border: 1px solid transparent;
	background: #fff;
	font-family: var(--vap-dato);
	font-weight: 500;
	font-size: 16px;
}
.cal-anio[aria-pressed="true"] {
	border-color: var(--vap-negro);
	background: var(--vap-naranja);
}
.cal-anio:disabled {
	color: var(--vap-titanio);
	text-decoration: line-through;
}
.cal-col-dias {
	padding: 16px 20px;
}
.cal-fichas-compu {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin-top: 8px;
}
.cal-fichas-compu .cal-ficha {
	height: 44px;
	font-size: 15px;
}
.cal-col-dias .cal-mes {
	margin: 20px 0 0;
	font-size: 14px;
}
.academia-panel .cal-celda {
	height: 44px;
}
.academia-panel .cal-dia {
	width: 36px;
	height: 36px;
	font-size: 16px;
}
.cal-falta {
	margin: 20px 0 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--vap-negro-2);
}
.academia-panel .cal-abajo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-top: 1px solid var(--vap-linea);
}
.academia-panel .cal-listo {
	width: 160px;
}
/* Celular acostado: encabezado más chico para que se vean los días. La fecha grande sigue para lectores de pantalla. */
@media (max-height: 500px) {
	.academia-hoja .cal-barra {
		height: 48px;
	}
	.academia-hoja .cal-grande {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.academia-hoja .cal-abajo {
		padding-top: 8px;
		padding-bottom: max(8px, env(safe-area-inset-bottom));
	}
	.academia-hoja .cal-listo {
		height: 44px;
	}
}