/* ============================================================
   GIR EMPLEADOS · sistema visual corporativo
   Paleta: negro · gris grafito · blanco · naranja Grupo Illescas
   ============================================================ */
:root{
  --negro:#0a0d11; --negro-2:#0e1218; --grafito:#161b22; --grafito-2:#1d232c;
  --grafito-3:#262d38; --linea:rgba(255,255,255,.09); --linea-2:rgba(255,255,255,.14);
  --texto:#eef2f7; --tenue:#9aa6b4; --tenue-2:#6b7585;
  --naranja:#ff7a1a; --naranja-2:#fe6d00; --naranja-osc:#d85d00; --naranja-cl:#ffb070;
  --glow:rgba(255,122,26,.45); --glow-2:rgba(255,122,26,.22);
  --verde:#34c759; --rojo:#ff5a4d; --azul:#3b82f6;
  --r:16px; --r-2:20px;
  --sombra:0 10px 34px rgba(0,0,0,.45);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* 'manipulation' evita el zoom por doble toque al pulsar rápido (p. ej. el teclado del PIN);
   el desplazamiento y el pellizco para ampliar siguen funcionando. */
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(255,122,26,.10), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(255,122,26,.05), transparent 55%),
    linear-gradient(180deg,#0c1016 0%, var(--negro) 60%);
  color:var(--texto);min-height:100dvh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen{min-height:100dvh;display:flex;flex-direction:column}
.hidden{display:none!important}
h1,h2,h3{letter-spacing:.2px}

/* ---------- fondo real de obra (pantalla de fichar) ---------- */
.fondo-obra{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(10,13,17,.42) 0%, rgba(10,13,17,.62) 45%, rgba(10,13,17,.9) 80%, var(--negro) 100%),
    radial-gradient(130% 70% at 50% 34%, transparent 0%, rgba(10,13,17,.35) 70%),
    url("img/fondo-fichar.png") center top / cover no-repeat,
    var(--negro);
}

/* ============================================================
   LOGIN (portada)
   ============================================================ */
#login{align-items:center;justify-content:center;padding:30px 22px;position:relative;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(10,13,17,.62), rgba(10,13,17,.82) 60%, rgba(10,13,17,.95) 100%),
    url("img/fondo-login.png") center / cover no-repeat, var(--negro)}
