/* Tema Navidad de Wessel Asistencia — diciembre 2026 (minimalista, solo la app del personal).
   Solo actúa cuando <html> tiene la clase "navidad". Un script en la página la pone sola del 1 al 31 de diciembre de 2026
   (hora de Perú) y en enero el diseño vuelve al normal sin hacer nada. Administración puede forzarlo o apagarlo en
   Configuración (settings/general.temaNavidad = auto | on | off). Respeta el modo claro u oscuro que elija cada persona.
   Íconos: árbol, regalo, bastón de caramelo, copo, bola, campana, estrella y acebo dibujados planos (SVG inline), sin imágenes externas.
   La nieve la crea el script de la página (div #nvNieve) y se apaga sola si el celular pide «reducir movimiento». */
html.navidad:root{
  --papel:#FFFCF8; --tarjeta:#F9F1EA; --tarjeta-2:#F0E3D8; --control:#FDF8F2;
  --tinta:#2A1719; --tinta-suave:#664B4C; --tinta-tenue:#755A5A;
  --linea:rgba(150,40,45,.16); --linea-fuerte:rgba(150,40,45,.32);
  --burdeos:#B3202F; --burdeos-texto:#A41C2B; --sobre-color:#FFFFFF;
  --sello:#1F7A44; --sobre-sello:#FFFFFF; --tardanza:#8A5A15; --falta:#A83232;
  --tinta-sel:rgba(228,56,75,.22);
}
@media (prefers-color-scheme: dark){
  html.navidad:root:not([data-theme="light"]){
    --papel:#0F1914; --tarjeta:#17261E; --tarjeta-2:#1F3328; --control:#0B130F;
    --tinta:#F6F1EA; --tinta-suave:#B8C4B6; --tinta-tenue:#9BAA99;
    --linea:rgba(255,215,140,.16); --linea-fuerte:rgba(255,215,140,.32);
    --burdeos:#C22A3C; --burdeos-texto:#FF8C98; --sobre-color:#FFFFFF;
    --sello:#7BD99A; --sobre-sello:#082412; --tardanza:#F0C36A; --falta:#FF9A9A;
    --tinta-sel:rgba(228,56,75,.3);
  }
}
html.navidad:root[data-theme="dark"]{
  --papel:#0F1914; --tarjeta:#17261E; --tarjeta-2:#1F3328; --control:#0B130F;
  --tinta:#F6F1EA; --tinta-suave:#B8C4B6; --tinta-tenue:#9BAA99;
  --linea:rgba(255,215,140,.16); --linea-fuerte:rgba(255,215,140,.32);
  --burdeos:#C22A3C; --burdeos-texto:#FF8C98; --sobre-color:#FFFFFF;
  --sello:#7BD99A; --sobre-sello:#082412; --tardanza:#F0C36A; --falta:#FF9A9A;
  --tinta-sel:rgba(228,56,75,.3);
}
html.navidad:root, html.navidad:root[data-theme]{
  --nv-arbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='17' y='32' width='6' height='6' rx='1' fill='%238A5A2B'/%3E%3Cpath d='M20 8L11 18h18z' fill='%232F9A5B'/%3E%3Cpath d='M20 14L8 27h24z' fill='%23278A4E'/%3E%3Cpath d='M20 22L5 35h30z' fill='%231F7A44'/%3E%3Cpolygon points='20.0,1.3 21.4,4.6 24.9,4.9 22.2,7.2 23.1,10.7 20.0,8.8 16.9,10.7 17.8,7.2 15.1,4.9 18.6,4.6' fill='%23FFD24A'/%3E%3Ccircle cx='17' cy='22' r='1.9' fill='%23E4384B'/%3E%3Ccircle cx='24' cy='28' r='2' fill='%23FFD24A'/%3E%3Ccircle cx='13' cy='31' r='2' fill='%23FFD24A'/%3E%3Ccircle cx='27' cy='32' r='1.8' fill='%23E4384B'/%3E%3Ccircle cx='20' cy='29' r='1.7' fill='%23E4384B'/%3E%3C/svg%3E");
  --nv-regalo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='7' y='18' width='26' height='17' rx='2' fill='%23D93A4B'/%3E%3Crect x='5' y='13' width='30' height='7' rx='2' fill='%23B92A3B'/%3E%3Crect x='18' y='13' width='4' height='22' fill='%23FFD35A'/%3E%3Cpath d='M20 13C14 12 11 5 15 4s5 5 5 9zM20 13c6-1 9-8 5-9s-5 5-5 9z' fill='none' stroke='%23FFD35A' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --nv-baston:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M27 36V14a7 7 0 0 0-14 0' stroke='%23FFFFFF' stroke-width='7' stroke-linecap='round' fill='none'/%3E%3Cpath d='M27 36V14a7 7 0 0 0-14 0' stroke='%23E4384B' stroke-width='7' stroke-linecap='butt' stroke-dasharray='4.2 5.6' fill='none'/%3E%3Cpath d='M27 36V14a7 7 0 0 0-14 0' stroke='%23D6D0CA' stroke-width='1' fill='none' stroke-opacity='.0'/%3E%3C/svg%3E");
  --nv-copo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%235CB8EC' stroke-width='2.6' stroke-linecap='round' fill='none'%3E%3Cg transform='rotate(0 20 20)'%3E%3Cpath d='M20 4V36' /%3E%3Cpath d='M20 10l-4-4M20 10l4-4M20 30l-4 4M20 30l4 4'/%3E%3C/g%3E%3Cg transform='rotate(60 20 20)'%3E%3Cpath d='M20 4V36' /%3E%3Cpath d='M20 10l-4-4M20 10l4-4M20 30l-4 4M20 30l4 4'/%3E%3C/g%3E%3Cg transform='rotate(120 20 20)'%3E%3Cpath d='M20 4V36' /%3E%3Cpath d='M20 10l-4-4M20 10l4-4M20 30l-4 4M20 30l4 4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --nv-bola:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='16' y='4' width='8' height='6' rx='1.5' fill='%23F2B632'/%3E%3Cpath d='M20 4V2' stroke='%23F2B632' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='24' r='12.5' fill='%23E4384B'/%3E%3Cpath d='M8.2 22q11.8 5 23.6 0' stroke='%23FFD24A' stroke-width='2.6' fill='none'/%3E%3Cpath d='M13 17q2-4 6-5' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' fill='none' stroke-opacity='.65'/%3E%3C/svg%3E");
  --nv-campana:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='6' r='3' fill='none' stroke='%23D9951B' stroke-width='2'/%3E%3Cpath d='M20 8c-6 0-9.5 5-9.5 12v6l-3.5 4.5h26L29.5 26v-6C29.5 13 26 8 20 8z' fill='%23F2B632'/%3E%3Cpath d='M14 14q-3 4-2.5 10' stroke='%23FFE08A' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='20' cy='34' r='3.2' fill='%23D9951B'/%3E%3C/svg%3E");
  --nv-estrella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpolygon points='20.0,4.0 24.2,15.2 36.2,15.7 26.8,23.2 30.0,34.8 20.0,28.2 10.0,34.8 13.2,23.2 3.8,15.7 15.8,15.2' fill='%23FFC928'/%3E%3C/svg%3E");
  --nv-acebo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' fill='none' stroke-linecap='round'%3E%3Cpath d='M-4 14Q36 10 62 36T104 92 118 146' stroke='%235D4A2E' stroke-width='3'/%3E%3Cpath d='M14 26q3-8 7-4q3-7 7-2q4-6 7-1q4-4 7 1q4-2 6 3q-2 4-6 4q-1 5-7 3q-3 5-7 1q-4 3-7-1q-5 1-7-4z' fill='%232F8F55' transform='rotate(30 28 26)'/%3E%3Cpath d='M38 28q3-8 7-4q3-7 7-2q4-6 7-1q4-4 7 1q4-2 6 3q-2 4-6 4q-1 5-7 3q-3 5-7 1q-4 3-7-1q-5 1-7-4z' fill='%232F8F55' transform='rotate(-30 52 28)'/%3E%3Cpath d='M62 60q3-8 7-4q3-7 7-2q4-6 7-1q4-4 7 1q4-2 6 3q-2 4-6 4q-1 5-7 3q-3 5-7 1q-4 3-7-1q-5 1-7-4z' fill='%232F8F55' transform='rotate(40 76 60)'/%3E%3Cpath d='M82 74q3-8 7-4q3-7 7-2q4-6 7-1q4-4 7 1q4-2 6 3q-2 4-6 4q-1 5-7 3q-3 5-7 1q-4 3-7-1q-5 1-7-4z' fill='%232F8F55' transform='rotate(-25 96 74)'/%3E%3Cpath d='M98 108q3-8 7-4q3-7 7-2q4-6 7-1q4-4 7 1q4-2 6 3q-2 4-6 4q-1 5-7 3q-3 5-7 1q-4 3-7-1q-5 1-7-4z' fill='%232F8F55' transform='rotate(35 112 108)'/%3E%3Cpath d='M112 128q3-8 7-4q3-7 7-2q4-6 7-1q4-4 7 1q4-2 6 3q-2 4-6 4q-1 5-7 3q-3 5-7 1q-4 3-7-1q-5 1-7-4z' fill='%232F8F55' transform='rotate(-35 126 128)'/%3E%3Cg fill='%23E4384B'%3E%3Ccircle cx='40' cy='16' r='4.8'/%3E%3Ccircle cx='47' cy='20' r='4.2'/%3E%3Ccircle cx='86' cy='48' r='4.6'/%3E%3Ccircle cx='93' cy='52' r='4'/%3E%3Ccircle cx='104' cy='94' r='4.8'/%3E%3Ccircle cx='111' cy='98' r='4.1'/%3E%3C/g%3E%3Cg fill='%23FFB3B8'%3E%3Ccircle cx='38.5' cy='14.5' r='1.3'/%3E%3Ccircle cx='84.5' cy='46.5' r='1.3'/%3E%3Ccircle cx='102.5' cy='92.5' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
}
/* detalles de color */
html.navidad .btn-principal{ box-shadow:0 4px 16px rgba(179,32,47,.22); }
html.navidad .btn-marcar{ box-shadow:0 6px 20px rgba(31,122,68,.18); }
html.navidad .btn-marcar.salida{ box-shadow:0 6px 20px rgba(179,32,47,.24); }
html.navidad .btn-marcar.btn-extra{ background:#F2B632; color:#2A1D00; border-color:#2A1D00; box-shadow:0 3px 0 #2A1D00; }
html.navidad .btn-marcar.btn-extra.en-curso{ background:var(--burdeos); color:#fff; border-color:#fff; }
html.navidad .rotulo-seccion{ color:var(--burdeos-texto); }
html.navidad .tarjeta, html.navidad .casilla{ border-color:var(--linea-fuerte); }

/* ---- decoración minimalista ---- */
/* franja fina arriba: rojo → dorado → verde */
html.navidad body{ border-top:3px solid transparent; border-image:linear-gradient(90deg,#E4384B,#FFC928,#2F9A5B) 1; overflow-x:hidden; }
/* árbol junto al saludo */
html.navidad #saludo{ position:relative; }
html.navidad #saludo::after{ content:''; margin-left:auto; width:36px; height:36px; flex:none; background:var(--nv-arbol) center / contain no-repeat; }
/* fila de íconos bajo el reloj: árbol · regalo · bastón · copo · bola · campana */
html.navidad .reloj::after{ content:''; display:block; height:28px; margin:10px auto 0; max-width:300px;
  background:var(--nv-arbol) 3% center / 25px no-repeat, var(--nv-regalo) 21% center / 24px no-repeat, var(--nv-baston) 39% center / 24px no-repeat,
             var(--nv-copo) 57% center / 24px no-repeat, var(--nv-bola) 75% center / 24px no-repeat, var(--nv-campana) 96% center / 24px no-repeat; opacity:.97; }
/* ramas de acebo con bayas bajo la barra de arriba, en las dos esquinas (la derecha va en espejo) */
html.navidad::before, html.navidad::after{ content:''; position:fixed; top:72px; width:84px; height:84px; pointer-events:none; z-index:1; opacity:.6; background:var(--nv-acebo) top left / contain no-repeat; }
html.navidad::before{ left:0; }
html.navidad::after{ right:0; transform:scaleX(-1); }
/* regalo y campana fijos abajo (suben cuando la barra de pestañas está a la vista) */
html.navidad body::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:2;
  background:var(--nv-regalo) left 10px bottom 12px / 34px no-repeat; opacity:.97; }
html.navidad body.tm-nav::before{ background:var(--nv-regalo) left 10px bottom 82px / 34px no-repeat; }
html.navidad body::after{ content:''; position:fixed; right:12px; bottom:12px; width:36px; height:36px; pointer-events:none; z-index:2; background:var(--nv-campana) center / contain no-repeat; transform-origin:50% 8%; opacity:.97; }
html.navidad body.tm-nav::after{ bottom:82px; }
/* estrella junto al reloj */
html.navidad .reloj{ position:relative; }
html.navidad .reloj::before{ content:''; position:absolute; top:-2px; right:16px; width:28px; height:28px; pointer-events:none; background:var(--nv-estrella) center / contain no-repeat; }
/* estrella fugaz que cruza cerca del saludo */
html.navidad #saludo::before{ content:''; position:absolute; top:-4px; left:-40px; width:22px; height:22px; pointer-events:none; background:var(--nv-estrella) center / contain no-repeat; }
/* nieve (la crea el script de la página) */
#nvNieve{ position:fixed; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
#nvNieve i{ position:absolute; top:-12px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(90,160,220,.45), 0 0 6px rgba(255,255,255,.8); opacity:.9; }
@media (prefers-reduced-motion: no-preference){
  html.navidad body::after{ animation:nv-campana 3.2s ease-in-out infinite; }
  @keyframes nv-campana{ 0%,100%{ transform:rotate(-12deg); } 50%{ transform:rotate(12deg); } }
  html.navidad .reloj::before{ animation:nv-brilla 2.4s ease-in-out infinite; }
  @keyframes nv-brilla{ 0%,100%{ transform:scale(.88) rotate(-6deg); opacity:.75; } 50%{ transform:scale(1.08) rotate(6deg); opacity:1; } }
  html.navidad #saludo::before{ animation:nv-fugaz 20s linear infinite; }
  @keyframes nv-fugaz{ 0%{ transform:translate(0,0) rotate(0); } 25%{ transform:translate(26vw,10px) rotate(90deg); } 50%{ transform:translate(52vw,-4px) rotate(180deg); } 75%{ transform:translate(78vw,12px) rotate(270deg); } 100%{ transform:translate(112vw,2px) rotate(360deg); } }
  html.navidad .btn-marcar:not(:disabled):not(.btn-extra){ animation:nv-late 3.8s ease-in-out infinite; }
  @keyframes nv-late{ 0%,100%{ box-shadow:0 6px 20px rgba(31,122,68,.16); } 50%{ box-shadow:0 6px 28px rgba(31,122,68,.34); } }
  #nvNieve i{ animation:nv-cae linear infinite; }
  @keyframes nv-cae{ 0%{ transform:translate(0,-12px); } 50%{ transform:translate(14px,52vh); } 100%{ transform:translate(-10px,106vh); } }
}
@media (prefers-reduced-motion: reduce){ #nvNieve{ display:none; } }
/* en pantallas grandes: adornos más pequeños, sin estrella girando ni cruzando */
@media (min-width:900px){
  html.navidad body::before{ background:var(--nv-regalo) left 12px bottom 12px / 30px no-repeat; }
  html.navidad body::after{ bottom:12px; right:14px; width:30px; height:30px; }
  html.navidad .reloj::before, html.navidad #saludo::before{ display:none; }
}
/* impresión y reportes: sin decoración */
@media print{ html.navidad::before, html.navidad::after, html.navidad body::before, html.navidad body::after, html.navidad #saludo::after, html.navidad #saludo::before, html.navidad .reloj::before, html.navidad .reloj::after, #nvNieve{ display:none !important; } }