/* Tema Veridia "año 3000" — base para las pantallas web de Veridia Capacitaciones.
   Reusa el sistema de diseño de los mockups (identidad-visual-veridia). Oscuro por defecto. */
:root, :root[data-tema="oscuro"] {
  --bg:#05080f; --panel:#101720; --glass:rgba(15,23,35,.55); --glass2:rgba(20,30,44,.6);
  --borde:#16323a; --borde-on:#1f6f7a; --acento:#2dd4bf; --acento-d:#0e7c66;
  --txt:#e8f0f7; --txt2:#8ba0b4; --txt3:#7e93a7;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --info:#60a5fa; --grid:rgba(45,212,191,.045);
}
:root[data-tema="claro"] {
  --bg:#eef3f6; --panel:#fff; --glass:#fff; --glass2:#f6f9fb;
  --borde:#d3dee5; --borde-on:#2dd4bf; --acento:#0e7c66; --acento-d:#0e7c66;
  --txt:#0f1e26; --txt2:#4a6274; --txt3:#6b8092;
  --ok:#059669; --warn:#b45309; --bad:#dc2626; --info:#2563eb; --grid:rgba(14,124,102,.05);
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--txt);
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  background-image: linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size: 26px 26px; }
.mono { font-family: ui-monospace, Consolas, monospace; }
.wrap { max-width:1180px; margin:0 auto; padding:20px 22px 60px; }

/* barra de marca */
.appbar { display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--borde); margin-bottom:16px; }
.mk { width:36px; height:36px; border-radius:9px; background:color-mix(in srgb,var(--acento) 14%,var(--bg));
  border:1px solid var(--acento); color:var(--acento); display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto; }
.marca { font-size:16px; letter-spacing:1px; } .marca span { color:var(--acento); }
.lbl { font-size:11px; letter-spacing:.8px; color:var(--txt2); }
/* La marca es la salida de emergencia: envuelve al logo y al rótulo en un enlace a la
   pantalla de inicio del rol. `color:inherit` para que .marca y .lbl no se pinten de
   azul de enlace, y `min-width:0` para que el recorte con puntos suspensivos de
   `.appbar .marca` (línea de más abajo) siga funcionando dentro del flex. */
.ir-inicio { display:flex; align-items:center; gap:12px; min-width:0; text-decoration:none;
  color:inherit; border-radius:10px; padding:2px; margin:-2px; transition:background .15s; }
.ir-inicio:hover { background:color-mix(in srgb,var(--acento) 7%,transparent); }
.ir-inicio:hover .marca span { color:var(--txt); }
.appbar .der { margin-left:auto; display:flex; gap:8px; align-items:center; }

/* LA MARCA NUEVA (6 oct 2026, mockup aprobado por Carlos:
   Bregma-Negocio/mockups-areas-clinicas/ingreso-suite-v2.html).
   «VERIDIA::CAPACITACIONES» pasa a «VERIDIA CAPACITACIONES», con el nombre del producto en el
   degradado de la suite, y el cuadradito con el ícono pasa a la gota OFICIAL con su degradado
   (componente <x-logo-veridia marca>, copiado de Veridia Empresas). Prefijo `cab-` como allá:
   la gota y sus colores son los mismos en toda la suite. */
:root, :root[data-tema="oscuro"] { --cab-lum:linear-gradient(90deg,#2dd4bf,#7dd3fc 55%,#c4b5fd); --cab-halo:rgba(45,212,191,.42);
  --cab-fondo:linear-gradient(180deg,rgba(16,23,32,.92),rgba(10,16,24,.78)); }
:root[data-tema="claro"] { --cab-lum:linear-gradient(90deg,#0c8478,#1d6fa5 60%,#6d4fc2); --cab-halo:rgba(14,124,102,.22);
  --cab-fondo:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,249,251,.9)); }
