:root{
  --color-bg:#eef2f5;
  --color-surface:#ffffff;
  --color-surface-alt:#f6f8fa;
  --color-border:#d7dfe6;
  --color-text:#16232f;
  --color-text-muted:#55697c;
  --color-primary:#1d5c8a;
  --color-primary-dark:#123f60;
  --color-primary-soft:#e3edf4;
  --color-accent:#2f8f5b;
  --color-accent-soft:#e2f2e9;
  --color-success:#2f8f5b;
  --color-success-soft:#e2f2e9;
  --color-warning:#a8721e;
  --color-warning-soft:#f6ecd9;
  --color-danger:#b03a2e;
  --color-danger-soft:#f8e4e1;
  --shadow-sm:0 1px 2px rgba(20,30,40,.08);
  --shadow-md:0 6px 20px rgba(20,30,40,.10);
  --radius-sm:8px;
  --radius-md:14px;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-bg:#0f1720; --color-surface:#172230; --color-surface-alt:#1d2b3a;
    --color-border:#2c3d4d; --color-text:#e8eef3; --color-text-muted:#96a8b8;
    --color-primary:#5fa8d8; --color-primary-dark:#3f86b8; --color-primary-soft:#1c3448;
    --color-accent:#57c288; --color-accent-soft:#163828; --color-success:#57c288;
    --color-success-soft:#163828; --color-warning:#e3b563; --color-warning-soft:#3a2e14;
    --color-danger:#e3796a; --color-danger-soft:#3a1e1a;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 8px 24px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --color-bg:#0f1720; --color-surface:#172230; --color-surface-alt:#1d2b3a;
  --color-border:#2c3d4d; --color-text:#e8eef3; --color-text-muted:#96a8b8;
  --color-primary:#5fa8d8; --color-primary-dark:#3f86b8; --color-primary-soft:#1c3448;
  --color-accent:#57c288; --color-accent-soft:#163828; --color-success:#57c288;
  --color-success-soft:#163828; --color-warning:#e3b563; --color-warning-soft:#3a2e14;
  --color-danger:#e3796a; --color-danger-soft:#3a1e1a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 8px 24px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:15px;line-height:1.5;}
#app{min-height:100vh;display:flex;flex-direction:column;}
a{color:var(--color-primary);}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;text-wrap:balance;margin:0 0 .35em;color:var(--color-text);}
h1{font-size:1.5rem;} h2{font-size:1.2rem;} h3{font-size:1.02rem;}
p{margin:0 0 .75em;color:var(--color-text-muted);}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;}}

.wrap{max-width:1320px;margin:0 auto;padding:0 20px;width:100%;}
/* Barra superior con fondo oscuro fijo (no depende del tema claro/oscuro
   de la página): el blanco anterior contrastaba demasiado, sobre todo con
   el resto de la interfaz en modo oscuro. Queda un azul marino fijo — el
   mismo tono oscuro institucional que ya se usaba en el panel derecho de
   la pantalla de inicio (auth-hero-right). Por eso todos los colores de
   texto/chips de esta franja de acá para abajo también quedan fijos (no
   usan las variables de tema, que invierten en modo oscuro) — confirmado
   por grep que estas clases sólo se usan dentro de la barra superior, así
   que no afecta a nada más de la interfaz. */