#login::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(700px 420px at 50% -5%, rgba(255,122,26,.18), transparent 60%)}
.login-card{width:100%;max-width:440px;text-align:center}
.login-logo{width:116px;margin:0 auto 6px;display:block;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
.login-marca{font-size:.72rem;letter-spacing:3px;color:var(--tenue);text-transform:uppercase;margin:4px 0 2px}
.login-card h1{font-size:2rem;margin:.1rem 0 .1rem;font-weight:800;
  background:linear-gradient(90deg,#fff,#ffd9b8);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-marca-linea{width:70px;height:3px;border-radius:3px;margin:12px auto 18px;
  background:linear-gradient(90deg,var(--naranja),var(--naranja-osc))}
.sub{color:var(--tenue);margin:0 0 22px}
.empleados{display:flex;flex-direction:column;gap:12px}
.empleados button{
  display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:14px;width:100%;
  min-height:68px;padding:12px 16px;text-align:left;
  background:linear-gradient(180deg,var(--grafito-2),var(--grafito));
  border:1px solid var(--linea);border-radius:var(--r);cursor:pointer;
  color:var(--texto);transition:transform .08s,border-color .15s;}
.empleados button:hover{border-color:var(--naranja)}
.empleados button:active{transform:scale(.985)}
.empleados .ini{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:1.2rem;background:linear-gradient(135deg,var(--naranja),var(--naranja-osc));
  box-shadow:0 4px 14px var(--glow-2)}
.empleados .nom{text-align:left;font-size:1.05rem;font-weight:600;line-height:1.25;letter-spacing:.2px}
.badge-nuevo{justify-self:end;white-space:nowrap;font-size:.64rem;font-weight:800;color:var(--naranja);
  background:rgba(255,122,26,.12);border:1px solid rgba(255,122,26,.3);padding:5px 10px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.6px}
.nota{color:var(--tenue-2);font-size:.78rem;margin-top:22px}

/* ============================================================
   PIN
   ============================================================ */
.top{display:flex;align-items:center;gap:12px;padding:16px 18px}
.salir{min-width:52px;height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--linea-2);
  background:var(--grafito);color:var(--texto);font-size:1.05rem;font-weight:700;cursor:pointer;display:inline-grid;place-items:center;white-space:nowrap}
.salir:active{transform:scale(.95)}
.quien{display:flex;flex-direction:column;line-height:1.2}
.quien strong{font-size:1rem}
.fecha{font-size:.8rem;color:var(--tenue);text-transform:capitalize}
.pin-wrap{flex:1;display:flex;flex-direction:column;align-items:center;padding:14px 18px 28px;gap:8px}
.ini-grande{width:70px;height:70px;border-radius:20px;background:linear-gradient(135deg,var(--naranja),var(--naranja-osc));
  color:#fff;font-size:1.9rem;font-weight:800;display:grid;place-items:center;margin-top:6px;box-shadow:0 8px 24px var(--glow-2)}
.pin-wrap h2{margin:12px 0 2px;font-size:1.35rem}
.dots{display:flex;gap:14px;margin:16px 0}
.dots .dot{width:15px;height:15px;border-radius:50%;background:transparent;border:2px solid var(--linea-2);transition:.15s}
.dots .dot.on{background:var(--naranja);border-color:var(--naranja);box-shadow:0 0 12px var(--glow)}
.pin-error{color:var(--rojo);font-size:.9rem;min-height:1.2em;margin:2px 0}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:300px;margin-top:6px}
.keypad button{height:66px;border-radius:16px;border:1px solid var(--linea);
  background:linear-gradient(180deg,var(--grafito-2),var(--grafito));color:var(--texto);
  font-size:1.5rem;font-weight:700;cursor:pointer;transition:transform .07s}
.keypad button:active{transform:scale(.94);border-color:var(--naranja)}
.keypad .ok{background:linear-gradient(135deg,var(--naranja),var(--naranja-osc));border:none;color:#fff;font-size:1.05rem;box-shadow:0 6px 18px var(--glow-2)}
.keypad .vacia{visibility:hidden}

/* ============================================================
   CHROME DE APP (cabecera + navegación)  — pantallas internas
   ============================================================ */
.appbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px 10px;position:relative;z-index:2}
.marca{display:flex;align-items:center;gap:12px;min-width:0}
.marca-logo{height:40px;width:auto;flex:0 0 auto}
.marca-txt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.marca-txt b{font-size:1.02rem;letter-spacing:1px;white-space:nowrap}
.marca-txt span{font-size:.62rem;letter-spacing:2.5px;color:var(--tenue);white-space:nowrap}
.app-nombre{display:flex;align-items:center;gap:10px;color:var(--texto)}
.app-nombre .ic{width:30px;height:30px;color:var(--naranja)}
.app-nombre b{font-size:1.25rem;font-weight:700;background:linear-gradient(90deg,#fff,#cfe0f5);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.navbar{display:flex;align-items:center;gap:4px;margin:4px 14px 0;padding:8px 8px;
  background:linear-gradient(180deg,rgba(29,35,44,.92),rgba(18,22,28,.92));
  border:1px solid var(--linea);border-radius:18px;position:relative;z-index:2;
  overflow-x:auto;scrollbar-width:none;backdrop-filter:blur(6px)}
.navbar::-webkit-scrollbar{display:none}
.nav-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 14px;border-radius:13px;color:var(--tenue);text-decoration:none;cursor:pointer;
  font-size:.74rem;font-weight:600;position:relative;transition:color .15s,background .15s;min-width:62px}
.nav-item .ic{width:24px;height:24px}
.nav-item:hover{color:var(--texto)}
.nav-item.activo{color:var(--naranja);background:rgba(255,122,26,.1)}
.nav-item.activo::after{content:"";position:absolute;bottom:2px;left:22%;right:22%;height:3px;border-radius:3px;
  background:var(--naranja);box-shadow:0 0 10px var(--glow)}
.nav-item .badge{position:absolute;top:5px;right:12px;width:14px;height:14px;border-radius:50%;
  background:var(--naranja);color:#fff;font-size:.6rem;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--negro-2)}
.nav-sep{flex:1}
.nav-perfil{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  color:var(--texto);border:1px solid var(--linea-2);background:var(--grafito-2);text-decoration:none;margin-left:2px}
.nav-perfil .ic{width:22px;height:22px}
.nav-salir{flex:0 0 auto;min-height:48px;padding:0 20px;border-radius:24px;border:1px solid var(--linea-2);
  background:var(--grafito-2);color:var(--texto);font-size:1rem;font-weight:700;cursor:pointer;letter-spacing:.2px;white-space:nowrap}
.nav-salir:active{transform:scale(.96)}

/* ============================================================
   FICHAR (home)
   ============================================================ */
#fichar{position:relative}
.centro{flex:1;display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:22px 18px 40px;max-width:760px;width:100%;margin:0 auto;position:relative;z-index:1}
.saludo{font-size:.9rem;color:var(--tenue);margin:2px 0 -4px}
.saludo b{color:var(--texto)}

/* Ánimo del día: mano "de Dios" + mensaje positivo */
.animo{display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;border-radius:var(--r);
  background:linear-gradient(100deg, rgba(255,122,26,.16), rgba(29,35,44,.85) 60%);
  border:1px solid rgba(255,122,26,.35);box-shadow:0 8px 26px rgba(255,122,26,.12)}
.animo-mano{width:104px;height:76px;flex:0 0 auto;filter:drop-shadow(0 0 10px var(--glow-2))}
.animo-txt{display:flex;flex-direction:column;line-height:1.3}
.animo-txt b{font-size:1.05rem;color:#fff}
.animo-txt span{font-size:.82rem;color:var(--tenue)}
.animo-txt i{color:var(--naranja-cl);font-style:normal;font-weight:700}
@media(max-width:420px){.animo-mano{width:74px;height:56px}.animo-txt b{font-size:.98rem}}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:999px;
  font-weight:800;letter-spacing:1px;font-size:1rem;border:2px solid var(--naranja);color:var(--naranja);
  background:rgba(255,122,26,.08);text-transform:uppercase}
.pill.en_jornada{border-color:var(--verde);color:var(--verde);background:rgba(52,199,89,.1)}
.pill.en_pausa{border-color:var(--naranja);color:var(--naranja-cl)}
.pill.finalizada{border-color:var(--tenue-2);color:var(--tenue)}
.pill.sin_iniciar{border-color:var(--linea-2);color:var(--tenue)}

.reloj-wrap{position:relative;display:grid;place-items:center;width:100%;padding:14px 0}
.reloj-wrap .aro{position:absolute;width:330px;max-width:86vw;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 210deg, transparent 0deg, var(--naranja) 120deg, transparent 240deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  opacity:.55;filter:drop-shadow(0 0 14px var(--glow))}
.reloj{font-variant-numeric:tabular-nums;font-weight:800;font-size:clamp(3.2rem,16vw,5rem);
  letter-spacing:2px;text-shadow:0 0 22px rgba(255,255,255,.15);line-height:1}

.resumen{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
.dato{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(29,35,44,.85),rgba(18,22,28,.8));border:1px solid var(--linea)}
.dato .ic{width:34px;height:34px;color:var(--tenue);flex:0 0 auto}
.dato .col{display:flex;flex-direction:column;line-height:1.15}
.dato .n{font-size:1.5rem;font-weight:800}
.dato .l{font-size:.82rem;color:var(--tenue)}

.aviso{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r);
  background:rgba(255,122,26,.1);border:1px solid rgba(255,122,26,.35);border-left:4px solid var(--naranja);
  color:var(--texto);font-size:.95rem}
.aviso b,.aviso strong{color:var(--naranja-cl)}

/* Ajuste de jornada propuesto por dirección: lo autoriza el trabajador */
.ajustes{width:100%;display:flex;flex-direction:column;gap:12px}
.ajuste-card{border-radius:var(--r);padding:16px;border:1px solid rgba(255,122,26,.45);
  background:linear-gradient(180deg,rgba(255,122,26,.14),rgba(29,35,44,.9));box-shadow:0 8px 26px rgba(255,122,26,.14)}
.ajuste-cab{font-weight:700}
.ajuste-cab b{color:var(--naranja-cl)}
.ajuste-lista{margin:8px 0;padding-left:20px}
.ajuste-lista li{margin:3px 0}
.ajuste-nota{font-size:.85rem;color:var(--tenue);margin:6px 0 12px}
.ajuste-nota b{color:var(--texto)}
.ajuste-acc{display:flex;gap:10px;justify-content:flex-end}

.botones{display:grid;grid-template-columns:1fr;gap:14px;width:100%}
.botones.dos{grid-template-columns:1fr 1fr}
.fbtn{display:flex;align-items:center;justify-content:center;gap:12px;height:76px;border:none;border-radius:var(--r-2);
  font-size:1.25rem;font-weight:800;color:#fff;cursor:pointer;transition:transform .08s,box-shadow .2s;letter-spacing:.5px}
.fbtn .ic{font-size:1.4rem}
.fbtn:active{transform:scale(.98)}
.fbtn.entrada,.fbtn.reanudar{background:linear-gradient(135deg,var(--naranja),var(--naranja-osc));
  box-shadow:0 10px 30px var(--glow),inset 0 1px 0 rgba(255,255,255,.25)}
.fbtn.salida{background:linear-gradient(135deg,#ff6a5a,#d6392b);box-shadow:0 10px 30px rgba(214,57,43,.35)}
.fbtn.pausa{background:linear-gradient(135deg,var(--grafito-3),var(--grafito));border:1px solid var(--linea-2);
  box-shadow:0 8px 22px rgba(0,0,0,.4)}
.fin-msg{grid-column:1/-1;text-align:center;padding:20px;border-radius:var(--r);
  background:rgba(52,199,89,.1);border:1px solid rgba(52,199,89,.3);color:#b7f7cd;font-weight:700}

.marcas{width:100%;margin-top:4px}
.marcas h2{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--tenue);
  text-transform:uppercase;letter-spacing:1.5px;margin:0 0 12px}
.marcas h2 .ic{width:18px;height:18px;color:var(--naranja)}
#marcas-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#marcas-lista li{display:flex;align-items:center;gap:12px;padding:15px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(29,35,44,.7),rgba(18,22,28,.7));border:1px solid var(--linea);font-weight:600}
#marcas-lista li .hora{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800}
#marcas-lista li.vacio{justify-content:center;color:var(--tenue);font-weight:500}
.punto{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:var(--tenue)}
.punto.ENTRADA{background:var(--verde);box-shadow:0 0 10px rgba(52,199,89,.6)}
.punto.SALIDA{background:var(--rojo)}
.punto.PAUSA_INICIO{background:var(--naranja)}
.punto.PAUSA_FIN{background:var(--azul)}

/* ============================================================
   CONTENIDO INTERNO (portal / fotos / panel) sobre tema oscuro
   ============================================================ */
main{position:relative;z-index:1}
.vacio{color:var(--tenue);text-align:center;padding:16px}
.chip-nav{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;font-size:1.3rem;
  text-decoration:none;color:var(--texto);border:1px solid var(--linea);background:var(--grafito)}
.chip-nav.panel{width:auto;height:44px;padding:0 16px;font-size:.92rem;font-weight:700;color:var(--naranja);
  border-color:rgba(255,122,26,.4)}

/* tarjetas y filas genéricas */
.card,.obra,.doc-row,.foto-card,#marcas-lista li{color:var(--texto)}
.obra{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r);
  background:linear-gradient(180deg,var(--grafito-2),var(--grafito));border:1px solid var(--linea)}
.obra-ic{font-size:1.8rem}
.obra-nombre{font-weight:800;font-size:1.05rem}
.obra-dir{color:var(--tenue);font-size:.88rem}
.obra-cod{display:inline-block;margin-top:4px;font-size:.72rem;font-weight:700;color:var(--naranja);
  background:rgba(255,122,26,.12);border:1px solid rgba(255,122,26,.3);padding:2px 8px;border-radius:8px}

.doc-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(29,35,44,.8),rgba(18,22,28,.8));border:1px solid var(--linea);
  cursor:pointer;color:var(--texto);text-align:left;font-size:1rem}
.doc-row.pend{border-color:rgba(255,122,26,.45)}
.doc-ic{font-size:1.4rem}
.doc-info{display:flex;flex-direction:column;flex:1}
.doc-tit{font-weight:700}
.doc-fec{font-size:.8rem;color:var(--tenue)}
.doc-ver{color:var(--naranja);font-weight:700}
.doc-ok{color:var(--verde);font-weight:700;font-size:.85rem}
.doc-pend{color:var(--naranja);font-weight:700;font-size:.85rem}
.doc-cuerpo{line-height:1.5;color:var(--texto)}

h2{color:var(--texto)}
.p-head,.sec-tit{color:var(--texto)}

/* nómina */
.nom-hero{border-radius:var(--r-2);padding:22px;text-align:center;
  background:linear-gradient(135deg,var(--naranja),var(--naranja-osc));color:#fff;box-shadow:0 12px 30px var(--glow-2)}
.nom-hero-l{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:2px;opacity:.9}
.nom-hero-n{display:block;font-size:2.6rem;font-weight:800;margin:4px 0}
.nom-hero-sub{display:block;opacity:.95}
.nom-desc{display:flex;flex-direction:column;gap:2px;margin:16px 0}
.nom-row{padding:12px 4px;border-bottom:1px solid var(--linea)}
.nom-top{display:flex;justify-content:space-between;gap:12px;font-weight:700}
.nom-top i{color:var(--tenue);font-weight:600;font-style:normal}
.nom-exp{font-size:.82rem;color:var(--tenue);margin-top:3px}
.nom-row.neg .nom-top b{color:var(--naranja-cl)}
.nom-row.base{background:rgba(255,255,255,.03)}
.nom-row.neto-fila .nom-top{font-size:1.15rem}
.nom-row.neto-fila .nom-top b{color:var(--verde)}
.nom-dia{margin-top:12px;border-radius:var(--r);padding:18px;background:var(--negro-2);border:1px solid var(--linea-2)}
.nom-dia-top{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.nom-dia-top b{font-size:1.9rem;color:var(--naranja)}
.nom-dia-exp{font-size:.85rem;color:var(--tenue);margin:8px 0}
.nom-dia-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.nom-dia-sub span{display:flex;flex-direction:column;font-size:.72rem;color:var(--tenue);
  background:var(--grafito);border:1px solid var(--linea);border-radius:10px;padding:8px}
.nom-dia-sub b{color:var(--texto);font-size:.95rem}
.m-nota{color:var(--tenue);font-size:.82rem;text-align:center;margin-top:10px}
.m-nota.ok{color:var(--verde)}
.m-aviso{color:var(--naranja-cl);font-size:.9rem}

/* botones genéricos */
.btn-pri{background:linear-gradient(135deg,var(--naranja),var(--naranja-osc));color:#fff;border:none;
  padding:13px 20px;border-radius:12px;font-weight:700;cursor:pointer;font-size:1rem}
.btn-sec{background:var(--grafito-2);color:var(--texto);border:1px solid var(--linea-2);
  padding:13px 20px;border-radius:12px;font-weight:700;cursor:pointer;font-size:1rem}
.btn-sec.danger{color:var(--rojo);border-color:rgba(255,90,77,.4)}

/* fotos */
.foto-card{position:relative;border:1px solid var(--linea);border-radius:14px;overflow:hidden;
  background:var(--grafito);cursor:pointer;aspect-ratio:1;padding:0}
.foto-card img{width:100%;height:100%;object-fit:cover;display:block}
.foto-cap{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-size:.8rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.8))}
.badge-informe{position:absolute;top:8px;left:8px;background:var(--naranja);color:#fff;font-size:.66rem;
  font-weight:800;padding:3px 8px;border-radius:8px;text-transform:uppercase}

/* panel encargado/dirección */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.chips .chip{padding:14px;border-radius:14px;text-align:center;background:var(--grafito-2);border:1px solid var(--linea)}
.chips .chip .num{display:block;font-size:1.6rem;font-weight:800;color:var(--naranja)}
.chips .chip .txt{font-size:.74rem;color:var(--tenue)}
.inc-tipo{font-weight:800;color:var(--naranja);font-size:.8rem}
.inc-nom{color:var(--texto)}
.inc-det{color:var(--tenue);font-size:.85rem}
.chips .chip.en_jornada .num{color:var(--verde)}
.chips .chip.en_pausa .num{color:var(--naranja)}
.chips .chip.finalizada .num{color:var(--tenue)}
.chips .chip.sin_iniciar .num{color:var(--rojo)}

/* panel de dirección: secciones y tarjetas de equipo */
.centro.enc{gap:22px}
.seccion{width:100%}
.seccion h2{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--tenue);
  text-transform:uppercase;letter-spacing:1.5px;margin:0 0 12px}
