:root{
  /* Fondo del sitio = el mismo degradado cálido del logo/key visual de
     Halloween Encantado, para que el logo se funda con la página en vez de
     verse como un recuadro aparte. Las tarjetas de contenido (paneles,
     tablas, drawer) siguen usando --bg-elevated blanco para que el texto
     sea legible encima del degradado. */
  --bg:#F6C58E;
  --bg-gradient: linear-gradient(90deg, #F8D298 0%, #F7CD95 15%, #F6C68F 30%, #F5C08B 45%, #EFC291 55%, #C7BC9C 65%, #8DB0A0 75%, #4FA69E 88%, #439399 100%);
  --bg-elevated:#FFFFFF;
  --surface:#F8F6F3;
  --surface-2:#F0ECE5;
  --ink:#2B2018;
  --ink-soft:#6B5A4C;
  --ink-faint:#9C8B7A;
  --border:#E7E1D8;
  --accent:#5B3A8E;
  --accent-ink:#FFFFFF;
  --accent-soft:#EFE7F8;
  --warm:#C24A1F;
  --warm-soft:#FCE7D3;
  --ok:#12897E;
  --ok-soft:#DCF3EF;
  --reserved:#C0392B;
  --reserved-soft:#FBE3E0;
  --pending:#C24A1F;
  --pending-soft:#FCE7D3;
  --blocked:#8A7566;
  --blocked-soft:#F0ECE5;
  --wompi:#1F9E5A;
  --wompi-ink:#FFFFFF;
  --shadow: 0 1px 2px rgba(43,32,24,.07), 0 12px 28px rgba(43,32,24,.10);
  --focus:#5B3A8E;
  /* Plano de mesas: paleta propia tomada del render del plano de Cielo Alto
     (fondo/borde teal-navy, mesas coloreadas por tipo: A rojo, B azul, C
     naranja) — independiente del resto de la paleta cálida del sitio. */
  --fp-bg:#9BC8CB; --fp-border:#312783;
  --tipo-a:#E7302A; --tipo-b:#2798CB; --tipo-c:#F9B233;
  --radius-s:8px;
  --radius-m:14px;
  --radius-l:22px;
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Fondo blanco siempre, sin importar el modo del sistema — no queremos que
   el sitio se vea oscuro/negro en dispositivos con tema oscuro activado. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#F6C58E; --bg-gradient: linear-gradient(90deg, #F8D298 0%, #F7CD95 15%, #F6C68F 30%, #F5C08B 45%, #EFC291 55%, #C7BC9C 65%, #8DB0A0 75%, #4FA69E 88%, #439399 100%);
    --bg-elevated:#FFFFFF; --surface:#F8F6F3; --surface-2:#F0ECE5;
    --ink:#2B2018; --ink-soft:#6B5A4C; --ink-faint:#9C8B7A; --border:#E7E1D8;
    --accent:#5B3A8E; --accent-ink:#FFFFFF; --accent-soft:#EFE7F8;
    --warm:#C24A1F; --warm-soft:#FCE7D3;
    --ok:#12897E; --ok-soft:#DCF3EF;
    --reserved:#C0392B; --reserved-soft:#FBE3E0;
    --pending:#C24A1F; --pending-soft:#FCE7D3;
    --blocked:#8A7566; --blocked-soft:#F0ECE5;
    --wompi:#1F9E5A; --wompi-ink:#FFFFFF;
    --shadow: 0 1px 2px rgba(43,32,24,.07), 0 12px 28px rgba(43,32,24,.10);
    --focus:#5B3A8E;
  }
}
:root[data-theme="dark"]{
  --bg:#F6C58E; --bg-gradient: linear-gradient(90deg, #F8D298 0%, #F7CD95 15%, #F6C68F 30%, #F5C08B 45%, #EFC291 55%, #C7BC9C 65%, #8DB0A0 75%, #4FA69E 88%, #439399 100%);
  --bg-elevated:#FFFFFF; --surface:#F8F6F3; --surface-2:#F0ECE5;
  --ink:#2B2018; --ink-soft:#6B5A4C; --ink-faint:#9C8B7A; --border:#E7E1D8;
  --accent:#5B3A8E; --accent-ink:#FFFFFF; --accent-soft:#EFE7F8;
  --warm:#C24A1F; --warm-soft:#FCE7D3;
  --ok:#12897E; --ok-soft:#DCF3EF;
  --reserved:#C0392B; --reserved-soft:#FBE3E0;
  --pending:#C24A1F; --pending-soft:#FCE7D3;
  --blocked:#8A7566; --blocked-soft:#F0ECE5;
  --wompi:#1F9E5A; --wompi-ink:#FFFFFF;
  --shadow: 0 1px 2px rgba(43,32,24,.07), 0 12px 28px rgba(43,32,24,.10);
  --focus:#5B3A8E;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  /* Fondo = foto diseñada a la medida (bg-halloween.jpg) en vez del degradado
     CSS generado. background-color queda como color de respaldo mientras
     carga la imagen o si por algún motivo no carga. */
  background-color:var(--bg); background-image:url('./bg-halloween.jpg');
  background-attachment:fixed; background-size:cover; background-position:center center;
  color:var(--ink); font-family:var(--font-body); font-size:15px;
  line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh;
}
.app{ max-width:1180px; margin:0 auto; padding-bottom:80px; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; text-wrap:balance; margin:0; }
button{ font-family:inherit; }
a{ color:var(--accent); }
::selection{ background:var(--accent-soft); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:6px; }

