/* app.css - tokens y componentes de Capacitación SGI.
   El color vive SOLO en variables: el tema oscuro es otro bloque de valores y los componentes no cambian.
   Los contrastes de los comentarios están MEDIDOS con scripts/contraste.py (WCAG 2.x, 28-sep-2026):
   4.5 mínimo para texto normal, 3 para texto grande y elementos gráficos. Familia visual de Registro de
   Horarios (misma tinta navy y verdes), para que la gente de obra reconozca la casa. */
:root{
  --bg:#EEF1F4; --card:#FFFFFF; --card-2:#F5F7FA; --ink:#0F2340; --ink-2:#4E5A6B; --line:#DDE3EA;
  --marca:#15253C;                   /* banda de la plantilla GTH-F-18 */
  --lima:#93C021;                    /* solo decorativo: 2.0 sobre blanco, nunca texto */
  --verde:#3B6B12;                   /* texto y botón: 6.37 sobre --card; --btn-ink encima 6.37 */
  --verde-press:#2F5710;
  --verde-suave:#EAF3DC;
  --azul:#1C5D9B;                    /* enlaces: 6.80 sobre --card */
  --peligro:#A11C12;                 /* 7.81 sobre --card */
  --foco:#2E78B7;                    /* anillo de foco: 4.68 sobre --card, 4.13 sobre --bg (gráfico: mínimo 3) */
  --ph:#6B7484;                      /* texto de ejemplo: 4.71 sobre --card */
  --sombra:0 1px 2px rgba(15,35,64,.05),0 4px 14px rgba(15,35,64,.07);
  /* Armazón claro: encabezado y menú son la misma superficie que las tarjetas; el color se reserva para
     «aquí estás». Horarios midió 1.20 como el mínimo visible para ese tinte; #E4EFCC daba 1.199 (se
     redondeaba a 1.20 y NO llegaba), por eso va uno un punto más hondo. */
  --nav:#FFFFFF; --nav-linea:#DDE3EA; --nav-ink:#0F2340; --nav-ink-2:#4E5A6B;
  --nav-on-bg:#E2EEC8;               /* 1.21 contra --nav */
  --nav-on-ink:#2F5710;              /* 6.94 sobre --nav-on-bg */
  --nav-on-bar:#5F8B1F;              /* filo de acento: 4.04 contra --nav (gráfico) */
  --hdr-btn:#F1F3F6; --hdr-btn-bd:#DDE3EA;
  /* Estados (pastilla = palabra + color; el color nunca va solo). Texto medido sobre su propio fondo. */
  --st-al_dia-bg:#DFEEE2;     --st-al_dia:#2A5212;       /* 7.55 */
  --st-por_vencer-bg:#F6E8D2; --st-por_vencer:#6E4600;   /* 6.85 */
  --st-vencida-bg:#FAE4E2;    --st-vencida:#9A1A10;      /* 6.82 */
  --st-pendiente-bg:#E5EAF3;  --st-pendiente:#0F2340;    /* 13.03 */
  --st-en_curso-bg:#DDECF8;   --st-en_curso:#174F86;     /* 6.97 */
  --st-inactiva-bg:#ECEEF1;   --st-inactiva:#4E5A6B;     /* 6.02 */
  --video-bg:#0B1420; --video-ink:#FFFFFF; --video-barra:#3A4656; --video-visto:#93C021; --video-pos:#FFFFFF;
  --logo-bg:#FFFFFF;                 /* los logos van SIEMPRE sobre blanco: varios son texto oscuro sin fondo */
  --btn-ink:#FFFFFF;                 /* sobre --verde: 6.37 */
  --peligro-ink:#FFFFFF;             /* sobre --peligro: 7.81 */
  --firma-bg:#FFFFFF;                /* la firma se dibuja en tinta oscura sobre blanco en los dos temas */
  --firma-ink:#0F2340;
  --velo:rgba(11,20,32,.55); --velo-video:rgba(11,20,32,.86);
  --cue-bg:rgba(0,0,0,.72); --cue-ink:#FFFFFF;
  --sombra-hdr:0 1px 3px rgba(15,35,64,.07); --sombra-tab:0 -2px 14px rgba(15,35,64,.10);
  --tap:44px;                        /* área tocable mínima (celular en obra) */
  --radio:14px; --campo-h:50px; --menu-w:248px; --hdr-h:60px; --tab-h:62px;
  --f-xs:12.5px; --f-s:14px; --f-m:16px; --f-l:19px; --f-xl:24px; --f-xxl:32px;
  color-scheme:light;
}
html[data-tema="oscuro"]{
  --bg:#0B1420; --card:#152A3D; --card-2:#10243A; --ink:#EAF1F8; --ink-2:#A7B8CB; --line:#24435E;
  --marca:#0F1D2E; --lima:#97C459;
  --verde:#9CCB5E;                   /* texto: 7.77 sobre --card */
  --verde-press:#86B84A; --verde-suave:#1B3320;
  --azul:#86BFF0;                    /* 7.50 sobre --card */
  --peligro:#F2A9A3;                 /* 7.68 sobre --card */
  --foco:#7FBCEF; --ph:#8FA3B8;
  --sombra:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.30);
  --nav:#152A3D; --nav-linea:#24435E; --nav-ink:#EAF1F8; --nav-ink-2:#A7B8CB;
  --nav-on-bg:#22432C;               /* 1.33 contra --nav: en oscuro hace falta más separación */
  --nav-on-ink:#B5DC82; --nav-on-bar:#97C459;
  --hdr-btn:#0F2233; --hdr-btn-bd:#24435E;
  --st-al_dia-bg:#294328;     --st-al_dia:#B5DC82;
  --st-por_vencer-bg:#4B3A14; --st-por_vencer:#FAD08A;
  --st-vencida-bg:#593231;    --st-vencida:#F7B8B2;
  --st-pendiente-bg:#24435E;  --st-pendiente:#EAF1F8;
  --st-en_curso-bg:#224058;   --st-en_curso:#A6D2F7;
  --st-inactiva-bg:#26384B;   --st-inactiva:#BFCCDA;
  --video-bg:#000000; --video-ink:#FFFFFF; --video-barra:#3A4656; --video-visto:#97C459; --video-pos:#FFFFFF;
  --logo-bg:#FFFFFF;
  --btn-ink:#0B1420;                 /* sobre --verde oscuro: 9.79 */
  --peligro-ink:#2B0B08;             /* sobre --peligro oscuro: 9.51 */
  --firma-bg:#FFFFFF; --firma-ink:#0F2340;
  --velo:rgba(0,0,0,.62); --velo-video:rgba(0,0,0,.86);
  --cue-bg:rgba(0,0,0,.72); --cue-ink:#FFFFFF;
  --sombra-hdr:0 1px 3px rgba(0,0,0,.35); --sombra-tab:0 -2px 14px rgba(0,0,0,.40);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 var(--f-m)/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%}
