/* ── Design system — Portal ILC (handoff docs/design_handoff_portal_ilc) ──
   Marca:      navy #14234D · navy-deep #0E1A3A · navy-mid #1E3566
   Secundario: periwinkle #4A63AE · texto #33478A/#3A4E96 · tint #ECEFF8
   Acento:     naranja #F2984B/#F9A65A · eyebrows sobre blanco #C46A16
   Semánticos: éxito #15875A/#E7F4EE · advertencia #B5740E/#FBF1DD · error #C5403C/#FBE9E8 */
:root {
	--ilc-navy: #14234D;
	--ilc-navy-deep: #0E1A3A;
	--ilc-navy-mid: #1E3566;
	--ilc-periwinkle: #4A63AE;
	--ilc-periwinkle-text: #33478A;
	--ilc-periwinkle-tint: #ECEFF8;
	--ilc-orange: #F2984B;
	--ilc-orange-dark: #C46A16;
	--ilc-orange-tint: #FDF0E2;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Public Sans', system-ui, sans-serif; color: #1A2436; background: #F5F6F8; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D2D7DF; border-radius: 8px; border: 2px solid #F5F6F8; }
::-webkit-scrollbar-track { background: transparent; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }
.mono { font-family: 'IBM Plex Mono', monospace; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

.skel { background: linear-gradient(90deg,#EEF0F3 25%,#E2E5EA 37%,#EEF0F3 63%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: 6px; }
.navlink:hover { background: #E7EAF6 !important; }
.navlink.active { background: #4A63AE !important; color: #fff !important; }
.navlink.active:hover { background: #3A4E96 !important; }
/* Ítem activo: engrosar el glifo del ícono (aproxima la variante fill de Phosphor) */
.navlink.active svg path { stroke: currentColor; stroke-width: 10; }
/* Dropzone resaltada al arrastrar un archivo encima (toggle vía atributos ondrag* nativos) */
.dz-over { border-color: #4A63AE !important; background: #ECEFF8 !important; }
.row-hover:hover { background: #FAFBFC !important; }
.lift { transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.lift:hover { box-shadow: 0 8px 24px rgba(16,24,40,.10) !important; transform: translateY(-2px); border-color: #C9D2E0 !important; }
.btn { transition: filter .12s ease, background .12s ease, border-color .12s ease; cursor: pointer; }
.btn:hover { filter: brightness(.96); }
.ghost:hover { background: #EEF2F8 !important; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ── Shell layout ────────────────────────────────────────────────────────── */
.sp-shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.sp-sidebar { background: #F4F6FC; border-right: 1px solid #E6EAF2; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sp-main { display: flex; flex-direction: column; min-width: 0; }
.sp-topbar { position: sticky; top: 0; z-index: 20; height: 60px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid #E9ECF1; display: flex; align-items: center; gap: 18px; padding: 0 26px; flex-shrink: 0; }
.sp-content { flex: 1; padding: 26px 30px 60px; }
.sp-content-inner { max-width: 1180px; margin: 0 auto; animation: fadeUp .25s ease; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card { background: #fff; border: 1px solid #E4E7EC; border-radius: 16px; padding: 22px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.sp-table { width: 100%; border-collapse: collapse; }
.sp-table th { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8A93A3; padding: 10px 14px; text-align: left; border-bottom: 1px solid #EEF0F3; background: #F8F9FB; }
.sp-table td { font-size: 13.5px; color: #1A2436; padding: 12px 14px; border-bottom: 1px solid #F2F4F7; vertical-align: middle; }
.sp-table tr:last-child td { border-bottom: none; }
.sp-table tbody tr { cursor: pointer; }
.sp-table tbody tr:hover td { background: #FAFBFC; }

/* ── Form elements ───────────────────────────────────────────────────────── */
.sp-input { width: 100%; border: 1px solid #D2D7DF; border-radius: 9px; padding: 10px 12px; font-size: 14px; font-family: inherit; color: #1A2436; background: #fff; }
.sp-input:focus { outline: none; border-color: #14234D; box-shadow: 0 0 0 3px rgba(20,35,77,.12); }
.sp-select { width: 100%; border: 1px solid #D2D7DF; border-radius: 9px; padding: 0 12px; font-size: 14px; font-family: inherit; color: #1A2436; background: #fff; }
/* Altura uniforme para controles de una línea; los textarea con .sp-input conservan su alto. */
input.sp-input, select.sp-input, .sp-select { height: 40px; box-sizing: border-box; }
select.sp-input { padding-top: 0; padding-bottom: 0; }
.sp-label { display: block; font-size: 13px; font-weight: 600; color: #344054; margin-bottom: 6px; }
.sp-textarea { width: 100%; border: 1px solid #D2D7DF; border-radius: 9px; padding: 10px 12px; font-size: 14px; font-family: inherit; color: #1A2436; background: #fff; resize: vertical; }
.sp-textarea:focus { outline: none; border-color: #14234D; box-shadow: 0 0 0 3px rgba(20,35,77,.12); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.sp-tabs { display: flex; gap: 2px; border-bottom: 1px solid #E4E7EC; margin-bottom: 22px; }
.sp-tab { background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 600; color: #5A6473; padding: 12px 18px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sp-tab.active { color: #14234D; border-bottom-color: #14234D; }
.sp-tab:hover:not(.active) { color: #1A2436; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.sp-pag { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 0; }
.sp-pag-btn { background: #fff; border: 1px solid #E4E7EC; border-radius: 8px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: #1A2436; cursor: pointer; font-family: inherit; }
.sp-pag-btn:disabled { opacity: .4; cursor: not-allowed; }
.sp-pag-btn:not(:disabled):hover { background: #F8F9FB; }

/* ── Spinner / loading ───────────────────────────────────────────────────── */
.sp-spinner { width: 36px; height: 36px; border: 3px solid #E4E7EC; border-top-color: #14234D; border-radius: 50%; animation: spin 0.8s linear infinite; }
.sp-loading { display: flex; align-items: center; justify-content: center; padding: 72px; }

/* ── Alert ───────────────────────────────────────────────────────────────── */
.sp-alert-error { background: #FBE9E8; border: 1px solid #F2CBC9; border-radius: 10px; padding: 12px 16px; color: #C5403C; font-size: 13.5px; margin-bottom: 16px; }
.sp-alert-success { background: #E7F4EE; border: 1px solid #BFDECF; border-radius: 10px; padding: 12px 16px; color: #15875A; font-size: 13.5px; margin-bottom: 16px; }

/* ── Student layout ──────────────────────────────────────────────────────── */
.sp-student-sidebar { background: #F7F8FC; }
.sp-student-content { max-width: 1180px; }

/* ── Responsive / móvil ─────────────────────────────────────────────────────
   El diseño usa estilos inline extensivamente, así que esta capa adapta el
   layout en pantallas pequeñas con selectores de atributo ([style*=…]) e
   !important, sin tocar el markup de las páginas ni su funcionamiento.
   Los toggles de navegación móvil son checkboxes CSS-only (.sp-nav-toggle)
   activados vía :has(); App.razor los des-marca al navegar. */

img { max-width: 100%; }

/* Toggle accesible: oculto visualmente pero enfocable (espacio lo activa) */
.sp-nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.sp-nav-burger, .sp-nav-backdrop, .pub-nav-burger { display: none; }

@media (max-width: 900px) {
	body { overflow-x: clip; }

	/* Shell: el sidebar pasa a ser un drawer deslizante */
	.sp-shell { display: block; }
	.sp-sidebar {
		position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh;
		width: min(300px, 84vw); z-index: 60;
		transform: translateX(-102%); visibility: hidden;
		transition: transform .22s ease, visibility .22s;
		box-shadow: 0 16px 48px rgba(14,26,58,.28);
	}
	.sp-shell:has(.sp-nav-toggle:checked) .sp-sidebar { transform: translateX(0); visibility: visible; }
	.sp-nav-backdrop {
		display: block; position: fixed; inset: 0; z-index: 50;
		background: rgba(14,26,58,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease;
	}
	.sp-shell:has(.sp-nav-toggle:checked) .sp-nav-backdrop { opacity: 1; pointer-events: auto; }
	.sp-nav-burger {
		display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
		background: #fff; border: 1px solid #E4E7EC; border-radius: 10px; color: #14234D; cursor: pointer;
	}
	.sp-shell:has(.sp-nav-toggle:focus-visible) .sp-nav-burger { outline: 2px solid #14234D; outline-offset: 2px; }

	.sp-topbar { padding: 0 14px; gap: 10px; }
	.sp-topbar-search, .sp-topbar-user, .sp-topbar-sub { display: none !important; }
	.sp-topbar-right { margin-left: auto; }
	.sp-content { padding: 18px 14px 44px; }

	/* Tablas: scroll horizontal en su contenedor (las columnas no se rompen) */
	:is(div, section):has(> .sp-table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
	.sp-table th { white-space: nowrap; }

	/* Calendario semanal de entrevistas: scroll horizontal */
	:is(div, section):has(> [style*="grid-template-columns:54px repeat(5,1fr)"]) { overflow-x: auto !important; }
	[style*="grid-template-columns:54px repeat(5,1fr)"] { min-width: 660px; }

	/* Grids con panel lateral fijo → una columna */
	[style*="grid-template-columns:minmax(0,1fr) 320px"],
	[style*="grid-template-columns:minmax(0,1fr) 300px"],
	[style*="grid-template-columns:1fr 300px"],
	[style*="grid-template-columns:1fr 360px"],
	[style*="grid-template-columns:1fr 380px"],
	[style*="grid-template-columns:360px 1fr"],
	[style*="grid-template-columns:260px 1fr 310px"],
	[style*="grid-template-columns:2fr 1fr"],
	[style*="grid-template-columns:3fr 2fr"],
	[style*="grid-template-columns:42% 58%"],
	[style*="grid-template-columns:1.25fr 1fr"],
	[style*="grid-template-columns:1.15fr .85fr"],
	[style*="grid-template-columns:1.08fr .92fr"] { grid-template-columns: minmax(0,1fr) !important; }

	/* Panel lateral pegajoso (entrevistas) → estatico al apilarse en una columna */
	[style*="position:sticky"][style*="flex-direction:column"] { position: static !important; max-height: none !important; overflow-y: visible !important; }

	/* Sub-nav lateral fija del perfil → bloque de ancho completo */
	[style*="width:220px"][style*="position:sticky"] { position: static !important; width: 100% !important; }
	div:has(> [style*="width:220px"][style*="position:sticky"]) { flex-direction: column; }
}

@media (max-width: 720px) {
	/* Grids de 3 y 4 columnas → 2 columnas */
	[style*="grid-template-columns:repeat(4,1fr)"],
	[style*="grid-template-columns:repeat(3,1fr)"],
	[style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

	/* Foto + biografía (columna auto con imagen fija) → apilar */
	[style*="grid-template-columns:auto 1fr"] { grid-template-columns: minmax(0,1fr) !important; }

	/* Encabezados de página con título + acciones: permitir salto de línea */
	[style*="justify-content:space-between"] { flex-wrap: wrap; }

	/* Tipografía display de héroes y cifras grandes */
	[style*="font-size:52px"] { font-size: 34px !important; }
	[style*="font-size:44px"] { font-size: 30px !important; }
	[style*="font-size:38px"] { font-size: 28px !important; }
	[style*="font-size:36px"] { font-size: 27px !important; }
	[style*="font-size:34px"] { font-size: 26px !important; }
	[style*="font-size:32px"] { font-size: 25px !important; }
	[style*="font-size:31px"] { font-size: 24px !important; }
	[style*="font-size:30px"] { font-size: 24px !important; }

	.sp-tabs { overflow-x: auto; }
	.sp-tab { padding: 10px 12px; font-size: 13.5px; white-space: nowrap; }
}

@media (max-width: 640px) {
	/* Pares de campos y grids 2-col → una columna (cubre también "1fr 1fr 1fr") */
	[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0,1fr) !important; }

	/* Tarjetas de convocatoria del landing (texto denso; gap:20px las distingue
	   de los KPI de 3 columnas, que sí caben a dos) → una columna */
	[style*="grid-template-columns:repeat(3,1fr)"][style*="gap:20px"] { grid-template-columns: minmax(0,1fr) !important; }

	/* Filtros con anchos mínimos fijos */
	select[style*="width:200px"] { width: 100% !important; }
	select[style*="min-width:280px"] { min-width: 0 !important; }
	select[style*="min-width:160px"] { min-width: 120px !important; }
	[style*="min-width:220px"] { min-width: 150px !important; }
	div:has(> [style*="min-width:220px"]) { flex-wrap: wrap; }

	/* Dropdown de notificaciones: no exceder el viewport */
	[style*="width:340px"] { width: min(340px, calc(100vw - 28px)) !important; }

	.card { padding: 16px; }
}

/* ── Header público (PublicLayout) en móvil ─────────────────────────────── */
@media (max-width: 860px) {
	.pub-header-inner { padding: 0 16px !important; gap: 12px !important; height: 60px !important; }
	.pub-nav { display: none !important; }
	.pub-nav-burger {
		display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0;
		background: #fff; border: 1px solid #E4E7EC; border-radius: 9px; color: #14234D; cursor: pointer; margin-left: auto;
	}
	header:has(.pub-nav-toggle:focus-visible) .pub-nav-burger { outline: 2px solid #14234D; outline-offset: 2px; }
	.pub-right { margin-left: 0 !important; }
	header:has(.pub-nav-toggle:checked) .pub-nav {
		display: flex !important; position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; gap: 2px !important; margin: 0 !important; padding: 8px 16px 14px;
		background: #fff; border-bottom: 1px solid #E9ECF1; box-shadow: 0 16px 32px rgba(14,26,58,.10);
	}
	header:has(.pub-nav-toggle:checked) .pub-nav a { padding: 10px 4px; }
	.pub-right a { white-space: nowrap; }
}

@media (max-width: 560px) {
	/* Sin logo en el header público, la marca en texto es el único identificador:
	   se mantiene la línea principal (flexible, con elipsis) y se oculta el subtítulo */
	.pub-header-inner { gap: 8px !important; }
	.pub-header-inner > a { flex: 1 1 auto; min-width: 0; }
	.pub-brand-text { min-width: 0; }
	.pub-brand-text > div:first-child { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.pub-brand-text > div:last-child { display: none; }
	.pub-right { gap: 8px !important; }
	.pub-right a { font-size: 13px !important; padding: 8px 10px !important; }
}

/* ── Hoja de entrevista imprimible (/review/imprimir) ────────────────────────
   Documento, no pantalla: se diseña en blanco y negro con bordes de 1px en vez de
   fondos de color, para que la impresión salga igual sin depender de que el usuario
   active "gráficos de fondo" en el diálogo del navegador.                        */
.sp-sheet { max-width: 8.5in; margin: 0 auto; padding: 26px 34px 70px; color: #1A2436; font-size: 14px; }
.sp-sheet-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 24px; }
.sp-sheet-head { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid #14234D; padding-bottom: 14px; margin-bottom: 20px; }
.sp-sheet-head img { height: 54px; width: auto; flex-shrink: 0; }
.sp-sheet-sec { margin-top: 26px; }
.sp-sheet-sec > h2 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #5A6473; border-bottom: 1px solid #C9CFDA; padding-bottom: 5px; margin: 0 0 13px; }
.sp-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px 20px; }
.sp-sheet .k { font-size: 10.5px; color: #5A6473; margin-bottom: 1px; }
.sp-sheet .v { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.sp-sheet-essay { white-space: pre-wrap; line-height: 1.7; font-size: 13.5px; text-align: justify; }
.sp-sheet-crit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-sheet-crit > div { border: 1px solid #C9CFDA; border-radius: 6px; padding: 6px 9px; }
.sp-sheet-eval { border: 1px solid #C9CFDA; border-radius: 8px; padding: 13px 15px; margin-bottom: 12px; }
.sp-sheet-note { font-style: italic; }
.sp-sheet-empty { color: #5A6473; font-style: italic; }

/* Agenda de entrevistas impresa (/admin/reports/entrevistas/imprimir): tabla larga que sí
   puede partirse entre páginas, con el encabezado repetido en cada una. */
.sp-agenda { width: 100%; border-collapse: collapse; font-size: 12px; }
.sp-agenda th { text-align: left; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #5A6473; border-bottom: 1px solid #14234D; padding: 0 8px 5px 0; }
.sp-agenda td { padding: 7px 8px 7px 0; border-bottom: 1px solid #E4E7EC; vertical-align: top; }
.sp-agenda .sub { font-size: 10.5px; color: #5A6473; margin-top: 1px; overflow-wrap: anywhere; }

@media print {
	@page { size: letter; margin: 1.5cm; }
	html, body { background: #fff; }
	.no-print { display: none !important; }
	/* El margen lo pone @page; el contenedor deja de simular la hoja. */
	.sp-sheet { max-width: none; margin: 0; padding: 0; font-size: 11pt; }
	.sp-sheet a { color: inherit; text-decoration: none; }
	/* El ensayo sí puede partirse entre páginas; estos bloques no. */
	.sp-sheet-head, .sp-sheet-student, .sp-sheet-eval, .sp-sheet-crit { break-inside: avoid; }
	.sp-sheet-sec > h2 { break-after: avoid; }
	/* La agenda se parte, pero nunca a mitad de una cita, y repite encabezado. */
	.sp-agenda { font-size: 9.5pt; }
	.sp-agenda thead { display: table-header-group; }
	.sp-agenda tr { break-inside: avoid; }
}

/* ── Blazor error ────────────────────────────────────────────────────────── */
.blazor-error-boundary { background: #FBE9E8; border: 1px solid #F2CBC9; border-radius: 10px; padding: 16px; color: #C5403C; }
.blazor-error-boundary::after { content: "Se produjo un error inesperado."; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; width: 100%; background: #FBE9E8; border-top: 1px solid #F2CBC9; padding: 12px 24px; color: #C5403C; font-size: 13.5px; z-index: 9999; }