/* ============================================================================
 * Lyceum — tokens de marca (valores por defecto)
 * ----------------------------------------------------------------------------
 * Navy profundo + marmol pentelico + cromo. Baja saturacion, industrial,
 * greco-clasico. Esta es la capa "marca": no conoce nada de Frappe. El mapeo
 * hacia los tokens de frappe-ui vive en lms.css.
 *
 * White-label: los nombres describen el ROL, no el tono. `anchor` es el color
 * ancla de la marca (barra lateral, boton primario), `surface` el papel sobre
 * el que se lee y `accent` la escala de interaccion. En Lyceum el ancla es
 * navy y el papel marmol calido; en otro tenant pueden ser verde y gris frio
 * sin que ninguna regla de lms.css cambie.
 *
 * Estos son los VALORES POR DEFECTO. Cada sitio puede sobreescribirlos desde
 * su doctype "Lyceum Brand": theme.py añade un bloque :root al final de la
 * hoja y las propiedades personalizadas se resuelven en el momento de usarse,
 * asi que la ultima definicion gana sin tocar nada mas.
 * ========================================================================== */

:root {
	/* ---- Ancla: barra lateral, boton primario, tinta fuerte ---- */
	--ly-anchor-900: #0a1128;
	--ly-anchor-800: #0d1530;
	--ly-anchor-700: #111a36;
	--ly-anchor-600: #16203f;
	--ly-anchor-500: #1c284b;
	--ly-anchor-400: #2a3760;

	/* ---- Superficie: el papel sobre el que se lee ---- */
	--ly-surface-50: #fbfaf6;
	--ly-surface-100: #f7f5f0;
	--ly-surface-200: #f1eee7;
	--ly-surface-300: #e7e3d9;
	--ly-surface-400: #dad5c9;

	/* ---- Acento: bordes, textos secundarios, interaccion ---- */
	--ly-accent-100: #e2e8f0;
	--ly-accent-200: #c3c6cd;
	--ly-accent-300: #9099aa;
	--ly-accent-400: #737c90;
	--ly-accent-500: #566076;
	--ly-accent-600: #333d57;

	--ly-accent-gradient: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 50%, #cbd5e1 100%);
	--ly-accent-sheen: linear-gradient(
		110deg,
		transparent 0%,
		rgb(226 232 240 / 0.45) 45%,
		rgb(226 232 240 / 0.75) 50%,
		rgb(226 232 240 / 0.45) 55%,
		transparent 100%
	);

	/* ---- Estado (bajo croma, sesgo frio) ---- */
	--ly-status-info: #7dd3fc;
	--ly-status-success: #4f9d7a;
	--ly-status-warning: #c98a3e;
	--ly-status-error: #c0554f;

	/* ---- Tipografia ---- */
	--ly-font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ly-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--ly-ls-tight: -0.02em;
	--ly-ls-wider: 0.12em;

	/* ---- Forma ---- */
	--ly-radius-sm: 4px;
	--ly-radius-md: 6px;
	--ly-radius-lg: 8px;
	--ly-radius-xl: 12px;

	/* ---- Elevacion (sombras frias, nunca negro puro) ---- */
	--ly-shadow-xs: 0 1px 2px rgb(10 17 40 / 0.05);
	--ly-shadow-sm: 0 1px 3px rgb(10 17 40 / 0.07), 0 1px 2px rgb(10 17 40 / 0.04);
	--ly-shadow-md: 0 4px 16px rgb(10 17 40 / 0.09);
	--ly-shadow-lg: 0 16px 48px rgb(10 17 40 / 0.13);

	/* ---- Portal de acceso (white-label: copia y ancho del panel de marca) ----
	 * Son valores de CSS `content`, asi que van entre comillas y admiten \A
	 * como salto de linea. Un tenant los reescribe sin tocar lms.css.
	 *
	 * La copia del formulario (titulo y bajada) NO vive aqui: desde Frappe
	 * 16.31 la plantilla trae sus propios elementos y se traduce por
	 * translations/es.csv, que es el mecanismo correcto. */
	--ly-login-panel: 44vw;
	--ly-login-wordmark: 'LYCEUM';
	--ly-login-claim: 'Formación normativa\A trazable de punta a punta.';
	--ly-login-signature: 'Cada lección, evaluación y certificado con evidencia auditable.';

	/* ---- Movimiento ---- */
	--ly-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ly-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ly-dur-fast: 120ms;
	--ly-dur-base: 200ms;
}

/* ============================================================================
 * Lyceum — capa de piel sobre Frappe Learning
 * ----------------------------------------------------------------------------
 * Se inyecta al final del <head> de toda respuesta HTML del sitio (ver
 * lyceum_core/theme.py). NO se parchea ni un archivo de `lms` upstream: todo
 * el re-branding ocurre reasignando los tokens de frappe-ui y ajustando
 * componentes por encima en la cascada.
 *
 * Orden de lectura:
 *   1. Fuentes            5. Chrome de aplicacion (sidebar, cabeceras)
 *   2. Tokens claro       6. Componentes (botones, tarjetas, badges, campos)
 *   3. Tokens oscuro      7. Contenido (leccion, quiz, progreso)
 *   4. Tipografia         8. Portal publico (login, paginas del website)
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Fuentes
 * Plus Jakarta Sans (UI) + JetBrains Mono (datos/codigo). Ademas de declarar
 * las familias reales, se re-declara "InterVar"/"Inter" apuntando a los mismos
 * archivos: asi las reglas de frappe-ui que piden Inter por nombre resuelven a
 * la tipografia de marca sin pelear especificidad con !important.
 * ------------------------------------------------------------------------ */
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yygg_vb.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
		U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yygg_vbd-E.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIuaomQNQcsA88c7O9yZ4KMCoOg4Koz4y6qhNnZR-A.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
		U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2)
		format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
		U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Alias: todo lo que pida Inter recibe la tipografia de marca. */