.topbar{background:#123f60;color:#fff;border-bottom:3px solid var(--color-accent);}
.topbar-inner{max-width:1320px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{width:42px;height:42px;border-radius:10px;background:#fff;padding:5px;object-fit:contain;flex-shrink:0;box-shadow:var(--shadow-sm);}
/* La mascota es un dibujo de líneas con fondo transparente: sin una base
   clara detrás, se pierde casi por completo sobre el azul oscuro de la
   barra (se probó y se veía apenas un hilo celeste) — se le da el mismo
   tratamiento de "tarjeta blanca" que ya tenía el logo del ave. */
.brand-mark-alice{height:46px;width:46px;border-radius:10px;background:#fff;padding:5px;object-fit:contain;flex-shrink:0;box-shadow:var(--shadow-sm);}
.brand-text{display:flex;flex-direction:column;line-height:1.25;}
.brand-text strong{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:#fff;}
.brand-text span{font-size:.78rem;color:rgba(255,255,255,.75);letter-spacing:.02em;}
.session-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.session-user{display:flex;align-items:center;gap:8px;}
/* "Cerrar sesión" siempre pegado al extremo derecho de su fila (en vez de
   quedar agrupado junto al resto), para que en el celular no termine pegado
   al botón "☰ Secciones" del menú de abajo y alguien lo toque por error. */
.btn-logout{margin-left:auto;}
@media (max-width:760px){
  .session-box{width:100%;}
}
.session-name{font-weight:600;font-size:.92rem;color:#fff;}

.role-chip{display:inline-flex;align-items:center;padding:.2em .65em;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;background:rgba(255,255,255,.16);color:#fff;border:1px solid transparent;}
.role-chip.role-invitado{background:rgba(232,196,86,.35);}
.role-chip.role-estudiante{background:rgba(255,255,255,.26);}
.role-chip.role-profesor{background:rgba(138,212,175,.3);}
.role-chip.role-secretaria,.role-chip.role-director,.role-chip.role-coordinador{background:rgba(255,255,255,.24);}
.role-chip.on-surface{color:var(--color-text);background:var(--color-surface-alt);border:1px solid var(--color-border);}

.tabs{background:var(--color-surface);border-bottom:1px solid var(--color-border);}
.tabs-inner{max-width:1320px;margin:0 auto;padding:0 20px;display:flex;gap:4px;overflow-x:auto;}
.tab-btn{border:none;background:transparent;padding:14px 14px;font-size:.88rem;font-weight:600;color:var(--color-text-muted);cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;}
.tab-btn:hover{color:var(--color-text);}
.tab-btn.active{color:var(--color-primary);border-bottom-color:var(--color-primary);}
.nav-toggle{display:none;}
@media (max-width:760px){
  .nav-toggle{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:12px 20px;background:transparent;border:none;font-size:.92rem;font-weight:600;color:var(--color-text);cursor:pointer;}
  .tabs-inner{display:none;flex-direction:column;padding:0 0 6px;gap:0;overflow-x:visible;}
  .tabs.nav-open .tabs-inner{display:flex;}
  .tab-btn{width:100%;text-align:left;padding:12px 20px;border-bottom:1px solid var(--color-border);border-left:3px solid transparent;}
  .tab-btn.active{border-bottom-color:var(--color-border);border-left-color:var(--color-primary);}
}
.noticias-link{color:rgba(255,255,255,.9);font-size:.82rem;font-weight:600;text-decoration:none;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.35em .9em;white-space:nowrap;}
.noticias-link:hover{background:rgba(255,255,255,.16);}
/* Botón redondo "cambiar de modo claro/oscuro" de la barra superior (ver
   doAlternarTema en app.js) — mismo tratamiento sutil que .noticias-link,
   pero circular y sólo con el ícono, para no competir con el resto de los
   botones de la franja. */
.btn-tema{width:34px;height:34px;padding:0;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:1rem;flex-shrink:0;}
.btn-tema:hover{background:rgba(255,255,255,.22);}

.content{flex:1;max-width:1320px;margin:0 auto;padding:24px 20px 56px;width:100%;}
/* Pestañas de gestión con tablas grandes (Cursadas, Usuarios, Inscripciones,
   etc.): usan todo el ancho disponible de la pantalla en vez del máximo de
   lectura de 1320px, porque con muchos datos conviene priorizar que entren
   más columnas sin scroll horizontal antes que la estética de una columna
   angosta centrada. */
.content-wide{max-width:none;}
.content-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.content-header p{margin:0;}

.stack{display:flex;flex-direction:column;gap:16px;}
.grid{display:grid;gap:16px;}
.grid-cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}

.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px 20px;box-shadow:var(--shadow-sm);}
.card h3{margin-bottom:4px;}
.card .muted{color:var(--color-text-muted);font-size:.85rem;}

.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:16px 18px;box-shadow:var(--shadow-sm);}
.stat-card .num{font-family:var(--font-display);font-size:1.9rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-primary);line-height:1;}
.stat-card .label{margin-top:6px;font-size:.8rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;}

.badge{display:inline-flex;align-items:center;gap:.35em;padding:.28em .7em;border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.01em;}
.badge-abierto{background:var(--color-success-soft);color:var(--color-success);}
.badge-cerrado{background:var(--color-danger-soft);color:var(--color-danger);}
.badge-proximo{background:var(--color-warning-soft);color:var(--color-warning);}
.badge-neutral{background:var(--color-surface-alt);color:var(--color-text-muted);border:1px solid var(--color-border);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:.6em 1.1em;border-radius:var(--radius-sm);border:1px solid transparent;font-weight:600;font-size:.86rem;cursor:pointer;line-height:1.2;}
.btn-primary{background:var(--color-primary);color:#fff;}
.btn-primary:hover{background:var(--color-primary-dark);}
.btn-primary:disabled{background:var(--color-surface-alt);color:var(--color-text-muted);border-color:var(--color-border);cursor:not-allowed;}
.btn-secondary{background:var(--color-surface);border-color:var(--color-primary);color:var(--color-primary-dark);}
.btn-secondary:hover{background:var(--color-primary-soft);}
.btn-danger{background:transparent;border-color:var(--color-danger);color:var(--color-danger);}
.btn-danger:hover{background:var(--color-danger-soft);}
.btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.22);}
/* Botones de "cerrar" (modales) y "cerrar sesión" (topbar): color propio
   (tono ámbar) para que se distingan de un vistazo del resto de los botones
   secundarios (Guardar, Ver, etc.) y no se confundan por accidente. */
.btn-close{background:var(--color-warning-soft);border-color:var(--color-warning);color:var(--color-warning);}
.btn-close:hover{background:var(--color-warning);color:#fff;}
.btn-logout{background:var(--color-warning);border-color:var(--color-warning);color:#fff;}
.btn-logout:hover{background:#8a5c17;border-color:#8a5c17;}
.btn-google{background:#fff;border-color:var(--color-border);color:#3c4043;}
.btn-sm{padding:.4em .8em;font-size:.78rem;}
.btn-block{width:100%;}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:.82rem;font-weight:600;color:var(--color-text);}
.field .hint{font-size:.76rem;color:var(--color-text-muted);}
input,select{font-family:inherit;font-size:.92rem;padding:.6em .75em;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);}
input:focus,select:focus{border-color:var(--color-primary);}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;}

/* Pantalla de inicio en tres partes (pedido de dirección, ronda ALICE):
   arriba dos columnas (izquierda = acceso, derecha = presentación de
   ALICE con su animación y el texto de bienvenida); abajo una franja de
   ancho completo con el texto informativo; y al final, el logo
   institucional completo. Antes era un ".split" de dos columnas nomás
   (login + logo/texto juntos a la izquierda) — se reemplaza por esto. */
.auth-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:0;max-width:1060px;margin:32px auto 0;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--color-border);}
.auth-hero-left{background:var(--color-surface);padding:34px;display:flex;flex-direction:column;justify-content:center;}
.auth-hero-left h1{font-size:1.5rem;margin-bottom:18px;}
.auth-hero-right{background:var(--color-primary-dark);color:#fff;padding:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;}
.auth-hero-right h2{color:#fff;font-size:1.25rem;line-height:1.4;margin:0;}
.auth-hero-right .auth-hero-sigla{display:block;font-size:.82rem;font-weight:400;color:rgba(255,255,255,.82);margin-top:6px;}
@media (max-width:760px){.auth-hero{grid-template-columns:1fr;margin:0 0 0;border-radius:0;box-shadow:none;} .auth-hero-left,.auth-hero-right{padding:26px 22px;}}

/* Franja informativa de ancho completo, debajo de las dos columnas. */
.auth-info{max-width:1060px;margin:0 auto;background:var(--color-surface-alt);border:1px solid var(--color-border);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);padding:26px 34px 30px;}
.auth-info p{font-size:.98rem;margin-bottom:12px;}
.auth-info ul{margin:0;padding-left:1.2em;font-size:.9rem;display:flex;flex-direction:column;gap:8px;}
@media (max-width:760px){.auth-info{border-radius:0;padding:22px;}}

/* Logo institucional completo, ahora al pie de la página (antes iba
   arriba, junto al login). Se conserva igual, sólo cambia de lugar. */
.auth-logo-footer{display:flex;justify-content:center;padding:30px 20px 40px;}
.auth-logo-footer .split-intro-logo{width:96px;height:96px;}
.split-intro-logo{border-radius:16px;background:#fff;padding:8px;object-fit:contain;box-shadow:var(--shadow-sm);}

/* Recorte de la animación de ALICE (archivo exportado desde Claude Design):
   ese archivo trae su propia barra de reproducción fija de 37px al pie que
   no queremos mostrar (es sólo decorativo, en bucle, sin controles) — se
   recorta con overflow:hidden y el iframe un poco más alto que el marco
   para que esa barra quede tapada. El archivo también trae un fino borde
   oscuro pegado a los cuatro bordes de su propia escena (se ve al comparar
   con la misma ilustración en la página institucional, que no lo tiene) —
   además de más alto, el iframe se agranda un poco con "transform:scale" y
   se recorta con el mismo overflow:hidden, así ese borde queda empujado
   fuera del marco visible en vez de mostrarse. Tamaño "lg" para la pantalla
   de inicio, más grande que el resto porque ahí se pidió darle prioridad
   visual a la animación. */
.alice-anim-frame{width:200px;height:200px;margin:0 auto;border-radius:var(--radius-md);overflow:hidden;background:#faf9f5;box-shadow:var(--shadow-sm);}
.alice-anim-frame iframe{display:block;width:100%;height:calc(100% + 37px);border:0;pointer-events:none;transform:scale(1.1);transform-origin:center center;}
@media (min-width:520px){.alice-anim-frame{width:240px;height:240px;}}
.alice-anim-frame-lg{width:260px;height:260px;}
@media (min-width:520px){.alice-anim-frame-lg{width:340px;height:340px;}}

.auth-tabs{display:flex;gap:6px;margin-bottom:20px;background:var(--color-surface-alt);padding:4px;border-radius:999px;}
.auth-tab{flex:1;border:none;background:transparent;padding:.6em 1em;border-radius:999px;font-weight:600;font-size:.85rem;cursor:pointer;color:var(--color-text-muted);}
.auth-tab.active{background:var(--color-primary);color:#fff;}
.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--color-text-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;border-top:1px solid var(--color-border);}

.table-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);}
/* Lista con checkboxes para seleccionar varias personas a la vez (agregar
   en lote a una comisión o a una mesa de examen final — ver Ronda 17). */
.checklist-scroll{max-height:260px;overflow-y:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:6px 10px;background:var(--color-surface);}
.checklist-item{display:flex;align-items:baseline;gap:6px;padding:5px 2px;border-bottom:1px solid var(--color-border);font-size:.87rem;}
.checklist-item:last-child{border-bottom:none;}
.checklist-item input{flex:none;}
table{border-collapse:collapse;width:100%;font-size:.87rem;}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--color-border);white-space:nowrap;}
th{background:var(--color-surface-alt);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);font-weight:700;}
tr:last-child td{border-bottom:none;}
td.wrap-cell,th.wrap-cell{white-space:normal;}
/* Historial académico: los títulos y el contenido pueden ser largos
   (nombres de unidades curriculares, condiciones, etc.). En vez de
   truncarlos o dejar que se superpongan (white-space:nowrap por defecto),
   se permite pasar a una segunda línea, y la tabla mantiene un ancho
   mínimo propio para que las columnas no queden apretadas — cuando no
   entra en la pantalla (celulares, tablets), .table-wrap ya agrega la
   barra de desplazamiento horizontal. */
