/* ============================================================
   KENAVIA · la capa de marca (piel nueva, 15-sep-2026)

   Se carga DESPUES de ui-system.css y redefine sus tokens sin
   tocarlo: ui-system.css es compartido con Coach Suite e
   ImpulsaHR, y ningun producto puede imponerle su identidad.

   El sistema (aprobado por Diego el 15-sep-2026, «la fusion»):
   lienzo marfil, tarjetas blancas, tinta navy, MAGENTA solo en
   la accion y en el simbolo, AZUL para la informacion, Geist,
   pildoras, radios generosos. Tres apoyos oscuros por pantalla
   como maximo.

   GOTCHA heredado: 28 vistas escriben var(--cobalto) y muchas
   var(--oliva). No se reescriben: aqui se redefinen los nombres
   viejos al color nuevo. --cobalto pasa a ser el magenta de
   texto (enlaces, foco), --oliva pasa a ser el azul de
   informacion. Los estados de acierto (correcta, done) llevan
   su verde propio mas abajo: un color con dos significados no
   se puede cambiar sin romper el otro.
   ============================================================ */

@font-face{font-family:'Geist';src:url('/fonts/geist-variable-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/fonts/geist-mono-variable-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  /* ---- Marfil y tinta ---- */
  --tinta:#070B14;
  --carbon:#3E4558;
  --piedra:#7B8296;
  --crema:#F7F5F0;
  --crema-oscura:#EFECE5;
  --canvas:#F7F5F0;
  --surface:#FFFFFF;
  --line-soft:#EEEAE2;
  --line:#E8E3D8;

  /* ---- La casa ---- */
  --magenta:#F221B9;
  --magenta-tinta:#C4148F;
  --magenta-suave:#FCE6F5;
  --azul:#3297FF;
  --azul-tinta:#1C6FD1;
  --azul-suave:#E7F1FF;
  --navy:#0F1730;
  --navy-2:#1A2342;
  --navy-claro:#B9C3E6;
  --ok:#1E8E5A;
  --ok-suave:#E3F4EA;

  /* ---- Nombres heredados, color nuevo ---- */
  --cobalto:#C4148F;
  --cobalto-soft:#FCE6F5;
  --cobalto-ring:rgba(242,33,185,.22);
  --verde-synap:#1C6FD1;
  --oliva:#1C6FD1;
  --oliva-soft:#E7F1FF;
  --oliva-hondo:#1655A8;
  --oliva-luz:#3297FF;
  --oliva-text:#1655A8;
  --grafito:#0F1730;
  --grafito-2:#1A2342;
  --rejilla:transparent;
  --corte:0deg;
  --dorado-text:#856B1F;
  --focus-ring:0 0 0 3px rgba(50,151,255,.25);

  /* ---- Tipografia ---- */
  --font-sans:'Geist','Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --tracking-display:-.03em;
  --tracking-tight:-.025em;
  --tracking-snug:-.015em;

  /* ---- Radios generosos ---- */
  --radius-pill:999px;
  --radius-control:12px;
  --radius-card:18px;
  --radius-frame:20px;
}

body{-webkit-font-smoothing:antialiased}

/* ---- Botones: pildoras. La accion es magenta; lo secundario, blanco con borde. ---- */
.btn{border-radius:999px;font-family:var(--font-sans);font-weight:600}
.btn.btn-primary{background:var(--magenta);border-color:var(--magenta);color:#fff;box-shadow:0 6px 18px rgba(242,33,185,.20)}
.btn.btn-primary:hover{background:#DE1BA9;border-color:#DE1BA9;color:#fff}
.btn.btn-secondary{background:var(--surface);border:1px solid var(--line);color:var(--tinta)}
.btn.btn-secondary:hover{border-color:var(--tinta);background:var(--surface)}
.btn.btn-ghost{color:var(--tinta)}
.btn:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
a{color:var(--azul-tinta)}

/* ---- Estados de acierto: verde propio, no el color de la casa ---- */
.opcion.correcta{border-color:var(--ok);background:var(--ok-suave);color:var(--ok)}
.feedback.ok{color:var(--ok)}
.leccion-row .done{color:var(--ok)}

/* ---- Chrome: el panel de trabajo en navy ---- */
.sidebar{
  background:var(--navy);
  border-right:0;
  color:rgba(245,243,238,.62);
}
.sidebar-brand a{color:#F5F3EE;letter-spacing:var(--tracking-tight)}
.sidebar-brand a span{color:var(--navy-claro)}
/* El logotipo: el simbolo mide lo que las mayusculas, la separacion es medio
   simbolo, la palabra va en Geist y el subtitulo a un cuarto de la palabra.
   Los tamanos los pone el componente x-marca. */
.marca-enlace{text-decoration:none;display:inline-block}
.marca-lock{display:inline-flex;align-items:center;text-decoration:none}
.marca-lock svg{flex:none;display:block}
.marca-palabras{display:flex;flex-direction:column}
.marca-lock .marca-word{font-family:var(--font-sans);font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.marca-lock .marca-sub{display:block;font-family:var(--font-sans);font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1;color:var(--navy-claro)}
.auth-marca .marca-sub{color:var(--piedra)}
.sidebar-nav a{
  color:rgba(245,243,238,.66);border-radius:10px;
  font-family:var(--font-sans);font-size:13.5px;font-weight:500;letter-spacing:0;
}
.sidebar-nav .nav-titulo{
  display:block;font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(245,243,238,.36);
  margin:18px 10px 5px;user-select:none;
}
.sidebar-nav .nav-titulo:first-child{margin-top:4px}
.sidebar-nav a:hover{background:rgba(245,243,238,.07);color:#F5F3EE}
.sidebar-nav a.active{
  background:rgba(242,33,185,.16);color:#F5F3EE;font-weight:600;
  box-shadow:none;border-left:3px solid var(--magenta);border-radius:0 10px 10px 0;
}
.sidebar-footer{border-top:1px solid rgba(245,243,238,.12)}
.sidebar-footer .user-name{color:#F5F3EE}
.sidebar-footer .user-role{color:rgba(245,243,238,.5);font-family:var(--font-sans);font-size:11.5px;letter-spacing:.04em}
.sidebar-footer .btn-ghost{color:#F5F3EE;border:1px solid rgba(245,243,238,.28);border-radius:999px}
.sidebar-footer .btn-ghost:hover{background:rgba(245,243,238,.1);color:#F5F3EE}
.operar-selector select{
  background:rgba(245,243,238,.08);color:#F5F3EE;border-color:rgba(245,243,238,.18);
  font-family:var(--font-sans);font-size:12px;border-radius:10px;
}
.pill-empresa{border-radius:999px}

/* ---- Tipografia de pantalla ---- */
.page-title{font-weight:700;letter-spacing:var(--tracking-display)}
.page-sub{font-size:14px}
.sn-kick,.eyebrow{font-family:var(--font-sans);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:11px}

/* Los datos se leen alineados */
.stat{border-radius:var(--radius-card);border:1px solid var(--line)}
.stat .num{font-weight:700;letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums}
.stat .lbl{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.table{border-radius:var(--radius-card)}
.table th{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.08em}
.table td{font-variant-numeric:tabular-nums}
.card,.modulo-card,.ejercicio,.leccion-contenido{border-radius:var(--radius-card)}

/* ---- El area de trabajo: marfil liso, sin rejilla ---- */
.main{background-image:none}

/* ---- Los cortes de 20 grados se retiran ---- */
.corte-abajo,.corte-arriba{clip-path:none}

/* ---- Franja de operacion (super admin) ---- */
.franja-operando{background:var(--navy);border-radius:var(--radius-card)}
.franja-operando button{color:var(--navy);border-radius:999px}

/* ---- Movil: la barra de la app del alumno ---- */
@media (max-width:800px){
  body.es-alumno .appbar{border-top:1px solid var(--line)}
  .sidebar{background:var(--navy)}
}

/* ---- Las pantallas de acceso (acceso.css remata) ---- */
.auth-wrap{background:var(--canvas);background-image:none}
.auth-card{border-radius:var(--radius-frame);border-color:var(--line)}
.auth-marca{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.auth-marca svg{flex:none;display:block}
.auth-word{display:block;font-weight:800;font-size:23px;letter-spacing:var(--tracking-tight);line-height:1;color:var(--tinta)}
.auth-sub{display:block;font-family:var(--font-sans);font-weight:500;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--piedra);margin-top:5px}

/* ---- La cabecera del alumno en telefono: compacta, sin cortes ---- */
@media (max-width:800px){
  .sidebar{padding:10px 14px;gap:10px;align-items:center}
  .sidebar .marca-lock .marca-sub{display:none}
  .sidebar-footer{padding-top:0}
  .sidebar-footer .btn-ghost{white-space:nowrap;font-size:12px;padding:7px 12px}
  body.es-alumno .sn-kick{
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }
}

/* ---- El menu no cabe en la pantalla y se cortaba ----
   .sidebar es 100vh en flex columna. Cuando el rol ve todas las secciones,
   la nav mide mas que la pantalla. La marca y el pie se quedan fijos; solo
   la nav se desplaza. OJO min-height:0: sin eso un hijo flex no baja de su
   alto de contenido y el overflow-y nunca se activa. */
.sidebar{overflow:hidden}
.sidebar-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.sidebar-brand,.sidebar-footer{flex:none}
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(245,243,238,.16);border-radius:3px}
.sidebar-nav::-webkit-scrollbar-thumb:hover{background:rgba(245,243,238,.3)}
.sidebar-nav::-webkit-scrollbar-track{background:transparent}
.sidebar-nav{scrollbar-width:thin;scrollbar-color:rgba(245,243,238,.16) transparent}

/* En pantallas bajas el pie se comia el menu: se compacta. */
@media (max-height:760px){
  .sidebar-brand{padding-top:14px;padding-bottom:10px}
  .sidebar-footer{padding-top:10px;padding-bottom:12px}
}

/* ---- Telefono: la cabecera de la app en dos renglones ---- */
@media (max-width:800px){
  .sidebar{flex-direction:row;flex-wrap:wrap;align-items:center;height:auto;min-width:0;overflow:visible;gap:8px 10px;padding:10px 14px 8px}
  .sidebar-brand{order:1;flex:1 1 auto;min-width:0}
  .sidebar-footer{order:2;flex:none;display:flex;align-items:center;gap:8px;margin-left:auto;border:0;padding:0}
  .sidebar-footer form{margin:0}
  .sidebar-nav{order:3;flex:1 0 100%;min-width:0;flex-direction:row;align-items:center;gap:4px;margin-top:2px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .sidebar-nav::-webkit-scrollbar{display:none}
  .sidebar-nav .nav-titulo{display:none}
  .sidebar-nav a{flex:none;white-space:nowrap;padding:7px 11px;font-size:13px}
  .main{min-width:0;max-width:100%}
  body.es-alumno .sidebar-nav{display:none}
}

/* ---- Telefono: el contenido tambien tiene que caber ---- */
@media (max-width:800px){
  .main .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .main .table th,.main .table td{white-space:nowrap}
  .row.between{flex-wrap:wrap}
  .row.between > div{min-width:0}
  .sn-ruta{max-width:100%}
}

/* ============ MENU «MAS» (16-oct-2026) ============
   Un boton y, dentro, las acciones de cada dia menos frecuentes. Se usa en
   la ficha del programa y en Empresas. <details>: funciona sin JS; el cierre
   al tocar fuera o con Escape va en idioma-app.js. */
.mas{position:relative;display:inline-block}
.mas>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.mas>summary::-webkit-details-marker{display:none}
.mas[open]>summary{border-color:var(--tinta)}
.mas-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;max-width:calc(100vw - 32px);background:var(--surface);
    border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 12px 32px rgba(7,11,20,.12);display:flex;flex-direction:column}
.mas-menu a,.mas-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:9px;border:0;background:none;
    font:inherit;font-size:14px;color:var(--tinta);text-decoration:none;cursor:pointer;white-space:nowrap}
.mas-menu a:hover,.mas-menu button:hover,.mas-menu a:focus-visible,.mas-menu button:focus-visible{background:var(--crema,#F3F0EA)}
.mas-menu form{margin:0}
.mas-menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.mas-menu .peligro{color:var(--vino,#B42318)}

/* Empresas (16-oct-2026) */
.emp-cred{display:flex;align-items:center;gap:8px;white-space:nowrap}
.emp-cred b{font-weight:500;color:var(--tinta);min-width:36px}
.emp-cred input{width:64px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font:inherit}
.emp-acciones{display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}
.emp-acciones form{margin:0}
.emp-tabla td{vertical-align:middle}
/* El menu «Mas» de las ultimas filas se cortaba: la tabla recorta lo que sobresale (overflow:hidden de .table,
   para las esquinas redondeadas) y ahi quedaban Desarrolladores, SSO y el resto (Diego, 22-oct-2026).
   En Empresas la tabla deja salir el menu y las esquinas las ponen las celdas de los extremos. */
.emp-tabla{overflow:visible}
.emp-tabla thead tr:first-child>th:first-child{border-top-left-radius:12px}
.emp-tabla thead tr:first-child>th:last-child{border-top-right-radius:12px}
.emp-tabla tbody tr:last-child>td:first-child{border-bottom-left-radius:12px}
.emp-tabla tbody tr:last-child>td:last-child{border-bottom-right-radius:12px}
/* Las dos ultimas filas abren el menu hacia arriba: no empujan la pagina ni quedan bajo el pie. */
.emp-tabla tbody tr:nth-last-child(-n+2):not(:nth-child(-n+2)) .mas-menu{top:auto;bottom:calc(100% + 6px)}
@media (max-width:800px){
    /* la tabla se desliza de lado en el telefono: el menu se abre dentro de la fila */
    .main .table .mas-menu{position:static;box-shadow:none;margin-top:6px}
}

/* ============ DICTAR (16-oct-2026) ============
   El boton que va debajo de cada <textarea data-dictar>: se habla, se
   detiene y el texto cae en la cajita. */
.dictar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.dictar-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);
    background:var(--surface);color:var(--tinta);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.dictar-btn:hover{border-color:var(--tinta)}
.dictar-btn:focus-visible{outline:2px solid #C4148F;outline-offset:2px}
.dictar-btn.grabando{background:#F221B9;border-color:#F221B9;color:#fff;animation:dictar-pulso 1.6s ease-in-out infinite}
.dictar-btn[disabled]{opacity:.7;cursor:progress}
@keyframes dictar-pulso{50%{box-shadow:0 0 0 6px rgba(242,33,185,.18)}}
.dictar-aviso{font-size:12.5px;color:var(--piedra)}
.dictar-aviso.error{color:var(--vino,#B42318)}
.dictar-giro{width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:dictar-giro .8s linear infinite}
@keyframes dictar-giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dictar-btn.grabando,.dictar-giro{animation:none}}