.lista-enc{display:flex;flex-direction:column;gap:12px}
.cargando{color:var(--tenue);text-align:center;padding:18px}
.enc-card{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:14px;
  background:linear-gradient(180deg,var(--grafito-2),var(--grafito));border:1px solid var(--linea)}
.enc-card.alerta{border-color:rgba(255,122,26,.5);background:linear-gradient(180deg,rgba(255,122,26,.08),var(--grafito))}
.enc-card .ini{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:1.1rem;background:linear-gradient(135deg,var(--naranja),var(--naranja-osc))}
.enc-card .info{flex:1;min-width:0}
.enc-card .linea1{font-size:1.02rem;display:flex;align-items:center;gap:8px}
.enc-card .linea2{font-size:.85rem;color:var(--tenue);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.enc-card .linea2 .pill{font-size:.72rem;padding:3px 10px;border-width:1px}
.enc-card .linea3.desv{font-size:.8rem;color:var(--naranja-cl);margin-top:4px}
.enc-card .sep{opacity:.4}
.enc-card .acc{display:flex;flex-direction:column;gap:6px}
.tag-olvido{font-size:.66rem;font-weight:800;color:var(--rojo);background:rgba(255,90,77,.12);
  border:1px solid rgba(255,90,77,.35);padding:2px 8px;border-radius:999px;text-transform:uppercase}
.cerrar-btn,.horario-btn{border:1px solid var(--linea-2);background:var(--grafito-3);color:var(--texto);
  padding:8px 12px;border-radius:10px;font-weight:700;font-size:.82rem;cursor:pointer;white-space:nowrap}
.cerrar-btn{border-color:rgba(255,122,26,.45);color:var(--naranja)}
.inc-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.inc-lista li{display:flex;gap:8px;align-items:baseline;padding:12px 14px;border-radius:12px;
  background:var(--grafito-2);border:1px solid var(--linea);flex-wrap:wrap}
.refrescar{width:100%;background:var(--grafito-2);border:1px solid var(--linea-2);color:var(--texto);
  padding:14px;border-radius:12px;font-weight:700;cursor:pointer}
.pie{padding:18px;text-align:center;color:var(--tenue-2);font-size:.8rem}

/* Trabajadores (gestión de plantilla) */
.sec-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sec-cab h2{margin:0}
.btn-add{padding:10px 16px;font-size:.9rem;border-radius:12px}
.trab-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(180deg,var(--grafito-2),var(--grafito));border:1px solid var(--linea)}
.trab-row.baja{opacity:.55}
.trab-row .ini{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;
  color:#fff;font-weight:800;background:linear-gradient(135deg,var(--naranja),var(--naranja-osc))}
.trab-info{flex:1;min-width:0}
.trab-nom{font-size:1.02rem}
.trab-meta{font-size:.8rem;color:var(--tenue);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chip-rol{font-weight:700;color:var(--naranja);background:rgba(255,122,26,.12);
  border:1px solid rgba(255,122,26,.3);padding:1px 8px;border-radius:8px;font-size:.72rem}
.trab-pin{color:var(--tenue)} .trab-pin.ok{color:var(--verde)}
.trab-baja{font-size:.66rem;font-weight:800;color:var(--rojo);background:rgba(255,90,77,.12);
  border:1px solid rgba(255,90,77,.35);padding:2px 8px;border-radius:999px;text-transform:uppercase}
.trab-acc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.trab-rol-sel,.modal select{background:var(--negro-2);border:1px solid var(--linea-2);border-radius:10px;
  padding:9px 10px;color:var(--texto);font-size:.85rem;font-weight:600}
.trab-acc .btn-sec{padding:8px 12px;font-size:.82rem}
@media(max-width:620px){.trab-row{flex-wrap:wrap}.trab-acc{width:100%;justify-content:flex-start}}

/* Doble factor (MFA) */
.mfa-card{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r);
  background:linear-gradient(180deg,var(--grafito-2),var(--grafito));border:1px solid var(--linea)}
.mfa-ic{font-size:1.9rem;flex:0 0 auto}
.mfa-info{flex:1;min-width:0}
.mfa-estado{font-size:1.02rem}
.mfa-on{color:var(--verde)} .mfa-off{color:var(--naranja-cl)}
.mfa-sub{font-size:.82rem;color:var(--tenue);margin-top:2px}
.mfa-card .btn-pri,.mfa-card .btn-sec{flex:0 0 auto}
.mfa-qr{display:flex;justify-content:center;background:#fff;border-radius:12px;padding:12px;margin:12px 0}
.mfa-qr svg{width:210px;height:210px;max-width:60vw;display:block}
.mfa-key{font-size:.85rem;color:var(--tenue);text-align:center}
.mfa-key code{display:inline-block;margin-top:6px;background:var(--negro-2);border:1px solid var(--linea-2);
  border-radius:8px;padding:8px 12px;color:var(--naranja-cl);font-size:1rem;letter-spacing:2px;word-break:break-all}
.rec-codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.rec-codes span{background:var(--negro-2);border:1px solid var(--linea-2);border-radius:8px;padding:10px;
  text-align:center;font-family:monospace;font-size:1rem;color:var(--texto);letter-spacing:1px}
.mfa-login-input{width:100%;max-width:260px;text-align:center;font-size:1.8rem;letter-spacing:10px;
  padding:14px;border-radius:14px;border:1px solid var(--linea-2);background:var(--negro-2);color:var(--texto);
  font-variant-numeric:tabular-nums}
.mfa-login-go{width:100%;max-width:260px;margin-top:6px}

/* ============================================================
   MODAL (compartido)
   ============================================================ */
#modal,#modal-ver,.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.modal-card,#m-card,.m-card{width:100%;max-width:480px;background:var(--grafito);border:1px solid var(--linea-2);
  border-radius:20px 20px 0 0;padding:20px;max-height:88dvh;overflow:auto}
#m-titulo{margin:0 0 12px;font-size:1.2rem}
#m-botones,.m-botones{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.modal label,.campo{display:flex;flex-direction:column;gap:6px;margin:12px 0;color:var(--tenue);font-size:.85rem}
.modal input[type=time],.modal input[type=text],.campo input{background:var(--negro-2);
  border:1px solid var(--linea-2);border-radius:10px;padding:12px;color:var(--texto);font-size:1rem}
.m-sub{color:var(--tenue);margin:-4px 0 8px}
.ajuste-link{width:100%;background:transparent;border:1px dashed var(--linea-2);color:var(--tenue);
  padding:13px;border-radius:12px;cursor:pointer;font-size:.9rem;font-weight:600;transition:.15s}
.ajuste-link:hover{color:var(--naranja);border-color:rgba(255,122,26,.45)}

/* ============================================================
   TOAST
   ============================================================ */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  background:var(--grafito-3);color:#fff;padding:13px 20px;border-radius:12px;border:1px solid var(--linea-2);
  box-shadow:var(--sombra);font-weight:600;max-width:90vw}
