/* ==========================================================================
   PORTAL DE INVITACIONES · SISTEMA ADMINISTRATIVO DE DISEÑO EXCLUSIVO
   PALETA LOVELY & GIRLY (Crema, Beige, Rosa, Borgoña/Rojo y Acentos Dorados)
   CON SELECTOR Y MODO OSCURO PASIONAL DISPONIBLE
   Panorámico (1440px), bordes redondeados orgánicos, sombras suaves con glow.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Paleta Primaria Lovely & Girly */
  --primario: #D94668;                /* Rosa intenso frambuesa */
  --primario-hover: #E11D48;          /* Rosa carmín vibrante */
  --primario-oscuro: #9F1239;         /* Borgoña pasional */
  --acento-brillante: #FB7185;        /* Rosa dulce iluminado */
  --acento-celeste: rgba(217, 70, 104, 0.12);
  --acento-borde: rgba(217, 70, 104, 0.25);

  /* Botón con brillo luminoso Lovely */
  --gradiente-boton: linear-gradient(135deg, #E11D48 0%, #D94668 50%, #BE123C 100%);
  --gradiente-boton-hover: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
  --brillo-boton: 0 4px 18px rgba(225, 29, 72, 0.35), 0 2px 6px rgba(0, 0, 0, 0.06);
  --brillo-boton-hover: 0 6px 24px rgba(225, 29, 72, 0.5), 0 2px 8px rgba(0, 0, 0, 0.1);

  /* Superficies modo Lovely (Crema, Beige suave y Marfil cálido) */
  --fondo: #FAF7F2;                  /* Crema marfil relajante */
  --papel: #FFFFFF;                  /* Blanco puro para tarjetas */
  --papel-elevado: #FFFDF9;          /* Crema sutil elevado */
  --tinta: #2D1A22;                  /* Chocolate ciruela oscuro y suave para lectura */
  --tinta-secundaria: #7A626A;       /* Malva grisáceo elegante */
  --linea: #EFE4DC;                  /* Beige lino delicado */
  --linea-suave: #F6EDE8;            /* Borde tenue de contraste */
  --sombra-tarjeta: 0 10px 30px -5px rgba(180, 83, 108, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  --sombra-flotante: 0 18px 40px -10px rgba(180, 83, 108, 0.16);

  /* Formateo de respuesta de asistencia (Tonos luminosos y armónicos) */
  --verde-asiste: #15803D;
  --verde-asiste-bg: rgba(22, 163, 74, 0.12);
  --verde-asiste-borde: rgba(22, 163, 74, 0.3);
  --rojo-cancela: #B91C1C;
  --rojo-cancela-bg: rgba(220, 38, 38, 0.12);
  --rojo-cancela-borde: rgba(220, 38, 38, 0.3);
  --ambar-pendiente: #B45309;
  --ambar-pendiente-bg: rgba(217, 119, 6, 0.12);
  --ambar-pendiente-borde: rgba(217, 119, 6, 0.3);

  /* Botón WhatsApp */
  --wa-verde: #16A34A;
  --wa-hover: #15803D;
  --dorado: #B7791F;                  /* Dorado miel legible sobre crema */

  /* Radio de redondeo más orgánico y moderno */
  --radio-tarjeta: 16px;
  --radio-boton: 12px;
  --radio-campo: 10px;
}

/* ==========================================================================
   MODO OSCURO (Pasional, rudo, obsidiana profunda con acentos carmín/rubí)
   Se activa con data-tema="oscuro" en la etiqueta <html>
   ========================================================================== */
html[data-tema="oscuro"],
body[data-tema="oscuro"],
:root[data-tema="oscuro"] {
  color-scheme: dark;

  /* Paleta Purple Haze eléctrica y atmosférica */
  --primario: #A855F7;                /* Púrpura eléctrico / Purple Haze */
  --primario-hover: #C084FC;          /* Lavanda neón brillante */
  --primario-oscuro: #581C87;         /* Morado noche profundo */
  --acento-brillante: #39FF14;        /* Verde tóxico neón */
  --acento-celeste: rgba(168, 85, 247, 0.20);
  --acento-borde: rgba(168, 85, 247, 0.45);

  /* Botones principales Purple Haze */
  --gradiente-boton: linear-gradient(135deg, #A855F7 0%, #7E22CE 50%, #4C1D95 100%);
  --gradiente-boton-hover: linear-gradient(135deg, #C084FC 0%, #9333EA 100%);
  --brillo-boton: 0 0 20px rgba(168, 85, 247, 0.45), 0 4px 12px rgba(0, 0, 0, 0.6);
  --brillo-boton-hover: 0 0 28px rgba(192, 132, 252, 0.65), 0 6px 18px rgba(0, 0, 0, 0.7);

  /* Superficies Purple Haze (Noche violeta y obsidiana profunda) */
  --fondo: #0A0713;                  /* Obsidiana morada noche profunda */
  --papel: #140E24;                  /* Violeta noche profundo para tarjetas */
  --papel-elevado: #1E1535;          /* Relieve morado noche */
  --tinta: #F5EEFD;                  /* Blanco lavanda puro de máxima legibilidad */
  --tinta-secundaria: #A89CC4;       /* Lavanda atenuado elegante */
  --linea: #2E2248;                  /* Borde violeta nocturno */
  --linea-suave: #221838;
  --sombra-tarjeta: 0 12px 36px -6px rgba(0, 0, 0, 0.8), 0 0 22px rgba(168, 85, 247, 0.14);
  --sombra-flotante: 0 20px 48px rgba(0, 0, 0, 0.95), 0 0 32px rgba(168, 85, 247, 0.25);

  /* Estados sin matices rojos oscuros para mantener la vibra Purple Haze */
  --verde-asiste: #39FF14;            /* Verde tóxico neón */
  --verde-asiste-bg: rgba(57, 255, 20, 0.16);
  --verde-asiste-borde: rgba(57, 255, 20, 0.45);
  --rojo-cancela: #F43F5E;            /* Rosa frambuesa neón limpio, no vino tinto */
  --rojo-cancela-bg: rgba(244, 63, 94, 0.18);
  --rojo-cancela-borde: rgba(244, 63, 94, 0.4);
  --ambar-pendiente: #FBBF24;
  --ambar-pendiente-bg: rgba(245, 158, 11, 0.18);
  --ambar-pendiente-borde: rgba(245, 158, 11, 0.4);
  --dorado: #FCD34D;                  /* Oro luminoso */
}
* { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Interfaz ultra ancha panorámica (1440px) */
main {
  max-width: 1440px;
  width: 95vw;
  margin: auto;
  padding: 36px 28px;
  box-sizing: border-box;
}

.marca {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .18em;
  text-decoration: none;
  font-weight: 700;
  color: var(--primario);
  text-transform: uppercase;
  text-shadow: 0 0 12px color-mix(in srgb, var(--primario) 40%, transparent);
}

h1, h2, h3 {
  color: var(--tinta);
  line-height: 1.25;
}

h1 {
  font-family: Georgia, serif;
  font-weight: 700;
  max-width: 100%;
  font-size: clamp(30px, 4.2vw, 44px);
  margin: 18px 0 12px;
  letter-spacing: -0.02em;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

h2 {
  font-size: 21px;
  margin-top: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

a {
  color: var(--primario);
  text-underline-offset: 3px;
  transition: all 0.15s ease;
}

a:hover {
  color: var(--primario-hover);
  text-shadow: 0 0 8px color-mix(in srgb, var(--primario) 40%, transparent);
}

.introduccion {
  color: var(--tinta-secundaria);
  max-width: 860px;
  margin-bottom: 24px;
  font-size: 15px;
}

/* Tarjetas oscuras refinadas con borde sutil */
.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  padding: 26px 28px;
  box-shadow: var(--sombra-tarjeta);
  margin-bottom: 22px;
}

.acceso {
  max-width: 480px;
  margin-inline: auto;
}

label {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
  white-space: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.4 !important;
}

input, select, textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--linea);
  background: var(--fondo);
  border-radius: var(--radio-campo);
  color: var(--tinta);
  transition: all .15s ease;
}

input[type="datetime-local"],
input[type="date"],
input[type="time"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  font-family: inherit;
  font-size: 14px;
  display: block;
}

/* Evitar desborde del widget nativo de selector de fecha/hora en WebKit/Blink (Chrome, Opera, Safari móvil) */
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
  max-width: 100%;
  box-sizing: border-box;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer;
  accent-color: var(--primario);
  vertical-align: middle;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 25%, transparent), 0 0 16px color-mix(in srgb, var(--primario) 30%, transparent);
}

/* Botón CreArt Photography: Azul brillante con Glow luminoso */
button, .boton-principal {
  cursor: pointer;
  min-height: 42px;
  padding: 10px 22px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--primario);
  border-radius: var(--radio-campo);
  background: var(--gradiente-boton);
  color: #FFFFFF !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--brillo-boton);
  white-space: nowrap;
}

