/* ═══════════════════════════════════════════════════════════════════════════
   TEMA HALLOWEEN 2 — NOCHE DE MUERTOS
   Halloween a la mexicana, con miedo: papel picado que se mece, pétalos de
   cempasúchil que caen, calavera de ojos encendidos y una mano de esqueleto
   que sale de la tierra.
   Solo estética: se carga DESPUÉS del <style> de cada página y no toca ids,
   botones ni funciones. Las decoraciones no reciben clics (pointer-events:none).
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Sancreek&family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Alegreya+Sans+SC:wght@500;700;800&family=Overpass+Mono:wght@400;600&display=swap');
@import url('../base-movil.css');

:root {
  --noche: #140a24;
  --noche-2: #1d1031;
  --tarjeta: #1f1235;
  --linea: #3d2560;
  --cempa: #ff8a1f;
  --cempa-2: #ffb347;
  --amarillo: #ffd23f;
  --rosa: #ff2e88;
  --turquesa: #1fd1c4;
  --morado: #9b5de5;
  --hueso: #fff4e0;
  --tenue: #b9a6d8;
  --sangre: #ff4d6d;
}

/* ── Fondo: noche violeta con estrellas y resplandor de veladoras ── */
html {
  min-height: 100%;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff7 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 68% 9%, #fff8 50%, transparent 52%),
    radial-gradient(1px 1px at 84% 34%, #fff6 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 32% 46%, #fff5 50%, transparent 52%),
    radial-gradient(1px 1px at 52% 27%, #fff6 50%, transparent 52%),
    radial-gradient(900px 520px at 50% 118%, rgba(255, 138, 31, .28), transparent 65%),
    radial-gradient(800px 600px at 105% 40%, rgba(255, 46, 136, .12), transparent 60%),
    linear-gradient(180deg, #0f0720 0%, #1a0d2e 55%, #12081f 100%);
  background-attachment: fixed;
  scrollbar-color: var(--linea) var(--noche);
}
body {
  background: transparent !important;
  color: var(--hueso) !important;
  font: 16px/1.55 'Alegreya Sans', 'Segoe UI', sans-serif !important;
  padding-top: 118px !important;
  padding-bottom: 60px !important;
  overflow-x: clip;
}
::selection { background: var(--rosa); color: #fff; }

/* ── Decoración (fija, detrás del contenido, sin clics) ── */
html::before {                      /* papel picado que se mece con el viento (se va con el scroll) */
  content: ''; position: absolute; z-index: 3; pointer-events: none;
  top: -6px; left: -2%; right: -2%; height: 104px;
  background: url('papel-picado.svg') repeat-x top left / 606px 110px;
  transform-origin: top center;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
  animation: mu-viento 3.6s ease-in-out infinite alternate;
}
html::after {                       /* pétalos de cempasúchil cayendo */
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    url('petalos.svg') 0 0 / 300px 420px repeat,
    url('petalos.svg') 140px 60px / 210px 294px repeat;
  opacity: .55;
  animation: mu-petalos 26s linear infinite;
}
body::before {                      /* calavera vigilando, con ojos encendidos */
  content: ''; position: fixed; z-index: 0; pointer-events: none;
  left: -40px; bottom: -30px; width: min(30vw, 340px); aspect-ratio: 300 / 340;
  background: url('calavera.svg') center / contain no-repeat;
  opacity: .2; transform: rotate(-12deg);
  animation: mu-calavera 9s ease-in-out infinite;
}
body::after {                       /* mano de esqueleto saliendo de la tumba */
  content: ''; position: fixed; z-index: 1; pointer-events: none;
  right: 3vw; bottom: 0; width: 150px; height: 260px;
  background: url('mano.svg') bottom center / contain no-repeat;
  transform: translateY(78%);
  animation: mu-mano 11s ease-in-out 2s infinite;
}
.caja { position: relative; z-index: 2; }
.caja::before { content: none; }    /* (en el inicio de sesión es la calavera de la ofrenda) */
h1::before {                        /* veladora encendida antes del título */
  content: ''; display: inline-block; width: 20px; height: 46px; margin-right: 10px; vertical-align: -8px;
  background: url('vela.svg') center bottom / contain no-repeat;
  animation: mu-flama 1.8s ease-in-out infinite;
}
h1::after {                         /* calaverita junto al título, cabeceando */
  content: ''; display: inline-block; width: 34px; height: 38px; margin-left: 10px; vertical-align: -6px;
  background: url('calavera.svg') center / contain no-repeat;
  animation: mu-cabeceo 2.6s ease-in-out infinite;
}

/* ── Tipografía ── */
h1 {
  font-family: 'Sancreek', 'Rockwell', serif !important;
  font-weight: 400 !important;
  font-size: clamp(26px, 4vw, 40px) !important;
  line-height: 1.15 !important; letter-spacing: .5px;
  background: linear-gradient(90deg, var(--amarillo), var(--cempa) 40%, var(--rosa) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 3px 0 #3b0f2a) drop-shadow(0 0 18px rgba(255, 138, 31, .35));
}
h2 {
  font-family: 'Alegreya Sans SC', sans-serif !important;
  font-weight: 800 !important; font-size: 18px !important; letter-spacing: .6px;
  color: var(--cempa-2) !important;
}
h2::before { content: '✿ '; color: var(--rosa); }
.subtitulo, .sub { color: var(--tenue) !important; font-style: italic; }
.subtitulo b, .sub b { color: var(--cempa-2); }
label { font-family: 'Alegreya Sans SC', sans-serif; font-weight: 700; font-size: 13px !important; letter-spacing: .5px; color: var(--tenue) !important; }
a, .sesion a, a.volver, a.link { color: var(--turquesa) !important; text-decoration: none; font-weight: 500; transition: color .2s, text-shadow .2s; }
a:hover, .sesion a:hover, a.volver:hover, a.link:hover { color: var(--rosa) !important; text-shadow: 0 0 12px rgba(255, 46, 136, .55); }
.sesion { color: var(--hueso) !important; }
.sesion .cupo, .contadores { color: var(--tenue) !important; }
.sesion .cupo b, .contadores b, .stat b { color: var(--amarillo) !important; }

/* ── Tarjetas: ofrenda con franja de papel picado ── */
.tarjeta {
  position: relative;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(255, 46, 136, .07), transparent 60%),
    linear-gradient(180deg, #24143d, var(--tarjeta)) !important;
  border: 2px solid rgba(255, 138, 31, .28) !important;
  border-radius: 16px !important;
  padding-top: 26px !important;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .3);
  animation: mu-aparece .75s cubic-bezier(.3, 1.4, .5, 1) backwards;
}
.tarjeta + .tarjeta { animation-delay: .1s; }
.tarjeta + .tarjeta + .tarjeta { animation-delay: .2s; }
.tarjeta + .tarjeta + .tarjeta + .tarjeta { animation-delay: .3s; }
.tarjeta + .tarjeta + .tarjeta + .tarjeta + .tarjeta { animation-delay: .4s; }
.tarjeta::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; pointer-events: none;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--rosa) 0 20%, var(--cempa) 0 40%, var(--turquesa) 0 60%, var(--amarillo) 0 80%, var(--morado) 0);
  -webkit-mask: radial-gradient(circle at 7px 10px, transparent 4px, #000 4.5px) 0 0 / 14px 10px repeat-x;
          mask: radial-gradient(circle at 7px 10px, transparent 4px, #000 4.5px) 0 0 / 14px 10px repeat-x;
}

/* ── Campos ── */
input, select, textarea {
  background: #120822 !important;
  border: 2px solid var(--linea) !important;
  color: var(--hueso) !important;
  border-radius: 10px !important;
  font-family: 'Alegreya Sans', sans-serif;
  transition: border-color .2s, box-shadow .25s;
}
input#curp, .mono, td.mono, .keybox { font-family: 'Overpass Mono', 'Consolas', monospace !important; }
input#curp { letter-spacing: 1.5px !important; }
input::placeholder, textarea::placeholder { color: #6f5b92; }
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--cempa) !important;
  box-shadow: 0 0 0 4px rgba(255, 138, 31, .18), 0 0 24px rgba(255, 138, 31, .25) !important;
}

/* ── Botones: rosa mexicano con sombra de lotería ── */
button.principal, .primario, #btn {
  background: var(--rosa) !important;
  color: #fff !important;
  border: 2px solid #140a24 !important;
  border-radius: 12px !important;
  font-family: 'Alegreya Sans SC', sans-serif !important; font-weight: 800 !important;
  font-size: 16px !important; letter-spacing: .6px;
  box-shadow: 4px 4px 0 var(--turquesa);
  transition: transform .12s, box-shadow .12s, filter .2s;
}
button.principal:hover:not(:disabled), .primario:hover, #btn:hover:not(:disabled) {
  transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--turquesa); filter: brightness(1.08);
}
button.principal:active:not(:disabled), .primario:active, #btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--turquesa); }
button.principal:disabled, #btn:disabled { background: #2d1d48 !important; color: #7b6a99 !important; box-shadow: 3px 3px 0 #1a0f2c; }
.sec, .barra-tabla button, .acc button {
  background: #170c2a !important; color: var(--hueso) !important;
  border: 2px solid var(--linea) !important; border-radius: 9px !important;
  font-family: 'Alegreya Sans', sans-serif !important; font-weight: 500;
  transition: border-color .2s, color .2s, transform .12s;
}
.sec:hover, .barra-tabla button:hover, .acc button:hover { border-color: var(--cempa) !important; color: var(--cempa-2) !important; transform: translateY(-1px); }
.acc button.link { border-color: rgba(31, 209, 196, .55) !important; color: var(--turquesa) !important; }
.sec.peligro:hover { color: var(--sangre) !important; border-color: var(--sangre) !important; }

