/* v1.10.2 -- TEMA DE TEMPORADA «Halloween y Día de Muertos» (sólo decoración; los dibujos los pone temas.js como variables --tema-*).
   Paleta: morado oscuro, naranja cempasúchil, negro y blanco hueso. Nada se mueve (sin animaciones) y nada recibe toques (pointer-events:none).
   NO SE TOCA: botones de acción, colores de Frío/Caliente/Barra, semáforo de cocina, avisos de error, tamaños de letra.
   v1.10.5 -- Más bonito y más visible: papel picado en colores vivos (cuatro banderitas por mosaico, sin transparencia), la tarjeta «Hola» de Inicio
   como vitrina del tema, acento naranja en la pestaña activa del menú y pétalos de cempasúchil en las orillas de Inicio (detrás de las tarjetas). */
html[data-tema]{--tema-morado:#2a1238;--tema-morado2:#4a2163;--tema-naranja:#f28c18;--tema-hueso:#f4ecdc;--tema-negro:#141014}
.tema-calavera{display:none}

/* ---- Pantalla del PIN: fondo morado con papel picado arriba, velas y cempasúchil abajo, y la calaverita junto al logo. ---- */
html[data-tema] .auth-page{position:relative;background:var(--tema-picado) repeat-x 0 0/264px 48px,radial-gradient(circle at top,var(--tema-morado2) 0,var(--tema-morado) 48%,var(--tema-negro) 100%)}
html[data-tema] .auth-page::before,html[data-tema] .auth-page::after{content:"";position:absolute;bottom:14px;width:112px;height:56px;pointer-events:none}
html[data-tema] .auth-page::before{left:14px;background:var(--tema-velas) no-repeat left bottom/64px 54px,var(--tema-cempasuchil) no-repeat right bottom/44px 44px}
html[data-tema] .auth-page::after{right:14px;background:var(--tema-calabaza) no-repeat left bottom/50px 50px,var(--tema-cempasuchil) no-repeat right bottom/40px 40px}
html[data-tema] .pin-card{position:relative;box-shadow:0 0 0 3px var(--tema-naranja),0 24px 70px #07112680}
html[data-tema] .pin-card::before{content:"";position:absolute;top:38px;left:calc(50% + 34px);width:58px;height:64px;background:var(--tema-calavera) no-repeat center/contain;pointer-events:none}

/* ---- Barra de arriba (tableta) y barra compacta (celular): una tira de papel picado arriba, sin tapar nada. ---- */
html[data-tema] .topbar{position:relative;height:auto;min-height:74px;padding-top:22px}
html[data-tema] .topbar::before,html[data-tema] .mv-barra::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:var(--tema-picado) repeat-x 0 0/120px 22px;pointer-events:none}
html[data-tema] .mv-barra{padding-top:calc(24px + env(safe-area-inset-top,0px))}
html[data-tema] .mv-barra::before{top:env(safe-area-inset-top,0px)}
@media (max-width:600px){html[data-tema] .mv-panel{top:calc(80px + env(safe-area-inset-top,0px))}}

/* ---- Inicio: la tarjeta «Hola» es la vitrina (fondo morado, papel picado arriba, altarcito con la calaverita, cempasúchil y velas). Textos en
   blanco y hueso sobre morado (contraste AA de sobra); el recado del dueño, en su cajita clara. ---- */
html[data-tema] .home-hero{padding-top:44px!important;border-color:var(--tema-morado2);
  background:var(--tema-picado) repeat-x 0 0/120px 22px,linear-gradient(128deg,var(--tema-morado) 0%,var(--tema-morado2) 62%,#6a2a74 100%)}
html[data-tema] .home-hero::before,html[data-tema] .home-hero::after{content:none}
html[data-tema] .home-hero>div:first-child{flex:1;min-width:0}
html[data-tema] .home-hero h1{color:#fff}
html[data-tema] .home-hero p:not(.eyebrow):not(.owner-message):not(.tema-saludo){color:var(--tema-hueso)}
html[data-tema] .home-hero .eyebrow{background:#3d1a52;color:#ffb347}
html[data-tema] .home-hero .eyebrow::before{color:var(--tema-naranja)}
html[data-tema] .home-hero .owner-message{background:var(--tema-hueso);color:var(--tema-morado);border-left-color:var(--tema-naranja)}
.tema-saludo,.tema-hero{display:none}
html[data-tema] .home-hero .tema-saludo{display:inline-block;margin:12px 0 0;padding:6px 12px;border-radius:999px;background:var(--tema-naranja);color:var(--tema-morado);font-size:14px;font-weight:800}
html[data-tema] .home-hero .tema-hero{display:block;float:right;width:96px;height:96px;margin:2px 0 6px 10px;pointer-events:none}
html[data-tema] .home-hero .owner-message{display:flow-root}
.tema-hero>svg{display:block;width:100%;height:100%}
@media (min-width:601px){html[data-tema] .home-hero .tema-hero{width:132px;height:132px;margin:-46px 12px 0 16px}html[data-tema] .home-hero .tema-saludo{font-size:15px}}

/* ---- Inicio: pétalos de cempasúchil sueltos en las orillas (detrás de las tarjetas; no tapan texto). ---- */
html[data-tema][data-vista="inicio"] .main{background:var(--tema-petalos) repeat-y left 0 top 0/16px 126px,var(--tema-petalos) repeat-y right 0 top 64px/16px 126px}
@media (min-width:601px){html[data-tema][data-vista="inicio"] .main{background-size:22px 172px,22px 172px}}

/* ---- Menú (barra de abajo en celular y tableta vertical; a la izquierda en tableta horizontal): la pestaña activa con acento naranja cempasúchil y
   una florecita arriba a la izquierda (la derecha es del número rojo de pendientes, que no se tapa). Las demás pestañas no cambian. ---- */
html[data-tema] .navbutton.active{position:relative;box-shadow:inset 3px 0 var(--tema-naranja),0 6px 16px rgba(0,0,0,.12)}
html[data-tema] .navbutton.active::before{background:var(--tema-naranja)}
html[data-tema] .navbutton.active svg{color:#ffb347}
html[data-tema] .navbutton.active::after{content:"";position:absolute;top:6px;left:8px;width:14px;height:14px;background:var(--tema-cempasuchil) no-repeat center/contain;pointer-events:none}
@media (max-width:800px){html[data-tema] .navbutton.active{box-shadow:inset 0 -4px var(--tema-naranja)}}

/* ---- Nueva orden: papel picado en la cabeza de la ventana y una flor junto al título. ---- */
html[data-tema] #modal.tema-nueva-orden .modal-head{padding-top:30px;background:var(--tema-picado) repeat-x 0 0/132px 24px}
html[data-tema] #modal.tema-nueva-orden .modal-head h2::after{content:"";display:inline-block;width:26px;height:26px;margin-left:8px;vertical-align:-4px;background:var(--tema-cempasuchil) no-repeat center/contain}

/* ---- Cocina (en la app): velas y calabaza junto al título, nada más. Las tarjetas, estaciones y el semáforo no cambian. ---- */
html[data-tema][data-vista="cocina"] .heading>div:first-child{position:relative;padding-right:88px}
html[data-tema][data-vista="cocina"] .heading>div:first-child::after{content:"";position:absolute;right:0;top:0;width:80px;height:40px;
  background:var(--tema-velas) no-repeat left center/46px 40px,var(--tema-calabaza) no-repeat right center/32px 32px;pointer-events:none}

/* ---- Monitor de cocina (linea.html): papel picado arriba y la calaverita junto al logo. Las columnas Frío/Caliente/Barra no cambian. ---- */
html[data-tema] .kds-head{padding-top:26px;background:var(--tema-picado) repeat-x 0 0/132px 24px}
html[data-tema] .kds-head .tema-calavera{display:inline-block;width:46px;height:50px}

/* ---- /pedir: cabeza morada con papel picado y la calaverita junto al logo. ---- */
html[data-tema] .cabeza{padding-top:30px;background:var(--tema-picado) repeat-x 0 0/132px 24px,linear-gradient(135deg,var(--tema-morado) 0,var(--tema-negro) 100%);color:#fff}
html[data-tema] .cabeza small{color:var(--tema-hueso)}
html[data-tema] .cabeza .tema-calavera{display:inline-block;width:40px;height:44px;margin-left:-4px}
.tema-calavera svg{display:block;width:100%;height:100%}

/* ---- Configuración → Tema de temporada ---- */
.tema-estado{margin:0 0 12px;font-size:15px}
.tema-forzar{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:14px}
.tema-forzar select{width:auto;min-height:37px;padding:6px 10px}
.tema-sub{margin:18px 0 6px;font-size:15px}
.tema-frases{margin:16px 0 0}
.tema-fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 0;border-bottom:1px solid #e9edf2}
.tema-on{display:flex;align-items:center;gap:10px;margin:0;font-weight:500}
.tema-on input{width:22px;height:22px;min-height:0;margin:0}
.tema-on span{display:flex;flex-direction:column}
.tema-on small{font-weight:400}
.tema-fechas{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.tema-fechas input{width:76px;min-height:38px;padding:6px 8px;text-align:center}
@media print{.tema-calavera{display:none!important}}

/* ==== v1.10.17 -- HALLOWEEN (data-tema-fase="halloween": 10-15 a 10-31; el 1 y 2 de noviembre queda Muertos solo). Sólo decoración: sin tocar botones,
   Frío/Caliente/Barra, semáforo ni avisos; nada recibe toques. Todo lo nuevo cuelga de la fase, así que Muertos se ve igual que antes. ==== */
/* PIN: murciélagos arriba, calabaza grande a la derecha y fantasma a la izquierda (abajo; la tarjeta queda por encima). */
html[data-tema][data-tema-fase="halloween"] .auth-page{background:var(--tema-murcielagos) repeat-x 0 0/220px 40px,radial-gradient(circle at top,var(--tema-morado2) 0,var(--tema-morado) 48%,var(--tema-negro) 100%)}
html[data-tema][data-tema-fase="halloween"] .auth-page::before{left:12px;width:84px;height:84px;background:var(--tema-fantasma) no-repeat left bottom/62px 72px}
html[data-tema][data-tema-fase="halloween"] .auth-page::after{right:10px;width:150px;height:140px;background:var(--tema-jack) no-repeat right bottom/140px 131px}

/* Barra de arriba (tableta) y barra compacta (celular): tira de murciélagos sobre morado, en lugar del papel picado. */
html[data-tema][data-tema-fase="halloween"] .topbar::before,html[data-tema][data-tema-fase="halloween"] .mv-barra::before{background:var(--tema-murcielagos) repeat-x 0 0/120px 22px,var(--tema-morado)}

/* Inicio: telarañas en dos esquinas de la tarjeta «Hola» (el altar y el saludo cambian de fase desde temas.js). */
html[data-tema][data-tema-fase="halloween"] .home-hero{position:relative}
html[data-tema][data-tema-fase="halloween"] .home-hero::before,html[data-tema][data-tema-fase="halloween"] .home-hero::after{content:"";position:absolute;right:auto;bottom:auto;width:56px;height:56px;border:0;border-radius:0;pointer-events:none;background:var(--tema-telarana) no-repeat 0 0/contain}
html[data-tema][data-tema-fase="halloween"] .home-hero::before{left:auto;right:0;top:0;transform:scaleX(-1)}
html[data-tema][data-tema-fase="halloween"] .home-hero::after{left:0;top:0;width:44px;height:44px}

/* Nueva orden: telaraña en la esquina de la cabeza de la ventana (la izquierda; la derecha es del botón de cerrar). */
html[data-tema][data-tema-fase="halloween"] #modal.tema-nueva-orden .modal-head{position:relative}
html[data-tema][data-tema-fase="halloween"] #modal.tema-nueva-orden .modal-head::before{content:"";position:absolute;left:0;top:24px;width:46px;height:46px;pointer-events:none;background:var(--tema-telarana) no-repeat 0 0/contain}

/* Terminal: murciélago y calabaza junto al título, igual que Cocina. */
html[data-tema][data-tema-fase="halloween"][data-vista="terminal"] .heading>div:first-child{position:relative;padding-right:88px}
html[data-tema][data-tema-fase="halloween"][data-vista="terminal"] .heading>div:first-child::after{content:"";position:absolute;right:0;top:0;width:84px;height:44px;pointer-events:none;
  background:var(--tema-murcielago) no-repeat left top/38px 19px,var(--tema-jack) no-repeat right center/40px 38px}

/* Impresión: nada de decoración. */
@media print{.tema-calavera,.tema-hero,.tema-saludo{display:none!important}html[data-tema-fase] *,html[data-tema-fase] *::before,html[data-tema-fase] *::after{background-image:none!important}}