button:hover, .boton-principal:hover {
  background: var(--gradiente-boton-hover);
  border-color: var(--primario);
  box-shadow: var(--brillo-boton-hover);
  transform: translateY(-1px);
}

.acceso button {
  width: 100%;
  margin-top: 22px;
  min-height: 46px;
  font-size: 15px;
}

:focus-visible {
  outline: 3px solid var(--primario);
  outline-offset: 3px;
}

.secundario, .boton-secundario {
  background: var(--papel-elevado);
  color: var(--tinta);
  border: 1px solid var(--linea);
  box-shadow: none;
  text-decoration: none;
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--radio-campo);
  font-weight: 600;
  transition: all .15s ease;
  white-space: nowrap;
}

.secundario:hover, .boton-secundario:hover {
  background: var(--papel-elevado);
  border-color: var(--primario);
  color: var(--tinta);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primario) 25%, transparent);
}

.nota, footer {
  font-size: 13px;
  color: var(--tinta-secundaria);
}

.mensaje {
  border-left: 4px solid var(--primario);
  background: color-mix(in srgb, var(--primario) 12%, transparent);
  border-radius: var(--radio-campo);
  padding: 13px 18px;
  margin-block: 16px;
  color: var(--tinta);
}

.mensaje[role="alert"] {
  border-left-color: var(--rojo-cancela);
  background: color-mix(in srgb, var(--rojo-cancela) 12%, transparent);
  color: var(--rojo-cancela);
}

.sesion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linea);
}

.sesion p {
  margin: 0;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}

.acciones-sesion-maestro {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.boton-showroom-maestro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--dorado) 15%, transparent);
  color: var(--ambar-pendiente);
  border: 1px solid color-mix(in srgb, var(--dorado) 35%, transparent);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.boton-showroom-maestro:hover {
  background: color-mix(in srgb, var(--dorado) 25%, transparent);
  color: var(--ambar-pendiente);
  border-color: var(--ambar-pendiente);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ambar-pendiente) 30%, transparent);
  transform: translateY(-1px);
}

.boton-copiar-showroom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--papel-elevado);
  color: var(--tinta) !important;
  border: 1px solid var(--linea);
  border-radius: var(--radio-boton);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.2s ease;
}

.boton-copiar-showroom:hover {
  background: var(--acento-celeste);
  color: var(--primario) !important;
  border-color: var(--primario);
  box-shadow: none !important;
  transform: none !important;
}

/* Métricas del evento */
.etiqueta {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 700;
  color: var(--primario);
}

dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 12px;
}