/* ---------- header ----------
   Fondo transparente a propósito: deja ver el degradado de <body>, que es
   el mismo degradado del logo, así el logo se funde con la página en vez
   de verse como una tarjeta separada. */
.header{
  position:relative; overflow:hidden;
  padding:clamp(28px,4vw,44px) clamp(18px,4vw,40px) 26px;
  background:transparent;
}
.header-top{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.header-top--center{ justify-content:center; }
.header-center{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:640px; margin:0 auto; }
.eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 6px; }
.title{ font-size:clamp(26px,3.4vw,36px); color:var(--warm); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-logo{ display:block; max-width:min(480px,86vw); width:100%; height:auto; margin:6px auto 8px; }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:22px; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:14px 16px; }
.stat-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
.stat-value{ font-family:var(--font-display); font-size:26px; font-variant-numeric:tabular-nums; margin-top:4px; }
.stat-value small{ font-family:var(--font-body); font-size:13px; color:var(--ink-faint); font-weight:600; }
.stat.ok .stat-value{ color:var(--ok); }
.stat.reserved .stat-value{ color:var(--reserved); }

/* ---------- sections & funcion picker ---------- */
.section{ padding:26px clamp(18px,4vw,40px) 0; }
.section-title{ font-size:18px; margin-bottom:4px; text-align:center; }

/* ---------- intro card (debajo del logo) ---------- */
.section--intro{ padding-top:6px; }
.intro-card{
  max-width:760px; margin:0 auto; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius-l); padding:24px clamp(18px,4vw,32px) 28px; box-shadow:var(--shadow);
}
.intro-lead{ font-size:15px; line-height:1.55; color:var(--ink); margin:0 0 10px; }
.intro-lead--warm{ font-family:var(--font-display); font-weight:600; color:var(--warm); font-size:16px; }
.intro-text{ font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0 0 6px; }
.intro-block{ margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.intro-heading{ font-size:15px; color:var(--accent); margin-bottom:10px; }
.intro-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.intro-list li{
  font-size:13.5px; line-height:1.5; color:var(--ink-soft); padding-left:18px; position:relative;
}
.intro-list li::before{
  content:'✦'; position:absolute; left:0; top:0; color:var(--accent); font-size:11px;
}
.intro-price-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.intro-price-list li{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); padding-left:20px; position:relative; }
.intro-price-dot{
  position:absolute; left:0; top:6px; width:10px; height:10px; border-radius:50%;
}
.intro-list strong, .intro-price-list strong{ color:var(--ink); }

/* Picker separado por show: Toy Story a la izquierda, Disney Hawaii a la
   derecha, cada uno con su logo (recortado del key visual, sin fondo) para
   que se identifiquen a simple vista. En móvil se apilan verticalmente. */
