/* 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); }
.appbar .der { margin-left:auto; display:flex; gap:8px; align-items:center; }
.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); }

/* 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;}

/* 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;}

/* 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;}
  /* El tema queda solo como icono: dos botones con texto no caben y se encabalgan. */
  .tema .et-tema{display:none;}
  .tema{padding:11px 12px;}
}