dt {
  font-size: 12px;
  color: var(--tinta-secundaria);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

dd,
.valor-metrica {
  margin: 6px 0 0;
  font: 700 clamp(20px, 2.2vw, 32px) Georgia, serif;
  color: var(--tinta) !important;
  white-space: nowrap;
}

dd.metrica-mesas,
.metrica-mesas {
  font: 600 clamp(15px, 1.4vw, 20px) system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.01em;
  color: var(--tinta) !important;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Formateo de asistentes confirmados en verde esmeralda luminoso únicamente */
.confirmados-verde,
.confirmados-destacado dd,
dd.confirmados-destacado,
.confirmados-destacado {
  color: var(--verde-asiste) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 14px color-mix(in srgb, var(--verde-asiste) 40%, transparent);
}

footer {
  border-top: 1px solid var(--linea);
  margin-top: 48px;
  padding-top: 24px;
  text-align: center;
}

@media (max-width: 600px) {
  main { padding: 20px 14px; width: 100%; max-width: 100vw; box-sizing: border-box; }
  .tarjeta { padding: 18px 14px; border-radius: 10px; max-width: 100%; box-sizing: border-box; }
  dl { grid-template-columns: 1fr 1fr; }
  h1 { white-space: normal; }
}

/* ==========================================================================
   FORMULARIO DE ALTA DE INVITADOS (Horizontal panorámico en una sola fila)
   ========================================================================== */
.alta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.alta .campo {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.alta label {
  margin-top: 0;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.35 !important;
  margin-bottom: 4px;
}
.alta > p { grid-column: 1 / -1; margin-top: 8px; }

/* En la pantalla del anfitrión: franja horizontal sin salto de línea */
.alta-invitados {
  display: grid;
  grid-template-columns: 2.4fr 1.3fr 1.1fr 0.8fr 0.8fr auto;
  gap: 12px;
  align-items: end;
}

.alta-invitados .campo {
  min-width: 0;
}

.alta-invitados label {
  margin-top: 0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tinta-secundaria);
}

.alta-invitados > p {
  grid-column: auto;
  margin: 0;
}

.alta-invitados button {
  white-space: nowrap;
  min-height: 40px;
}

@media (max-width: 1100px) {
  dl {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 800px) {
  .alta {
    grid-template-columns: 1fr !important;
  }
  .alta-invitados {
    grid-template-columns: 1fr 1fr !important;
  }
  .alta-invitados > p {
    grid-column: 1 / -1 !important;
  }
  .alta-invitados button {
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  dl {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .caja-metrica-mesas {
    grid-column: 1 / -1 !important;
  }
  .alta, .alta-invitados {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   TABLA DE INVITADOS NOCTURNA (Cebra, textos directos sin doble línea)
   ========================================================================== */
.bloque {
  margin-top: 22px;
}

.tabla-contenedor {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--papel);
  margin-top: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.tabla-invitados {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
}

.tabla-invitados caption {
  text-align: left;
  padding: 12px 18px;
  color: var(--tinta-secundaria);
  font-weight: 500;
  font-size: 13px;
  background: var(--linea-suave);
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}

.tabla-invitados thead {
  background: var(--linea-suave);
}

.tabla-invitados th,
.tabla-invitados td {
  text-align: left;
  vertical-align: middle;
  padding: 12px 14px;
  border-bottom: 1px solid var(--linea-suave);
  white-space: nowrap;
}

.tabla-invitados thead th {
  color: var(--tinta-secundaria);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--linea);
}

/* Filas alternadas cebra en modo nocturno */
.tabla-invitados tbody tr:nth-child(even) {
  background-color: var(--linea-suave);
}

.tabla-invitados tbody tr:hover {
  background-color: var(--acento-celeste);
}

.tabla-invitados th[scope="row"] {
  min-width: 160px;
  color: var(--tinta);
}

/* ==========================================================================
   FORMATO VISUAL DE ESTADOS DE ASISTENCIA (Brillo en Modo Nocturno)
   - Asistirá: Verde esmeralda luminoso
   - Pendiente: Ámbar dorado luminoso
   - No asistirá: Rojo coral luminoso
   ========================================================================== */
.badge-estado {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radio-tarjeta);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.estado-asistira {
  color: var(--verde-asiste);
  background: var(--verde-asiste-bg);
  border: 1px solid var(--verde-asiste-borde);
  text-shadow: 0 0 10px color-mix(in srgb, var(--verde-asiste) 40%, transparent);
}

.estado-pendiente {
  color: var(--ambar-pendiente);
  background: var(--ambar-pendiente-bg);
  border: 1px solid var(--ambar-pendiente-borde);
  text-shadow: 0 0 10px color-mix(in srgb, var(--ambar-pendiente) 40%, transparent);
}

.estado-cancelado {
  color: var(--rojo-cancela);
  background: var(--rojo-cancela-bg);
  border: 1px solid var(--rojo-cancela-borde);
  text-shadow: 0 0 10px color-mix(in srgb, var(--rojo-cancela) 40%, transparent);
}

.etiqueta-pausada {
  color: var(--rojo-cancela);
  font-size: 11px;
  font-weight: 600;
}

/* ==========================================================================
   BOTONES DE WHATSAPP Y COPIAR MENSAJE NOCTURNOS
   ========================================================================== */
.acciones-whatsapp {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}

.boton-wa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #25D366 0%, #1EBE5D 100%);
  color: #FFFFFF !important;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid #1EBE5D;
  transition: all .15s ease;
  box-shadow: 0 0 14px rgba(37, 211, 102, 0.35);
  white-space: nowrap;
}

.boton-wa:hover {
  background: #1EBE5D;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.6);
}

.boton-wa.copiado {
  background: #128C7E !important;
  border-color: #25D366 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 18px rgba(37, 211, 102, 0.8) !important;
}

.boton-copiar-msg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--papel-elevado);
  color: var(--tinta);
  font-size: 12px;
  font-weight: 600;
  min-height: auto;
  padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid var(--linea);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: all .15s ease;
  white-space: nowrap;
}

.boton-copiar-msg:hover {
  background: var(--papel-elevado);
  border-color: var(--primario);
  color: var(--tinta);
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.boton-copiar-msg.copiado {
  background: var(--verde-asiste-bg);
  color: var(--verde-asiste);
  border-color: var(--verde-asiste-borde);
  text-shadow: 0 0 8px color-mix(in srgb, var(--verde-asiste) 40%, transparent);
}

.aviso-sin-enlace {
  display: block;
  font-size: 11px;
  color: var(--tinta-secundaria);
  margin-top: 3px;
  font-style: italic;
  white-space: nowrap;
}

.aviso-copiado {
  display: block;
  min-height: 22px;
  font-size: 13px;
  color: var(--verde-asiste);
  margin: 8px 0;
  font-weight: 700;
  text-shadow: 0 0 10px color-mix(in srgb, var(--verde-asiste) 40%, transparent);
}

/* Paginación */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  font-size: 14px;
}

.paginacion a {
  padding: 6px 14px;
  background: var(--papel-elevado);
  border: 1px solid var(--linea);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  color: var(--tinta);
}

.paginacion a:hover {
  background: var(--papel-elevado);
  border-color: var(--primario);
  color: var(--tinta);
}

/* Portada y Login */
.portada-acciones {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.form-en-linea { display: inline-block; margin: 0; }

.aviso-invitados-portada {
  margin-top: 36px;
  border-top: 1px solid var(--linea);
  padding-top: 22px;
  font-size: 14px;
  color: var(--tinta-secundaria);
}

.aviso-invitados-portada h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--tinta);
  margin: 0 0 6px;
}

/* Filtros rápidos de asistencia */
.filtros-asistencia {
  display: flex;
  gap: 8px;
  margin-block: 16px 14px;
  flex-wrap: wrap;
}

.filtro-boton {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--papel);
  color: var(--tinta-secundaria);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  border: 1px solid var(--linea);
  white-space: nowrap;
}

.filtro-boton:hover {
  background: var(--acento-celeste);
  border-color: var(--primario);
  color: var(--tinta);
}

.filtro-boton.activo {
  background: var(--gradiente-boton);
  color: #FFFFFF !important;
  border-color: var(--primario);
  font-weight: 700;
  box-shadow: var(--brillo-boton);
}

/* Gestión de eventos y maestro */
.tarjeta-peligro {
  border-left: 4px solid var(--rojo-cancela);
}

.aviso-peligro {
  background: color-mix(in srgb, var(--rojo-cancela) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rojo-cancela) 35%, transparent);
  color: var(--rojo-cancela);
  padding: 12px 16px;
  border-radius: var(--radio-campo);
  margin-bottom: 20px;
  font-size: 14px;
}

dl.resumen-evento-eliminar {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: color-mix(in srgb, var(--papel-elevado) 70%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent) !important;
  padding: 18px 22px !important;
  border-radius: 10px !important;
  margin: 20px 0 !important;
}

dl.resumen-evento-eliminar div {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 6%, transparent) !important;
  padding-bottom: 10px !important;
}

dl.resumen-evento-eliminar div:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

dl.resumen-evento-eliminar dt {
  font-size: 13px !important;
  color: var(--tinta-secundaria) !important;
  font-weight: 600 !important;
  min-width: 170px !important;
  white-space: normal !important;
}

dl.resumen-evento-eliminar dd {
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: normal !important;
  color: var(--tinta) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.etiqueta-estado {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--primario) 15%, transparent);
  border-radius: 10px;
  color: var(--primario);
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--primario) 30%, transparent);
  white-space: nowrap;
}

/* Pestañas maestro y área de Finanzas */
.pestanas-maestro {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--linea);
  margin-bottom: 24px;
  padding-bottom: 0;
}

.pestana-boton {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta-secundaria);
  text-decoration: none;
  border-radius: 8px 8px 0 0;
  transition: all 0.15s ease;
  background: var(--linea-suave);
  border: 1px solid var(--linea);
  border-bottom: none;
  margin-bottom: -2px;
  white-space: nowrap;
}

.pestana-boton:hover {
  background: var(--acento-celeste);
  color: var(--tinta);
}

.pestana-boton.activa {
  background: var(--papel);
  color: var(--primario);
  border-color: var(--linea);
  border-top: 3px solid var(--primario);
  border-bottom: 2px solid var(--papel-elevado);
  font-weight: 700;
  text-shadow: 0 0 10px color-mix(in srgb, var(--primario) 40%, transparent);
}

.cajas-finanzas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-block: 20px 28px;
}

.caja-finanza {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  padding: 18px;
  text-align: center;
  box-shadow: var(--sombra-tarjeta);
}