.evento-cargando{ color:var(--ink-faint); font-size:13.5px; padding:12px 0; }
.funcion-picker{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:start; }
.evento-columna{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:4px 18px; }
.evento-columna + .evento-columna{ border-left:1px solid var(--border); }
.evento-logo{ display:block; max-width:min(190px,60vw); width:100%; height:auto; margin-bottom:14px; }
.evento-sin-funciones{ color:var(--ink-faint); font-size:13px; padding:10px 0; }
.evento-fecha-grupo{ width:100%; margin-bottom:18px; }
.evento-fecha-grupo:last-child{ margin-bottom:0; }
.evento-fecha-titulo{ font-family:var(--font-display); font-size:15px; font-weight:600; margin-bottom:10px; }
.evento-horarios{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.horario-btn{
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:999px;
  padding:10px 16px; cursor:pointer; text-align:center; transition:border-color .15s, transform .1s, background .15s;
  display:flex; flex-direction:column; align-items:center; gap:2px; min-width:92px;
}
.horario-btn:hover{ border-color:var(--accent); }
.horario-btn:active{ transform:scale(.98); }
.horario-btn.is-selected{ border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent) inset; }
.horario-hora{ font-family:var(--font-display); font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.horario-btn.is-full{ opacity:.55; }
.horario-btn:disabled{ cursor:not-allowed; }
.horario-agotada{ font-size:10px; font-weight:700; color:var(--reserved); letter-spacing:.03em; text-transform:uppercase; }

/* ---------- mesa panel & floor plan ---------- */
.mesa-panel{
  margin-top:26px; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius-l); padding:20px clamp(16px,3vw,26px) 26px; box-shadow:var(--shadow);
}
.mesa-panel-head{ padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.mesa-panel-title{ font-size:19px; }
.mesa-panel-sub{ color:var(--ink-soft); font-size:13px; margin-top:4px; }
.mesa-panel-hint{ color:var(--ink-faint); font-size:12.5px; margin-top:8px; max-width:62ch; }
.legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-soft); margin-top:10px; }
.legend-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.legend-dot--x{ width:auto; height:auto; border-radius:0; background:none !important; color:var(--ink-faint); font-weight:800; font-size:11px; }

.floorplan-scroll{ overflow-x:auto; padding-bottom:8px; }
.floorplan{
  position:relative; min-width:640px; aspect-ratio:1.9/1; margin-top:6px;
  background:var(--fp-bg); border:3px solid var(--fp-border); border-radius:var(--radius-l);
}
.fp-venue-label{
  position:absolute; transform:translate(-50%,-50%); background:transparent; border:2px solid var(--fp-border);
  border-radius:8px; padding:5px 10px; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--fp-border); text-align:center; white-space:nowrap; pointer-events:none;
}
.fp-venue-label.outside{ top:-9%; background:var(--bg-elevated); border-color:transparent; color:var(--ink-soft); }
.fp-venue-label.diagonal{ transform:translate(-50%,-50%) rotate(-16deg); }
.fp-venue-label.big{ font-family:var(--font-display); font-size:13px; text-transform:none; letter-spacing:0; padding:10px 16px; white-space:normal; color:var(--ink-soft); width:32%; text-align:center; }
.fp-venue-label.bar{ width:11%; height:26%; display:flex; align-items:center; justify-content:center; }
.fp-venue-label.zone{ width:26%; height:15%; display:flex; align-items:center; justify-content:center; white-space:normal; }

.table-pill{
  position:absolute; width:clamp(32px,7.6%,52px); height:clamp(28px,6.6%,44px);
  border-radius:7px; border:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:clamp(10px,1.3vw,13px); cursor:pointer;
  transition:filter .1s; padding:0; line-height:1.05; color:#FFFFFF;
  box-shadow:0 2px 4px rgba(0,0,0,.18);
}
.table-pill:hover{ filter:brightness(1.08); z-index:2; }
.table-pill .tp-sub{ font-family:var(--font-body); font-weight:700; font-size:8.5px; opacity:.9; }
.table-pill.tipo-a{ background:var(--tipo-a); }
.table-pill.tipo-b{ background:var(--tipo-b); }
.table-pill.tipo-c{ background:var(--tipo-c); }
.table-pill.is-unavailable{ filter:grayscale(.4) brightness(.82); cursor:not-allowed; }
.table-pill .tp-x{
  position:absolute; top:-7px; right:-7px; width:19px; height:19px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900;
  color:#FFFFFF; background:var(--reserved); box-shadow:0 1px 3px rgba(0,0,0,.4); line-height:1;
}