/* ── Tablas ── */
th {
  font-family: 'Alegreya Sans SC', sans-serif !important; font-weight: 800 !important;
  font-size: 12.5px !important; letter-spacing: .8px;
  color: var(--cempa-2) !important; border-bottom: 2px dashed rgba(255, 138, 31, .35) !important;
}
td { border-bottom: 1px dashed rgba(255, 244, 224, .09) !important; }
tbody tr { transition: background .25s; animation: mu-fila .5s ease backwards; }
tbody tr:hover { background: linear-gradient(90deg, rgba(255, 46, 136, .12), rgba(255, 138, 31, .05) 60%, transparent); }
.vacio { color: var(--tenue) !important; font-style: italic; }
.detalle { color: var(--hueso) !important; }
.detalle.err { color: #ff9db1 !important; }

/* ── Insignias de estado ── */
.badge { border-radius: 999px !important; font-family: 'Alegreya Sans SC', sans-serif; font-weight: 800 !important; font-size: 12px !important; letter-spacing: .4px; border: 1.5px solid transparent; }
.badge.listo, .b-si, .e-ok { background: var(--turquesa) !important; color: #06241f !important; }
.badge.listo::before, .e-ok::before { content: '✿ '; }
.badge.error, .b-no, .e-fail { background: var(--sangre) !important; color: #2a0510 !important; }
.badge.error::before, .e-fail::before { content: '☠ '; }
.badge.espera { background: var(--amarillo) !important; color: #2a1b00 !important; }
.badge.espera::before { content: '❋ '; }
.badge.proc, .e-proc { background: transparent !important; color: var(--cempa-2) !important; border-color: var(--cempa) !important; animation: mu-latido 1.4s ease-in-out infinite; }
.badge.interr { background: var(--cempa) !important; color: #2a1200 !important; }
.b-admin { background: var(--morado) !important; color: #fff !important; }
.b-user { background: #2d1d48 !important; color: var(--tenue) !important; }

/* ── Avisos ── */
.aviso { border-radius: 12px !important; border-left-width: 6px !important; }
.aviso.error { background: rgba(255, 77, 109, .14) !important; border: 2px solid var(--sangre) !important; border-left-width: 6px !important; color: #ffd0da !important; }
.aviso.ok { background: rgba(31, 209, 196, .12) !important; border: 2px solid var(--turquesa) !important; border-left-width: 6px !important; color: #c8fff9 !important; }
.aviso.anuncio, .aviso.warn { background: rgba(255, 210, 63, .12) !important; border: 2px solid var(--amarillo) !important; border-left-width: 6px !important; color: #fff1b8 !important; }

/* ── "Procesando": una flor de cempasúchil girando ── */
.spin {
  width: 14px !important; height: 14px !important; border: none !important; border-radius: 50% !important;
  background:
    radial-gradient(circle, #c2410c 0 22%, transparent 24%),
    conic-gradient(#ff8a1f 0 12.5%, #ffd23f 0 25%, #ff8a1f 0 37.5%, #ffd23f 0 50%, #ff8a1f 0 62.5%, #ffd23f 0 75%, #ff8a1f 0 87.5%, #ffd23f 0) !important;
  box-shadow: 0 0 10px rgba(255, 138, 31, .7);
  animation: g 1.6s linear infinite !important;
}

/* ── Interruptores del admin ── */
.switch .riel { background: #170c2a !important; border-color: var(--linea) !important; }
.switch .riel::before { background: var(--tenue) !important; }
.switch input:checked ~ .riel { background: var(--turquesa) !important; border-color: var(--turquesa) !important; }
.switch input:checked ~ .riel::before { background: #fff !important; }
.switch.peligro input:checked ~ .riel { background: var(--sangre) !important; border-color: var(--sangre) !important; }

/* ── Barras de desplazamiento ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--noche); }
::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 6px; border: 2px solid var(--noche); }
::-webkit-scrollbar-thumb:hover { background: var(--cempa); }

/* ── Inicio de sesión: una ofrenda con su calavera y veladoras ── */
body:has(#btn) .caja {
  position: relative;
  max-width: 380px !important;
  padding: 86px 30px 34px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 138, 31, .16), transparent 65%),
    linear-gradient(180deg, #2a1748, #1a0e2e) !important;
  border: 2px solid rgba(255, 138, 31, .45) !important;
  box-shadow: 0 30px 60px -24px #000, 0 0 60px rgba(255, 46, 136, .12);
  text-align: center;
  animation: mu-aparece .9s cubic-bezier(.3, 1.4, .5, 1) backwards;
}
body:has(#btn) .caja::before {
  content: ''; position: absolute; pointer-events: none;
  top: -62px; left: 50%; right: auto; width: 120px; height: 136px; transform: translateX(-50%);
  background: url('calavera.svg') center / contain no-repeat;
  animation: mu-ojos 3.2s ease-in-out infinite;
}
body:has(#btn) .caja::after {
  content: ''; position: absolute; pointer-events: none;
  left: -46px; right: -46px; bottom: -6px; height: 80px;
  background: url('vela.svg') left bottom / 32px 78px no-repeat, url('vela.svg') right bottom / 32px 78px no-repeat;
  animation: mu-flama 1.6s ease-in-out infinite;
}
body:has(#btn) h1::after, body:has(#btn) h1::before { display: none; }
body:has(#btn) label { text-align: left; }

/* ── Animaciones ── */
@keyframes mu-viento {
  0% { transform: perspective(600px) rotateX(14deg) skewX(-1.5deg); }
  100% { transform: perspective(600px) rotateX(-8deg) skewX(1.5deg); }
}
@keyframes mu-petalos {
  from { background-position: 0 0, 140px 60px; }
  to { background-position: 80px 840px, 40px 648px; }
}
@keyframes mu-calavera {
  0%, 82%, 100% { opacity: .2; filter: drop-shadow(0 0 0 transparent); }
  86% { opacity: .5; filter: drop-shadow(0 0 30px rgba(255, 106, 0, .9)); }
  88% { opacity: .22; }
  90% { opacity: .55; filter: drop-shadow(0 0 40px rgba(255, 46, 136, .9)); }
}
@keyframes mu-mano {
  0%, 18%, 100% { transform: translateY(78%) rotate(0); }
  34% { transform: translateY(14%) rotate(-4deg); }
  42% { transform: translateY(18%) rotate(3deg); }
  50% { transform: translateY(12%) rotate(-2deg); }
  66% { transform: translateY(78%) rotate(0); }
}
@keyframes mu-flama { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3) drop-shadow(0 0 6px rgba(255, 179, 71, .8)); } }
@keyframes mu-cabeceo { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg) translateY(-2px); } }
@keyframes mu-ojos { 0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 138, 31, .4)); } 50% { filter: drop-shadow(0 0 22px rgba(255, 106, 0, .95)); } }
@keyframes mu-aparece { from { opacity: 0; transform: scale(.94) rotate(-.8deg); } to { opacity: 1; transform: none; } }
@keyframes mu-fila { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mu-latido { 50% { box-shadow: 0 0 14px rgba(255, 138, 31, .6); } }
@keyframes g { to { transform: rotate(360deg); } }

/* ── Tableta ── */
@media (max-width: 1024px) {
  .fila { grid-template-columns: 1fr 1fr !important; }
  .fila > div:last-child { grid-column: 1 / -1; }
  body::before { width: 38vw; opacity: .16; }
}
/* ── Celular ── */
@media (max-width: 640px) {
  body { padding: 92px 12px 50px !important; }
  html::before { height: 78px; background-size: 454px 82px; }
  .tarjeta { padding: 22px 14px 14px !important; border-radius: 14px !important; }
  .fila { grid-template-columns: 1fr !important; }
  .fila-form > div { min-width: 0 !important; }
  button.principal { width: 100%; }
  .top { flex-direction: column; align-items: flex-start !important; }
  h1::before { width: 16px; height: 36px; margin-right: 7px; }
  body::before { width: 52vw; opacity: .14; }
  body::after { width: 104px; height: 180px; right: 2vw; }
  html::after { opacity: .4; }
  body:has(#btn) .caja { padding: 80px 20px 30px !important; }
  body:has(#btn) .caja::after { left: -14px; right: -14px; height: 60px; background-size: 24px 58px, 24px 58px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body::after { display: none; }
}