.finanza-etiqueta {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tinta-secundaria);
  font-weight: 600;
  margin-bottom: 6px;
  white-space: nowrap;
}

.finanza-monto {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--primario);
  font-family: Georgia, serif;
  text-shadow: 0 0 14px color-mix(in srgb, var(--primario) 35%, transparent);
  white-space: nowrap;
}

.caja-finanza small {
  display: block;
  font-size: 11px;
  color: var(--tinta-secundaria);
  margin-top: 6px;
  white-space: nowrap;
}

.badge-cortesia {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radio-tarjeta);
  background: color-mix(in srgb, var(--tinta) 15%, transparent);
  color: var(--tinta-secundaria);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--linea);
  white-space: nowrap;
}

.ayuda-campo {
  display: block;
  font-size: 12px;
  color: var(--tinta-secundaria);
  margin-top: 4px;
}

.caja-copiar-enlace {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 8px;
  flex-wrap: wrap;
}

.caja-copiar-enlace input {
  margin-top: 0;
  flex: 1 1 280px;
}

.boton-copiar {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 600;
}

.boton-copiar.copiado {
  background: var(--verde-asiste-bg);
  border-color: var(--verde-asiste-borde);
  color: var(--verde-asiste);
}

/* ==========================================================================
   NUEVAS ADAPTACIONES · ETAPAS 23 Y 24
   Login centrado, ojito de clave, distintivos de rol, fecha destacada,
   notificaciones, solicitudes WhatsApp, mesas, buscador y fichas móviles.
   ========================================================================== */

/* Login totalmente centrado */
body.pagina-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body.pagina-login main {
  max-width: 540px !important;
  width: 100%;
  margin: auto;
  text-align: center;
  padding: 30px 20px;
}
body.pagina-login .marca {
  display: block;
  margin: 0 auto 14px auto;
  text-align: center;
}
body.pagina-login h1 {
  text-align: center;
  white-space: normal;
  margin: 0 auto 10px auto;
  font-size: clamp(26px, 4vw, 36px);
  max-width: 100%;
}
body.pagina-login .introduccion {
  text-align: center;
  margin: 0 auto 22px auto;
  font-size: 15px;
  color: var(--tinta-secundaria);
}
.contenedor-centrado-login {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.contenedor-centrado-login .tarjeta.acceso {
  text-align: left;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
}

/* Ojito para revelar / ocultar contraseña (botón circular sutil a la derecha sin estorbar) */
.campo-password {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.campo-password input {
  width: 100% !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
}
button.btn-toggle-clave,
.campo-password button.btn-toggle-clave,
.acceso button.btn-toggle-clave {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  color: var(--tinta-secundaria) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  transition: color 0.2s, background 0.2s;
}
button.btn-toggle-clave:hover,
.campo-password button.btn-toggle-clave:hover,
.acceso button.btn-toggle-clave:hover {
  background: color-mix(in srgb, var(--tinta) 12%, transparent) !important;
  color: var(--tinta) !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}

/* Estrategia de Marketing & Ventas en Landing y Login */
.tarjeta-marketing-invitacion {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primario) 30%, transparent) 0%, color-mix(in srgb, var(--papel-elevado) 80%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--primario) 40%, transparent);
  border-radius: var(--radio-tarjeta);
  padding: 24px 26px;
  margin: 32px 0 16px 0;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 color-mix(in srgb, var(--tinta) 10%, transparent);
  position: relative;
  overflow: hidden;
}
.tarjeta-marketing-invitacion::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primario-oscuro), var(--primario), var(--dorado));
}
.badge-marketing {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  color: var(--primario);
  background: color-mix(in srgb, var(--primario) 12%, transparent);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.tarjeta-marketing-invitacion h3 {
  font-size: 18px;
  margin: 0 0 8px 0;
  color: var(--tinta);
}
.tarjeta-marketing-invitacion p.marketing-intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta-secundaria);
  margin: 0 0 18px 0;
}
.btn-whatsapp-marketing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: var(--radio-campo);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  transition: all 0.2s ease;
}
.btn-whatsapp-marketing:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}
.tarjeta-marketing-login {
  max-width: 480px;
  width: 100%;
  margin-inline: auto;
  margin-top: 24px;
  text-align: center;
  box-sizing: border-box;
}
.tarjeta-marketing-login h3 {
  font-size: 16px;
}
.tarjeta-marketing-login p.marketing-intro {
  font-size: 13px;
  margin-bottom: 14px;
}
.tarjeta-marketing-login .btn-whatsapp-marketing {
  width: 100%;
  box-sizing: border-box;
}

/* Distintivos de rol y medalla con estrella dorada */
.distintivo-rol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8C4700;
  background: color-mix(in srgb, var(--ambar-pendiente) 14%, var(--papel));
  border: 1px solid color-mix(in srgb, var(--ambar-pendiente) 35%, transparent);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 12.5px;
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
html[data-tema="oscuro"] .distintivo-rol {
  color: #FCD34D;
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.4);
}
.estrella-dorada {
  fill: #D97706 !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
html[data-tema="oscuro"] .estrella-dorada {
  fill: #FCD34D !important;
  filter: drop-shadow(0 0 6px rgba(252, 211, 77, 0.6));
}

/* Barra superior del anfitrión y Notificaciones */
.barra-sesion-anfitrion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.acciones-barra-superior {
  display: flex;
  align-items: center;
  gap: 16px;
}
.notificaciones-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  flex-shrink: 0;
}
.btn-campana-notif,
.btn-notif-led {
  position: relative;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 24px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: var(--papel-elevado) !important;
  border: 2px solid var(--linea) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-size: 0 !important;
  line-height: 0 !important;
  outline: none;
  overflow: hidden !important;
  transition: all 0.2s ease;
}
.btn-campana-notif:hover,
.btn-notif-led:hover {
  background: var(--linea) !important;
  border-color: var(--primario) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--primario) 40%, transparent);
}
.led-notif {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: transparent;
  display: block !important;
  transition: all 0.3s ease;
}
.led-notif.activo {
  background: var(--verde-asiste) !important;
  box-shadow: 0 0 6px var(--verde-asiste), 0 0 10px color-mix(in srgb, var(--verde-asiste) 70%, transparent) !important;
}
.menu-desplegable-notif {
  position: absolute;
  top: 50px;
  right: 0;
  width: 320px;
  max-width: 90vw;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  z-index: 1000;
  padding: 14px;
}
.cabecera-menu-notif {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.btn-cerrar-notif {
  background: transparent;
  border: none;
  color: var(--tinta-secundaria);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
}
.lista-items-notif {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}
.item-notif {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 5%, transparent);
}
.item-notif:last-child {
  border-bottom: none;
}
.sin-notif {
  color: var(--tinta-secundaria);
  font-size: 13px;
  padding: 10px 0;
  text-align: center;
}

/* Fecha destacada del evento */
.fecha-evento-destacada {
  color: var(--primario);
  font-size: 1.15rem;
  font-weight: 500;
  margin: -4px 0 20px 0;
  text-shadow: 0 0 10px color-mix(in srgb, var(--primario) 35%, transparent);
}