.empty-state{ color:var(--ink-faint); font-size:14px; padding:30px 0; text-align:center; }

/* ---------- drawer ---------- */
.drawer-overlay{ position:fixed; inset:0; background:rgba(23,15,38,.42); z-index:40; opacity:0; pointer-events:none; transition:opacity .18s; }
.drawer-overlay.is-open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--bg-elevated);
  border-left:1px solid var(--border); z-index:41; transform:translateX(100%);
  transition:transform .2s ease; display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.drawer.is-open{ transform:translateX(0); }
.drawer-head{ padding:20px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.drawer-title{ font-size:18px; }
.drawer-close{ border:0; background:var(--surface); width:32px; height:32px; border-radius:50%; cursor:pointer; color:var(--ink-soft); font-size:16px; line-height:1; }
.drawer-body{ padding:20px 22px; overflow-y:auto; flex:1; }
.status-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:700; }
.status-pill.disponible{ background:var(--ok-soft); color:var(--ok); }
.status-pill.reservada, .status-pill.confirmada{ background:var(--reserved-soft); color:var(--reserved); }
.status-pill.pendiente_pago{ background:var(--pending-soft); color:var(--pending); }
.status-pill.fallida, .status-pill.cancelada{ background:var(--blocked-soft); color:var(--blocked); }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:var(--radius-s); border:1px solid var(--border);
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:14px;
}
.field textarea{ min-height:60px; resize:vertical; }
.field-hint{ color:var(--ink-faint); font-size:11.5px; margin-top:5px; }
.field-hint.is-error{ color:var(--reserved); font-weight:600; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.price-box{
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius-m);
  padding:14px 16px; margin:6px 0 18px; display:flex; flex-direction:column; gap:6px;
}
.price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.price-row--original{ opacity:.7; }
.price-box .price-label{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.price-box .price-value{ font-family:var(--font-display); font-size:22px; font-variant-numeric:tabular-nums; color:var(--accent); }
.price-original{
  font-family:var(--font-display); font-size:14.5px; font-variant-numeric:tabular-nums;
  color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--reserved); text-decoration-thickness:1.5px;
}
.dcto-badge{
  display:inline-block; background:var(--warm); color:#FFFFFF; font-size:11px; font-weight:800;
  padding:3px 10px; border-radius:999px; letter-spacing:.02em; white-space:nowrap;
}

.drawer-foot{ padding:16px 22px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }
.form-error{ color:var(--reserved); font-size:12.5px; }
.btn{ padding:12px 16px; border-radius:999px; border:0; font-weight:700; font-size:13.5px; cursor:pointer; text-align:center; width:100%; }
.btn-primary{ background:var(--wompi); color:var(--wompi-ink); }
.btn-primary:disabled{ opacity:.55; cursor:default; }
.btn-ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--border); }
.hold-note{ color:var(--ink-faint); font-size:12px; text-align:center; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,12px); z-index:60; background:var(--ink);
  color:var(--bg); padding:11px 20px; border-radius:999px; font-size:13.5px; opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s; box-shadow:var(--shadow); max-width:88vw; text-align:center;
}
.toast.is-open{ opacity:1; transform:translate(-50%,0); }

.footer-note{ padding:22px clamp(18px,4vw,40px) 0; color:var(--ink-faint); font-size:12px; max-width:70ch; margin:0 auto; text-align:center; }
.footer-note a{ color:var(--ink-faint); text-decoration:underline; }

.whatsapp-wrap{ display:flex; justify-content:center; padding:18px clamp(18px,4vw,40px) 0; }
.whatsapp-btn{
  display:inline-flex; align-items:center; gap:9px; background:#25D366; color:#FFFFFF;
  font-weight:700; font-size:14px; text-decoration:none; padding:12px 22px; border-radius:999px;
  box-shadow:0 2px 6px rgba(37,211,102,.35); transition:transform .1s, box-shadow .15s;
}
.whatsapp-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(37,211,102,.45); }

/* ---------- gracias / admin pages ---------- */
.center-card{
  max-width:480px; margin:12vh auto; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius-l); padding:36px 30px; text-align:center; box-shadow:var(--shadow);
}
.spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); margin:18px auto; animation:spin 0.8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.result-icon{ font-size:40px; }