.cab-gota-w { position:relative; flex:0 0 auto; display:grid; place-items:center; }
.cab-gota-w::before { content:""; position:absolute; inset:-6px; border-radius:50%; background:radial-gradient(circle at 50% 58%,var(--cab-halo),transparent 68%); }
.cab-gota-w svg { position:relative; filter:drop-shadow(0 4px 10px rgba(0,0,0,.28)); }
:root[data-tema="claro"] .cab-gota-w svg { filter:drop-shadow(0 3px 7px rgba(10,95,78,.25)); }
:root[data-tema="claro"] .cab-gota-noche, :root[data-tema="oscuro"] .cab-gota-dia { display:none; }
/* sin tema elegido todavía (antes de que corra _tema_script) manda la noche */
:root:not([data-tema]) .cab-gota-dia { display:none; }
.appbar .marca-nueva { font-size:16px; font-weight:800; letter-spacing:2.4px; }
.appbar .marca-nueva span { background:var(--cab-lum); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ir-inicio:hover .marca-nueva span { color:transparent; }
/* La marca nueva es más ancha que la vieja: no se encoge (con muchas acciones a la derecha
   quedaba «VERIDIA CAPA…»). Las acciones ya saben partirse en dos líneas. */
.appbar > .ir-inicio, .appbar > .ident { flex-shrink:0; }
.badge { font-size:10.5px; padding:3px 9px; border-radius:6px; border:1px solid var(--borde); color:var(--txt2); }
.badge.info { border-color:var(--info); color:var(--info); background:color-mix(in srgb,var(--info) 10%,transparent); }

/* contexto */
.ctx { display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:var(--glass2); border:1px solid var(--borde); border-radius:12px; padding:10px 14px; margin-bottom:14px; }
.cbx { display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--borde); border-radius:9px; padding:7px 11px; font-size:13px; }
.cbx .k { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--txt3); display:block; }
.cbx b { color:var(--txt); }
.small { font-size:11px; color:var(--txt2); } .muted { color:var(--txt3); }

/* KPIs */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:var(--glass2); border:1px solid var(--borde); border-radius:12px; padding:13px 15px; }
.kpi .v { font-size:24px; font-weight:800; color:var(--txt); line-height:1.1; }
.kpi .v small { font-size:13px; color:var(--txt3); font-weight:600; }
.kpi .k { font-size:11px; color:var(--txt3); margin-top:3px; text-transform:uppercase; letter-spacing:.3px; }
.kpi.good .v { color:var(--ok); } .kpi.alert { border-color:rgba(245,180,60,.4); } .kpi.alert .v { color:var(--warn); }
.kpi.danger { border-color:rgba(248,113,113,.4); } .kpi.danger .v { color:var(--bad); }
/* KPI que además es enlace (lleva a otra pantalla): sin subrayado ni color de link. */
a.kpi { text-decoration:none; color:inherit; display:block; }
a.kpi:hover { border-color:var(--borde-on); }

/* paneles */
.panel { background:var(--glass); border:1px solid var(--borde); border-radius:12px; padding:15px 17px; margin-bottom:16px; }
.panel-t { font-size:12px; color:var(--acento); letter-spacing:1px; margin-bottom:13px; display:flex; align-items:center; gap:8px; text-transform:uppercase; }
.panel-t .pill { margin-left:auto; font-size:10px; color:var(--txt2); letter-spacing:.5px; padding:2px 8px; border:1px solid var(--borde); border-radius:20px; text-transform:none; }