.table-historial{min-width:760px;}
td.num,th.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* Tablas de gestión con ancho de columna fijo (Usuarios): el contenido se
   trunca con "…" en vez de agrandar la columna o desbordar la fila — así
   cada celda ocupa siempre el mismo lugar, sin importar cuánto texto tenga
   adentro. El nombre completo queda disponible como tooltip (title). */
.table-fixed{table-layout:fixed;}
.table-fixed .uc-name,.table-fixed .uc-meta,td.cell-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Los <th> de una tabla table-fixed NO tenían overflow:hidden (a
   diferencia de .cell-ellipsis en las celdas de datos, ver el comentario
   de arriba), así que un título de columna angosto (ej. "Unidad
   curricular" en una columna del 15%) desbordaba visualmente encima de
   los títulos vecinos en vez de recortarse — se veían todos superpuestos,
   sobre todo en Mesas publicadas y Usuarios. Dejar que el título pase a
   una segunda línea evita la superposición. */
.table-fixed th{white-space:normal;}
/* Estas dos tablas tienen muchas columnas (11 y 8): con table-layout:fixed
   y sin un ancho mínimo propio, en una pantalla angosta cada columna queda
   comprimida a unos pocos píxeles y el contenido se superpone igual que
   pasaba con los títulos. Con un ancho mínimo, la tabla completa entra
   holgada y .table-wrap agrega su propia barra de scroll horizontal
   cuando no entra en el ancho de la pantalla. */
.table-mesas{min-width:960px;}
.table-usuarios{min-width:760px;}
.table-cursados{min-width:1020px;}
/* En Cursados el nombre de la unidad curricular puede pasar a una 2da/3ra
   línea si es largo (a diferencia del resto de las tablas table-fixed, que
   truncan con "…") — esto pisa la regla general .table-fixed .uc-name de
   más arriba sólo para esta tabla. */
.table-cursados .uc-name,.table-cursados .uc-meta{overflow:visible;text-overflow:clip;white-space:normal;}
.row-actions{display:flex;flex-wrap:wrap;gap:6px;white-space:normal;}

.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.6);display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto;z-index:80;}
.modal-box{background:var(--color-surface);border-radius:var(--radius-md);max-width:600px;width:100%;padding:22px 24px;box-shadow:var(--shadow-md);}
.modal-box-wide{max-width:820px;}
.modal-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border);}