@font-face {
	font-family: 'InterVar';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yygg_vb.woff2) format('woff2');
}
@font-face {
	font-family: 'InterVar';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIuaomQNQcsA88c7O9yZ4KMCoOg4Koz4y6qhNnZR-A.woff2) format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yygg_vb.woff2) format('woff2');
}

/* --------------------------------------------------------------------------
 * 2. Tokens frappe-ui -> marca Lyceum (modo claro)
 * La escala neutra de frappe-ui es gris puro. Aqui se reemplaza por una escala
 * que arranca en marmol calido (papel) y termina en navy: los fondos se ven
 * como papel, los textos y bordes como tinta.
 * ------------------------------------------------------------------------ */
:root {
	/* Superficies */
	--surface-base: #ffffff;
	--surface-white: #ffffff;
	--surface-gray-1: var(--ly-surface-100);
	--surface-gray-2: var(--ly-surface-200);
	--surface-gray-3: var(--ly-surface-300);
	--surface-gray-4: var(--ly-surface-400);
	--surface-gray-5: var(--ly-accent-200);
	--surface-gray-6: var(--ly-accent-300);
	--surface-gray-7: var(--ly-accent-400);
	--surface-gray-8: var(--ly-accent-500);
	--surface-gray-9: var(--ly-accent-600);
	--surface-gray-10: var(--ly-anchor-900);
	/* Navy tambien en modo claro: la barra lateral es el ancla de marca de la
	 * aplicacion, no una superficie mas de papel. Modo oscuro la reasigna en
	 * la seccion 3. */
	--surface-sidebar: var(--ly-anchor-900);
	--surface-alpha-sidebar: var(--ly-anchor-900);
	--surface-elevation-1: #ffffff;
	--surface-elevation-2: #ffffff;
	--surface-elevation-3: #ffffff;
	--surface-menu-bar: var(--ly-surface-100);
	--surface-modal: #ffffff;
	--surface-cards: #ffffff;

	/* Superficies alfa: tinta navy en vez de negro puro */
	--surface-alpha-base: #ffffff;
	--surface-alpha-gray-1: #0a112808;
	--surface-alpha-gray-2: #0a11280b;
	--surface-alpha-gray-3: #0a112812;
	--surface-alpha-gray-4: #0a11281d;
	--surface-alpha-gray-5: #0a112838;
	--surface-alpha-gray-6: #0a112866;
	--surface-alpha-gray-7: #0a112883;
	--surface-alpha-gray-8: #0a1128ad;
	--surface-alpha-gray-9: #0a1128c7;
	--surface-alpha-gray-10: #0a1128e8;
	--surface-alpha-gray-2-overlay: #0a112817;

	/* Tinta */
	--ink-base: #ffffff;
	--ink-white: #ffffff;
	--ink-gray-1: var(--ly-surface-300);
	--ink-gray-2: #d6d1c5;
	--ink-gray-3: var(--ly-accent-200);
	--ink-gray-4: var(--ly-accent-300);
	--ink-gray-5: var(--ly-accent-400);
	--ink-gray-6: var(--ly-accent-500);
	--ink-gray-7: var(--ly-accent-600);
	--ink-gray-8: var(--ly-anchor-600);
	--ink-gray-9: var(--ly-anchor-900);

	/* Trazos */
	--outline-gray-1: var(--ly-surface-300);
	--outline-gray-2: #dcd7cb;
	--outline-gray-3: var(--ly-accent-200);
	--outline-gray-4: var(--ly-accent-300);
	--outline-gray-5: var(--ly-accent-400);
	--outline-gray-6: var(--ly-accent-500);
	--outline-gray-7: var(--ly-accent-600);
	--outline-gray-8: var(--ly-anchor-600);
	--outline-gray-9: var(--ly-anchor-900);
	--outline-elevation-1: var(--ly-surface-300);
	--outline-elevation-2: var(--ly-surface-300);
	--outline-alpha-gray-1: #0a112812;
	--outline-alpha-gray-2: #0a11281d;
	--outline-alpha-gray-3: #0a112838;
	--outline-alpha-gray-4: #0a112866;
	--outline-alpha-gray-5: #0a112883;
	--outline-alpha-gray-6: #0a1128ad;
	--outline-alpha-gray-7: #0a1128c7;
	--outline-alpha-gray-8: #0a1128e8;
	--outline-alpha-gray-9: #0a1128f0;
	--outline-alpha-elevation-1: #0a112812;
	--outline-alpha-elevation-2: #0a112812;

	/* ---- Ramplas semanticas: azul acero e indicadores de bajo croma ----
	 * frappe-ui trae azul, verde, ambar y rojo saturados. La identidad es fria
	 * y sobria, asi que el azul pasa a acero-navy y los estados bajan de croma
	 * sin perder distincion entre exito, aviso y error. */
	--surface-blue-1: #eef2f8;
	--surface-blue-2: #e3eaf5;
	--surface-blue-3: #d3ddee;
	--surface-blue-4: #b6c4dd;
	--surface-blue-5: #8698ba;
	--surface-blue-6: #5b6d92;
	--surface-blue-7: #465878;
	--surface-blue-8: #2f3f5e;
	--surface-blue-9: #1c2b48;
	--ink-blue-1: #dde6f4;
	--ink-blue-2: #c3d1e8;
	--ink-blue-3: #97a9c8;
	--ink-blue-4: #6f83a8;
	--ink-blue-5: #4f6489;
	--ink-blue-6: #3d5075;
	--ink-blue-7: #2f4164;
	--ink-blue-8: #223250;
	--ink-blue-9: #16203f;
	--outline-blue-1: #d9e2f0;
	--outline-blue-2: #c3d1e8;
	--outline-blue-3: #a5b6d5;

	--surface-green-1: #eef4f0;
	--surface-green-2: #dfeae3;
	--surface-green-3: #c8dbd0;
	--ink-green-5: #3f7f62;
	--ink-green-6: #356b53;
	--ink-green-7: #2b5744;
	--outline-green-2: #c8dbd0;

	--surface-amber-1: #f8f2e8;
	--surface-amber-2: #f2e8d6;
	--surface-amber-3: #e6d5b8;
	--ink-amber-5: #a06f2f;
	--ink-amber-6: #8a5f28;
	--ink-amber-7: #734f21;
	--outline-amber-2: #e6d5b8;

	--surface-red-1: #f8eeee;
	--surface-red-2: #f2dedd;
	--surface-red-3: #e6c4c2;
	--ink-red-5: #a8453f;
	--ink-red-6: #923b36;
	--ink-red-7: #7a312d;
	--outline-red-2: #e6c4c2;

	/* Enlaces y foco: navy, no azul saturado */
	--ink-blue-link: var(--ly-accent-600);
	--focus-default: var(--ly-accent-400);
	--focus-outline-default: #0a112833;

	/* Radios */
	--radius-sm: var(--ly-radius-sm);
	--radius-md: var(--ly-radius-md);
	--radius-lg: var(--ly-radius-lg);
	--radius-xl: var(--ly-radius-xl);
}