.login-card{ max-width:360px; margin:14vh auto; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-l); padding:32px 28px; box-shadow:var(--shadow); }
.login-card h1{ font-size:22px; margin-bottom:6px; }
.login-card p{ color:var(--ink-soft); font-size:13.5px; margin-bottom:20px; }
.login-card input{ width:100%; padding:11px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:14px; margin-bottom:12px; }
.login-card button{ width:100%; padding:11px 14px; border-radius:999px; border:0; background:var(--accent); color:var(--accent-ink); font-weight:700; cursor:pointer; }

.admin-panel-card{
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-l);
  padding:20px clamp(16px,3vw,26px) 24px; box-shadow:var(--shadow);
}
.admin-panel-head{ margin-bottom:14px; }
.admin-panel-title{ font-size:17px; }
.admin-panel-sub{ color:var(--ink-soft); font-size:13px; margin-top:4px; max-width:70ch; }

.funciones-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.funcion-toggle-card{
  border:1px solid var(--border); border-radius:var(--radius-m); padding:12px 14px; background:var(--surface);
  display:flex; align-items:center; justify-content:space-between; gap:10px; transition:border-color .15s;
}
.funcion-toggle-card.is-activa{ border-color:var(--ok); background:var(--ok-soft); }
.funcion-toggle-label{ font-size:13px; font-weight:700; }
.funcion-toggle-sub{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }

.switch{ position:relative; display:inline-block; width:40px; height:23px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch .slider{ position:absolute; inset:0; background:var(--blocked); opacity:.35; border-radius:999px; cursor:pointer; transition:background .15s, opacity .15s; }
.switch .slider::before{ content:""; position:absolute; width:17px; height:17px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.3); }
.switch input:checked + .slider{ background:var(--ok); opacity:1; }
.switch input:checked + .slider::before{ transform:translateX(17px); }
.switch input:disabled + .slider{ cursor:wait; }

.pago-badge{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.pago-badge.wompi{ background:var(--ok-soft); color:var(--ok); }
.pago-badge.cortesia{ background:var(--accent-soft); color:var(--accent); }
.pago-badge.efectivo{ background:var(--warm-soft); color:var(--warm); }

.metodo-pago-choice{ display:flex; gap:16px; font-size:13.5px; color:var(--ink); }
.metodo-pago-choice label{ display:flex; align-items:center; gap:6px; font-weight:600; cursor:pointer; }

/* ---------- modal (nueva reserva manual) ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(23,15,38,.42); z-index:50; display:flex;
  align-items:flex-start; justify-content:center; padding:5vh 16px; opacity:0; pointer-events:none; transition:opacity .18s;
  overflow-y:auto;
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal-card{
  background:var(--bg-elevated); border-radius:var(--radius-l); border:1px solid var(--border);
  max-width:480px; width:100%; padding:24px 24px 22px; box-shadow:var(--shadow);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }
.modal-head h2{ font-size:18px; }
.modal-close{ border:0; background:var(--surface); width:30px; height:30px; border-radius:50%; cursor:pointer; color:var(--ink-soft); font-size:15px; line-height:1; flex-shrink:0; }
.modal-sub{ color:var(--ink-soft); font-size:13px; margin:6px 0 18px; }

.admin-table{ width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th{ text-align:left; padding:10px 12px; color:var(--ink-faint); font-size:11px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); }
.admin-table td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.admin-table tr:hover td{ background:var(--surface); }
.admin-actions{ display:flex; gap:6px; }
.mini-btn{ padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:11.5px; cursor:pointer; font-weight:700; }
.mini-btn.ok{ border-color:var(--ok); color:var(--ok); }
.mini-btn.danger{ border-color:var(--reserved); color:var(--reserved); }
.admin-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.admin-toolbar input{ padding:9px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:13px; min-width:220px; }

@media (max-width:640px){
  .field-row{ grid-template-columns:1fr; }
  .funcion-picker{ grid-template-columns:1fr; }
  .evento-columna + .evento-columna{ border-left:none; border-top:1px solid var(--border); margin-top:18px; padding-top:22px; }
  .header-top{ flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } .spinner{ animation:none; } }