.empty{padding:28px 20px;text-align:center;color:var(--color-text-muted);border:1px dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-alt);}
.loading{padding:60px 20px;text-align:center;color:var(--color-text-muted);}

/* Antes usaba display:flex sin flex-wrap: como el texto de los avisos es
   HTML mixto (texto suelto + <strong>), el navegador lo partía en varios
   "flex items" (uno por cada tramo de texto entre etiquetas) y los
   ubicaba en fila sin permitir que pasen a la línea siguiente — se veía
   como si el aviso estuviera repartido en columnas. Un bloque normal deja
   que todo el contenido fluya como un único párrafo. */
.alert{display:block;padding:12px 16px;border-radius:var(--radius-sm);font-size:.88rem;margin-bottom:16px;border:1px solid transparent;line-height:1.5;}
.alert-error{background:var(--color-danger-soft);color:var(--color-danger);border-color:var(--color-danger);}
.alert-success{background:var(--color-success-soft);color:var(--color-success);border-color:var(--color-success);}
.alert-info{background:var(--color-primary-soft);color:var(--color-primary-dark);border-color:var(--color-primary);}
.alert-warning{background:var(--color-warning-soft);color:var(--color-warning);border-color:var(--color-warning);}

.section-title{display:flex;align-items:center;gap:10px;margin:28px 0 12px;flex-wrap:wrap;}
.section-title h2{margin:0;}
.section-title .count{font-family:var(--font-mono);font-size:.76rem;color:var(--color-text-muted);background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:999px;padding:.1em .6em;}