/* El lienzo de la app: papel, no blanco. */
body {
	background-color: var(--ly-surface-100);
}

/* --------------------------------------------------------------------------
 * 3. Modo oscuro: la identidad "de verdad" de Braindex — navy profundo.
 * ------------------------------------------------------------------------ */
[data-theme='dark'] {
	--surface-base: var(--ly-anchor-900);
	--surface-white: var(--ly-anchor-700);
	--surface-gray-1: var(--ly-anchor-800);
	--surface-gray-2: var(--ly-anchor-700);
	--surface-gray-3: var(--ly-anchor-600);
	--surface-gray-4: var(--ly-anchor-500);
	--surface-gray-5: var(--ly-anchor-400);
	--surface-gray-6: var(--ly-accent-500);
	--surface-gray-7: var(--ly-accent-400);
	--surface-gray-8: var(--ly-accent-300);
	--surface-gray-9: var(--ly-accent-200);
	--surface-gray-10: var(--ly-surface-50);
	--surface-sidebar: var(--ly-anchor-800);
	--surface-alpha-sidebar: var(--ly-anchor-800);
	--surface-elevation-1: var(--ly-anchor-700);
	--surface-elevation-2: var(--ly-anchor-600);
	--surface-elevation-3: var(--ly-anchor-500);
	--surface-menu-bar: var(--ly-anchor-800);
	--surface-modal: var(--ly-anchor-700);
	--surface-cards: var(--ly-anchor-700);

	--ink-base: var(--ly-anchor-900);
	--ink-white: #ffffff;
	--ink-gray-1: var(--ly-anchor-500);
	--ink-gray-2: var(--ly-anchor-400);
	--ink-gray-3: var(--ly-accent-500);
	--ink-gray-4: var(--ly-accent-400);
	--ink-gray-5: var(--ly-accent-300);
	--ink-gray-6: #8e96a6;
	--ink-gray-7: var(--ly-accent-200);
	--ink-gray-8: #e2e8f0;
	--ink-gray-9: var(--ly-surface-50);

	--outline-gray-1: #ffffff14;
	--outline-gray-2: #ffffff1f;
	--outline-gray-3: #ffffff2e;
	--outline-gray-4: var(--ly-accent-500);
	--outline-gray-5: var(--ly-accent-400);
	--outline-gray-6: var(--ly-accent-300);
	--outline-gray-7: var(--ly-accent-200);
	--outline-gray-8: #e2e8f0;
	--outline-gray-9: var(--ly-surface-50);
	--outline-elevation-1: #ffffff14;
	--outline-elevation-2: #ffffff1f;

	--ink-blue-link: var(--ly-accent-100);
}

[data-theme='dark'] body {
	background-color: var(--ly-anchor-900);
}

/* --------------------------------------------------------------------------
 * 4. Tipografia
 * Jerarquia mas marcada que la de origen: titulos con tracking negativo,
 * etiquetas de seccion en versalita espaciada, datos en mono.
 * ------------------------------------------------------------------------ */
body,
button,
input,
select,
textarea,
optgroup {
	font-family: var(--ly-font-sans);
	font-feature-settings: 'cv05' 1;
}

h1,
h2,
h3,
h4,
.text-2xl,
.text-xl,
.text-lg {
	letter-spacing: var(--ly-ls-tight);
	font-weight: 700;
}

code,
pre,
kbd,
samp,
.font-mono {
	font-family: var(--ly-font-mono);
	font-variant-ligatures: none;
}