a{color:var(--azul)}
h1,h2,h3{line-height:1.2;margin:0}
h1{font-size:var(--f-xl)} h2{font-size:var(--f-l)} h3{font-size:var(--f-m)}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
input::placeholder,textarea::placeholder{color:var(--ph)}
.oculto{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.suave{color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums}

/* ---------------- armazón ---------------- */
.hdr{position:sticky;top:0;z-index:40;height:var(--hdr-h);display:flex;align-items:center;gap:12px;padding:0 16px;
  background:var(--nav);border-bottom:1px solid var(--nav-linea);box-shadow:var(--sombra-hdr)}
.hdr .marca{display:flex;align-items:center;gap:10px;min-width:0;color:var(--nav-ink);text-decoration:none}
.hdr .marca b{font-size:var(--f-m);white-space:nowrap}
.hdr .marca small{display:block;font-size:var(--f-xs);color:var(--nav-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Ficha de logo: blanca en los dos temas, con borde que la separa del encabezado blanco */
.logo-ficha{flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--logo-bg);
  border:1px solid var(--line);border-radius:10px;padding:4px 8px}
.logo-ficha img{display:block;max-width:100%;max-height:100%}
.hdr .logo-ficha{height:44px;width:108px}
.hdr .logo-ficha img{max-height:34px}
.hdr .esp{flex:1}
.hbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:var(--tap);min-height:var(--tap);
  border-radius:12px;border:1px solid var(--hdr-btn-bd);background:var(--hdr-btn);color:var(--nav-ink);cursor:pointer;
  font:inherit;font-size:var(--f-s);padding:0 10px}
.hbtn svg{width:20px;height:20px}
.quien{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;min-width:0}
.quien b{font-size:var(--f-s);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quien span{font-size:var(--f-xs);color:var(--nav-ink-2)}
.menu{position:fixed;left:0;top:var(--hdr-h);bottom:0;width:var(--menu-w);background:var(--nav);border-right:1px solid var(--nav-linea);
  padding:12px 10px;overflow:auto;z-index:30}
.menu a{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:0 12px;border-radius:12px;color:var(--nav-ink);
  text-decoration:none;font-weight:600;position:relative}
.menu a svg{width:20px;height:20px;flex:none;color:var(--nav-ink-2)}
.menu a[aria-current="page"]{background:var(--nav-on-bg);color:var(--nav-on-ink)}
.menu a[aria-current="page"] svg{color:var(--nav-on-ink)}
.menu a[aria-current="page"]::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:3px;background:var(--nav-on-bar)}
.menu .grupo{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.6px;color:var(--nav-ink-2);margin:16px 12px 6px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;background:var(--nav);border-top:1px solid var(--nav-linea);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:var(--sombra-tab)}
.tabbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--tab-h);
  color:var(--nav-ink-2);text-decoration:none;font-size:var(--f-xs);font-weight:600;position:relative}
