/* Tema Senta2 de las páginas del cliente (web de reservas y cancelar), con el
   diseño "noche y violeta" de la portada (2026-10-29): fondo casi negro,
   texto blanco papel, líneas finas en vez de sombras y un solo color, el
   violeta, para el botón de reservar. La hora y la zona elegidas van en
   blanco (invertidas) y los errores en un rojo claro, que se lee bien sobre
   el negro.

   Solo se aplica con body[data-tema="senta2"] (el tema por defecto). Las
   páginas del cliente la cargan después de su <style>, que trae los estilos
   base del tema antiguo de madera y musgo. El panel la carga antes del suyo,
   para que su bloque "Tema Senta2" pueda retocar lo que haga falta. */

body[data-tema="senta2"] {
  --negro: #090909;
  --blanco: #f7f9fa;
  --acero: #8e8f90;           /* texto secundario: 5,9:1 sobre el negro */
  --violeta: #af50ff;
  --lavanda: #e1bdff;
  --texto-2: rgba(247,249,250,.74);
  --hilo: rgba(247,249,250,.14);
  --hilo-fuerte: rgba(247,249,250,.26);
  --campo: rgba(247,249,250,.04);
  --alerta: #ff8a80;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Las variables del tema base, por si alguna regla las usa todavía */
  --musgo: #af50ff;
  --musgo-hondo: #e1bdff;
  --musgo-claro: rgba(247,249,250,.3);
  --ambar: #e1bdff;
  --lino: #f7f9fa;
  --tinta: #f7f9fa;
  --linea: rgba(247,249,250,.14);
  --roble: #8e8f90;
  --roble-oscuro: #f7f9fa;

  color-scheme: dark;          /* calendario, desplegables y casillas en oscuro */
  background: var(--negro);
  background-image: radial-gradient(70% 600px at 50% -120px, rgba(175,80,255,.16), transparent 70%);
  background-repeat: no-repeat;
  color: var(--blanco);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body[data-tema="senta2"],
body[data-tema="senta2"] * { font-family: var(--sans) !important; }
body[data-tema="senta2"] :focus-visible { outline: 2px solid var(--lavanda); outline-offset: 2px; }

/* Cabecera: barra esmerilada con el nombre del restaurante y su teléfono */
/* Solo en las páginas del cliente (body.cliente): el panel también carga esta
   hoja para su formulario, pero conserva su cabecera. */
body.cliente[data-tema="senta2"] .wrap { padding-top: 0; }
body.cliente[data-tema="senta2"] .tablon,
body.cliente[data-tema="senta2"] .contacto { display: none; }
body[data-tema="senta2"] .barra-rest {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: sticky; top: 0; z-index: 40;
  height: 60px;
  /* de lado a lado de la pantalla, con el contenido alineado con la tarjeta */
  margin: 0 calc(50% - 50vw) 32px;
  padding: 0 max(20px, calc(50vw - 240px));
  background: rgba(51,50,72,.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid #6b6b6b;
}
body[data-tema="senta2"] .barra-nombre {
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-tema="senta2"] .barra-tel {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 7px 13px; border: 1px solid var(--blanco); border-radius: 6px;
  background: rgba(247,249,250,.08);
  font-size: 14px; text-decoration: none; color: var(--blanco);
}
body[data-tema="senta2"] .barra-tel:hover { background: var(--blanco); color: var(--negro); }
body[data-tema="senta2"] .barra-tel:empty { display: none; }
body[data-tema="senta2"] .barra-tel svg { width: 15px; height: 15px; }

/* Tarjetas: sin sombra, con una línea fina y el radio de la portada */
body[data-tema="senta2"] .ticket,
body[data-tema="senta2"] .confirmada,
body[data-tema="senta2"] .caja-cancelar {
  background: rgba(247,249,250,.025);
  color: var(--blanco);
  border: 1px solid var(--hilo);
  border-radius: 19.2px;
  box-shadow: none;
}
body[data-tema="senta2"] .ticket { padding: 32px 28px 28px; }
body[data-tema="senta2"] .ticket-title {
  font-family: var(--serif) !important; font-style: italic; font-weight: 400;
  font-size: 44px; line-height: 1; letter-spacing: -0.03em;
  color: var(--blanco); margin-bottom: 10px;
}
body[data-tema="senta2"] .ticket-sub { font-size: 15px; font-weight: 300; color: var(--texto-2); margin-bottom: 24px; }

/* Etiquetas de los campos: monoespaciada, como en una tarjeta de embarque */
body[data-tema="senta2"] label,
body[data-tema="senta2"] fieldset.grupo > legend {
  font-family: var(--mono) !important; font-size: 11px; font-weight: 400;
  letter-spacing: 0.16em; color: var(--acero);
}
body[data-tema="senta2"] label.optional::after { color: var(--acero); opacity: .85; }
body[data-tema="senta2"] .ayuda-campo,
body[data-tema="senta2"] .horario-info,
body[data-tema="senta2"] .cap-info,
body[data-tema="senta2"] .turno-detalle,
body[data-tema="senta2"] .alts-note { color: var(--acero); }

body[data-tema="senta2"] input,
body[data-tema="senta2"] textarea,
body[data-tema="senta2"] select,
body[data-tema="senta2"] .tel-fila select {
  border: 1px solid var(--hilo-fuerte); border-radius: 8px;
  background: var(--campo); color: var(--blanco);
}
body[data-tema="senta2"] select option { background: #141416; color: var(--blanco); }
body[data-tema="senta2"] input::placeholder,
body[data-tema="senta2"] textarea::placeholder { color: #8e8f90; opacity: 1; }
body[data-tema="senta2"] input:focus,
body[data-tema="senta2"] textarea:focus,
body[data-tema="senta2"] select:focus {
  outline: none; border-color: var(--lavanda); box-shadow: 0 0 0 3px rgba(175,80,255,.25);
}
/* La casilla de privacidad es una etiqueta, pero se lee como texto normal */
body[data-tema="senta2"] label.privacidad {
  font-family: var(--sans) !important; font-size: 13px; letter-spacing: 0; color: var(--texto-2);
}
body[data-tema="senta2"] .privacidad a,
body[data-tema="senta2"] .conf-nota a { color: var(--blanco); }
body[data-tema="senta2"] .privacidad input { accent-color: var(--violeta); }

/* El botón de reservar: el único relleno violeta. Texto negro, que el blanco
   sobre este violeta no llega al contraste mínimo. */
body[data-tema="senta2"] button.submit {
  padding: 15px; border-radius: 8px;
  background: var(--violeta); color: var(--negro);
  font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
body[data-tema="senta2"] button.submit:hover { background: var(--lavanda); }
body[data-tema="senta2"] button.submit:disabled { opacity: .55; }

/* Zonas */
body[data-tema="senta2"] .salon-tab {
  padding: 11px 6px; border-radius: 8px;
  border: 1px solid var(--hilo-fuerte); background: var(--campo); color: var(--texto-2);
  font-size: 13px; letter-spacing: 0.02em; text-transform: none; font-weight: 400;
}
body[data-tema="senta2"] .salon-tab:hover { border-color: var(--blanco); color: var(--blanco); }
body[data-tema="senta2"] .salon-tab.active { background: var(--blanco); border-color: var(--blanco); color: var(--negro); font-weight: 500; }

/* Horas */
body[data-tema="senta2"] .servicio-label {
  font-family: var(--mono) !important; font-size: 11px; font-weight: 400;
  letter-spacing: 0.18em; color: var(--blanco);
}
body[data-tema="senta2"] .servicio-label::after { background: linear-gradient(90deg, var(--hilo-fuerte), transparent); }
body[data-tema="senta2"] .turno-block { border-left: 1px solid var(--hilo-fuerte); padding-left: 12px; }
body[data-tema="senta2"] .turno-block.completo { border-left-style: dashed; }
body[data-tema="senta2"] .turno-nombre { font-size: 12px; font-weight: 500; letter-spacing: 0.07em; color: var(--texto-2); }
body[data-tema="senta2"] .turno-detalle.warn,
body[data-tema="senta2"] .cap-info.warn { color: var(--alerta); }
body[data-tema="senta2"] .slot-btn {
  padding: 9px 2px; border-radius: 8px;
  border: 1px solid var(--hilo-fuerte); background: transparent; color: var(--blanco);
  font-size: 16px; font-weight: 400; font-variant-numeric: tabular-nums;
}
body[data-tema="senta2"] .slot-btn:hover:not(:disabled) { border-color: var(--blanco); }
body[data-tema="senta2"] .slot-btn.active { background: var(--blanco); border-color: var(--blanco); color: var(--negro); font-weight: 500; }
body[data-tema="senta2"] .slot-btn.lleno { background: transparent; border-style: dashed; color: var(--acero); }
body[data-tema="senta2"] .slot-btn.lleno.active { background: var(--blanco); color: var(--negro); }

/* Otras horas cuando la elegida está llena */
body[data-tema="senta2"] .alts-box {
  border: 1px solid var(--hilo); border-left: 2px solid var(--lavanda);
  border-radius: 8px; background: rgba(225,189,255,.05);
}
body[data-tema="senta2"] .alts-title { color: var(--texto-2); }
body[data-tema="senta2"] .alt-chip {
  border: 0; border-radius: 1584px; padding: 8px 14px;
  background: rgba(247,249,250,.1); color: var(--texto-2); font-size: 13px;
}
body[data-tema="senta2"] .alt-chip strong { color: var(--blanco); font-weight: 500; }
body[data-tema="senta2"] .alt-chip:hover { background: var(--blanco); color: var(--negro); }
body[data-tema="senta2"] .alt-chip:hover strong { color: var(--negro); }
body[data-tema="senta2"] .cerrado-box { border: 1px dashed var(--hilo-fuerte); border-radius: 8px; background: transparent; color: var(--texto-2); }

/* Día en el que no se puede reservar */
body[data-tema="senta2"] .aviso-dia {
  border: 1px solid rgba(255,138,128,.38); border-left: 4px solid var(--alerta);
  background: rgba(255,138,128,.08); color: var(--blanco);
}
body[data-tema="senta2"] .aviso-dia-titulo { color: #ffb4ab; }
body[data-tema="senta2"] .aviso-dia-dias button {
  border: 1px solid rgba(255,138,128,.45); border-radius: 8px;
  background: transparent; color: var(--blanco); font-weight: 500;
}
body[data-tema="senta2"] .aviso-dia-dias button:hover,
body[data-tema="senta2"] .aviso-dia-dias button:focus-visible { background: var(--alerta); border-color: var(--alerta); color: var(--negro); }
body[data-tema="senta2"] .aviso-dia-buscando { color: var(--texto-2); }
body[data-tema="senta2"] input.dia-cerrado { border-color: var(--alerta) !important; background: rgba(255,138,128,.08) !important; }

/* Resguardo de la reserva */
body[data-tema="senta2"] .confirmada { padding: 36px 28px 28px; }
body[data-tema="senta2"] .conf-sello { font-family: var(--mono) !important; font-weight: 400; font-size: 11px; letter-spacing: 0.2em; color: var(--lavanda); }
body[data-tema="senta2"] .conf-hora {
  font-family: var(--serif) !important; font-style: italic; font-weight: 400;
  font-size: 84px; letter-spacing: -0.03em; color: var(--blanco);
}
body[data-tema="senta2"] .conf-fecha { color: var(--texto-2); font-size: 15px; }
body[data-tema="senta2"] .conf-datos,
body[data-tema="senta2"] .conf-nota { border-top-color: var(--hilo); }
body[data-tema="senta2"] .conf-datos dt { font-family: var(--mono) !important; font-size: 11px; color: var(--acero); }
body[data-tema="senta2"] .conf-datos dd { font-weight: 400; }
body[data-tema="senta2"] .conf-nota { color: var(--texto-2); }
body[data-tema="senta2"] .conf-cancelar { background: var(--campo); border: 1px solid var(--hilo); border-radius: 8px; color: var(--texto-2); }
body[data-tema="senta2"] .conf-cancelar a { color: var(--alerta); }
body[data-tema="senta2"] .conf-solicitud { background: rgba(225,189,255,.08); border: 1px solid rgba(225,189,255,.3); color: var(--blanco); }

/* Página de cancelar */
body[data-tema="senta2"] .caja-cancelar h2 {
  font-family: var(--serif) !important; font-style: italic; font-weight: 400;
  font-size: 40px; letter-spacing: -0.03em; color: var(--blanco);
}
body[data-tema="senta2"] .caja-cancelar .hora {
  font-family: var(--serif) !important; font-style: italic; font-weight: 400;
  font-size: 76px; letter-spacing: -0.03em; color: var(--blanco);
}
body[data-tema="senta2"] .caja-cancelar .fecha { color: var(--texto-2); }
body[data-tema="senta2"] .caja-cancelar .datos { color: var(--texto-2); border-top-color: var(--hilo); }
body[data-tema="senta2"] .caja-cancelar .nota { color: var(--texto-2); }
body[data-tema="senta2"] .caja-cancelar .nota a { color: var(--blanco); }
body[data-tema="senta2"] .boton-cancelar {
  padding: 15px; border-radius: 8px; border: 1px solid var(--alerta);
  background: transparent; color: var(--alerta);
  font-size: 16px; letter-spacing: 0; text-transform: none;
}
body[data-tema="senta2"] .boton-cancelar:hover { background: var(--alerta); color: var(--negro); }
body[data-tema="senta2"] .estado-final { color: var(--blanco); }
body[data-tema="senta2"] .estado-final.ok::before { color: var(--lavanda); }

/* Pie y modo prueba de la portada */
body[data-tema="senta2"] .wrap > footer {
  font-family: var(--mono) !important; font-size: 11px; letter-spacing: 0.16em; color: var(--acero);
}
body[data-tema="senta2"] .aviso-simulacion {
  background: #24163a; color: var(--lavanda);
  border-bottom: 1px solid rgba(225,189,255,.3);
  font-weight: 500;
}

@media (max-width: 560px) {
  body[data-tema="senta2"] .barra-rest { margin-bottom: 20px; }
  body[data-tema="senta2"] .ticket { padding: 26px 18px 22px; }
  body[data-tema="senta2"] .ticket-title { font-size: 38px; }
  body[data-tema="senta2"] .conf-hora { font-size: 72px; }
}