/* Numeros tabulares donde se comparan cifras (progresos, estadisticas). */
.tabular-nums,
table td,
table th {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
 * 5. Chrome de aplicacion
 * ------------------------------------------------------------------------ */

/* ---- Barra lateral en navy ------------------------------------------------
 * No se pinta elemento por elemento: se INVIERTE la escala de tokens de
 * frappe-ui dentro del contenedor del sidebar. Todo lo que vive ahi dentro
 * (botones, menus, avatares, badges) lee esos mismos tokens, asi que se
 * adapta solo. Una regla por componente envejeceria mal: cada version de
 * `lms` mueve componentes de sitio.
 *
 * Las superficies interiores son veladuras de cromo sobre el navy, nunca
 * blancos solidos: un bloque blanco sobre navy corta la pieza en dos.
 *
 * En modo oscuro esta inversion es redundante (la escala global ya es clara)
 * pero inocua, y mantiene el sidebar coherente en los dos temas.
 * ------------------------------------------------------------------------ */
.bg-surface-sidebar,
[class*='bg-surface-sidebar'] {
	/* Tinta invertida: el 9 —el mas fuerte— pasa a ser el papel. */
	--ink-white: #ffffff;
	--ink-gray-9: var(--ly-surface-50);
	--ink-gray-8: var(--ly-accent-100);
	--ink-gray-7: #cdd5e2;
	--ink-gray-6: var(--ly-accent-200);
	--ink-gray-5: var(--ly-accent-300);
	--ink-gray-4: #8b95a8;
	--ink-gray-3: var(--ly-accent-400);
	--ink-gray-2: var(--ly-accent-500);
	--ink-gray-1: var(--ly-anchor-400);

	/* Superficies interiores: veladuras, no blancos. */
	--surface-base: color-mix(in srgb, var(--ly-accent-100) 10%, transparent);
	--surface-white: color-mix(in srgb, var(--ly-accent-100) 10%, transparent);
	--surface-gray-1: color-mix(in srgb, var(--ly-accent-100) 6%, transparent);
	--surface-gray-2: color-mix(in srgb, var(--ly-accent-100) 10%, transparent);
	--surface-gray-3: color-mix(in srgb, var(--ly-accent-100) 14%, transparent);
	--surface-gray-4: color-mix(in srgb, var(--ly-accent-100) 18%, transparent);
	--surface-gray-5: color-mix(in srgb, var(--ly-accent-100) 24%, transparent);
	--surface-selected: color-mix(in srgb, var(--ly-accent-100) 14%, transparent);
	/* Las elevaciones son blanco solido en la escala clara. Sin reasignarlas,
	 * el item activo —que usa `bg-surface-elevation-3`— queda como una pastilla
	 * blanca con texto gris claro encima: 1.9:1, ilegible. */
	--surface-elevation-1: color-mix(in srgb, var(--ly-accent-100) 10%, transparent);
	--surface-elevation-2: color-mix(in srgb, var(--ly-accent-100) 10%, transparent);
	--surface-elevation-3: color-mix(in srgb, var(--ly-accent-100) 10%, transparent);
	--surface-menu-bar: var(--ly-anchor-800);
	--surface-modal: var(--ly-anchor-800);
	--surface-alpha-gray-1: color-mix(in srgb, var(--ly-accent-100) 6%, transparent);
	--surface-alpha-gray-2: color-mix(in srgb, var(--ly-accent-100) 10%, transparent);
	--surface-alpha-gray-3: color-mix(in srgb, var(--ly-accent-100) 14%, transparent);
	--surface-alpha-gray-4: color-mix(in srgb, var(--ly-accent-100) 18%, transparent);

	/* Trazos: filetes de luz, no lineas oscuras invisibles sobre navy. */
	--outline-gray-1: color-mix(in srgb, var(--ly-accent-100) 12%, transparent);
	--outline-gray-2: color-mix(in srgb, var(--ly-accent-100) 18%, transparent);
	--outline-gray-3: color-mix(in srgb, var(--ly-accent-100) 26%, transparent);
	--outline-gray-4: color-mix(in srgb, var(--ly-accent-100) 34%, transparent);
	--outline-alpha-gray-1: color-mix(in srgb, var(--ly-accent-100) 12%, transparent);
	--outline-alpha-gray-2: color-mix(in srgb, var(--ly-accent-100) 18%, transparent);
	--outline-alpha-gray-3: color-mix(in srgb, var(--ly-accent-100) 26%, transparent);

	color: var(--ly-surface-50);
	border-inline-end-color: color-mix(in srgb, var(--ly-accent-100) 10%, transparent) !important;
}

/* Marca en la esquina: tipografia de display, no un texto de UI mas. */
.lyceum-brand-name {
	letter-spacing: var(--ly-ls-tight);
	font-weight: 800;
}

.bg-surface-sidebar .lyceum-brand-name {
	color: var(--ly-surface-50);
}

/* Item activo: veladura con filete de luz. La sombra desaparece —sobre navy no
 * se ve— y el peso lo carga el contraste del texto.
 *
 * La veladura se queda en 0.10 y no mas: medido, un velo de 0.14 aclaraba el
 * fondo local lo suficiente para BAJAR el contraste del item seleccionado por
 * debajo del de los inactivos (7.4 contra 10.9), invirtiendo la jerarquia. Con
 * 0.10 y texto en blanco puro el activo vuelve a ser el elemento mas legible
 * de la barra. */
.bg-surface-sidebar [class*='bg-surface-white'],
.bg-surface-sidebar [class*='bg-surface-selected'],
.bg-surface-sidebar [class*='bg-surface-elevation'] {
	box-shadow: none;
	border: 1px solid color-mix(in srgb, var(--ly-accent-100) 16%, transparent);
	background-color: color-mix(in srgb, var(--ly-accent-100) 10%, transparent) !important;
}

.bg-surface-sidebar [class*='bg-surface-white'],
.bg-surface-sidebar [class*='bg-surface-white'] *,
.bg-surface-sidebar [class*='bg-surface-selected'],
.bg-surface-sidebar [class*='bg-surface-selected'] *,
.bg-surface-sidebar [class*='bg-surface-elevation'],
.bg-surface-sidebar [class*='bg-surface-elevation'] * {
	color: #ffffff !important;
	font-weight: 600;
}

/* Reposo y hover de los items: del cromo apagado al papel. */
.bg-surface-sidebar a:not([class*='bg-surface-']),
.bg-surface-sidebar button:not([class*='bg-surface-']) {
	color: var(--ly-accent-200);
}

.bg-surface-sidebar a:not([class*='bg-surface-']):hover,
.bg-surface-sidebar button:not([class*='bg-surface-']):hover {
	background-color: color-mix(in srgb, var(--ly-accent-100) 7%, transparent) !important;
	color: var(--ly-surface-50);
}

/* Los iconos de frappe-ui heredan `currentColor` en el trazo, asi que siguen
 * al texto; los que traen relleno propio se fuerzan aqui. */
.bg-surface-sidebar svg {
	color: inherit;
}

/* Separadores internos y barra de scroll. */
.bg-surface-sidebar hr,
.bg-surface-sidebar [class*='border-t'],
.bg-surface-sidebar [class*='border-b'] {
	border-color: color-mix(in srgb, var(--ly-accent-100) 12%, transparent);
}

.bg-surface-sidebar * {
	scrollbar-color: color-mix(in srgb, var(--ly-accent-100) 25%, transparent) transparent;
}

/* Asistente de onboarding de Frappe Learning: es la guia de producto de
 * upstream ("Welcome to Frappe Learning", enlaces a sus docs), no del tenant.
 * En un despliegue white-label no debe aparecer; ademas, una vez completados
 * todos sus pasos queda como un panel vacio flotando sobre el contenido. */
[data-testid='onboarding-help-modal'] {
	display: none !important;
}

/* Cabecera de pagina: filete inferior y aire. */
header,
.page-header {
	backdrop-filter: saturate(140%) blur(8px);
}

/* --------------------------------------------------------------------------
 * 6. Componentes
 * ------------------------------------------------------------------------ */

/* Botones: transicion corta y elevacion al hover; el solido es navy. */
button {
	transition: background-color var(--ly-dur-fast) var(--ly-ease),
		border-color var(--ly-dur-fast) var(--ly-ease), box-shadow var(--ly-dur-fast) var(--ly-ease),
		transform var(--ly-dur-fast) var(--ly-ease);
}

button:active:not(:disabled) {
	transform: translateY(0.5px);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--ly-accent-400);
	outline-offset: 2px;
}

