/* ============================================================
   GRANDI · Sistema de Fichaje — Capa de marca "Pizza & Clásicos"
   Se carga DESPUÉS de Tailwind para complementarlo, no pisarlo.
   ============================================================ */

:root{
  /* ── VERDE · el color de la casa ──────────────────────────
     Manda en el "chrome": header, menú lateral, login. Sale del
     oliva del ampersand del logo (#69815C), bajado a botella. */
  --char-900:#132015;   /* verde tinta, fondo inmersivo */
  --char-800:#1C2D1D;
  --char-700:#2A3D2A;
  --verde:#69815C;      /* el del logo, tal cual */
  --verde-hondo:#3C5132;
  --verde-claro:#9DB693;

  /* ── ROJO · sólo lo que se toca ────────────────────────────
     Botones, la pestaña donde estás, alertas. Nada decorativo:
     si algo está en rojo, es porque hay que apretarlo o mirarlo. */
  --ember-900:#7E0C22;
  --ember-700:#B41234;
  --ember-600:#D3153E;
  --red-600:#B41234;
  --flame:#ED1844;      /* el del logo, tal cual */
  --flame-2:#FF3D66;

  /* ── BLANCO · la superficie de trabajo ─────────────────────
     Papel del manual (#F6F7F7) con una pizca del hue del verde,
     para que no sea el blanco de Excel. */
  --gold:#9DB693;       /* (nombre heredado) hairlines y textos secundarios */
  --gold-soft:#BFCFB7;
  --cream:#F6F7F7;
  --warm-bg:#F1F3EF;
  --tinta:#231F20;

  --fire-grad:linear-gradient(135deg,var(--ember-700) 0%,var(--red-600) 55%,var(--flame) 100%);
  --header-grad:linear-gradient(135deg,#132015 0%,#2C4128 55%,#47603B 100%);

  /* La franja tricolor: el gesto de la casa. Aparece bajo cada header,
     arriba de la tarjeta del login y al pie del menú lateral. Siempre
     3px, siempre en este orden, nunca de adorno en otro lado. */
  --tricolore:linear-gradient(90deg,
    #86A578 0 33.34%, var(--cream) 33.34% 66.67%, var(--flame) 66.67% 100%);

  --shadow-glow:0 10px 40px -8px rgba(237,24,68,.38);
  --ring-ember:0 0 0 1px rgba(157,182,147,.20);

  /* Fraunces: serif de imprenta, con opsz variable. Es la que le da el aire
     de trattoria; la eligio JM sobre Bricolage / Instrument / Space (07/08). */
  --font-display:'Fraunces','Archivo',Georgia,serif;
}

/* ── Tipografía de carácter ──────────────────────────────── */
.font-display{ font-family:var(--font-display); font-weight:600; letter-spacing:-.012em; }
.tracking-brand{ letter-spacing:.11em; }

/* ── Fondos ──────────────────────────────────────────────── */
/* Login: inmersión total en el verde de la casa */
body.grandi-dark{
  background:
    radial-gradient(120% 90% at 50% -10%, #33482F 0%, var(--char-800) 45%, var(--char-900) 100%);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
}

/* App (empleado / dashboard): papel. Es la superficie donde se trabaja
   ocho horas, así que acá el color se calla y manda el contenido. */
body.grandi-warm{
  background:
    radial-gradient(140% 80% at 50% -20%, #FBFCFA 0%, var(--warm-bg) 60%) fixed;
  color:var(--tinta);
  -webkit-font-smoothing:antialiased;
}
/* Marca de agua del isologo en el panel */
body.grandi-warm::before{
  content:""; position:fixed; z-index:-1; pointer-events:none;
  right:-7%; top:50%; transform:translateY(-50%);
  width:min(70vw,460px); height:min(70vw,460px);
  background:url('../logo-watermark.png') no-repeat center / contain;
  opacity:.035;
}

/* ── Harina en el aire ───────────────────────────────────────
   Sobre el verde, unas chispas rojas leerían Navidad. Son motas
   de harina: blanco tenue, subiendo lento. */
.embers{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.embers span{
  position:absolute; bottom:-14px; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, #FFFFFF 0%, rgba(246,247,247,.5) 45%, transparent 70%);
  opacity:0; animation:ember-rise linear infinite;
  filter:blur(.5px);
}
@keyframes ember-rise{
  0%   { transform:translateY(0) translateX(0) scale(.6); opacity:0; }
  10%  { opacity:.9; }
  60%  { opacity:.7; }
  100% { transform:translateY(-105vh) translateX(var(--drift,20px)) scale(1.1); opacity:0; }
}
/* posiciones / tiempos variados */
.embers span:nth-child(1){ left:6%;  animation-duration:9s;  animation-delay:0s;   --drift:30px; }
.embers span:nth-child(2){ left:16%; animation-duration:12s; animation-delay:2s;   --drift:-25px; width:4px;height:4px;}
.embers span:nth-child(3){ left:26%; animation-duration:8s;  animation-delay:1s;   --drift:40px; }
.embers span:nth-child(4){ left:38%; animation-duration:14s; animation-delay:4s;   --drift:-30px; width:5px;height:5px;}
.embers span:nth-child(5){ left:48%; animation-duration:10s; animation-delay:3s;   --drift:20px; }
.embers span:nth-child(6){ left:58%; animation-duration:13s; animation-delay:.5s;  --drift:-40px; width:3px;height:3px;}
.embers span:nth-child(7){ left:67%; animation-duration:9s;  animation-delay:5s;   --drift:25px; }
.embers span:nth-child(8){ left:76%; animation-duration:11s; animation-delay:2.5s; --drift:-20px; width:5px;height:5px;}
.embers span:nth-child(9){ left:85%; animation-duration:15s; animation-delay:1.5s; --drift:35px; }
.embers span:nth-child(10){left:93%; animation-duration:10s; animation-delay:3.5s; --drift:-28px; width:4px;height:4px;}
.embers span:nth-child(11){left:33%; animation-duration:16s; animation-delay:6s;   --drift:18px; width:3px;height:3px;}
.embers span:nth-child(12){left:72%; animation-duration:12s; animation-delay:7s;   --drift:-22px; }

/* ── Logo con halo de horno ──────────────────────────────── */
.logo-halo{ position:relative; display:inline-flex; align-items:center; justify-content:center; }
.logo-halo::before{
  content:""; position:absolute; inset:-30%;
  background:radial-gradient(circle, rgba(246,247,247,.30) 0%, rgba(157,182,147,.20) 45%, transparent 70%);
  filter:blur(14px); z-index:-1; animation:halo-pulse 3.5s ease-in-out infinite;
}
@keyframes halo-pulse{ 0%,100%{ opacity:.55; transform:scale(.96);} 50%{ opacity:1; transform:scale(1.06);} }
.logo-float{ animation:logo-float 6s ease-in-out infinite; }
@keyframes logo-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }

/* ── Header de marca ─────────────────────────────────────── */
.brand-header{
  position:relative; overflow:hidden;
  background:var(--header-grad);
  border-bottom:1px solid rgba(157,182,147,.18);
}
/* textura sutil de vapor sobre el verde */
.brand-header::after{
  content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background:
    radial-gradient(60% 120% at 85% -20%, rgba(157,182,147,.30), transparent 60%),
    radial-gradient(50% 120% at 10% 120%, rgba(19,32,21,.45), transparent 60%);
}
/* LA FRANJA TRICOLOR — el gesto de la casa, cerrando el header */
.brand-header::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:3;
  background:var(--tricolore);
}
.brand-header > *{ position:relative; z-index:2; }

.logo-chip{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(157,182,147,.32);
  box-shadow:inset 0 0 14px rgba(105,129,92,.35);
}

/* ── Glass card (login) ──────────────────────────────────── */
.glass-card{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(42,61,42,.72), rgba(19,32,21,.86));
  border:1px solid rgba(157,182,147,.24);
  box-shadow:0 24px 60px -20px rgba(9,16,10,.8), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
/* La franja tricolor también cierra la tarjeta del login por arriba */
.glass-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:var(--tricolore);
}

/* ── Selector de empleado (login) — lista legible ────────── */
#selEmpleado{
  background-color:#1B2A1C;
  color:var(--cream);
  padding-right:2.75rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239DB693' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 1rem center;
}
#selEmpleado:focus{ border-color:rgba(157,182,147,.65)!important; box-shadow:0 0 0 3px rgba(105,129,92,.28); }
/* Opciones: fondo verde oscuro + texto papel (legibles al desplegar) */
#selEmpleado option{ background-color:#1B2A1C; color:var(--cream); }
#selEmpleado option:disabled{ color:#84907F; }

/* ── Teclado PIN (login) ─────────────────────────────────── */
.pinkey{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(157,182,147,.20);
  color:var(--cream);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.pinkey:hover{ background:rgba(157,182,147,.18); border-color:rgba(157,182,147,.55); box-shadow:0 6px 18px -6px rgba(19,32,21,.7); }
.pinkey:active{ transform:scale(.92); }

/* Puntos del PIN: anillo → brasa encendida */
.pin-dot{ transition:all .25s cubic-bezier(.34,1.56,.64,1); }
.pin-dot.filled{
  background:var(--fire-grad)!important;
  border-color:transparent!important;
  box-shadow:0 0 12px 2px rgba(237,24,68,.7);
  transform:scale(1.25);
}
@keyframes shake{ 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(4px)} 50%{transform:translateX(-6px)} }
.shake{ animation:shake .4s ease; }

/* ── Botón de fuego ──────────────────────────────────────── */
.btn-fire{
  position:relative; overflow:hidden;
  background:var(--fire-grad); color:#fff; border:none;
  box-shadow:var(--shadow-glow);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-fire:hover{ filter:brightness(1.07); box-shadow:0 14px 46px -8px rgba(237,24,68,.65); }
.btn-fire:active{ transform:translateY(1px) scale(.99); }
.btn-fire::after{ /* brillo que recorre el botón */
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); animation:sheen 3.2s ease-in-out infinite;
}
@keyframes sheen{ 0%{ left:-60%; } 55%,100%{ left:130%; } }
.btn-fire:disabled{ filter:grayscale(.25) brightness(.85); box-shadow:none; }

/* ── Entrada escalonada de tarjetas ──────────────────────── */
@keyframes rise-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
.rise-in{ animation:rise-in .55s cubic-bezier(.22,1,.36,1) both; }
.rise-in.d1{ animation-delay:.06s; } .rise-in.d2{ animation-delay:.12s; }
.rise-in.d3{ animation-delay:.18s; } .rise-in.d4{ animation-delay:.24s; }
.rise-in.d5{ animation-delay:.30s; } .rise-in.d6{ animation-delay:.36s; }

/* ── Tabs estilo “pastilla” ──────────────────────────────── */
.grandi-tabs{ gap:.25rem; }
.grandi-tabs .tab{
  position:relative; border-radius:9999px; border-bottom:none!important;
  transition:color .2s ease, background .2s ease;
}
.grandi-tabs .tab:hover{ color:var(--ember-700); }
.grandi-tabs .tab.activo{
  color:#fff!important; border-bottom:none!important;
  background:var(--fire-grad);
  box-shadow:0 6px 16px -6px rgba(237,24,68,.6);
}

/* ── Realce de filas (que no parezca planilla) ───────────── */
/* Verde, no rojo: pasar el mouse por una fila no es una alerta. */
.row-hover > *{ transition:background .15s ease; }
.row-hover > *:hover{ background:rgba(105,129,92,.09); }

/* Números grandes con carácter */
.stat-num{ font-family:var(--font-display); font-weight:700; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* Clock de fichaje */
.clock-xl{ font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }

/* Scrollbar cálida */
*{ scrollbar-color:var(--gold-soft) transparent; }
*::-webkit-scrollbar{ height:8px; width:8px; }
*::-webkit-scrollbar-thumb{ background:var(--gold-soft); border-radius:8px; }

/* ── Botón grande de fichaje (empleado) — el JS fija el color ─ */
#btnFichar{
  position:relative; overflow:hidden;
  font-family:var(--font-display)!important; letter-spacing:.04em; text-transform:uppercase;
  border-radius:1.5rem!important;
}
#btnFichar.bg-green-600{
  background:linear-gradient(135deg,#166534,#22c55e)!important;
  box-shadow:0 14px 38px -10px rgba(34,197,94,.6)!important;
}
#btnFichar.bg-red-700{
  background:var(--fire-grad)!important;
  box-shadow:0 14px 38px -10px rgba(237,24,68,.6)!important;
}
#btnFichar::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-20deg); animation:sheen 3.4s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════
   EL SELLO DE FICHAJE — pantalla de éxito a pantalla completa
   ════════════════════════════════════════════════════════════ */