.toast.ok{border-color:rgba(52,199,89,.5)}
.toast.err{border-color:rgba(255,90,77,.5)}

/* ============================================================
   RESPONSIVE (ordenador)
   ============================================================ */
@media(min-width:720px){
  .marca-txt b{font-size:1.1rem}
  .app-nombre b{font-size:1.4rem}
  .reloj{font-size:5.2rem}
}
@media(max-width:520px){
  .marca-txt span{display:none}
  .app-nombre b{font-size:1.05rem}
  .nav-item span{font-size:.68rem}
}

/* ---- Descarga de fichajes (panel dirección) ---- */
.descarga{display:flex;flex-direction:column;gap:12px}
.descarga .campo{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--tenue)}
.descarga select,.descarga input[type=date]{min-height:46px;padding:0 12px;border-radius:12px;
  border:1px solid var(--linea-2);background:var(--grafito-2);color:var(--texto);font-size:1rem}
.dl-fechas{display:flex;gap:12px;flex-wrap:wrap}
.dl-fechas .campo{flex:1 1 140px}
.dl-ubic{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--tenue);line-height:1.3}
.dl-ubic input{width:22px;height:22px;flex:0 0 auto}
.dl-botones{display:flex;gap:12px;flex-wrap:wrap}
.dl-botones .btn-pri,.dl-botones .btn-sec{flex:1 1 160px;min-height:50px;font-size:1rem}
.dl-nota{font-size:.8rem;color:var(--tenue-2);line-height:1.35;margin:2px 0 0}