/* Tarjetas de curso: filete de tinta, esquina 12px, alzada al hover. */
.course-card,
[class*='course-card'],
a[href*='/courses/'] > div[class*='rounded'] {
	transition: box-shadow var(--ly-dur-base) var(--ly-ease),
		border-color var(--ly-dur-base) var(--ly-ease), transform var(--ly-dur-base) var(--ly-ease);
}

.course-card:hover,
a[href*='/courses/'] > div[class*='rounded']:hover {
	box-shadow: var(--ly-shadow-md);
	border-color: var(--outline-gray-3);
	transform: translateY(-2px);
}

/* Pildoras de la tarjeta de curso: versalita espaciada sobre papel. */
.course-card-pills {
	background: var(--ly-surface-200) !important;
	color: var(--ly-accent-600);
	border: 1px solid var(--outline-gray-1);
	border-radius: 999px;
	letter-spacing: var(--ly-ls-wider);
	font-size: 10px;
}

[data-theme='dark'] .course-card-pills {
	background: var(--ly-anchor-600) !important;
	color: var(--ly-accent-100);
}

/* Introduccion corta del curso: mejor color y ritmo de lectura. */
.short-introduction {
	color: var(--ink-gray-6);
}

/* Campos: fondo blanco sobre papel para que el campo "exista". */
input:not([type='checkbox']):not([type='radio']),
textarea,
select {
	background-color: var(--surface-base);
}

/* --------------------------------------------------------------------------
 * 7. Contenido de aprendizaje
 * ------------------------------------------------------------------------ */

/* Lectura de la leccion: medida controlada y ritmo vertical amplio. */
.lesson-content {
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink-gray-8);
}

.lesson-content > * {
	max-width: 72ch;
}

.lesson-content h1,
.lesson-content h2,
.lesson-content h3 {
	color: var(--ink-gray-9);
	letter-spacing: var(--ly-ls-tight);
	margin-top: 2.25rem;
	margin-bottom: 0.75rem;
	line-height: 1.25;
}

.lesson-content h2 {
	font-size: 22px;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--outline-gray-1);
}

.lesson-content h3 {
	font-size: 17px;
}

.lesson-content p {
	line-height: 1.75;
}

.lesson-content strong {
	color: var(--ink-gray-9);
	font-weight: 700;
}

.lesson-content a {
	color: var(--ly-accent-600);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.lesson-content blockquote {
	border-inline-start: 2px solid var(--ly-accent-300);
	padding: 0.25rem 0 0.25rem 1rem;
	color: var(--ink-gray-6);
	font-style: normal;
}

.lesson-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 14px;
}

.lesson-content th {
	text-align: start;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: var(--ly-ls-wider);
	color: var(--ink-gray-5);
	font-weight: 600;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--outline-gray-2);
}