.sello-overlay{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; text-align:center; cursor:pointer;
  background:radial-gradient(120% 90% at 50% 38%, #33482F 0%, var(--char-800) 55%, var(--char-900) 100%);
  color:var(--cream); animation:sello-in .3s ease both;
}
@keyframes sello-in{ from{ opacity:0 } to{ opacity:1 } }
.sello-overlay.cerrar{ animation:sello-out .35s ease forwards; }
@keyframes sello-out{ to{ opacity:0; transform:scale(1.05) } }
.sello-content{ position:relative; z-index:2; max-width:340px; }

.sello-seal{ position:relative; width:172px; height:172px; margin:0 auto 1.6rem; display:flex; align-items:center; justify-content:center; }
.sello-seal img{ width:132px; height:132px; object-fit:contain; z-index:2; filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); animation:stamp-in .6s cubic-bezier(.2,1.4,.45,1) both; }
.sello-seal::before{ content:""; position:absolute; inset:8px; border-radius:50%; border:3px solid rgba(157,182,147,.60); animation:stamp-in .6s cubic-bezier(.2,1.4,.45,1) both; }
@keyframes stamp-in{
  0%{ opacity:0; transform:scale(1.85) rotate(-14deg); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:scale(1) rotate(-5deg); }
}
.sello-ring{ position:absolute; inset:0; border-radius:50%; border:3px solid var(--flame); animation:impact .8s ease-out .22s both; }
.sello-seal.is-in .sello-ring{ border-color:#22c55e; }
@keyframes impact{ 0%{ transform:scale(.55); opacity:.85 } 100%{ transform:scale(1.9); opacity:0 } }

.sello-burst{ position:absolute; top:50%; left:50%; width:0; height:0; z-index:1; }
.sello-burst i{
  position:absolute; width:7px; height:7px; margin:-3px; border-radius:50%;
  background:radial-gradient(circle,#FFFFFF 0%,rgba(246,247,247,.55) 55%,transparent 75%);
  transform:rotate(var(--a)) translateY(0) scale(1); opacity:0;
  animation:spark-out .85s ease-out .15s both;
}
@keyframes spark-out{
  0%{ opacity:1; transform:rotate(var(--a)) translateY(-8px) scale(1); }
  100%{ opacity:0; transform:rotate(var(--a)) translateY(-150px) scale(.2); }
}

.sello-tipo{ font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:.45rem; animation:rise-in .5s ease .38s both; }
.sello-title{ font-family:var(--font-display); font-weight:700; font-size:1.9rem; line-height:1.12; letter-spacing:-.015em; margin:0 0 .55rem; animation:rise-in .5s ease .46s both; }
.sello-hora{ font-family:var(--font-display); font-weight:700; font-size:3.2rem; letter-spacing:-.015em; color:#fff; line-height:1; text-shadow:0 0 26px rgba(157,182,147,.55); animation:rise-in .5s ease .52s both; }
.sello-extra{ margin-top:1.1rem; font-size:1.05rem; color:var(--flame-2); font-weight:700; animation:rise-in .5s ease .62s both; }
.sello-warn{ margin-top:1.1rem; font-size:.85rem; background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.4); color:#fcd34d; padding:.6rem .85rem; border-radius:1rem; animation:rise-in .5s ease .66s both; }
.sello-hint{ margin-top:2rem; font-size:.72rem; letter-spacing:.05em; color:rgba(245,242,240,.4); animation:rise-in .5s ease 1.1s both; }

/* Aviso de "turno cerrado solo" — misma escenografía que el sello (mismo
   fondo/overlay), pero sin el sello-de-goma: es un aviso a leer, no un
   comprobante de algo que la persona hizo recién. */
.aviso-cierre-icono{ font-size:2.6rem; margin-bottom:.7rem; animation:rise-in .5s ease .3s both; filter:drop-shadow(0 4px 14px rgba(157,182,147,.40)); }
.aviso-cierre-cuerpo{ margin-top:.3rem; font-size:.95rem; line-height:1.5; color:rgba(245,242,240,.78); animation:rise-in .5s ease .54s both; }
.aviso-cierre .sello-hora{ font-size:1.8rem; margin-top:1.1rem; }

/* ════════════════════════════════════════════════════════════
   DASHBOARD HUMANIZADO — hero, avatares y chips de estado
   ════════════════════════════════════════════════════════════ */
.hero-hoy{
  position:relative; overflow:hidden;
  background:var(--header-grad); color:var(--cream);
  border-radius:16px; padding:1rem 1.3rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.4rem 1rem;
  box-shadow:0 14px 32px -18px rgba(19,32,21,.75); border:1px solid rgba(157,182,147,.20);
}
.hero-hoy::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(55% 130% at 92% -20%, rgba(157,182,147,.30), transparent 60%); }
.hero-hoy > *{ position:relative; z-index:1; }
.hero-num{ font-family:var(--font-display); font-weight:700; font-size:2.3rem; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hero-label{ font-size:.95rem; color:var(--gold); }
.hero-sub{ font-size:.8rem; color:rgba(245,242,240,.72); }
.hero-dot{ width:12px; height:12px; border-radius:50%; background:#22c55e; box-shadow:0 0 10px #22c55e; animation:pulse-soft 1.6s ease-in-out infinite; flex-shrink:0; }
.hero-dot.off{ background:var(--gold-soft); box-shadow:none; animation:none; }
@keyframes pulse-soft{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.emp-avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.9rem; letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.emp-avatar.en-turno{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #22c55e; animation:turno-ring 1.9s ease-out infinite; }
@keyframes turno-ring{ 0%{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #22c55e, 0 0 0 4px rgba(34,197,94,.5) } 70%{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #22c55e, 0 0 0 12px rgba(34,197,94,0) } 100%{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #22c55e, 0 0 0 12px rgba(34,197,94,0) } }

.chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:700; padding:.3rem .65rem; border-radius:9999px; white-space:nowrap; }
.chip .dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.chip-green{ background:#dcfce7; color:#15803d; } .chip-green .dot{ background:#22c55e; animation:pulse-soft 1.6s ease-in-out infinite; }
.chip-amber{ background:#fef3c7; color:#b45309; } .chip-amber .dot{ background:#f59e0b; }
.chip-stone{ background:#f5f5f4; color:#57534e; } .chip-stone .dot{ background:#a8a29e; }
.chip-blue{ background:#dbeafe; color:#1d4ed8; }  .chip-blue .dot{ background:#3b82f6; }
.chip-red{ background:#fee2e2; color:#B41234; }   .chip-red .dot{ background:#ef4444; }
/* En modo noche los chips claros quedaban como parches blancos */
html.night .chip-green{ background:rgba(34,197,94,.16); color:#86efac; }
html.night .chip-amber{ background:rgba(245,158,11,.16); color:#fcd34d; }
html.night .chip-red{   background:rgba(239,68,68,.18); color:#fca5a5; }
html.night .chip-blue{  background:rgba(59,130,246,.16); color:#93c5fd; }
html.night .chip-stone{ background:rgba(157,182,147,.10); color:#B7C4B0; }

/* ── Pulido: skeletons con shimmer ───────────────────────── */
.skeleton{ position:relative; overflow:hidden; background:#E9E6E4; border-radius:.6rem; }
.skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation:shimmer 1.4s infinite; }
@keyframes shimmer{ 100%{ transform:translateX(100%); } }
.skel-row{ display:flex; align-items:center; gap:12px; padding:14px 20px; }
.skel-dot{ width:42px; height:42px; border-radius:50%; flex-shrink:0; }
.skel-line{ height:12px; border-radius:6px; }

/* ── Pulido: transición suave entre pestañas ─────────────── */
.tab-in{ animation:tab-in .35s cubic-bezier(.22,1,.36,1) both; }
@keyframes tab-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Respeto a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  .embers, .logo-float, .logo-halo::before, .brand-header::before, .btn-fire::after, #btnFichar::after{ animation:none!important; }
  .rise-in, .sello-seal img, .sello-seal::before, .sello-ring, .sello-burst i,
  .sello-tipo, .sello-title, .sello-hora, .sello-extra, .sello-warn, .sello-hint,
  .emp-avatar.en-turno, .hero-dot, .chip .dot, .skeleton::after, .tab-in{ animation:none!important; }
}

/* ════════════════════════════════════════════════════════════
   MODO OSCURO "CARBÓN"  ·  clase .night en <html>
   Automático por hora (común.js) + botón 🌙/☀️ que la fuerza.
   Remapea las utilidades de Tailwind a tonos de brasa apagada.
   ════════════════════════════════════════════════════════════ */
html.night{ color-scheme:dark; }

html.night body.grandi-warm{
  background:radial-gradient(140% 85% at 50% -15%, #1B2A1B 0%, #131A13 55%, #0C110C 100%) fixed;
  color:#EDF1EA;
}
/* La marca de agua brilla cálida sobre el carbón */
html.night body.grandi-warm::before{ mix-blend-mode:screen; opacity:.13; }

/* Superficies */
html.night .bg-white{ background-color:#1B241B !important; }
html.night .bg-stone-100{ background-color:#141A14 !important; }
html.night .bg-stone-50{ background-color:rgba(255,255,255,.03) !important; }
html.night nav.grandi-tabs{ background-color:rgba(19,26,19,.92) !important; border-color:rgba(157,182,147,.14) !important; }

/* Hover de filas / botones claros */
html.night .hover\:bg-stone-50:hover,
html.night .hover\:bg-stone-100:hover,
html.night .hover\:bg-stone-200:hover{ background-color:rgba(255,255,255,.06) !important; }

/* Texto */
html.night .text-stone-800,
html.night .text-stone-700{ color:#EDF1EA !important; }
html.night .text-stone-600,
html.night .text-stone-500{ color:#AFB8AB !important; }
html.night .text-stone-400,
html.night .text-stone-300{ color:#7B857A !important; }

/* Bordes y divisores */
html.night .border-stone-100,
html.night .border-stone-200,
html.night .border-stone-300{ border-color:rgba(157,182,147,.15) !important; }
html.night [class*="divide-stone"] > *{ border-color:rgba(157,182,147,.10) !important; }

/* Formularios */
html.night input, html.night select, html.night textarea{
  background-color:rgba(255,255,255,.04) !important;
  border-color:rgba(157,182,147,.22) !important;
  color:#EDF1EA !important;
}
html.night select option{ background-color:#1B241B; color:#EDF1EA; }

/* Tints que en claro eran muy claros */
html.night .bg-amber-50{ background-color:rgba(245,158,11,.12) !important; }
html.night .border-amber-200{ border-color:rgba(245,158,11,.30) !important; }
html.night .bg-red-50{ background-color:rgba(180,18,52,.16) !important; }
html.night .border-red-300{ border-color:rgba(239,68,68,.35) !important; }

/* Legajo / certificados / horas extra: tints verdes y bordes suaves */
html.night .bg-green-50{ background-color:rgba(34,197,94,.12) !important; }
html.night .border-green-200{ border-color:rgba(34,197,94,.30) !important; }
html.night .border-red-200{ border-color:rgba(239,68,68,.28) !important; }
html.night .text-green-800,
html.night .text-green-700{ color:#86efac !important; }
html.night .text-amber-900,
html.night .text-amber-800{ color:#fcd34d !important; }
html.night .text-red-600{ color:#fca5a5 !important; }
/* Rojos oscuros (alerta de caras, toasts de error): sobre fondo noche el
   #991B1B quedaba en 2.3:1 — ilegible justo en el texto más importante */
html.night .bg-red-100{ background-color:rgba(239,68,68,.18) !important; }
html.night .text-red-800,
html.night .text-red-700{ color:#fca5a5 !important; }
html.night .file\:bg-red-50::file-selector-button{ background-color:rgba(180,18,52,.22) !important; color:#fca5a5 !important; }
/* El lienzo de la firma tiene que quedar claro: se firma con tinta oscura */
html.night #firmaCanvas{ background:#f5f5f4 !important; border-color:rgba(157,182,147,.35) !important; }

/* Acentos legibles en oscuro */
html.night #relojActual{ color:var(--flame) !important; }
html.night #timerDisplay{ color:#FF6B86 !important; }

/* ── Lista "Estado en tiempo real" (#tablaHoy): + legibilidad ── */
#tablaHoy > div{ padding-top:.9rem; padding-bottom:.9rem; }
#tablaHoy > div + div{ border-top:1px solid rgba(60,72,56,.12); }   /* separadores más nítidos */
#tablaHoy > div:nth-child(even){ background:rgba(60,72,56,.035); }  /* cebra tenue para escanear */
#tablaHoy .font-semibold.text-sm{ font-size:.95rem; }                /* nombre un poco más grande */
#tablaHoy .text-xs{ font-size:.8rem; line-height:1.35; }             /* rol · debía entrar */

/* Modo noche: subir contraste de texto secundario, divisores y tarjeta */
html.night .panel-hoy{ border:1px solid rgba(157,182,147,.16); box-shadow:0 12px 34px -14px rgba(0,0,0,.65); }
html.night #tablaHoy > div + div{ border-top-color:rgba(157,182,147,.18); }
html.night #tablaHoy > div:nth-child(even){ background:rgba(255,255,255,.03); }
html.night #tablaHoy .text-stone-400{ color:#A9B3A6 !important; }    /* "Mozo" legible (era #7B857A) */
html.night #tablaHoy .text-amber-600{ color:#f5b451 !important; }    /* "debía entrar" / "tarde" */

/* Botón de tema en el header */
.tema-btn{ font-size:1rem; line-height:1; }

/* ════════════════════════════════════════════════════════════
   SPLASH PWA — el toro encendiéndose con brasas al abrir la app
   ════════════════════════════════════════════════════════════ */
.splash{
  position:fixed; inset:0; z-index:80; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.3rem;
  background:radial-gradient(120% 90% at 50% 42%, #33482F 0%, #1C2D1D 52%, #0E170F 100%);
}
.splash.cerrar{ animation:splash-out .48s ease forwards; }
@keyframes splash-out{ to{ opacity:0; transform:scale(1.06); visibility:hidden; } }

.splash-logo{ position:relative; display:flex; align-items:center; justify-content:center; width:200px; height:200px; }
.splash-logo img{
  width:172px; height:172px; object-fit:contain; position:relative; z-index:2;
  animation:splash-ignite 1.7s cubic-bezier(.2,.7,.3,1) both;
}
.splash-glow{
  position:absolute; inset:-12%; z-index:1; filter:blur(10px);
  background:radial-gradient(circle, rgba(246,247,247,.45) 0%, rgba(157,182,147,.28) 38%, transparent 68%);
  animation:splash-glow 1.7s ease-out both;
}
@keyframes splash-ignite{
  0%   { opacity:0; transform:scale(.78); filter:brightness(.2) contrast(1.3) saturate(.6); }
  38%  { opacity:1; filter:brightness(.55) saturate(.9); }
  60%  { filter:brightness(1.9) saturate(1.2) drop-shadow(0 0 28px rgba(246,247,247,.75)); }
  100% { opacity:1; transform:scale(1); filter:brightness(1) drop-shadow(0 0 16px rgba(246,247,247,.45)); }
}
@keyframes splash-glow{
  0%   { opacity:0; transform:scale(.3); }
  55%  { opacity:1; transform:scale(1.12); }
  100% { opacity:.6; transform:scale(1); }
}
.splash-word{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.42em; padding-left:.42em; font-size:.95rem; color:var(--gold);
  animation:rise-in .6s ease 1s both;
}
@media (prefers-reduced-motion: reduce){
  .splash-logo img, .splash-glow, .splash-word{ animation-duration:.01ms !important; }
}

/* ════════════════════════════════════════════════════════════
   GRILLA DE HORARIOS (armador semanal)
   Un turno normal es una brasa prendida: fondo cálido en degradé,
   número tabular bien marcado. Un franco es la brasa apagada: quieto,
   sin degradé, con la misma lunita que ya usamos en el resto de la
   app para "modo noche" — no es un ícono nuevo, es el mismo lenguaje.
   ════════════════════════════════════════════════════════════ */
.hor-cell{
  position:relative;
  display:flex; align-items:center; justify-content:center; width:100%; min-height:52px;
  padding:.45rem .35rem; font-size:.78rem; font-weight:700; text-align:center; cursor:pointer; line-height:1.28;
  color:#33482F; font-variant-numeric:tabular-nums;
  background:linear-gradient(165deg, rgba(105,129,92,.20), rgba(105,129,92,.06));
  border-left:1px solid #E9ECE7;
  transition:background .15s ease, transform .12s ease, box-shadow .12s ease;
}
.hor-cell:hover{
  background:linear-gradient(165deg, rgba(105,129,92,.34), rgba(105,129,92,.10));
  transform:translateY(-1px); box-shadow:0 4px 10px -4px rgba(60,81,50,.35);
}
.hor-cell:active{ transform:translateY(0); box-shadow:none; }
.hor-2{ font-size:.68rem; font-weight:600; opacity:.7; }

/* Franco: apagado a propósito */
.hor-cell.is-libre{ background:rgba(120,113,108,.07); border-left-color:#E8E6E5; }
.hor-cell.is-libre:hover{ background:rgba(120,113,108,.13); box-shadow:0 4px 10px -4px rgba(87,83,78,.25); }
.hor-franco-badge{
  display:inline-flex; align-items:center; gap:.28rem;
  color:#837E80; font-weight:600; font-size:.72rem; letter-spacing:.01em;
}

/* Cambio puntual (excepción de esa fecha, no la plantilla fija): banderín
   dorado — el "●" del HTML no se ve, el punto lo dibuja el fondo de este
   span. Dentro de una celda va como banderín en la esquina; en la leyenda
   (donde este mismo span se reusa suelto, en línea con el texto) se queda
   como un puntito inline — por eso el position:absolute es sólo para el
   caso dentro de .hor-cell, no una regla de base. */
.hor-exc-dot{
  display:inline-block; vertical-align:middle; width:7px; height:7px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 2px rgba(157,182,147,.28), 0 0 6px rgba(157,182,147,.75);
  font-size:0; line-height:0; color:transparent;
}
.hor-cell > .hor-exc-dot{ position:absolute; top:5px; right:6px; }

/* Columna de HOY: un aro tibio alrededor, no un relleno que tape franco/trabajo */
.hor-cell.hor-hoy{ box-shadow:inset 0 0 0 1.5px rgba(237,24,68,.42); }
.hor-cell.hor-hoy.is-libre{ box-shadow:inset 0 0 0 1.5px rgba(120,113,108,.32); }
.hor-cell.hor-hoy:hover{ box-shadow:inset 0 0 0 1.5px rgba(237,24,68,.42), 0 4px 10px -4px rgba(150,16,44,.35); }

html.night .hor-cell{
  color:#B7CFAC; border-left-color:rgba(157,182,147,.12);
  background:linear-gradient(165deg, rgba(105,129,92,.22), rgba(105,129,92,.05));
}
html.night .hor-cell:hover{ background:linear-gradient(165deg, rgba(105,129,92,.34), rgba(105,129,92,.09)); }
html.night .hor-cell.is-libre{ background:rgba(157,182,147,.05); border-left-color:rgba(157,182,147,.08); }
html.night .hor-franco-badge{ color:#9AA391; }
html.night .hor-exc-dot{ box-shadow:0 0 0 2px rgba(157,182,147,.22), 0 0 7px rgba(157,182,147,.9); }
html.night .hor-cell.hor-hoy{ box-shadow:inset 0 0 0 1.5px rgba(255,61,102,.48); }
html.night .hor-cell.hor-hoy.is-libre{ box-shadow:inset 0 0 0 1.5px rgba(157,182,147,.28); }

/* Nombre del empleado: nombres largos en dos líneas prolijas, sin que la
   celda se estire más de la cuenta. */
.nombre-hor{ line-height:1.2; }

/* Botón "Copiar semana anterior": acción de preparación, no de aviso —
   tono neutro a propósito, para no competir con el verde de 📲 Avisar. */
.hor-btn-copiar{
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(120,113,108,.09); color:#78716c;
  border-radius:.5rem; padding:.375rem .75rem; font-size:.75rem; font-weight:600;
  transition:background .15s ease, color .15s ease;
}
.hor-btn-copiar:hover{ background:rgba(120,113,108,.16); color:#57534e; }
.hor-btn-copiar:disabled{ opacity:.5; cursor:default; }
html.night .hor-btn-copiar{ background:rgba(157,182,147,.08); color:#B8C1AF; }
html.night .hor-btn-copiar:hover{ background:rgba(157,182,147,.14); color:#D3DCC9; }

/* ============================================================
   Menú lateral (reemplaza la vieja barra de pestañas horizontal)
   ------------------------------------------------------------
   Riel angosto que se expande al pasar el mouse (o queda fijo con 📌),
   sobre el mismo degradé "brasa" del header, para que se sienta la misma
   pieza y no un componente pegado. En celular es un cajón que se abre con
   ☰ desde el header, con velo detrás para cerrarlo tocando afuera.
   ============================================================ */
:root{
  --side-w-rail:4.5rem;
  --side-w-open:15.5rem;
}

.app-shell{ display:flex; align-items:flex-start; }

.app-sidebar{
  --w:var(--side-w-open);
  position:fixed; top:0; left:0; height:100vh; width:var(--w);
  transform:translateX(-100%);
  z-index:50; display:flex; flex-direction:column;
  background:var(--header-grad);
  border-right:1px solid rgba(157,182,147,.18);
  box-shadow:16px 0 44px -20px rgba(0,0,0,.55);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
/* misma textura de humo del header, para que se sienta la misma pieza */
.app-sidebar::after{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; z-index:0;
  background:
    radial-gradient(70% 40% at 90% 0%, rgba(157,182,147,.26), transparent 60%),
    radial-gradient(60% 45% at 0% 100%, rgba(19,32,21,.40), transparent 60%);
}
.app-sidebar.sidebar-open{ transform:translateX(0); }

.sidebar-backdrop{
  position:fixed; inset:0; z-index:45; background:rgba(15,24,16,.58);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.sidebar-backdrop.show{ opacity:1; pointer-events:auto; }

@media (min-width:768px){
  .app-sidebar{
    --w:var(--side-w-rail);
    position:sticky; top:0; transform:none; width:var(--w);
    flex-shrink:0; transition:width .22s cubic-bezier(.22,1,.36,1);
  }
  .app-sidebar:hover, .app-sidebar.pinned{ --w:var(--side-w-open); }
  .sidebar-backdrop{ display:none; }
}

.side-brand{
  display:flex; align-items:center; gap:.6rem; padding:1.1rem .9rem .9rem;
  white-space:nowrap; flex-shrink:0; position:relative; z-index:1;
}
.side-brand-mark{
  width:2.15rem; height:2.15rem; border-radius:9999px; flex-shrink:0;
  background:rgba(255,255,255,.07); border:1px solid rgba(157,182,147,.32);
  box-shadow:inset 0 0 10px rgba(105,129,92,.4);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.side-brand-mark img{ width:1.75rem; height:1.75rem; object-fit:contain; }
.side-brand-label{
  color:var(--cream); font-size:.95rem; letter-spacing:.06em;
  opacity:0; transform:translateX(-6px); transition:opacity .16s ease, transform .16s ease;
}
.side-pin{
  margin-left:auto; width:1.75rem; height:1.75rem; border-radius:.5rem; flex-shrink:0;
  color:rgba(245,242,240,.55); font-size:.85rem; align-items:center; justify-content:center;
  opacity:0; transition:opacity .18s ease, background .15s ease, color .15s ease;
}
.side-pin:hover{ background:rgba(255,255,255,.1); }
.app-sidebar.pinned .side-pin{ color:var(--gold); }

.side-nav{
  flex:1; overflow-y:auto; padding:.35rem .6rem 1rem; position:relative; z-index:1;
  display:flex; flex-direction:column; gap:.15rem;
}
.side-tab{
  position:relative; display:flex; align-items:center; gap:.85rem;
  width:100%; padding:.62rem .68rem; border-radius:.85rem;
  color:rgba(245,242,240,.62); text-align:left;
  font-size:.82rem; font-weight:600; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden;
  transition:background .16s ease, color .16s ease;
}
.side-tab:hover{ background:rgba(255,255,255,.07); color:var(--cream); }
.side-tab.activo{
  color:#fff!important; background:var(--fire-grad);
  box-shadow:0 8px 20px -8px rgba(237,24,68,.55);
}
.side-tab.activo::before{
  content:""; position:absolute; left:-.6rem; top:.3rem; bottom:.3rem; width:3px; border-radius:3px;
  background:var(--gold); box-shadow:0 0 8px rgba(157,182,147,.85);
}
.side-tab-icon-wrap{
  position:relative; width:1.4rem; flex-shrink:0; font-size:1.08rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.side-tab-label{
  opacity:0; transform:translateX(-4px); overflow:hidden;
  transition:opacity .16s ease, transform .16s ease;
}
.side-tab-badge{
  position:absolute; top:-.32rem; right:-.42rem;
  background:var(--red-600); color:#fff; font-size:.6rem; font-weight:800;
  min-width:1.05rem; height:1.05rem; border-radius:9999px; padding:0 .28rem;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  box-shadow:0 0 0 2px var(--char-800);
}
/* Cajón abierto en celular: mismo criterio de "expandido" que el hover en escritorio */
.app-sidebar.sidebar-open .side-brand-label,
.app-sidebar.sidebar-open .side-tab-label{ opacity:1; transform:none; }
.app-sidebar.sidebar-open .side-pin{ opacity:1; }
@media (min-width:768px){
  .app-sidebar:hover .side-brand-label, .app-sidebar.pinned .side-brand-label,
  .app-sidebar:hover .side-tab-label,   .app-sidebar.pinned .side-tab-label{ opacity:1; transform:none; }
  .app-sidebar:hover .side-pin, .app-sidebar.pinned .side-pin{ opacity:1; }
}

.side-foot{
  padding:.7rem .9rem 1rem; border-top:1px solid rgba(157,182,147,.16);
  flex-shrink:0; position:relative; z-index:1;
}
/* La franja tricolor remata el menú lateral, igual que el header */
.side-foot::before{
  content:""; position:absolute; top:-3px; left:0; right:0; height:3px;
  background:var(--tricolore); opacity:.9;
}
.side-foot-btn{
  display:flex; align-items:center; gap:.85rem; width:100%; padding:.55rem .68rem;
  border-radius:.75rem; color:rgba(245,242,240,.55); font-size:.78rem; font-weight:600;
  white-space:nowrap; overflow:hidden; transition:background .16s ease, color .16s ease;
}
.side-foot-btn:hover{ background:rgba(255,255,255,.07); color:var(--cream); }
.side-foot-btn .side-tab-label{ opacity:0; transform:translateX(-4px); transition:opacity .16s ease, transform .16s ease; }
.app-sidebar.sidebar-open .side-foot-btn .side-tab-label{ opacity:1; transform:none; }
@media (min-width:768px){
  .app-sidebar:hover .side-foot-btn .side-tab-label, .app-sidebar.pinned .side-foot-btn .side-tab-label{ opacity:1; transform:none; }
}

html.night .app-sidebar{ border-right-color:rgba(157,182,147,.12); }
html.night .side-tab.activo{ box-shadow:0 8px 22px -8px rgba(237,24,68,.7); }