:root{
  --azul:#1B4E9B; --navy:#0D2748; --navy-2:#123055; --navy-3:#1A3E6B;
  --naranja:#F1661F; --naranja-2:#DD5813;
  --ink:#182230; --gris:#5B6572; --line:#E5E9F0;
  --verde:#1F9254; --verde-bg:#EAF6EE;
  --paper:#F4F7FB; --blanco:#fff;
  --font-d:"Bricolage Grotesque",system-ui,sans-serif;
  --font-b:"Figtree",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-b);background:var(--navy);min-height:100vh;color:var(--ink);display:flex;flex-direction:column}
button{font-family:var(--font-b);cursor:pointer;border:0}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:6px}

.fondo-anillos{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.fondo-anillos i{position:absolute;border-radius:50%;border:40px solid rgba(255,255,255,.035)}
.fondo-anillos i:nth-child(1){width:520px;height:520px;right:-160px;top:-160px}
.fondo-anillos i:nth-child(2){width:380px;height:380px;left:-140px;bottom:-140px;border-width:30px}
.fondo-anillos b{position:absolute;border-radius:50%;background:rgba(241,102,31,.12)}
.fondo-anillos b:nth-child(3){width:120px;height:120px;right:60px;top:80px}

.barra{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;color:#B9C9DE}
.marca{display:flex;align-items:center;gap:11px}
.marca .mark{width:34px;height:34px;border-radius:50%;border:3.5px solid #fff;display:flex;align-items:center;justify-content:center}
.marca .mark i{width:12px;height:12px;border-radius:50%;background:var(--naranja)}
.marca strong{font-family:var(--font-d);color:#fff;font-size:16px;font-weight:600}
.marca span{display:block;font-size:11.5px;color:#8FA6C4;letter-spacing:.06em}
.btn-panel{background:rgba(255,255,255,.08);color:#DCE6F4;border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:9px 16px;font-size:13.5px;font-weight:600;transition:background .2s}
.btn-panel:hover{background:rgba(255,255,255,.16)}

.escenario{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
.tarjeta{background:var(--blanco);border-radius:24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);width:min(440px,100%);overflow:hidden}
.cabecera-t{text-align:center;padding:26px 26px 0}
.cabecera-t .fecha{font-size:13.5px;color:var(--gris);text-transform:capitalize}
.cabecera-t .reloj{font-family:var(--font-d);font-size:52px;font-weight:600;letter-spacing:-.02em;line-height:1.05;color:var(--ink)}
.cabecera-t .reloj small{font-size:22px;color:#A6B0BD;font-weight:500}

.vista{padding:20px 30px 30px}
.oculto{display:none !important}

.msg-pin{text-align:center;font-size:14.5px;color:var(--gris);margin-bottom:14px;min-height:22px}
.msg-pin.error{color:#C0362C;font-weight:600}
.puntos{display:flex;justify-content:center;gap:12px;margin-bottom:20px}
.puntos i{width:13px;height:13px;border-radius:50%;border:2px solid #C4CCD6;transition:all .15s}
.puntos i.lleno{background:var(--azul);border-color:var(--azul);transform:scale(1.1)}
.puntos.tiembla{animation:tiembla .35s}
@keyframes tiembla{25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;max-width:290px;margin:0 auto}
.pad button{font-size:22px;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 0;transition:background .12s, transform .1s}
.pad button:hover{background:#E9EFF7}
.pad button:active{transform:scale(.94)}
.pad .util{font-size:14px;font-weight:600;color:var(--gris)}
.pista{font-size:12px;color:#A6B0BD;text-align:center;margin-top:16px}

.saludo{text-align:center;margin-bottom:18px}
.avatar-g{width:58px;height:58px;border-radius:50%;background:#EEF4FB;color:var(--azul);font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.saludo strong{font-family:var(--font-d);font-size:21px;font-weight:600;display:block}
.saludo span{font-size:13.5px;color:var(--gris)}
.estado-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:5px 13px;border-radius:99px;margin-top:9px}
.estado-chip.dentro{background:var(--verde-bg);color:var(--verde)}
.estado-chip.fuera{background:#F1F3F6;color:var(--gris)}
.estado-chip.pausa{background:#FDF3E3;color:#9A6A0B}
.estado-chip i{width:8px;height:8px;border-radius:50%;background:currentColor}
.acciones{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.acciones button{border-radius:14px;padding:17px 8px;font-size:15.5px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:7px;transition:transform .1s, opacity .2s}
.acciones button:active{transform:scale(.96)}
.acciones button:disabled{opacity:.35;cursor:not-allowed}
.acciones svg{width:22px;height:22px}
.b-entrada{background:var(--azul);color:#fff}
.b-salida{background:var(--naranja);color:#fff}
.b-pausa{background:var(--paper);color:var(--ink);border:1.5px solid var(--line)}
.cancelar{display:block;margin:18px auto 0;background:none;color:var(--gris);font-size:13.5px;font-weight:600}
.cancelar:hover{color:var(--ink)}

.confirmacion{text-align:center;padding:14px 0 6px}
.check-anim{width:76px;height:76px;border-radius:50%;background:var(--verde-bg);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.check-anim svg{width:38px;height:38px;stroke:var(--verde);stroke-width:2.6}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.confirmacion strong{font-family:var(--font-d);font-size:22px;font-weight:600;display:block;margin-bottom:4px}
.confirmacion p{color:var(--gris);font-size:15px}
.confirmacion .hora-g{font-family:var(--font-d);font-size:34px;font-weight:600;color:var(--azul);margin-top:10px}

.pie{position:relative;z-index:2;text-align:center;color:#7E92AC;font-size:12.5px;padding:14px}

/* ---------- Panel ---------- */
.panel{position:relative;z-index:2;flex:1;padding:10px 28px 40px;display:none}
.panel.activo{display:block}
.panel-caja{background:var(--blanco);border-radius:20px;max-width:960px;margin:0 auto;padding:30px 34px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.panel-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.panel-cab h1{font-family:var(--font-d);font-size:23px;font-weight:600}
.panel-cab p{font-size:13.5px;color:var(--gris)}
.panel-cab .der{display:flex;gap:10px;flex-wrap:wrap}
.btn-informe{background:var(--azul);color:#fff;border-radius:11px;padding:11px 18px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.btn-informe:hover{background:#16428A}
.btn-informe svg{width:16px;height:16px}
.btn-sec{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:11px;padding:11px 18px;font-size:14px;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.kpi{background:var(--paper);border-radius:14px;padding:16px 18px}
.kpi span{font-size:12.5px;color:var(--gris);display:block}
.kpi strong{font-family:var(--font-d);font-size:24px;font-weight:600;color:var(--azul)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#8B94A1;font-weight:600;padding:10px 12px;border-bottom:1.5px solid var(--line)}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td .nom{font-weight:600}
td .reg{display:inline-flex;align-items:center;gap:5px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:3px 9px;margin:2px 4px 2px 0;font-size:12.5px;white-space:nowrap}
td .reg i{width:7px;height:7px;border-radius:50%}
.i-ent{background:var(--azul)} .i-sal{background:var(--naranja)} .i-pau{background:#C9A227}
.total-h{font-weight:700;color:var(--ink);white-space:nowrap}
.alerta{color:#C0362C;font-size:12.5px;font-weight:600}
.vacio{color:#A6B0BD;font-size:13px}
.nota-legal{margin-top:18px;font-size:12px;color:#8B94A1;display:flex;gap:8px;align-items:flex-start}
.nota-legal svg{width:15px;height:15px;stroke:#8B94A1;flex-shrink:0;margin-top:1px}

/* ---------- Impresión: informe para inspección ---------- */
.solo-print{display:none}
@media print{
  body{background:#fff;display:block}
  .barra,.escenario,.pie,.fondo-anillos,.panel-cab .der,.kpis,.nota-legal{display:none !important}
  .panel{display:block !important;padding:0}
  .panel-caja{box-shadow:none;border-radius:0;padding:0;max-width:none}
  .solo-print{display:block;margin-bottom:18px}
  .solo-print h1{font-family:var(--font-d);font-size:20px;margin-bottom:2px}
  .solo-print p{font-size:12px;color:#444}
  .solo-print .firmas{display:flex;gap:60px;margin-top:0}
  .print-firmas{display:flex;gap:80px;margin-top:50px}
  .print-firmas div{flex:1;border-top:1px solid #000;padding-top:6px;font-size:12px}
  table{font-size:12px}
}
@media (max-width:560px){
  .kpis{grid-template-columns:1fr}
  .panel{padding:10px 14px 30px}
  .panel-caja{padding:22px 18px}
  .cabecera-t .reloj{font-size:44px}
  .barra{padding:14px 16px}
}

/* ---------- Acceso al panel ---------- */
.acceso-caja{background:var(--blanco);border-radius:22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);width:min(400px,100%);padding:38px 34px;text-align:center}
.acceso-caja h1{font-family:var(--font-d);font-size:22px;font-weight:600;margin-bottom:6px}
.acceso-caja p{font-size:14px;color:var(--gris);margin-bottom:20px}
.acceso-caja input{width:100%;font-family:var(--font-b);font-size:22px;letter-spacing:.4em;text-align:center;border:1.5px solid var(--line);border-radius:12px;padding:13px;margin-bottom:14px}
.acceso-caja input:focus{outline:none;border-color:var(--azul)}
.acceso-caja .error{color:#C0362C;font-size:13.5px;font-weight:600;margin:-6px 0 12px}
.acceso-caja button{width:100%;background:var(--azul);color:#fff;border-radius:12px;padding:13px;font-size:15px;font-weight:700}
.acceso-caja button:hover{background:#16428A}
.panel-herr{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.panel-herr input[type=date]{font-family:var(--font-b);font-size:13.5px;border:1px solid var(--line);border-radius:10px;padding:9px 12px}

/* ---------- Gestión de empleados ---------- */
.flash-ok{background:var(--verde-bg);border:1px solid #BFE3CA;color:#1F6B3A;border-radius:11px;padding:12px 16px;font-size:14px;font-weight:600;margin-bottom:18px}
.flash-error{background:#FCEBEB;border:1px solid #F7C1C1;color:#A32D2D;border-radius:11px;padding:12px 16px;font-size:14px;font-weight:600;margin-bottom:18px}
.form-emp{display:grid;grid-template-columns:2fr 1.6fr .8fr .9fr auto;gap:10px;align-items:end;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:24px}
.form-emp label{display:block;font-size:12px;font-weight:600;color:var(--gris);margin-bottom:5px}
.form-emp input{width:100%;font-family:var(--font-b);font-size:14px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--blanco)}
.form-emp input:focus{outline:none;border-color:var(--azul)}
.form-emp .btn-informe{padding:11px 20px;white-space:nowrap}
.fila-edit{display:grid;grid-template-columns:2fr 1.6fr .8fr .9fr auto auto;gap:8px;align-items:center}
.fila-edit input{width:100%;font-family:var(--font-b);font-size:13.5px;border:1.5px solid var(--line);border-radius:9px;padding:8px 10px}
.fila-edit input:focus{outline:none;border-color:var(--azul)}
.btn-mini{border-radius:9px;padding:9px 14px;font-size:13px;font-weight:600;white-space:nowrap}
.btn-mini.guardar{background:var(--azul);color:#fff}
.btn-mini.guardar:hover{background:#16428A}
.btn-mini.baja{background:#FCEBEB;color:#A32D2D}
.btn-mini.alta{background:var(--verde-bg);color:#1F6B3A}
.emp-inactivo{opacity:.55}
.emp-inactivo .nom::after{content:" · inactivo";color:#A32D2D;font-size:12px;font-weight:600}
@media (max-width:880px){.form-emp,.fila-edit{grid-template-columns:1fr 1fr}}

/* ---------- Informe por rango ---------- */
.filtros{display:grid;grid-template-columns:auto auto auto 1fr auto auto;gap:10px;align-items:end;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:22px}
.filtros label{display:block;font-size:12px;font-weight:600;color:var(--gris);margin-bottom:5px}
.filtros input,.filtros select{font-family:var(--font-b);font-size:14px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--blanco)}
.filtros input:focus,.filtros select:focus{outline:none;border-color:var(--azul)}
.atajos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.atajos a{font-size:12.5px;font-weight:600;color:var(--azul);background:#EEF4FB;border-radius:99px;padding:6px 14px;text-decoration:none}
.atajos a:hover{background:#DDE9F7}
.bloque-emp{margin-bottom:34px;page-break-inside:auto}
.cab-emp{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--navy);padding-bottom:10px;margin-bottom:12px}
.cab-emp h2{font-family:var(--font-d);font-size:18px;font-weight:600}
.cab-emp .datos{font-size:12.5px;color:var(--gris);line-height:1.6}
.cab-emp .resumen{text-align:right;font-size:12.5px;color:var(--gris)}
.cab-emp .resumen strong{display:block;font-family:var(--font-d);font-size:20px;color:var(--azul)}
table.dias{font-size:13px}
table.dias td,table.dias th{padding:7px 10px}
table.dias tr.finde{background:#FAFBFC;color:#8B94A1}
table.dias tr.incidencia td{background:#FDF0EF}
table.dias .just{color:#1F6B3A;font-weight:600}
table.dias .alerta-txt{color:#C0362C;font-weight:600}
.tot-fila{font-weight:700;background:var(--paper)}
@media print{
  .filtros,.atajos,.panel-cab .der,.kpis,.nota-legal{display:none !important}
  .bloque-emp{page-break-after:always}
  .bloque-emp:last-child{page-break-after:auto}
  table.dias{font-size:10.5px}
  table.dias td,table.dias th{padding:4px 6px}
  .print-firmas{margin-top:34px}
}
@media (max-width:880px){.filtros{grid-template-columns:1fr 1fr}}

/* ---------- Calendario de jornada ---------- */
.cal-resumen{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}
.cal-resumen .kpi strong{font-size:20px}
.cal-resumen .kpi-alerta strong{color:#C0362C}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.cal-nav h2{font-family:var(--font-d);font-size:20px;font-weight:600;text-transform:capitalize}
.cal-nav .flechas{display:flex;gap:8px;align-items:center}
.cal-nav a.mes{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none}
.cal-nav a.mes:hover{background:#E9EFF7}
.calendario{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--blanco)}
.cal-cabecera{display:grid;grid-template-columns:repeat(7,1fr);background:var(--paper);border-bottom:1px solid var(--line)}
.cal-cabecera span{padding:9px 6px;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:#8B94A1}
.cal-semana{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.cal-semana:last-child{border-bottom:0}
.cal-dia{min-height:86px;border-right:1px solid var(--line);padding:7px 8px;display:flex;flex-direction:column;gap:2px;position:relative;background:var(--blanco)}
.cal-dia:last-child{border-right:0}
.cal-dia.vacio{background:#FBFCFD}
.cal-dia .num{font-family:var(--font-d);font-size:13px;font-weight:600;color:#8B94A1}
.cal-dia .horas{font-family:var(--font-d);font-size:17px;font-weight:600;color:var(--azul);line-height:1.15}
.cal-dia .tramo{font-size:11px;color:var(--gris)}
.cal-dia .marca{font-size:11px;font-weight:600;line-height:1.3;margin-top:auto}
.cal-dia.hoy{box-shadow:inset 0 0 0 2px var(--azul)}
.cal-dia.hoy .num{color:var(--azul)}
.cal-dia.futuro{background:#FCFDFE}
.cal-dia.futuro .num{color:#C4CCD6}
.cal-dia.e-trabajado{background:#F5F9FE}
.cal-dia.e-vacaciones{background:#EAF6EE}
.cal-dia.e-vacaciones .marca{color:#1F6B3A}
.cal-dia.e-baja{background:#FDF3E3}
.cal-dia.e-baja .marca{color:#9A6A0B}
.cal-dia.e-permiso,.cal-dia.e-libranza{background:#EEF4FB}
.cal-dia.e-permiso .marca,.cal-dia.e-libranza .marca{color:var(--azul)}
.cal-dia.e-festivo,.cal-dia.e-cerrado{background:#F4F6F8}
.cal-dia.e-festivo .marca,.cal-dia.e-cerrado .marca{color:#8B94A1}
.cal-dia.alerta{background:#FDF0EF}
.cal-dia.alerta .marca{color:#C0362C}
.cal-leyenda{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--gris)}
.cal-leyenda span{display:inline-flex;align-items:center;gap:7px}
.cal-leyenda i{width:13px;height:13px;border-radius:4px;border:1px solid rgba(0,0,0,.06);display:inline-block}
.cal-leyenda .p-trabajado{background:#F5F9FE;border-color:#C6DBF5}
.cal-leyenda .p-vacaciones{background:#EAF6EE;border-color:#BFE3CA}
.cal-leyenda .p-baja{background:#FDF3E3;border-color:#F0DAA8}
.cal-leyenda .p-permiso{background:#EEF4FB;border-color:#CFDCEE}
.cal-leyenda .p-festivo{background:#F4F6F8;border-color:#DDE2E8}
.cal-leyenda .p-alerta{background:#FDF0EF;border-color:#F3C9C4}
@media print{
  .cal-nav .flechas,.cal-nav form{display:none !important}
  .calendario{page-break-inside:avoid}
  .cal-dia{min-height:66px}
}
@media (max-width:880px){
  .cal-resumen{grid-template-columns:repeat(2,1fr)}
  .cal-dia{min-height:64px;padding:5px}
  .cal-dia .horas{font-size:14px}
  .cal-dia .tramo{display:none}
  .cal-dia .marca{font-size:9.5px}
}