.lesson-content td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--outline-gray-1);
	vertical-align: top;
}

.lesson-content hr {
	border: 0;
	border-top: 1px solid var(--outline-gray-1);
	margin: 2rem 0;
}

/* Codigo en linea (no el bloque, que lms ya pinta oscuro). */
.lesson-content :not(pre) > code {
	display: inline;
	background: var(--ly-surface-200);
	color: var(--ly-accent-600);
	padding: 0.1em 0.35em;
	border-radius: var(--ly-radius-sm);
	font-size: 0.9em;
}

/* Barras de progreso: relleno cromo, riel de papel. */
[role='progressbar'],
.progress-bar {
	background-color: var(--ly-surface-300);
	border-radius: 999px;
	overflow: hidden;
}

[role='progressbar'] > div,
.progress-bar > div {
	background-image: var(--ly-accent-gradient);
}

/* --------------------------------------------------------------------------
 * 8. Portal publico (login y paginas del website de Frappe)
 * ----------------------------------------------------------------------------
 * El login de Frappe es marcado bootstrap-like (`#page-login` > secciones
 * `.for-login` / `.for-signup` / `.for-forgot`, cada una con su `.page-card`),
 * distinto al de la SPA. Upstream no se toca (protocolo 2-B), asi que la
 * composicion de dos columnas —panel de marca a la izquierda, formulario a la
 * derecha— se construye entera desde CSS: el panel son pseudo-elementos fijos
 * de `body` y `#page-login`, y el contenido real se desplaza a la derecha.
 *
 * Todas las reglas del formulario van prefijadas con `#page-login`: el bundle
 * de login de upstream encadena tres clases (`.for-login .page-card
 * .page-card-body ...`), y solo la especificidad de un id gana sin recurrir a
 * `!important` en cada declaracion.
 *
 * La copia del panel es white-label: vive en variables (`--ly-login-*`,
 * declaradas en tokens.css), no en estas reglas.
 * ------------------------------------------------------------------------ */

/* ---- Lienzo ---- */
body[data-path='login'] {
	background: var(--ly-surface-100);
	min-height: 100vh;
}

/* Panel de marca: navy con acanaladura vertical (columna clasica) y dos focos
 * de luz fria. `fixed` para que no participe del scroll del formulario. */
body[data-path='login']::before {
	content: '';
	position: fixed;
	inset: 0 auto 0 0;
	width: var(--ly-login-panel);
	background-color: var(--ly-anchor-900);
	/* Todo el degradado sale de la escala del tenant: con valores literales, el
	 * panel seguia siendo navy aunque el resto de la interfaz cambiara. */
	background-image: repeating-linear-gradient(
			90deg,
			color-mix(in srgb, var(--ly-accent-100) 4.5%, transparent) 0 1px,
			transparent 1px 72px
		),
		radial-gradient(
			120% 85% at 12% 0%,
			color-mix(in srgb, var(--ly-anchor-400) 75%, transparent),
			transparent 62%
		),
		radial-gradient(
			90% 60% at 90% 100%,
			color-mix(in srgb, var(--ly-accent-500) 40%, transparent),
			transparent 70%
		),
		linear-gradient(
			160deg,
			var(--ly-anchor-800) 0%,
			var(--ly-anchor-900) 55%,
			var(--ly-anchor-700) 100%
		);
	box-shadow: inset -1px 0 0 color-mix(in srgb, var(--ly-accent-100) 8%, transparent);
	z-index: 0;
}

/* Logotipo tipografico, arriba del panel. */
body[data-path='login']::after {
	content: var(--ly-login-wordmark);
	position: fixed;
	top: 3.25rem;
	left: 3.5rem;
	z-index: 1;
	font-family: var(--ly-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--ly-ls-wider);
	color: var(--ly-accent-100);
	opacity: 0.92;
}

/* Bloque de discurso al pie del panel: frase + firma. Dos pseudos distintos
 * para poder darles jerarquia tipografica propia. */
#page-login::before,
#page-login::after {
	position: fixed;
	left: 3.5rem;
	z-index: 1;
	max-width: min(30rem, calc(var(--ly-login-panel) - 7rem));
	white-space: pre-line;
	pointer-events: none;
}

#page-login::before {
	content: var(--ly-login-claim);
	bottom: 8rem;
	font-size: clamp(1.5rem, 2.1vw, 2rem);
	line-height: 1.25;
	font-weight: 300;
	letter-spacing: var(--ly-ls-tight);
	color: var(--ly-surface-50);
}

#page-login::after {
	content: var(--ly-login-signature);
	bottom: 3.25rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ly-accent-300);
}

/* ---- Columna del formulario ---- */
#page-login .page-content-wrapper {
	position: relative;
	z-index: 1;
	margin-left: var(--ly-login-panel);
}

#page-login .page-breadcrumbs,
#page-login .page-header-wrapper {
	display: none;
}

#page-login main.container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	max-width: none;
	padding: 3rem 2rem;
}

#page-login .page_content {
	width: 100%;
	max-width: 23rem;
}

/* `.for-*` es la seccion completa, no la tarjeta. */
#page-login .for-login,
#page-login .for-signup,
#page-login .for-forgot {
	background: transparent;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* ---- Cabecera ---- */
/* Upstream centra la cabecera con `margin: 0 auto`; como las secciones son
 * flex, eso la encoge y la centra en vez de alinearla con el formulario.
 *
 * En 16.31 la cabecera se movio DENTRO de `.page-card` y gano un envoltorio
 * `.page-card-head-text` con su propio `.page-card-subtitle`. Se estiliza el
 * subtitulo de upstream en vez de inventar uno con `::after`: menos CSS y el
 * texto pasa por el sistema de traduccion (ver translations/es.csv). */