/* gauges */
.gauges { display:grid; grid-template-columns:220px 1fr; gap:18px; align-items:center; }
@media(max-width:820px){ .gauges { grid-template-columns:1fr; } }
.gwrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
.gwrap .gl { font-size:11px; letter-spacing:.6px; color:var(--txt3); text-transform:uppercase; text-align:center; }
.ring { transform:rotate(-90deg); }
.ring circle { fill:none; stroke-linecap:round; }
.ring .trk { stroke:var(--glass2); stroke-width:10; }
.ring .fil { stroke-width:10; transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.gnum { font-weight:800; } .gnum tspan { font-weight:600; }
.minis { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px; }
/* gmini y no mini: más abajo .mini es el estilo de los BOTONES pequeños. Se llamaban
   igual y la segunda definición ganaba, así que a los botones les caía
   flex-direction:column y les ponía el ícono encima del texto. */
.gmini { display:flex; flex-direction:column; align-items:center; gap:4px; }
.gmini .ml { font-size:11px; color:var(--txt2); text-align:center; }

/* semáforo + tabla */
.sem { display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:middle; }
.sem.v { background:var(--ok); box-shadow:0 0 8px color-mix(in srgb,var(--ok) 60%,transparent); }
.sem.a { background:var(--warn); }
.sem.r { background:var(--bad); box-shadow:0 0 8px color-mix(in srgb,var(--bad) 50%,transparent); }
.wrapx { overflow-x:auto; }
.tabla { width:100%; border-collapse:collapse; font-size:12.5px; }
.tabla th { text-align:left; font-size:10px; color:var(--txt3); letter-spacing:.5px; text-transform:uppercase; padding:8px 10px; border-bottom:1px solid var(--borde); font-weight:500; }
.tabla td { padding:9px 10px; border-bottom:1px solid var(--borde); }
.tabla tr:hover td { background:color-mix(in srgb,var(--acento) 4%,transparent); }
.tabla .val { font-family:ui-monospace, Consolas, monospace; }
.est { display:inline-flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap; }
.verde { color:var(--ok); } .ambar { color:var(--warn); } .rojo { color:var(--bad); }
.hint { font-size:11px; color:var(--txt2); line-height:1.5; margin-top:12px; }

/* ---------------------------------------------------------------- panel de la empresa */
.nav-emp{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid var(--borde);}
.nav-emp a{font-size:12.5px;padding:8px 14px;border-radius:9px;text-decoration:none;
  color:var(--txt2);border:1px solid transparent;display:inline-flex;align-items:center;gap:7px;}
.nav-emp a:hover{background:var(--glass2);color:var(--txt);}
.nav-emp a.on{color:var(--acento);border-color:var(--borde-on);
  background:color-mix(in srgb,var(--acento) 12%,transparent);}
.nav-emp .salir{margin-left:auto;}
.nav-emp .salir button{font-size:12px;padding:8px 13px;border-radius:9px;background:transparent;
  border:1px solid var(--borde);color:var(--txt3);cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;}

.aviso{display:flex;gap:9px;align-items:flex-start;padding:11px 14px;border-radius:10px;
  font-size:12.5px;margin-bottom:16px;line-height:1.55;}
.aviso.ok{color:var(--ok);border:1px solid rgba(52,211,153,.45);background:rgba(52,211,153,.08);}
.aviso.mal{color:var(--bad);border:1px solid rgba(248,113,113,.45);background:rgba(248,113,113,.07);}
.aviso i{font-size:16px;flex-shrink:0;margin-top:1px;}

.barra{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.buscar{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;background:var(--glass2);
  border:1px solid var(--borde);border-radius:9px;padding:8px 12px;}
.buscar input{flex:1;background:transparent;border:0;outline:0;color:var(--txt);
  font-family:inherit;font-size:12.5px;}
.buscar i{color:var(--txt3);}
.filtro{font-size:11.5px;padding:7px 13px;border-radius:20px;border:1px solid var(--borde);
  color:var(--txt2);text-decoration:none;white-space:nowrap;}
.filtro.on{border-color:var(--acento);color:var(--acento);
  background:color-mix(in srgb,var(--acento) 12%,transparent);}

.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.campo{display:flex;flex-direction:column;gap:5px;}
.campo.ancho{grid-column:1/-1;}
.campo label{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--txt3);font-weight:600;}
.campo input,.campo select{background:var(--glass2);border:1px solid var(--borde);border-radius:9px;
  padding:9px 12px;color:var(--txt);font-family:inherit;font-size:13px;outline:0;width:100%;}
.campo input:focus,.campo select:focus{border-color:var(--acento);}
.campo .ay{font-size:10.5px;color:var(--txt3);line-height:1.5;}

.acc{display:flex;gap:6px;flex-wrap:wrap;}
.mini{font-size:10.5px;padding:5px 11px;border-radius:7px;border:1px solid var(--borde);
  background:transparent;color:var(--txt2);cursor:pointer;font-family:inherit;text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.mini.on{border-color:var(--acento);color:var(--acento);
  background:color-mix(in srgb,var(--acento) 12%,transparent);}
.mini.x{border-color:rgba(248,113,113,.4);color:var(--bad);}

.et{font-size:9.5px;padding:3px 9px;border-radius:20px;border:1px solid;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;}
.et.ok{color:var(--ok);border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.1);}
.et.warn{color:var(--warn);border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.1);}
.et.bad{color:var(--bad);border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.09);}
.et.info{color:var(--info);border-color:rgba(96,165,250,.45);background:rgba(96,165,250,.1);}
.et.gris{color:var(--txt3);border-color:var(--borde);}

.vacio{text-align:center;padding:36px 20px;color:var(--txt3);font-size:12.5px;line-height:1.7;}
.vacio i{font-size:30px;display:block;margin-bottom:10px;opacity:.5;}

/* ---------------------------------------------------------------- BARRA DE SESIÓN
   Quién está conectado y el botón de salir. Va en los dos layouts, así que se
   estila una sola vez acá. En un equipo compartido de planta, no poder cerrar
   sesión significa que el siguiente que se sienta hereda la del anterior. */