.tabbar a svg{width:22px;height:22px}
.tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.tabbar a[aria-current="page"]{color:var(--nav-on-ink);background:var(--nav-on-bg)}
.tabbar a[aria-current="page"]::before{content:"";position:absolute;top:0;left:18%;right:18%;height:3px;border-radius:0 0 3px 3px;background:var(--nav-on-bar)}
main{padding:20px 24px 40px;margin-left:var(--menu-w);max-width:calc(1240px + var(--menu-w))}
/* Corte único del armazón: 900. Los dos lados comparten número (899.98 / 900) para que el zoom del
   navegador no deje una rendija de 1px donde no aplica ninguna de las dos reglas. */
@media (max-width:899.98px){
  .menu{display:none}
  .tabbar{display:flex}
  main{margin-left:0;padding:16px 16px calc(var(--tab-h) + 28px)}
  .quien{display:none}
}
@media (min-width:900px){
  .tabbar{display:none}
}

/* ---------------- piezas ---------------- */
.tarjeta{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);box-shadow:var(--sombra);padding:18px}
.tarjeta + .tarjeta{margin-top:16px}
.fila{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pila{display:flex;flex-direction:column;gap:12px}
.rejilla{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.titulo-pag{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 16px}
.titulo-pag p{margin:4px 0 0;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 18px;border-radius:12px;
  border:1px solid transparent;background:var(--verde);color:var(--btn-ink);font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.btn:active{background:var(--verde-press)}
.btn svg{width:20px;height:20px}
.btn.grande{min-height:54px;font-size:var(--f-l);padding:0 24px}
.btn.sec{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.peligro{background:var(--card);color:var(--peligro);border-color:var(--line)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-weight:600;font-size:var(--f-s)}
.campo input,.campo select,.campo textarea{min-height:var(--campo-h);border:1px solid var(--line);border-radius:12px;padding:0 14px;
  font:inherit;font-size:17px;background:var(--card);color:var(--ink)}
.campo textarea{padding:12px 14px;min-height:90px;resize:vertical}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 11px;font-size:var(--f-s);font-weight:700;white-space:nowrap}
.pill.al_dia{background:var(--st-al_dia-bg);color:var(--st-al_dia)}
.pill.por_vencer{background:var(--st-por_vencer-bg);color:var(--st-por_vencer)}
.pill.vencida{background:var(--st-vencida-bg);color:var(--st-vencida)}
.pill.pendiente{background:var(--st-pendiente-bg);color:var(--st-pendiente)}
.pill.en_curso{background:var(--st-en_curso-bg);color:var(--st-en_curso)}
.pill.inactiva,.pill.sin_ruta{background:var(--st-inactiva-bg);color:var(--st-inactiva)}
.barra{height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.barra i{display:block;height:100%;background:var(--verde);border-radius:6px}
.aviso{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;max-width:min(560px,calc(100vw - 32px));
  background:var(--ink);color:var(--card);border-radius:12px;padding:12px 18px;font-weight:600;box-shadow:var(--sombra)}
.aviso.error{background:var(--peligro);color:var(--peligro-ink)}
@media (max-width:899.98px){.aviso{bottom:calc(var(--tab-h) + 16px)}}
.vacio{padding:28px;text-align:center;color:var(--ink-2)}
.error-caja{border:1px solid var(--st-vencida-bg);background:var(--st-vencida-bg);color:var(--st-vencida);border-radius:12px;padding:12px 14px;font-weight:600}
.tabla{width:100%;border-collapse:collapse;font-size:var(--f-s)}
.tabla th{text-align:left;font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.4px;color:var(--ink-2);padding:8px 10px;border-bottom:1px solid var(--line)}
.tabla td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabla tr.clic{cursor:pointer}
.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.modal{position:fixed;inset:0;z-index:80;background:var(--velo);display:flex;align-items:center;justify-content:center;padding:16px}
.modal .caja{background:var(--card);color:var(--ink);border-radius:18px;max-width:560px;width:100%;max-height:calc(100vh - 32px);overflow:auto;padding:22px}

/* ---------------- KPIs: una sola fila y ningún valor se corta (regla del tablero) ---------------- */
.kpis{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);padding:14px 14px;min-width:0;container-type:inline-size}
.kpi span{display:block;font-size:var(--f-xs);color:var(--ink-2);font-weight:600;line-height:1.25}
/* El valor se mide contra el ancho de SU tarjeta (cqi), no de la ventana: a 900 px las seis tarjetas quedan
   de 90 px y «36,4 %» a 2.3vw se cortaba (auditor, 28-sep). */
.kpi b{display:block;font-size:clamp(16px,24cqi,30px);line-height:1.15;margin-top:4px;white-space:nowrap}
.kpi small{display:block;font-size:var(--f-xs);color:var(--ink-2);line-height:1.25;margin-top:2px}
@media (max-width:899.98px){
  .kpis{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------------- Mi ruta ---------------- */
.resumen{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.resumen .accion{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:260px}
@media (max-width:899.98px){.resumen{grid-template-columns:1fr}.resumen .accion{min-width:0}}
.modulo h2{display:flex;align-items:center;gap:10px}
.modulo h2 small{font-size:var(--f-s);color:var(--ink-2);font-weight:600}
.sesiones{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ses{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);text-decoration:none}
.ses .ico{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card-2);color:var(--ink-2)}
.ses .ico svg{width:20px;height:20px}
.ses.aprobada .ico{background:var(--st-al_dia-bg);color:var(--st-al_dia)}
.ses.siguiente{border-color:var(--nav-on-bar);background:var(--nav-on-bg)}
.ses.siguiente .ico{background:var(--verde);color:var(--btn-ink)}
.ses .txt{flex:1;min-width:0}
.ses .txt b{display:block;font-size:var(--f-m)}
.ses .txt span{display:block;font-size:var(--f-s);color:var(--ink-2)}
.ses[aria-disabled="true"]{cursor:default}
.ses .fin{flex:none;text-align:right;font-size:var(--f-s);color:var(--ink-2)}

/* ---------------- reproductor ---------------- */
.video-caja{position:relative;background:var(--video-bg);border-radius:var(--radio);overflow:hidden;aspect-ratio:16/9}
.video-caja video{width:100%;height:100%;display:block;background:var(--video-bg)}
.video-caja video::cue{background:var(--cue-bg);color:var(--cue-ink);font-size:clamp(14px,2.4vw,22px);line-height:1.3}
.controles{display:flex;align-items:center;gap:10px;padding:10px;background:var(--video-bg);color:var(--video-ink);
  border-radius:0 0 var(--radio) var(--radio);margin-top:-4px}
.controles button{min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:10px;background:transparent;color:var(--video-ink);cursor:pointer;font:inherit;font-weight:700}
.controles button svg{width:24px;height:24px}
.controles button[aria-pressed="true"]{background:var(--video-barra)}
.controles .tiempo{font-size:var(--f-s);white-space:nowrap}
.linea-video{flex:1;min-width:60px;position:relative;height:var(--tap);cursor:pointer;touch-action:none}
.linea-video .fondo,.linea-video .visto,.linea-video .pos{position:absolute;top:50%;height:8px;margin-top:-4px;border-radius:4px}
.linea-video .fondo{left:0;right:0;background:var(--video-barra)}
.linea-video .visto{left:0;background:var(--video-visto)}
.linea-video .pos{width:18px;height:18px;margin-top:-9px;margin-left:-9px;border-radius:50%;background:var(--video-pos)}
.linea-video .marca-pausa{position:absolute;top:50%;width:4px;height:16px;margin:-8px 0 0 -2px;background:var(--video-pos);border-radius:2px}
.capa{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--velo-video);color:var(--video-ink)}
.capa .caja{background:var(--card);color:var(--ink);border-radius:16px;max-width:640px;width:100%;max-height:100%;overflow:auto;padding:20px}
.capa .gran-play{width:84px;height:84px;border-radius:50%;border:none;background:var(--lima);color:var(--video-bg);cursor:pointer;display:flex;align-items:center;justify-content:center}
.capa .gran-play svg{width:40px;height:40px}
.opciones{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.opcion{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);cursor:pointer;text-align:left;font:inherit;width:100%}
.opcion input{width:22px;height:22px;flex:none;accent-color:var(--verde)}
.opcion.bien{border-color:var(--st-al_dia);background:var(--st-al_dia-bg);color:var(--st-al_dia)}
.opcion.mal{border-color:var(--st-vencida);background:var(--st-vencida-bg);color:var(--st-vencida)}
.retro{border-left:5px solid var(--nav-on-bar);background:var(--card-2);border-radius:8px;padding:10px 12px;margin-top:8px}
.retro.mal{border-left-color:var(--st-vencida)}
.capitulos{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.capitulos li button{width:100%;display:flex;gap:12px;align-items:center;min-height:var(--tap);border:none;background:none;
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;padding:6px 8px;border-radius:10px}
.capitulos li button[disabled]{color:var(--ink-2);cursor:not-allowed}
.capitulos li button.actual{background:var(--nav-on-bg);color:var(--nav-on-ink);font-weight:700}
.capitulos .t{font-variant-numeric:tabular-nums;color:var(--ink-2);min-width:44px}
.lado{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media (max-width:899.98px){.lado{grid-template-columns:1fr}}
.nota-puntaje{font-size:56px;font-weight:800;line-height:1}
.firma{border:2px dashed var(--line);border-radius:12px;background:var(--firma-bg);touch-action:none;width:100%;height:180px;display:block}
.doc{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:var(--f-s);line-height:1.5}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login .tarjeta{width:100%;max-width:420px;padding:26px}
.logo-grande{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.logo-grande .logo-ficha{height:72px;width:164px;border-radius:14px}
.logo-grande .logo-ficha img{max-height:56px}
.grupo-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px}
.grupo-logos .logo-ficha{height:52px;width:auto}
.grupo-logos .logo-ficha img{max-height:40px}
.saludo{display:flex;align-items:center;gap:16px}
.saludo .logo-ficha{height:64px;width:150px;border-radius:12px}
.saludo .logo-ficha img{max-height:50px}
@media (max-width:899.98px){.saludo .logo-ficha{height:52px;width:120px}.saludo .logo-ficha img{max-height:40px}}
.tarjeta .logo-ficha.proy{height:60px;width:100%;justify-content:flex-start}
.tarjeta .logo-ficha.proy img{max-height:48px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--nav-on-bg);color:var(--nav-on-ink);border-color:var(--nav-on-bar)}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.chip input{width:20px;height:20px;accent-color:var(--verde);margin:0}
.tabs button{min-height:var(--tap);padding:0 14px;border:none;background:none;color:var(--ink-2);font:inherit;font-weight:700;cursor:pointer;
  border-bottom:3px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--nav-on-ink);border-bottom-color:var(--nav-on-bar)}

/* ---------------- anchos angostos (medidos con scripts/auditar_pantallas.py, 28-sep) ----------------
   A 320 px: los controles del video pedían 386 px (66 de desborde), los cuatro logos del ingreso 365 px y el
   encabezado de verificación 342. Bajo 480 la línea de tiempo pasa arriba, a lo ancho, y los botones debajo. */
@media (max-width:479.98px){
  .controles{flex-wrap:wrap;gap:4px 6px}
  .controles .linea-video{order:-1;flex-basis:100%}
  .controles .tiempo{flex:1;text-align:center}
  .grupo-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo-grande{flex-direction:column;align-items:flex-start}
}
@media (min-width:480px){
  .controles{flex-wrap:nowrap}
}
.grupo-logos .logo-ficha{min-width:0}