/* Wessel Asistencia — tokens y controles compartidos (app del trabajador + panel).
   Mundo visual: la tarjeta de marcar. Papel, tinta, sellos. Profundidad solo con bordes. Base de espaciado: 4px. */
:root{
  --papel:#FFFFFF;
  --tarjeta:#F4F3F1;
  --tarjeta-2:#EAE8E3;
  --control:#FAF9F7;
  --tinta:#141414;
  --tinta-suave:#625E58;
  --tinta-tenue:#6F6A63;
  --linea:rgba(20,18,15,.12);
  --linea-fuerte:rgba(20,18,15,.24);
  --burdeos:#7C1F35;
  --burdeos-texto:#7C1F35;
  --sobre-color:#FFFFFF;
  --sello:#2E7D4F;
  --sobre-sello:#FFFFFF;
  --tardanza:#8A5A15;
  --falta:#A83232;
  --f-display:'Anton','Archivo Black',Impact,sans-serif;
  --f-body:'Archivo',Arial,sans-serif;
  --f-mono:'IBM Plex Mono','Courier New',monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papel:#111111; --tarjeta:#1A1A1A; --tarjeta-2:#232323; --control:#0C0C0C;
    --tinta:#F3F1EC; --tinta-suave:#A9A49B; --tinta-tenue:#918C83;
    --linea:rgba(243,241,236,.12); --linea-fuerte:rgba(243,241,236,.26);
    --burdeos:#A8324F; --burdeos-texto:#E27A95; --sobre-color:#141414; --sello:#6FCB94; --sobre-sello:#0B2818; --tardanza:#E3B15E; --falta:#EE8A8A;
  }
}
:root[data-theme="dark"]{
  --papel:#111111; --tarjeta:#1A1A1A; --tarjeta-2:#232323; --control:#0C0C0C;
  --tinta:#F3F1EC; --tinta-suave:#A9A49B; --tinta-tenue:#918C83;
  --linea:rgba(243,241,236,.12); --linea-fuerte:rgba(243,241,236,.26);
  --burdeos:#A8324F; --burdeos-texto:#E27A95; --sobre-color:#141414; --sello:#6FCB94; --sobre-sello:#0B2818; --tardanza:#E3B15E; --falta:#EE8A8A;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; }
body{ background:var(--papel); color:var(--tinta); font-family:var(--f-body); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:var(--f-display); font-weight:400; margin:0; text-wrap:balance; }
button,input,select,textarea{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--burdeos); outline-offset:2px; }

.campo{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; min-width:0; }
.campo label{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave); }
.campo input,.campo select{ width:100%; min-height:44px; border:1px solid var(--linea-fuerte); border-radius:8px; padding:10px 12px; font-size:15px; background:var(--control); color:var(--tinta); }
.campo input:disabled,.campo select:disabled{ opacity:.55; }
.campo .ayuda{ font-size:12px; color:var(--tinta-suave); }

.btn-principal{ width:100%; min-height:48px; background:var(--burdeos); color:#fff; border:none; border-radius:10px; padding:12px 16px; font-weight:700; font-size:14px; letter-spacing:.03em; text-transform:uppercase; cursor:pointer; transition:transform .12s cubic-bezier(0.23,1,0.32,1), opacity .15s; }
.btn-linea{ width:100%; min-height:44px; background:none; color:var(--tinta); border:1px solid var(--linea-fuerte); border-radius:10px; padding:10px 16px; font-weight:600; font-size:13px; letter-spacing:.02em; cursor:pointer; transition:transform .12s cubic-bezier(0.23,1,0.32,1), background-color .15s; }
.btn-principal:active,.btn-linea:active{ transform:scale(.97); }
.btn-principal:disabled,.btn-linea:disabled{ opacity:.5; cursor:default; transform:none; }
@media (hover:hover){
  .btn-principal:hover:not(:disabled){ opacity:.9; }
  .btn-linea:hover:not(:disabled){ background:var(--tarjeta); }
}
.aviso{ min-height:18px; font-size:13px; color:var(--tinta-suave); margin:2px 0 12px; text-wrap:pretty; }
.aviso.error{ color:var(--falta); font-weight:600; }
.aviso.ok{ color:var(--sello); font-weight:600; }

/* ---------- Movimiento y superficies del navegador ---------- */
:root{ --sale:cubic-bezier(0.16,1,0.3,1); --tinta-sel:rgba(124,31,53,.22); }
::selection{ background:var(--tinta-sel); color:var(--tinta); }
html{ -webkit-tap-highlight-color:transparent; scrollbar-color:var(--linea-fuerte) transparent; scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--linea-fuerte); border-radius:10px; border:2px solid var(--papel); }
::-webkit-scrollbar-track{ background:transparent; }
input,select,textarea{ caret-color:var(--burdeos); accent-color:var(--burdeos); }
button,a,label,select,input[type="checkbox"]{ touch-action:manipulation; }
button{ -webkit-user-select:none; user-select:none; }
.campo input,.campo select{ font-size:16px; transition:border-color .15s, box-shadow .15s; }
.campo input:focus,.campo select:focus{ outline:none; border-color:var(--burdeos); box-shadow:0 0 0 3px var(--tinta-sel); }

/* Puntos de espera dentro de un botón o mensaje */
.puntos::after{ content:''; display:inline-block; width:1.2em; text-align:left; animation:puntos 1.2s steps(4,end) infinite; }
@keyframes puntos{ 0%{ content:''; } 25%{ content:'.'; } 50%{ content:'..'; } 75%{ content:'...'; } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}