/* ============================================================
   SYNAP · Ingenieria de Conocimiento Corporativo
   Sistema de marca «La Sala de Maquinas» — 24-ago-2026

   Esta capa 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 a los demas.

   GOTCHA documentado: en Synap el acento es el oliva de la casa,
   pero 28 vistas ya escriben var(--cobalto). En vez de reescribir
   las 28, aqui se redefine --cobalto al oliva: el nombre del
   token queda heredado, el color es el correcto. Si algun dia se
   separan, se hace un barrido y se retira este comentario.
   ============================================================ */

/* Archivo — variable 400-700. Grotesca industrial, apretada y segura. */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/archivo-400-700-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/archivo-400-700-latin-ext.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;
}
/* DM Mono — cada cifra alineada. Datos, etiquetas y cotas. */
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/dm-mono-400-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/dm-mono-400-latin-ext.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:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/dm-mono-500-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/dm-mono-500-latin-ext.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;
}

:root{
  /* ---- Papel y grafito ---- */
  --tinta:#101211;
  --carbon:#3A3E39;
  --piedra:#5C605A;
  --crema:#F7F7F3;
  --crema-oscura:#ECECE6;
  --canvas:#F7F7F3;
  --surface:#FFFFFF;
  --line-soft:rgba(16,18,17,.07);
  --line:rgba(16,18,17,.14);

  /* ---- Un solo acento: el oliva de la casa ---- */
  --cobalto:#5A6B47;
  --cobalto-soft:#E8EDE2;
  --cobalto-ring:rgba(90,107,71,.22);
  --verde-synap:#5A6B47;
  --oliva:#5A6B47;
  --oliva-soft:#E8EDE2;
  --oliva-hondo:#3E4A34;
  /* Sobre grafito el oliva de marca cae a 3.4:1 y la mitad derecha del
     simbolo se pierde. En negativo el acento sube a este oliva luminoso. */
  --oliva-luz:#93AC7C;

  /* ---- Propios de la marca ---- */
  --grafito:#101211;
  --grafito-2:#1B1E1A;
  --rejilla:rgba(16,18,17,.05);
  --corte:20deg;              /* el angulo de La Hendidura */
  --dorado-text:#856B1F;

  /* ---- Tipografia ---- */
  --font-sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --tracking-display:-.035em;
  --tracking-tight:-.03em;
  --tracking-snug:-.02em;

  /* ---- La ingenieria no redondea ---- */
  --radius-pill:3px;
  --radius-control:3px;
  --radius-card:3px;
  --radius-frame:4px;
}

/* ---- Chrome: el panel de trabajo ---- */
.sidebar{
  background:var(--grafito);
  border-right:0;
  color:rgba(247,247,243,.62);
}
.sidebar-brand a{color:#F7F7F3;letter-spacing:var(--tracking-tight)}
.sidebar-brand a span{color:var(--oliva-luz)}
.marca-lock{display:flex;align-items:center;gap:11px;text-decoration:none}
/* El SVG no se deja comprimir por el flex: sin esto queda ovalado. */
.marca-lock svg{flex:none;display:block}
.marca-lock .marca-word{font-weight:700;font-size:19px;letter-spacing:var(--tracking-tight);color:#F7F7F3;line-height:1}
.marca-lock .marca-sub{
  display:block;font-family:var(--font-mono);font-size:8px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(247,247,243,.42);margin-top:3px;
}
.sidebar-nav a{
  color:rgba(247,247,243,.6);border-radius:var(--radius-control);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.01em;
}
.sidebar-nav .nav-titulo{
  display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(247,247,243,.34);
  margin:18px 10px 5px;user-select:none;
}
.sidebar-nav .nav-titulo:first-child{margin-top:4px}
.sidebar-nav a:hover{background:rgba(247,247,243,.07);color:#F7F7F3}
.sidebar-nav a.active{
  background:rgba(90,107,71,.42);color:#F7F7F3;font-weight:400;
  box-shadow:none;border-left:2px solid var(--oliva);border-radius:0 var(--radius-control) var(--radius-control) 0;
}
.sidebar-footer{border-top:1px solid rgba(247,247,243,.12)}
.sidebar-footer .user-name{color:#F7F7F3}
.sidebar-footer .user-role{color:rgba(247,247,243,.45);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em}
/* El salir tiene que verse. .btn-ghost de ui-system.css NO declara borde
   (ni width ni style), asi que el border-color que habia aqui no pintaba
   nada: quedaba texto gris al 72% sobre negro, mas apagado que los items
   del menu al 100%, y se leia como un item mas de la lista. */
.sidebar-footer .btn-ghost{color:#F7F7F3;border:1px solid rgba(247,247,243,.28);border-radius:6px}
.sidebar-footer .btn-ghost:hover{background:rgba(247,247,243,.1);color:#F7F7F3}
.operar-selector select{
  background:rgba(247,247,243,.08);color:#F7F7F3;border-color:rgba(247,247,243,.18);
  font-family:var(--font-mono);font-size:11.5px;
}

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

/* Los datos se leen en mono y alineados */
.stat .num{font-weight:600;letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums}
.stat .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.table th{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em}
.table td{font-variant-numeric:tabular-nums}

/* ---- La rejilla del taller: fondo del area de trabajo ---- */
.main{
  background-image:linear-gradient(var(--rejilla) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rejilla) 1px,transparent 1px);
  background-size:24px 24px;
}

/* ---- El corte de 20 grados como remate de seccion ---- */
.corte-abajo{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 28px))}
.corte-arriba{clip-path:polygon(0 28px,100% 0,100% 100%,0 100%)}

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

/* ---- 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(--grafito)}
}

/* ---- Las pantallas de acceso ---- */
.auth-wrap{
  background-image:linear-gradient(var(--rejilla) 1px,transparent 1px),linear-gradient(90deg,var(--rejilla) 1px,transparent 1px);
  background-size:26px 26px;
}
.auth-card{border-radius:var(--radius-card);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:700;font-size:23px;letter-spacing:var(--tracking-tight);line-height:1;color:var(--tinta)}
.auth-sub{display:block;font-family:var(--font-mono);font-size:8.5px;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}
  .marca-lock .marca-sub{display:none}
  .marca-lock .marca-word{font-size:17px}
  .sidebar-footer{padding-top:0}
  .sidebar-footer .btn-ghost{white-space:nowrap;font-size:12px;padding:7px 12px}
  /* El kicker con el nombre del programa no debe robarse dos renglones. */
  body.es-alumno .sn-kick{
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }
}


/* ---- El menú no cabe en la pantalla y se cortaba ----
   .sidebar es 100vh en flex columna. Cuando el rol ve todas las secciones
   (platform_admin), la nav mide mas que la pantalla y las ultimas opciones
   quedaban recortadas SIN manera de llegar a ellas.
   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. Es el gotcha clasico de flex columna. */
.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(247,247,243,.16);border-radius:3px}
.sidebar-nav::-webkit-scrollbar-thumb:hover{background:rgba(247,247,243,.3)}
.sidebar-nav::-webkit-scrollbar-track{background:transparent}
.sidebar-nav{scrollbar-width:thin;scrollbar-color:rgba(247,247,243,.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}
}