/* Tarjetas de solicitud a Fer Munguía por WhatsApp */
.caja-solicitudes-admin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.solicitud-card {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  padding: 18px;
  box-shadow: var(--sombra-tarjeta);
}
.solicitud-header {
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--tinta);
}
.solicitud-ayuda {
  font-size: 13px;
  color: var(--tinta-secundaria);
  margin: 0 0 12px 0;
  line-height: 1.45;
}
.grupo-solicitud-wa {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.input-solicitud-txt {
  flex: 1 1 180px;
  margin: 0;
  font-size: 14px;
}
.btn-solicitar-wa {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25D366 !important;
  color: #FFFFFF !important;
  border: 1px solid #1EBE5D !important;
  border-radius: var(--radio-campo);
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn-solicitar-wa:hover {
  background: #1EBE5D !important;
  border-color: #16A34A !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Inputs numéricos con steppers nativos estilizados acorde al diseño nocturno */
input[type="number"] {
  -moz-appearance: number-input;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 0.75;
  cursor: pointer;
  filter: invert(0.85);
  height: 24px;
}
input[type="number"]::-webkit-inner-spin-button:hover,
input[type="number"]::-webkit-outer-spin-button:hover {
  opacity: 1;
  filter: invert(1);
}

.boton-ver-inv-maestro,
.boton-ver-inv-anfitrion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: color-mix(in srgb, var(--primario) 18%, transparent);
  color: var(--primario) !important;
  border: 1px solid color-mix(in srgb, var(--primario) 38%, transparent);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.boton-ver-inv-maestro:hover,
.boton-ver-inv-anfitrion:hover {
  background: color-mix(in srgb, var(--primario) 32%, transparent);
  border-color: var(--primario);
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Buscador local de invitados y cuentas de maestro */
.cabecera-familias-buscador,
.cabecera-cuentas-buscador {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}
.cabecera-familias-buscador h2,
.cabecera-cuentas-buscador h2 {
  margin: 0;
}
.caja-buscador-invitados,
.caja-buscador-cuentas {
  flex: 0 1 360px;
}
.form-buscador-maestro {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  width: 100%;
}
.btn-limpiar-busqueda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--linea);
  color: var(--tinta-secundaria) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--linea);
  transition: all .15s ease;
  flex-shrink: 0;
}
.btn-limpiar-busqueda:hover {
  background: var(--linea);
  color: var(--tinta) !important;
  border-color: var(--primario);
}
.input-buscador-en-vivo {
  margin: 0;
  width: 100%;
  font-size: 14px;
  background: var(--fondo);
  border-color: var(--linea);
  border-radius: 20px;
  padding: 8px 18px;
}
.input-buscador-en-vivo:focus {
  border-color: var(--primario);
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Badges y estilos de columnas */
.col-centrada {
  text-align: center;
}
.sin-mesa {
  display: inline-block;
  color: var(--tinta-secundaria);
  font-style: italic;
  font-size: 13px;
  white-space: nowrap;
}
.badge-mesa {
  display: inline-block;
  background: color-mix(in srgb, var(--primario) 10%, transparent);
  color: var(--primario);
  border: 1px solid color-mix(in srgb, var(--primario) 28%, transparent);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
}
.fecha-registro-txt {
  color: var(--tinta-secundaria);
  font-size: 13px;
  white-space: nowrap;
}
.sub-tel-familia {
  display: block;
  color: var(--tinta-secundaria);
  font-size: 12px;
  margin-top: 3px;
}

/* Regla unificada para TODOS los botones de acción del listado de invitados:
   Misma altura (32px), misma forma rectangular moderna (border-radius: 6px),
   y borde dorado distintivo (#D4AF37) que los diferencia claramente de las etiquetas */
.tabla-invitados .boton-wa,
.tabla-invitados .boton-copiar-msg,
.tabla-invitados .btn-enlace-inv,
.tabla-invitados .btn-accion-fila {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  line-height: 30px !important;
  padding: 0 12px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  border: 1px solid color-mix(in srgb, var(--dorado) 60%, transparent) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tabla-invitados .emoji-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  vertical-align: middle;
  pointer-events: none;
}

.tabla-invitados .boton-wa:hover {
  border-color: #25D366 !important;
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.5) !important;
  transform: translateY(-1px) !important;
}
.tabla-invitados .boton-copiar-msg:hover,
.tabla-invitados .btn-enlace-inv:hover,
.tabla-invitados .btn-accion-fila:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* Colores específicos de cada botón del listado: Verde WhatsApp oficial degradado y luminoso */
.tabla-invitados .boton-wa {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #FFFFFF !important;
  border-color: #1EBE5D !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3) !important;
}
.tabla-invitados .boton-wa:hover {
  background: linear-gradient(135deg, #1EBE5D 0%, #0F766E 100%) !important;
  color: #FFFFFF !important;
  border-color: #25D366 !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.5) !important;
}

.tabla-invitados .boton-copiar-msg {
  background: var(--papel-elevado) !important;
  color: var(--tinta) !important;
}
.tabla-invitados .boton-copiar-msg:hover {
  background: var(--linea) !important;
  color: var(--tinta) !important;
}

.tabla-invitados .btn-enlace-inv {
  background: var(--linea) !important;
  color: var(--tinta) !important;
  border: 1px solid var(--linea) !important;
  box-shadow: none !important;
}
.tabla-invitados .btn-enlace-inv:hover {
  background: var(--linea-suave) !important;
  color: var(--primario) !important;
  border-color: var(--primario) !important;
  box-shadow: none !important;
}

.tabla-invitados .btn-enlace-generar {
  background: var(--linea) !important;
  color: var(--tinta) !important;
  border: 1px solid var(--linea) !important;
  box-shadow: none !important;
}
.tabla-invitados .btn-enlace-generar:hover {
  background: var(--linea-suave) !important;
  color: var(--ambar-pendiente) !important;
  border-color: var(--ambar-pendiente) !important;
  box-shadow: none !important;
}

.boton-abrir-invitacion {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 20px;
  background: var(--gradiente-boton);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: var(--brillo-boton);
}
.boton-abrir-invitacion:hover {
  background: var(--gradiente-boton-hover);
  box-shadow: var(--brillo-boton-hover);
}

.acciones-control-fila {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.form-accion-inline {
  display: inline-flex;
  gap: 6px;
  margin: 0;
  padding: 0;
}

/* Estilo sobrio y limpio para todos los botones de fila, igual que Editar */
.tabla-invitados .btn-editar-fila {
  background: var(--linea) !important;
  color: var(--tinta) !important;
  border: 1px solid var(--linea) !important;
  box-shadow: none !important;
}
.tabla-invitados .btn-editar-fila:hover {
  background: var(--linea-suave) !important;
  color: var(--primario) !important;
  border-color: var(--primario) !important;
  box-shadow: none !important;
}

.tabla-invitados .btn-pausar-fila {
  background: var(--linea) !important;
  color: var(--tinta) !important;
  border: 1px solid var(--linea) !important;
  box-shadow: none !important;
}
.tabla-invitados .btn-pausar-fila:hover {
  background: var(--linea-suave) !important;
  color: var(--ambar-pendiente) !important;
  border-color: var(--ambar-pendiente) !important;
  box-shadow: none !important;
}

.tabla-invitados .btn-reactivar-fila {
  background: var(--linea) !important;
  color: var(--tinta) !important;
  border: 1px solid var(--linea) !important;
  box-shadow: none !important;
}
.tabla-invitados .btn-reactivar-fila:hover {
  background: var(--linea-suave) !important;
  color: var(--verde-asiste) !important;
  border-color: var(--verde-asiste) !important;
  box-shadow: none !important;
}

.tabla-invitados .btn-cancelar-fila {
  background: var(--linea) !important;
  color: var(--tinta) !important;
  border: 1px solid var(--linea) !important;
  box-shadow: none !important;
}
.tabla-invitados .btn-cancelar-fila:hover {
  background: var(--linea-suave) !important;
  color: var(--rojo-cancela) !important;
  border-color: var(--rojo-cancela) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   VERSION MOVIL: TABLA TRANSFORMADA EN FICHAS INDIVIDUALES
   ========================================================================== */
@media (max-width: 900px) {
  .tabla-contenedor {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 6px !important;
  }

  .tabla-invitados,
  .tabla-invitados tbody,
  .tabla-invitados tr,
  .tabla-invitados td,
  .tabla-invitados th {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .tabla-invitados caption {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--tinta) !important;
    padding: 10px 2px 14px !important;
    border-bottom: none !important;
    letter-spacing: 0.02em !important;
  }

  .tabla-invitados thead {
    display: none;
  }

  /* Métrica de mesas en móvil: salto de línea fluido para no perder información */
  dd.metrica-mesas,
  .metrica-mesas {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.4 !important;
    font-size: clamp(14px, 3.8vw, 17px) !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  dl dt {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35 !important;
  }

  /* Ficha individual de invitado en móvil: borde luminoso y contrastado para separar visualmente cada ficha */
  .tabla-invitados tr {
    background: var(--papel);
    border: 1.5px solid color-mix(in srgb, var(--dorado) 38%, transparent) !important;
    border-radius: var(--radio-tarjeta);
    margin-bottom: 14px;
    padding: 13px 15px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 10px color-mix(in srgb, var(--dorado) 8%, transparent);
    box-sizing: border-box;
    transition: all 0.2s ease;
  }

  .tabla-invitados tr:hover,
  .tabla-invitados tr:focus-within {
    border-color: color-mix(in srgb, var(--dorado) 75%, transparent) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 16px color-mix(in srgb, var(--dorado) 18%, transparent);
  }

  .tabla-invitados th[scope="row"] {
    border-bottom: 1px solid color-mix(in srgb, var(--dorado) 18%, transparent);
    padding-bottom: 8px;
    margin-bottom: 8px;
    font-size: 15px;
  }

  .info-familia-col {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
  }

  .nombre-familia-txt {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--tinta);
  }

  .sub-tel-familia {
    font-size: 12px;
    color: var(--tinta-secundaria);
  }

  /* Filas de información agrupadas y compactas */
  .tabla-invitados td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    border: none;
    text-align: right;
    box-sizing: border-box;
    font-size: 12.5px;
  }

  .tabla-invitados td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--tinta-secundaria);
    font-size: 11.5px;
    text-align: left;
    padding-right: 8px;
    flex-shrink: 0;
  }

  /* Filas de acciones: compactas en 2 filas limpias sin etiquetas duplicadas */
  .tabla-invitados td[data-label="WhatsApp"],
  .tabla-invitados td[data-label="Acciones"],
  .tabla-invitados td[data-label="Invitación"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    border: none !important;
    padding: 3px 0 !important;
  }

  .tabla-invitados td[data-label="WhatsApp"]::before,
  .tabla-invitados td[data-label="Acciones"]::before,
  .tabla-invitados td[data-label="Invitación"]::before {
    display: none !important;
  }

  .acciones-whatsapp {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 4px;
  }

  .acciones-whatsapp .boton-wa,
  .acciones-whatsapp .boton-copiar-msg {
    flex: 1 1 50% !important;
    justify-content: center !important;
    text-align: center !important;
    height: 32px !important;
    min-height: 32px !important;
    line-height: 30px !important;
    font-size: 11.5px !important;
    padding: 0 6px !important;
  }

  .acciones-control-fila {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 2px;
  }

  .form-accion-inline {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    flex: 2 1 auto !important;
    margin: 0 !important;
  }

  .tabla-invitados .btn-accion-fila {
    flex: 1 1 33.3% !important;
    justify-content: center !important;
    text-align: center !important;
    height: 32px !important;
    min-height: 32px !important;
    line-height: 30px !important;
    font-size: 11.5px !important;
    padding: 0 4px !important;
  }

  .tabla-invitados td[data-label="Invitación"] {
    padding-top: 4px !important;
  }

  .tabla-invitados td[data-label="Invitación"] .btn-enlace-inv {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    height: 34px !important;
    min-height: 34px !important;
    line-height: 32px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }

  /* Ocultar botón y menú de notificaciones en versión móvil */
  .notificaciones-wrap {
    display: none !important;
  }

  .caja-solicitudes-admin {
    grid-template-columns: 1fr;
  }

  .caja-buscador-invitados,
  .caja-buscador-cuentas {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .pestanas-maestro {
    flex-direction: column;
    gap: 8px;
  }
  .pestana-boton {
    width: 100%;
    text-align: center;
  }
}

.confirmados-verde,
.confirmados-destacado dd,
dd.confirmados-destacado,
.confirmados-destacado {
  color: var(--verde-asiste) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 14px color-mix(in srgb, var(--verde-asiste) 40%, transparent);
}

.confirmados-verde *,
.confirmados-destacado dd * {
  color: var(--verde-asiste) !important;
}

/* ==========================================================================
   Explicación para un estudiante de 10 años:
   Este bloque dibuja una pantalla emergente (modal) muy bonita que muestra
   cómo se ve la invitación. En computadoras se ve como si fuera un teléfono
   iPhone flotando, y en pantallas de celular aprovecha todo el espacio disponible.
   ========================================================================== */
.modal-simulador {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.modal-simulador.activo {
  display: flex !important;
}
.contenedor-simulador {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 95vh;
  width: 100%;
}
.barra-herramientas-simulador {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: 30px;
  margin-bottom: 16px;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
.titulo-simulador-actual {
  font-weight: 700;
  color: #F8E7B9;
  font-size: 0.9rem;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-modo-dispositivo {
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-modo-dispositivo.activo {
  background: rgba(212, 175, 55, 0.25);
  color: #FFD700;
}
.btn-abrir-nueva-pestana {
  color: #F8FAFC;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.btn-abrir-nueva-pestana:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: #D4AF37;
  color: #FFD700;
}
.btn-cerrar-modal {
  background: #EF4444;
  color: #FFFFFF;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-left: 6px;
  transition: transform 0.2s ease;
}
.btn-cerrar-modal:hover {
  transform: scale(1.1);
}
/* Marco del teléfono */
.marco-smartphone {
  width: 390px;
  height: 780px;
  max-height: 80vh;
  background: #000000;
  border: 10px solid #1F2937;
  border-radius: 46px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(212, 175, 55, 0.3);
  overflow: hidden;
  position: relative;
  transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
}
.marco-smartphone.modo-pantalla-completa {
  width: 95vw;
  height: 84vh;
  max-height: 84vh;
  border-radius: 16px;
  border-width: 4px;
}
.marco-smartphone iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #0B0F17;
}

/* Enlaces del pase familiar en la tabla */
.grupo-enlaces-invitacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-abrir-visor {
  cursor: pointer;
  border: none;
}
.btn-enlace-icono {
  background: color-mix(in srgb, var(--tinta) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--tinta) 20%, transparent);
  color: var(--tinta);
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.btn-enlace-icono:hover {
  background: color-mix(in srgb, var(--dorado) 20%, transparent);
  border-color: var(--dorado);
  color: var(--dorado);
}

/* Optimización para teléfonos celulares:
   Ocupa la pantalla completa del teléfono de forma fluida y compacta */
@media (max-width: 640px) {
  .modal-simulador {
    padding: 0 !important;
    background: #000000 !important;
  }
  .modal-simulador.activo {
    display: flex !important;
  }
  .contenedor-simulador {
    height: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }
  .barra-herramientas-simulador {
    width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin-bottom: 0 !important;
    padding: 0 12px !important;
    height: 46px !important;
    background: #0B0F17 !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .titulo-simulador-actual {
    border-right: none !important;
    font-size: 0.85rem !important;
    max-width: 65% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-right: 0 !important;
  }
  .btn-modo-dispositivo {
    display: none !important;
  }
  .btn-cerrar-modal {
    margin-left: 0 !important;
  }
  .marco-smartphone {
    width: 100vw !important;
    height: calc(100vh - 46px) !important;
    height: calc(100dvh - 46px) !important;
    max-height: calc(100vh - 46px) !important;
    max-height: calc(100dvh - 46px) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .marco-smartphone iframe {
    width: 100% !important;
    height: 100% !important;
  }
}




/* ==========================================================================
   BOTÓN CONMUTADOR DE TEMA (LOVELY GIRLY <-> MODO OSCURO PASIONAL)
   ========================================================================== */
.conmutador-tema-flotante {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--papel-elevado);
  border: 1px solid var(--linea);
  color: var(--tinta);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  min-height: 32px;
  white-space: nowrap;
}
.conmutador-tema-flotante:hover {
  border-color: var(--primario);
  color: var(--primario);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.conmutador-tema-flotante .icono-tema {
  font-size: 15px;
  line-height: 1;
}

/* ==========================================================================
   CAPA DE UNIFICACIÓN VISUAL · LOVELY COMERCIAL (ETAPA 40)
   Un solo lenguaje para todo el portal: mismos radios, espacios, sombras,
   tipografía y enfoque. Funciona igual en modo Lovely y en modo oscuro.
   ========================================================================== */

/* Fondo envolvente: crema con un velo rosado arriba (y noche con brillo rubí en oscuro) */
body {
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--acento-celeste) 0%, transparent 70%),
    var(--fondo);
  background-attachment: fixed;
  line-height: 1.6;
}
::selection { background: var(--acento-borde); color: var(--tinta); }

/* Sin brillos de texto en modo claro (se ven sucios sobre crema) */
html:not([data-tema="oscuro"]) * { text-shadow: none !important; }

/* Contenedor principal: aire y centrado coherente */
main { padding: 40px 32px 56px; }

/* Marca superior: sello elegante */
.marca {
  color: var(--primario);
  letter-spacing: .22em;
  font-size: 11px;
  padding: 7px 14px;
  border: 1px solid var(--acento-borde);
  border-radius: 30px;
  background: var(--acento-celeste);
}
.marca:hover { text-shadow: none; background: var(--acento-borde); }

/* Títulos: serif cálida y jerarquía clara */
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; letter-spacing: -0.01em; }
h2 { font-size: 22px; margin-bottom: 14px; }

/* Enlaces */
a { color: var(--primario); }
a:hover { color: var(--primario-hover); text-shadow: none; }

/* Tarjetas: mismo radio, sombra suave y borde que se ilumina al pasar */
.tarjeta, .caja-finanza, .solicitud-card, .tarjeta-marketing-invitacion, .menu-desplegable-notif {
  border-radius: var(--radio-tarjeta);
}
.tarjeta { padding: 28px 30px; margin-bottom: 26px; transition: box-shadow .25s ease, border-color .25s ease; }
.tarjeta:hover { border-color: var(--acento-borde); box-shadow: var(--sombra-flotante); }

/* Tarjeta de marketing: rosada y luminosa */
.tarjeta-marketing-invitacion {
  background: linear-gradient(135deg, var(--acento-celeste) 0%, var(--papel) 70%);
  border: 1px solid var(--acento-borde);
  box-shadow: var(--sombra-tarjeta);
}

/* Botones: píldora suave con gradiente de marca */
button, .boton-principal { border-radius: var(--radio-boton); border-color: transparent; letter-spacing: .01em; }
.secundario, .boton-secundario, .filtro-boton, .boton-copiar-msg, .boton-copiar-showroom {
  border-radius: var(--radio-boton);
}
.secundario, .boton-secundario {
  background: var(--papel-elevado);
  color: var(--tinta);
  border: 1px solid var(--linea);
}
.secundario:hover, .boton-secundario:hover {
  background: var(--acento-celeste);
  border-color: var(--primario);
  color: var(--primario);
  box-shadow: none;
}
.tabla-invitados .boton-wa,
.tabla-invitados .boton-copiar-msg,
.tabla-invitados .btn-enlace-inv,
.tabla-invitados .btn-accion-fila { border-radius: 10px !important; }

/* Botón de WhatsApp conserva su verde reconocible */
.boton-wa, .btn-whatsapp-marketing { color: #FFFFFF; }

/* Campos: más cómodos y con anillo rosado al enfocar */
input, select, textarea { padding: 11px 14px; background: var(--papel); }
input:focus, select:focus, textarea:focus {
  border-color: var(--primario);
  box-shadow: 0 0 0 4px var(--acento-celeste);
}
:focus-visible { outline: 3px solid var(--acento-borde); outline-offset: 3px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primario); }

/* Mensajes */
.mensaje { background: var(--acento-celeste); color: var(--tinta); border-left-color: var(--primario); }
.mensaje[role="alert"] { background: var(--rojo-cancela-bg); color: var(--rojo-cancela); border-left-color: var(--rojo-cancela); }

/* Métricas del resumen: cuadros uniformes */
dl > div { border-radius: var(--radio-campo); }

/* Tabla de invitados: encabezado rosado suave */
.tabla-contenedor { border-radius: var(--radio-tarjeta); overflow: hidden; }
.tabla-invitados thead th { background: var(--acento-celeste); color: var(--primario-oscuro); }
html[data-tema="oscuro"] .tabla-invitados thead th { color: var(--tinta-secundaria); }

/* Pestañas, filtros, distintivos */
.pestana-boton { border-radius: 12px 12px 0 0; }
.pestana-boton.activa { color: var(--primario); }
.filtro-boton.activo { color: #FFFFFF !important; }
.badge-estado, .badge-mesa, .distintivo-rol { border-radius: 30px; }
.badge-mesa { background: var(--acento-celeste); color: var(--primario); border-color: var(--acento-borde); }

/* Pie de página sobrio */
footer { border-top: 1px solid var(--linea); color: var(--tinta-secundaria); }

/* Barra de desplazamiento fina y rosada */
* { scrollbar-width: thin; scrollbar-color: var(--acento-borde) transparent; }

/* ---- CELULAR: táctil, aireado y sin desbordes ---- */
@media (max-width: 900px) {
  main { padding: 24px 16px 44px; }
  .tarjeta { padding: 22px 18px; border-radius: 18px; }
  .tarjeta:hover { box-shadow: var(--sombra-tarjeta); }
  h1 { font-size: clamp(26px, 7.5vw, 34px); }
  /* En celular el tamaño 16px evita el acercamiento molesto de iOS al escribir */
  input, select, textarea { font-size: 16px; min-height: 46px; }
  button, .boton-principal { min-height: 46px; }
  .sesion, .barra-sesion-anfitrion { gap: 12px; }
  .acciones-sesion-maestro, .acciones-barra-superior { width: 100%; justify-content: flex-start; gap: 10px; }
  .portada-acciones { flex-direction: column; align-items: stretch; }
  .portada-acciones .boton-principal, .portada-acciones button { width: 100%; }
  .conmutador-tema-flotante { min-height: 40px; padding: 8px 14px; }
  .filtros-asistencia { gap: 8px; }
  .filtro-boton { padding: 9px 14px; }
}
@media (max-width: 480px) {
  main { padding: 18px 12px 40px; }
  .marca { letter-spacing: .14em; font-size: 10px; }
}

/* Botones que NO son de acción principal: texto legible en ambos temas
   (la regla base de <button> pinta el texto blanco con !important) */
.conmutador-tema-flotante, .secundario, .boton-secundario, .boton-filtro, .boton-copiar-showroom { color: var(--tinta) !important; }
.conmutador-tema-flotante:hover, .secundario:hover, .boton-secundario:hover { color: var(--primario) !important; }
.boton-filtro:hover, .boton-filtro.activo { color: #FFFFFF !important; }
.boton-filtro { background: var(--papel); border: 1px solid var(--linea); box-shadow: none; }
.boton-filtro:hover, .boton-filtro.activo { background: var(--gradiente-boton); border-color: transparent; box-shadow: var(--brillo-boton); }

/* Ajustes finos de tabla: sombra suave y fichas móviles uniformes */
.tabla-contenedor { box-shadow: var(--sombra-tarjeta); border: 1px solid var(--linea); }
@media (max-width: 900px) {
  .tabla-contenedor { box-shadow: none; border: none; overflow: visible; }
  .tabla-invitados caption { background: transparent !important; }
  .tabla-invitados tbody tr, .tabla-invitados tbody tr:nth-child(even) { background: var(--papel); box-shadow: var(--sombra-tarjeta); }
}

/* Garantía universal de color Verde WhatsApp para cualquier botón de contacto/solicitud */
a[href*="wa.me"],
button[data-wa],
.boton-wa,
.btn-solicitar-wa,
.btn-whatsapp-marketing {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #1EBE5D !important;
}
a[href*="wa.me"]:hover,
button[data-wa]:hover,
.boton-wa:hover,
.btn-solicitar-wa:hover,
.btn-whatsapp-marketing:hover {
  background: linear-gradient(135deg, #1EBE5D 0%, #0F766E 100%) !important;
  color: #FFFFFF !important;
  border-color: #25D366 !important;
}

/* Fondo Dark Purple Haze para body en modo oscuro */
html[data-tema="oscuro"] body {
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(168, 85, 247, 0.22) 0%, transparent 70%),
    #0A0713 !important;
  background-attachment: fixed !important;
}

/* ==========================================================================
   ETAPA 41: AJUSTES DE CONTRASTE SALUDO/ROL, BOTONES WHATSAPP Y SIN SOMBRAS
   ========================================================================== */

/* Contenedor de "Hola, {nombre} (Rol)" en modo Lovely:
   Fondo oscuro con texto blanco/beige para contraste sobre el fondo luminoso crema */
.datos-usuario-rol {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 16px;
  border-radius: 12px;
  background: #1F1522;
  color: #FAF2E9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.datos-usuario-rol span {
  color: #FAF2E9;
  font-weight: 500;
}
.datos-usuario-rol strong {
  color: #FFFFFF;
  font-weight: 700;
}
.datos-usuario-rol .distintivo-rol {
  background: rgba(255, 255, 255, 0.12);
  color: #FDE68A;
  border: 1px solid rgba(253, 230, 138, 0.35);
  box-shadow: none !important;
}
.datos-usuario-rol .distintivo-rol .estrella-dorada {
  fill: #FBBF24 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Y viceversa en el modo oscuro (Dark Purple Haze):
   Fondo luminoso claro con texto oscuro */
html[data-tema="oscuro"] .datos-usuario-rol {
  background: #F5EEFD;
  color: #170E2A;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(168, 85, 247, 0.4);
}
html[data-tema="oscuro"] .datos-usuario-rol span {
  color: #170E2A;
}
html[data-tema="oscuro"] .datos-usuario-rol strong {
  color: #0C051A;
}
html[data-tema="oscuro"] .datos-usuario-rol .distintivo-rol {
  background: rgba(107, 33, 168, 0.14);
  color: #6B21A8;
  border: 1px solid rgba(107, 33, 168, 0.35);
  box-shadow: none !important;
}
html[data-tema="oscuro"] .datos-usuario-rol .distintivo-rol .estrella-dorada {
  fill: #B7791F !important;
  filter: none;
}

/* Botones "Solicitar por WhatsApp" y "Solicitar Mesas por WhatsApp":
   Verde WhatsApp oficial, sin resplandor ni sombra */
.btn-solicitar-wa,
button.btn-solicitar-wa {
  background: #25D366 !important;
  color: #FFFFFF !important;
  border: 1px solid #1EBE5D !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
.btn-solicitar-wa:hover,
button.btn-solicitar-wa:hover {
  background: #1EBE5D !important;
  border-color: #16A34A !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
.btn-solicitar-wa:active,
.btn-solicitar-wa:focus,
button.btn-solicitar-wa:active,
button.btn-solicitar-wa:focus {
  background: #128C7E !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Botones del listado de Familias e Invitados ("Pausar", "Eliminar", "Ver Invitación", "Editar", etc.):
   Eliminación total y definitiva de resplandores, brillos y sombras */
.tabla-invitados .btn-pausar-fila,
.tabla-invitados .btn-cancelar-fila,
.tabla-invitados .btn-enlace-inv,
.tabla-invitados .btn-abrir-visor,
.tabla-invitados .btn-editar-fila,
.tabla-invitados .btn-reactivar-fila,
.tabla-invitados .btn-accion-fila,
.tabla-invitados .boton-copiar-msg,
.btn-pausar-fila,
.btn-cancelar-fila,
.btn-enlace-inv,
.btn-abrir-visor,
.btn-editar-fila,
.btn-reactivar-fila,
.btn-accion-fila,
.boton-ver-inv-anfitrion,
.boton-ver-inv-maestro {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.tabla-invitados .btn-pausar-fila:hover,
.tabla-invitados .btn-cancelar-fila:hover,
.tabla-invitados .btn-enlace-inv:hover,
.tabla-invitados .btn-abrir-visor:hover,
.tabla-invitados .btn-editar-fila:hover,
.tabla-invitados .btn-reactivar-fila:hover,
.tabla-invitados .btn-accion-fila:hover,
.tabla-invitados .boton-copiar-msg:hover,
.btn-pausar-fila:hover,
.btn-cancelar-fila:hover,
.btn-enlace-inv:hover,
.btn-abrir-visor:hover,
.btn-editar-fila:hover,
.btn-reactivar-fila:hover,
.btn-accion-fila:hover,
.boton-ver-inv-anfitrion:hover,
.boton-ver-inv-maestro:hover {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Botón "Copiar enlace": Eliminación de sombra y resplandor */
.boton-copiar-showroom,
.boton-copiar,
#boton-copiar,
button.boton-copiar,
button.boton-copiar-showroom {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}
.boton-copiar-showroom:hover,
.boton-copiar:hover,
#boton-copiar:hover,
button.boton-copiar:hover,
button.boton-copiar-showroom:hover {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}