.sesion{display:flex;align-items:center;gap:10px;margin-left:auto;}
.sesion .quien{display:flex;flex-direction:column;gap:1px;text-align:right;min-width:0;}
.sesion .nom{font-size:12.5px;font-weight:600;color:var(--txt);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;}
.sesion .rol{font-size:10px;color:var(--txt3);letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;}
.sesion form{margin:0;}
.sesion button{font-size:12px;padding:8px 13px;border-radius:9px;background:transparent;
  border:1px solid var(--borde);color:var(--txt2);cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.sesion button:hover{border-color:var(--bad);color:var(--bad);
  background:color-mix(in srgb,var(--bad) 8%,transparent);}
.sesion button:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}
/* «Cambiar de acceso»: mismo aspecto que Salir, pero el realce es del acento (no avisa peligro). */
.sesion a.cambiar{font-size:12px;padding:8px 13px;border-radius:9px;background:transparent;
  border:1px solid var(--borde);color:var(--txt2);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.sesion a.cambiar:hover{border-color:var(--acento);color:var(--acento);
  background:color-mix(in srgb,var(--acento) 8%,transparent);}
.sesion a.cambiar:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}

/* La barra del aula: el aspa vuelve a la lista, el botón cierra la sesión.
   Son dos cosas distintas y van juntas, por eso comparten contenedor. */