.footer{border-top:1px solid var(--color-border);padding:18px 20px;text-align:center;color:var(--color-text-muted);font-size:.78rem;}
.footer strong{color:var(--color-text);}

.legajo{font-family:var(--font-mono);font-size:.82rem;color:var(--color-text-muted);}
.uc-name{font-weight:600;}
.uc-meta{font-size:.78rem;color:var(--color-text-muted);}
/* flex-wrap:wrap (antes "nowrap"): un .inline-form con dos o más campos de
   140px mínimo cada uno más un botón no entra en el ancho de un celular
   (375px) — con nowrap eso empujaba toda la página a un scroll horizontal
   en vez de acomodar los campos en más de una línea. */
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.inline-form input,.inline-form select{min-width:140px;}
/* Fila de notas del acta de examen: cada grupo (Asistencia/Escrito/Oral/
   Final) apila su etiqueta arriba del campo en vez de al lado, y las cajas
   numéricas necesitan un ancho propio menor a los 140px por defecto de
   .inline-form para que se vea el número completo sin desperdiciar
   espacio horizontal. */
.acta-nota-form{align-items:flex-start;flex-wrap:wrap;row-gap:10px;}
.acta-nota-grupo{display:flex;flex-direction:column;gap:3px;}
.acta-nota-grupo .hint{font-size:.72rem;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;}
.acta-nota-form input.acta-nota-campo{min-width:0;}
.acta-nota-form input.acta-nota-num{width:68px;}
/* Las flechitas nativas del <input type=number> le comían espacio propio
   al número (con el ancho acotado de estas cajas, se llegaba a tapar el
   último dígito) — se ocultan para que las 4 cifras (ej. "8.50") entren
   siempre completas. */