#page-login .page-card-head {
	width: 100%;
	margin: 0 0 1.75rem;
	padding: 0;
	text-align: left;
}

#page-login .page-card-subtitle {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ly-accent-400);
}

/* El logotipo ya esta en el panel de marca: en escritorio duplicarlo abarata
 * la composicion. Reaparece en el layout de una sola columna. */
#page-login .page-card-head .app-logo {
	display: none;
}

#page-login .page-card-head h4 {
	margin: 0;
	font-size: 1.625rem;
	line-height: 1.2;
	font-weight: 650;
	letter-spacing: var(--ly-ls-tight);
	color: var(--ly-anchor-900);
}

/* ---- Tarjeta: sin caja. En una composicion a dos columnas la tarjeta
 * flotante sobra; el formulario se apoya directo sobre el papel. ---- */
#page-login .page-card {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	max-width: none;
	width: 100%;
	/* Upstream le pone `min-height: 100vh` en 16.31; con la tarjeta visible en
	 * una columna eso la estira muy por debajo de su contenido. */
	min-height: 0;
}

#page-login .page-card form {
	max-width: none;
}

#page-login .page-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

#page-login .page-card .form-group {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
}

/* Las etiquetas dejaron de ser sr-only en 16.31. Se quedan: una etiqueta
 * visible envejece mejor que un placeholder, que desaparece al escribir. */
#page-login .form-label {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--ly-accent-500);
}

/* ---- Campos ---- */
#page-login .form-control {
	height: 2.75rem;
	margin: 0;
	padding: 0 0.875rem 0 2.5rem;
	font-size: 0.9375rem;
	background-color: var(--ly-surface-50);
	border: 1px solid var(--ly-surface-400);
	border-radius: var(--ly-radius-md);
	color: var(--ly-anchor-900);
	box-shadow: var(--ly-shadow-xs);
	transition: border-color var(--ly-dur-fast) var(--ly-ease),
		box-shadow var(--ly-dur-fast) var(--ly-ease),
		background-color var(--ly-dur-fast) var(--ly-ease);
}

#page-login .form-control::placeholder {
	color: var(--ly-accent-300);
}

#page-login .form-control:hover {
	border-color: var(--ly-accent-200);
}

#page-login .form-control:focus {
	background-color: #fff;
	border-color: var(--ly-accent-500);
	box-shadow: 0 0 0 3px rgb(10 17 40 / 0.08);
	outline: none;
}

#page-login .field-icon {
	left: 0.875rem;
	fill: var(--ly-accent-300);
}

/* En 16.31 el toggle pasó de ser el texto "Show" a un icono de ojo. */
#page-login .toggle-password {
	top: 50%;
	right: 0.875rem;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--ly-accent-300);
	fill: none;
	stroke: currentColor;
	transition: color var(--ly-dur-fast) var(--ly-ease);
}

#page-login .toggle-password:hover {
	color: var(--ly-anchor-900);
}

#page-login .password-field .form-control {
	padding-right: 2.75rem;
}

#page-login .forgot-password-message {
	margin: 0.125rem 0 0;
	line-height: 1.4;
}

#page-login .forgot-password-message > * {
	font-size: 0.8125rem;
	color: var(--ly-accent-400);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--ly-dur-fast) var(--ly-ease),
		border-color var(--ly-dur-fast) var(--ly-ease);
}

#page-login .forgot-password-message > *:hover {
	color: var(--ly-anchor-900);
	border-bottom-color: var(--ly-accent-300);
}

/* ---- Acciones ---- */
.btn-primary,
.btn-login {
	background-color: var(--ly-anchor-900) !important;
	border-color: var(--ly-anchor-900) !important;
	color: var(--ly-surface-50) !important;
	border-radius: var(--ly-radius-md);
	font-weight: 600;
}

.btn-primary:hover,
.btn-login:hover {
	background-color: var(--ly-anchor-700) !important;
}

/* El separador "o" desaparecio del marcado en 16.31: la alternativa de acceso
 * ahora vive en el mismo bloque de acciones. Se separan con un hueco. */
#page-login .page-card-actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

/* En 16.31 el boton de enviar dejo de ser `btn-primary` y comparte clase
 * (`btn-default`) con las alternativas de acceso. Se distingue por `.btn-login`
 * / `.btn-forgot`, que siguen siendo exclusivas de la accion principal. */
#page-login .btn-login,
#page-login .btn-forgot,
#page-login .btn-signup,
#page-login .page-card-actions .btn-primary {
	height: 2.75rem;
	background-color: var(--ly-anchor-900) !important;
	border-color: var(--ly-anchor-900) !important;
	color: var(--ly-surface-50) !important;
	border-radius: var(--ly-radius-md);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	box-shadow: var(--ly-shadow-sm);
	transition: background-color var(--ly-dur-fast) var(--ly-ease),
		transform var(--ly-dur-fast) var(--ly-ease),
		box-shadow var(--ly-dur-base) var(--ly-ease);
}

#page-login .btn-login:hover,
#page-login .btn-forgot:hover,
#page-login .page-card-actions .btn-primary:hover {
	box-shadow: var(--ly-shadow-md);
}

#page-login .btn-login:active,
#page-login .btn-forgot:active,
#page-login .page-card-actions .btn-primary:active {
	transform: translateY(1px);
	box-shadow: var(--ly-shadow-xs);
}

#page-login .sign-up-message {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	color: var(--ly-accent-400);
}