.tbar .der2{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.tbar .der2 .av{margin-left:0;}
.tbar .sesion{margin-left:0;}

/* ---------------------------------------------------------------- BOTONES
   .btn NO EXISTÍA en ninguna hoja del proyecto, y la usan 6 vistas: "Entrar" del login,
   "Asignar", "Cargar padrón", "Guardar configuración". Todos salían como el botón gris
   por defecto del navegador, en medio de un panel oscuro. Es la razón principal de que
   el producto se viera a medio hacer.

   El patrón sale de 3-MOCKUPS/_estilo.css:140-144, que es de donde se copió el markup
   de las vistas; ahí sí estaba definido y nunca se trajo al código. */
.btn{font-size:13px;padding:9px 16px;border-radius:9px;border:1px solid var(--borde);
  background:var(--glass2);color:var(--txt);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;font-family:inherit;line-height:1.2;}
.btn:hover{border-color:var(--borde-on);}
.btn:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn.primary{border-color:var(--borde-on);background:color-mix(in srgb,var(--acento) 14%,var(--bg));color:var(--acento);}
/* El botón que confirma la acción de la pantalla. Se llama "firmar" por herencia del
   mockup del capacitador; acá es simplemente el principal. */
.btn.firmar{border-color:var(--acento);background:var(--acento);color:#04110d;font-weight:600;}
.btn.firmar:hover{background:color-mix(in srgb,var(--acento) 85%,#000);border-color:var(--acento);}
.btn.ghost{background:transparent;}
.btn.ghost:hover{background:var(--glass2);}
.push{margin-left:auto;}

/* Casilla de selección de trabajadores. Sin esto queda la casilla del sistema, azul
   de Windows, sobre el panel oscuro. */
.chk{width:16px;height:16px;flex:0 0 auto;accent-color:var(--acento);cursor:pointer;margin:0;}

/* ---------------------------------------------------------------- CAMBIO DE TEMA
   El CSS traía los dos modos desde el principio y nadie los cambiaba. Un operario
   revisando su capacitación al sol necesita el claro; RRHH en oficina prefiere el
   oscuro. La preferencia es de quien mira, no de la empresa. */
.tema{font-size:12px;padding:8px 12px;border-radius:9px;background:transparent;
  border:1px solid var(--borde);color:var(--txt2);cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:0 0 auto;}
.tema:hover{border-color:var(--acento);color:var(--acento);
  background:color-mix(in srgb,var(--acento) 10%,transparent);}
.tema:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}
.tema i{font-size:15px;}
.tbar .tema{padding:8px 10px;}

/* La marca puede encoger. Sin esto ocupa su ancho natural y empuja el bloque
   derecho fuera de la pantalla: en celular el botón de salir quedaba 94px afuera,
   cortado. Pasaba desde antes con las acciones de cada pantalla. */
.appbar .ident{min-width:0;}
.appbar .marca,.appbar .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.appbar .der{flex-wrap:wrap;justify-content:flex-end;}

/* ---------------------------------------------------------------- DEL MOCKUP
   Estas clases estaban en el mockup aprobado (3-MOCKUPS/_estilo.css y el <style> de
   capacitaciones-empresa.html) y nunca se portaron al CSS de producción. Sin ellas la
   pantalla real NO puede verse como lo que dibujamos: el plan anual, las barras de
   avance, los badges de modalidad y los paneles destacados salían sin estilo.
   Se copian TAL CUAL del mockup, no se rediseñan. */

/* Tarjeta destacada con corner-brackets (el "HUD"). */
.hud{position:relative;}
.hud::before,.hud::after,.hud>.br1,.hud>.br2{content:"";position:absolute;width:14px;height:14px;pointer-events:none;}
.hud::before{top:-1px;left:-1px;border-top:2px solid var(--acento);border-left:2px solid var(--acento);border-radius:12px 0 0 0;}
.hud::after{top:-1px;right:-1px;border-top:2px solid var(--acento);border-right:2px solid var(--acento);border-radius:0 12px 0 0;}
.hud>.br1{bottom:-1px;left:-1px;border-bottom:2px solid var(--acento);border-left:2px solid var(--acento);border-radius:0 0 0 12px;}
.hud>.br2{bottom:-1px;right:-1px;border-bottom:2px solid var(--acento);border-right:2px solid var(--acento);border-radius:0 0 12px 0;}

/* Línea de escáner (sello de marca). */
.scan-host{position:relative;overflow:hidden;}
.scan{position:absolute;left:0;right:0;height:2px;pointer-events:none;z-index:5;
  background:linear-gradient(90deg,transparent,var(--acento),transparent);
  box-shadow:0 0 14px 2px color-mix(in srgb,var(--acento) 45%,transparent);
  opacity:.5;animation:scan 8s linear infinite;}
@keyframes scan{0%{top:0;}100%{top:100%;}}

/* Badge de modalidad (presencial / virtual) del plan anual. */
.mod{font-size:11px;font-weight:700;letter-spacing:.3px;padding:3px 9px;border-radius:20px;border:1px solid;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;}
.mod.pres{color:#f0b64a;border-color:rgba(240,182,74,.4);background:rgba(240,182,74,.1);}
.mod.virt{color:var(--acento);border-color:rgba(45,212,191,.4);background:rgba(45,212,191,.1);}
.ley{font-size:11px;color:var(--txt3);display:block;margin-top:3px;}

/* Barra de avance del plan anual. */
.prog{display:flex;align-items:center;gap:8px;min-width:120px;}
.prog .pv{font-size:11.5px;color:var(--txt2);font-family:ui-monospace,Consolas,monospace;white-space:nowrap;}
.bar{height:9px;border-radius:20px;background:var(--glass2);overflow:hidden;border:1px solid var(--borde);flex:1;min-width:80px;}
.bar > i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--acento-d),var(--acento));}
.bar.warn > i{background:linear-gradient(90deg,#b45309,var(--warn));}
.bar.bad > i{background:linear-gradient(90deg,#991b1b,var(--bad));}

/* Badge de estado del plan anual y demás. */
.badge{font-size:10.5px;padding:2px 8px;border-radius:6px;border:1px solid var(--borde);color:var(--txt2);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.badge.ok{border-color:var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);}
.badge.bad{border-color:var(--bad);color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent);}
.badge.warn{border-color:var(--warn);color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);}
.badge.info{border-color:var(--info);color:var(--info);background:color-mix(in srgb,var(--info) 10%,transparent);}

/* Chips de alertas. */
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{font-size:12px;padding:6px 12px;border-radius:20px;border:1px solid var(--borde);color:var(--txt2);background:var(--glass2);display:inline-flex;align-items:center;gap:6px;}

/* Panel de evidencia (RM 050 + QR). */
.ev{display:grid;grid-template-columns:1fr 200px;gap:16px;}
@media(max-width:820px){.ev{grid-template-columns:1fr;}}
.reg{background:var(--glass2);border:1px solid var(--borde);border-radius:10px;padding:13px 15px;font-size:12.5px;}
.reg .rt{font-size:11px;letter-spacing:.5px;color:var(--acento);text-transform:uppercase;margin-bottom:9px;display:flex;align-items:center;gap:7px;}
.reg dl{display:grid;grid-template-columns:140px 1fr;gap:6px 10px;margin:0;}
@media(max-width:520px){.reg dl{grid-template-columns:1fr;gap:2px 0;}.reg dt{margin-top:7px;}}
.reg dt{font-size:11px;color:var(--txt3);text-transform:uppercase;letter-spacing:.3px;}
.reg dd{margin:0;color:var(--txt);font-family:ui-monospace,Consolas,monospace;font-size:12px;}
.qr{background:var(--glass2);border:1px solid var(--borde-on);border-radius:10px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;}
.qr img{width:104px;height:104px;border-radius:8px;background:#fff;padding:4px;}

/* Nota de fuente (por API). */
.api{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--info);
  border:1px solid rgba(96,165,250,.35);background:rgba(96,165,250,.1);border-radius:20px;padding:3px 10px;}

/* Pie de base legal. */
.legal{font-size:11px;color:var(--txt2);line-height:1.6;}
.legal b{color:var(--txt);}

/* Filas y barra de acciones. */
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.acciones{display:flex;gap:10px;align-items:center;padding:13px 16px;margin-top:20px;
  background:var(--glass2);border:1px solid var(--borde);border-radius:12px;flex-wrap:wrap;}
.acciones .nota{font-size:11.5px;color:var(--txt2);}
.wrapx{overflow-x:auto;}

/* Tablet: se va el rol, se queda el nombre. */
@media(max-width:900px){
  .sesion .rol{display:none;}
  .sesion .nom{max-width:150px;}
}
/* Celular: solo el botón. Quién eres ya lo sabes; el botón no puede faltar.
   Y la barra se parte en dos líneas antes que dejar algo fuera de pantalla. */
@media(max-width:600px){
  .appbar{flex-wrap:wrap;}
  .appbar .der{width:100%;margin-left:0;}
  .sesion .quien{display:none;}
  /* Blanco táctil cómodo: el aula se usa en planta, muchas veces con guante. */
  .sesion button{padding:11px 14px;}
  /* Dos botones con texto no caben: «Cambiar de acceso» queda como icono (lleva su title). */
  .sesion a.cambiar{padding:11px 12px;}
  .sesion a.cambiar span{display:none;}
  /* El tema queda solo como icono: dos botones con texto no caben y se encabalgan. */
  .tema .et-tema{display:none;}
  .tema{padding:11px 12px;}
  .ev{grid-template-columns:1fr;}
  .acciones{flex-wrap:wrap;}
  .acciones .push{margin-left:0;}
}

/* ── Clases compartidas entre pantallas ──────────────────────────────────────
   Varias vistas (padrón, calendario, capacitador, curaduría, novedades) usan estas
   mismas piezas. Vivían duplicadas en cada CSS de página; se suben acá, al base que el
   layout SIEMPRE carga, para que cualquier pantalla las tenga sin re-copiarlas. Las
   páginas que aún traen su propia copia siguen funcionando (esta carga antes; si una
   página la redefine, gana la de la página, con los mismos valores). Aditivo, no pisa nada. */

.area-h { display:flex; align-items:flex-start; gap:13px; }
.area-h .ic { width:40px; height:40px; border-radius:11px; flex:0 0 auto;
  background:color-mix(in srgb,var(--acento) 14%,var(--bg)); color:var(--acento);
  display:flex; align-items:center; justify-content:center; font-size:20px; }
.area-h .t { font-size:15px; font-weight:700; color:var(--txt); }
.area-h .s { font-size:12px; color:var(--txt2); line-height:1.6; margin-top:3px; }

.nota-l { font-size:11.5px; color:var(--txt2); line-height:1.6; }
.nota-l b { color:var(--txt); }

.dec { border:1px dashed rgba(96,165,250,.5); background:rgba(96,165,250,.07); border-radius:11px; padding:13px 15px; }
.dec .h { color:var(--info); font-weight:700; font-size:11px; letter-spacing:.5px; text-transform:uppercase;
  display:flex; align-items:center; gap:6px; margin-bottom:8px; }

.flash { border-radius:10px; padding:11px 13px; font-size:12.5px; margin-bottom:14px;
  display:flex; gap:9px; align-items:center; }
.flash.ok { border:1px solid rgba(52,211,153,.45); background:color-mix(in srgb,var(--ok) 9%,var(--bg)); color:var(--ok); }
.flash.err { border:1px solid rgba(248,113,113,.5); background:color-mix(in srgb,var(--bad) 9%,var(--bg)); color:var(--bad); }

.est-v { font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:20px; border:1px solid; white-space:nowrap; }
.est-v.borrador { color:var(--txt3); border-color:var(--borde); }
.est-v.en_revision { color:var(--warn); border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.1); }
.est-v.vigente { color:var(--ok); border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.1); }
.est-v.retirada { color:var(--txt3); border-color:var(--borde); opacity:.8; }