.acta-nota-form input.acta-nota-num::-webkit-outer-spin-button,
.acta-nota-form input.acta-nota-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.acta-nota-form input.acta-nota-num{-moz-appearance:textfield;appearance:textfield;}
p.hint{font-size:.85rem;}
.add-comision{margin:2px 0;}
.add-comision summary{cursor:pointer;color:var(--color-primary);font-size:.84rem;font-weight:600;padding:4px 0;list-style:none;}
.add-comision summary::-webkit-details-marker{display:none;}
.add-comision[open] summary{margin-bottom:8px;}
.uc-checklist{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:12px;}
.uc-checklist legend{padding:0 6px;font-weight:600;font-size:.85rem;color:var(--color-text);}
.uc-checklist-actions{display:flex;gap:8px;margin:2px 0 8px;}
.check-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.86rem;}
.check-row input{width:auto;min-width:0;}
.badge-existente{font-size:.72rem;color:var(--color-text-muted,#666);background:var(--color-bg-muted,#f0f0f0);border-radius:999px;padding:1px 8px;}
/* Botones apilados verticalmente dentro de una celda angosta (columna
   "Planillas" de Cursadas: CSV, Excel y "Planilla" ya no se superponen). */
.btns-stack{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.btns-stack .btn{width:100%;text-align:left;}
/* Paginación genérica de tablas (Rows per page + flechas), ver
   paginar()/controlesPaginacion() en app.js. */
.paginacion{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 4px;font-size:.85rem;}
.paginacion-tam select{width:auto;min-width:0;display:inline-block;margin-left:4px;padding:.25em .5em;}
.paginacion-info{color:var(--color-text-muted,#666);}
.paginacion-botones{display:flex;gap:6px;}
/* Barra de acciones en lote (selección múltiple de filas), ver
   barraAccionesLote()/seleccionEstado() en app.js. */
.barra-lote{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--color-primary-soft,#eef4ff);border:1px solid var(--color-primary,#2563eb);border-radius:var(--radius-sm);padding:8px 10px;margin-bottom:8px;}
.barra-lote .inline-form{display:inline-flex;gap:6px;align-items:center;}

/* Acordeón Carrera → Año, usado para elegir unidades curriculares al
   publicar mesas de examen final sin mostrar todo de una vez. */
.uc-accordion-carrera{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:0 14px;margin-bottom:10px;background:var(--color-surface);}
.uc-accordion-carrera > summary{cursor:pointer;font-weight:700;font-size:.95rem;padding:12px 0;list-style:none;}
.uc-accordion-carrera > summary::-webkit-details-marker{display:none;}
.uc-accordion-carrera > summary::before{content:"▸ ";display:inline-block;transition:transform .15s;color:var(--color-primary);}
.uc-accordion-carrera[open] > summary::before{transform:rotate(90deg);}
.uc-accordion-carrera[open] > summary{border-bottom:1px solid var(--color-border);margin-bottom:12px;}
.uc-accordion-carrera > *:last-child{padding-bottom:14px;}
.uc-accordion-anio{margin:0 0 12px;padding-left:8px;border-left:2px solid var(--color-border);}
.uc-accordion-anio > summary{cursor:pointer;font-weight:600;font-size:.86rem;color:var(--color-text-muted);padding:6px 0;list-style:none;}
.uc-accordion-anio > summary::-webkit-details-marker{display:none;}
.uc-accordion-anio > summary::before{content:"▸ ";display:inline-block;transition:transform .15s;}
.uc-accordion-anio[open] > summary::before{transform:rotate(90deg);}
.uc-inscriptos-details > summary{cursor:pointer;font-weight:600;padding:4px 0;list-style:none;}
.uc-inscriptos-details > summary::-webkit-details-marker{display:none;}
.uc-inscriptos-details > summary::before{content:"▸ ";display:inline-block;transition:transform .15s;color:var(--color-primary);}
.uc-inscriptos-details[open] > summary::before{transform:rotate(90deg);}
.uc-inscriptos-details[open] > summary{border-bottom:1px solid var(--color-border);margin-bottom:10px;padding-bottom:8px;}
.wa-link{text-decoration:none;font-size:1rem;}

/* Acordeones genéricos de una sola tarjeta (Mis datos, Mesas especiales,
   etc.): mismo estilo de flecha que los de arriba, pero pensados para
   envolver una única tarjeta de contenido en vez de una lista. */
.mis-datos-details,.card-accordion{margin-bottom:14px;}
.mis-datos-details > summary,.card-accordion > summary{cursor:pointer;font-weight:600;font-size:.95rem;padding:8px 0;list-style:none;}
.mis-datos-details > summary::-webkit-details-marker,.card-accordion > summary::-webkit-details-marker{display:none;}
.mis-datos-details > summary::before,.card-accordion > summary::before{content:"▸ ";display:inline-block;transition:transform .15s;color:var(--color-primary);}
.mis-datos-details[open] > summary::before,.card-accordion[open] > summary::before{transform:rotate(90deg);}
.acordeon-contenido{margin-top:6px;}

/* Barra de botones de acceso rápido arriba de una tabla de gestión (Nuevo,
   Crear ciclo lectivo, Plazos, Calendario, etc.) — segundo hijo de
   .content-header, junto al <h2>, para que varios botones no rompan el
   diseño de dos columnas (título a la izquierda / acciones a la derecha)
   que ya usa esa clase. */
.header-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* Fila de filtros por columna, embebida en el propio encabezado de la
   tabla (mismo mecanismo de autofiltro de siempre — ver ACCIONES_AUTOFILTRO
   y la clase "autofiltro-texto" en app.js — sólo que el cuadro de texto
   ahora vive pegado a su columna en vez de en un formulario aparte arriba
   de la tabla). Imita el "Buscar por…" del sistema anterior. */
.fila-filtros th{background:var(--color-surface);padding:6px 10px 10px;border-bottom:2px solid var(--color-border);vertical-align:top;}
.fila-filtros input.autofiltro-texto{width:100%;min-width:0;font-size:.78rem;padding:.4em .55em;font-weight:400;text-transform:none;letter-spacing:normal;}
/* Filtro de fecha combinado: se puede seguir tipeando en el cuadro de
   texto (incluso parcial) o elegir del calendario nativo al lado. */
.filtro-fecha-combo{display:flex;gap:4px;align-items:center;}
.filtro-fecha-combo input.autofiltro-texto{flex:1;min-width:60px;}
.filtro-fecha-combo input.mini-date-picker{width:30px;min-width:30px;padding:.3em 0;font-size:.78rem;flex-shrink:0;}
/* Botón "Comisión nueva" y su fila de formulario desplegada debajo de la
   fila de una unidad curricular en Cursadas (ver filaCursadaTabla): mismo
   fondo tenue que .card-accordion para distinguirla de las filas de datos. */
.fila-nueva-comision td{background:var(--color-surface-alt);padding:12px 14px;}
.fila-nueva-comision .inline-form{margin:0;}