#page-login .sign-up-message a {
	color: var(--ly-anchor-900);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var(--ly-surface-400);
	transition: border-color var(--ly-dur-fast) var(--ly-ease);
}

#page-login .sign-up-message a:hover {
	border-bottom-color: var(--ly-accent-400);
}

/* Alternativas de acceso: boton secundario de contorno.
 *
 * El `:not()` no es decorativo: en 16.31 el boton principal lleva `btn-default`
 * Y `btn-login` a la vez, asi que sin excluirlo esta regla —que va despues en
 * el archivo y tiene la misma especificidad— le ganaba y lo pintaba claro. */
#page-login .btn-login-option,
#page-login .btn-default:not(.btn-login):not(.btn-forgot):not(.btn-signup) {
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ly-surface-50) !important;
	border: 1px solid var(--ly-surface-400) !important;
	border-radius: var(--ly-radius-md);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--ly-anchor-900) !important;
	box-shadow: var(--ly-shadow-xs);
	transition: border-color var(--ly-dur-fast) var(--ly-ease),
		background-color var(--ly-dur-fast) var(--ly-ease);
}

#page-login .btn-login-option:hover,
#page-login .btn-default:not(.btn-login):not(.btn-forgot):not(.btn-signup):hover {
	background: #fff !important;
	border-color: var(--ly-accent-300) !important;
}

/* Mensajes de error: elementos nuevos en 16.31, sin estilo de marca propio. */
#page-login .login-error-banner {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid rgb(192 85 79 / 0.35);
	border-radius: var(--ly-radius-md);
	background: rgb(192 85 79 / 0.07);
	font-size: 0.8125rem;
	color: var(--ly-status-error);
}

/* Upstream la muestra anadiendo la clase `show`; sin ella ocupa espacio en
 * blanco encima del formulario. */
#page-login .login-error-banner.show {
	display: flex;
}

#page-login .field-error {
	margin: 0;
	font-size: 0.75rem;
	color: var(--ly-status-error);
}

#page-login .field-error:empty {
	display: none;
}

/* ---- Formularios del resto del website (no login) ---- */
.form-control {
	background-color: var(--surface-base);
	border: 1px solid var(--outline-gray-2);
	border-radius: var(--ly-radius-md);
}

.form-control:focus {
	border-color: var(--ly-accent-300);
	box-shadow: 0 0 0 3px #0a112814;
}

/* ---- Una sola columna: el panel de marca no cabe y se pliega a una franja
 * de cabecera con solo el logotipo; el formulario vuelve a ser tarjeta. ---- */
@media (max-width: 1023.98px) {
	body[data-path='login']::before {
		inset: 0 0 auto 0;
		width: 100%;
		height: 7.5rem;
	}

	body[data-path='login']::after {
		top: 2.75rem;
		left: 50%;
		transform: translateX(-50%);
	}

	#page-login::before,
	#page-login::after {
		display: none;
	}

	#page-login .page-content-wrapper {
		margin-left: 0;
	}

	#page-login main.container {
		min-height: 0;
		padding: 10rem 1.5rem 4rem;
		align-items: flex-start;
	}

	#page-login .page_content {
		max-width: 24rem;
	}

	#page-login .page-card {
		background: var(--ly-surface-50);
		border: 1px solid var(--ly-surface-300);
		border-radius: var(--ly-radius-xl);
		box-shadow: var(--ly-shadow-lg);
		padding: 1.75rem 1.5rem;
	}

	#page-login .login-divider::after {
		background: var(--ly-surface-50);
	}

	#page-login .page-card-head {
		text-align: center;
		margin-bottom: 1.5rem;
	}

	#page-login main.container {
		padding-top: 8.5rem;
	}

	#page-login .page-card-head h4 {
		font-size: 1.375rem;
	}
}

/* --------------------------------------------------------------------------
 * 9. Detalles finales
 * ------------------------------------------------------------------------ */

/* Seleccion de texto en tinta de marca. */
::selection {
	background: #0a112814;
	color: var(--ly-anchor-900);
}

/* Barras de scroll discretas y frias. */
* {
	scrollbar-color: var(--ly-accent-200) transparent;
}

@media (prefers-reduced-motion: reduce) {
	.course-card,
	button,
	a[href*='/courses/'] > div[class*='rounded'] {
		transition: none !important;
	}
}


/* ---- Marca del sitio (doctype Lyceum Brand) ---- */
:root {
	--ly-anchor-900: #0b5940;
	--ly-anchor-800: #105d44;
	--ly-anchor-700: #166048;
	--ly-anchor-600: #1e664f;
	--ly-anchor-500: #266b55;
	--ly-anchor-400: #397864;
	--ly-surface-50: #fafafa;
	--ly-surface-100: #f4f4f4;
	--ly-surface-200: #efefef;
	--ly-surface-300: #e7e7e7;
	--ly-surface-400: #dbdbdb;
	--ly-accent-100: #deeceb;
	--ly-accent-200: #b1d4d1;
	--ly-accent-300: #72b1ac;
	--ly-accent-400: #4a9a94;
	--ly-accent-500: #21837c;
	--ly-accent-600: #165854;
	--ly-status-info: #ffb534;
	--ly-login-wordmark: 'ICC LATAM';
	--ly-login-claim: 'Codes and standards\A that build safety.';
	--ly-login-signature: 'Building code training for Latin America and the Caribbean.';
	--ly-radius-sm: 2px;
	--ly-radius-md: 3px;
	--ly-radius-lg: 4px;
	--ly-radius-xl: 6px;
}