/* ===========================
   Variables y utilidades globales (HALLOWEEN)
   =========================== */
:root {
  /* ====== PALETA BASE (solo colores) ====== */
  --primary-color: #2563eb;   /* Azul principal */
  --primary-dark:  #1d4ed8;   /* Azul oscuro para gradientes */
  --accent-color:  #0ea5e9;   /* Celeste/acento */
  --accent-dark:   #0369a1;   /* Celeste más intenso */
  --bg-color:      #ffffff;   /* Fondo blanco */
  --surface:       #ffffff;   /* Tarjetas / superficies */
  --surface-2:     #e5f0ff;   /* Hover sutil azul muy claro */
  --hairline:      #dbeafe;   /* Bordes finos azul pálido */

  /* Texto */
  --text-color:  #0f172a;     /* Azul gris muy oscuro (texto principal) */
  --muted-color: #64748b;     /* Texto secundario gris azulado */
  --on-dark:     #ffffff;     /* texto sobre botones oscuros */
  --on-gold:     #0f172a;     /* texto sobre acento claro */

  /* Fuentes (SIN cursiva) */
  --font-header: 'Montserrat', sans-serif;
  --font-body:   'Montserrat', sans-serif;

  /* Sombras (sin cambios estructurales) */
  --shadow-sm: 0 3px 10px rgba(15,23,42,0.08);
  --shadow-md: 0 10px 24px rgba(15,23,42,0.12);

  /* Estados (mantengo tu semántica) */
  --ok:    #1b8f52;
  --ok-bg: #e8f7ef;
  --err:   #b3261e;
  --err-bg:#fdecea;

  /* Rings / outlines suaves */
  --ring:         rgba(37,99,235,.10);
  --ring-strong:  rgba(37,99,235,.18);
  --gold-soft:    rgba(148,163,184,.22); /* neutro gris-azulado */

  /* Derivadas útiles */
  --primary-soft: rgba(37,99,235,.12);   /* azul suave */
  --accent-soft:  rgba(14,165,233,.14);  /* celeste suave */

  /* ====== Botones (solo colores/gradientes) ====== */
  --btn-br:            rgba(15,23,42,.06);
  --btn-shadow:        0 1px 4px var(--ring);
  --btn-shadow-hover:  0 4px 12px var(--ring-strong);

  /* Gradientes por “familia” de botón */
  --btn-primary-from:  var(--primary-color);
  --btn-primary-to:    var(--primary-dark);

  /* “Dorado” ahora en tonos claros azulados */
  --btn-gold-from:     #e0f2fe;
  --btn-gold-to:       #93c5fd;

  --btn-danger-from:   #c12f2f;
  --btn-danger-to:     #a51f1f;
  --btn-secondary-from:#6c7a89;
  --btn-secondary-to:  #4b5563;

  --btn-text-on-dark:  var(--on-dark);
  --btn-text-on-gold:  var(--on-gold);
  
  
}

* { box-sizing: border-box; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ===========================
   Página: Menú
   =========================== */
body.menu{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg-color);
  color:var(--primary-color);
  text-align:center;
}

/* Header */
body.menu header{
  background:linear-gradient(to bottom right,#fff,#fdfaf7);
  border-bottom:3px solid var(--accent-color);
  padding:60px 20px 50px;
  position:relative; overflow:hidden;
}
body.menu header h1{
  font-family:var(--font-header);
  font-size:3.8rem; margin:0 0 10px;
  color:var(--primary-color);
  text-shadow:0 2px 6px var(--accent-soft);
}
body.menu header p{
  font-size:1.2rem; color:#555; font-weight:500; margin:0 0 30px;
}
body.menu .countdown{
  display:inline-block; padding:12px 30px; border-radius:40px;
  background:var(--primary-soft);
  border:1px solid var(--accent-color);
  color:var(--primary-color);
  font-family:var(--font-header); font-size:1.8rem;
  text-shadow:0 0 3px rgba(212,175,55,.2);
  box-shadow:var(--shadow-sm); backdrop-filter:blur(2px);
}

/* Acciones superiores */
body.menu .top-actions{position:absolute;top:14px;right:14px;display:flex;gap:8px}
body.menu .icon-btn{
  background:#fff; border:2px solid var(--accent-color); color:var(--primary-color);
  border-radius:999px; padding:10px 12px; font-size:1.1rem; cursor:pointer;
  box-shadow:var(--shadow-sm); display:inline-flex; align-items:center; gap:8px;
  transition:transform .2s,box-shadow .2s,background .2s;
}
body.menu .icon-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);background:#fffdf6}
body.menu .icon-btn svg{width:18px;height:18px;display:block}

/* Botonera principal */
body.menu .menu-principal{
  display:flex; justify-content:center; flex-wrap:wrap; gap:25px;
  margin-top:60px; padding:0 20px;
}
body.menu .menu-boton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-width:220px;
  background:var(--primary-color);
  color:#fff !important; text-decoration:none;
  font-weight:600; font-size:1.1rem; line-height:1;
  padding:18px 40px; border-radius:40px;
  border:2px solid var(--accent-color);
  box-shadow:0 6px 14px rgba(0,0,0,.1);
  transition:transform .3s, box-shadow .3s, background .3s, color .3s;
}
body.menu .menu-boton:hover{
  background:var(--accent-color); color:var(--primary-color) !important;
  transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.15);
}

/* Overlay acceso */
body.menu .access-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  align-items:center; justify-content:center; padding:20px; z-index:1500;
  transition:opacity .25s ease;
}
body.menu .access-card{
  width:min(92vw,420px); background:#fff; border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  border:1px solid rgba(212,175,55,.35);
  padding:20px 18px 18px; text-align:left;
}
body.menu .access-title{margin:0 0 6px;font-family:var(--font-header);font-size:2rem;text-align:center}
body.menu .sub{margin:0 0 16px;text-align:center;color:#555}
body.menu .row{display:flex;flex-direction:column;gap:8px;margin-top:8px}
body.menu label{font-weight:600;color:#5a5a5a}
body.menu input[type=password]{
  width:100%; padding:12px 14px; border:2px solid #eadfbd; border-radius:10px; font-size:1rem; outline:none;
}
body.menu input[type=password]:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(212,175,55,.25)}
body.menu .btn{padding:12px 16px;border-radius:10px;border:2px solid var(--accent-color);cursor:pointer;font-weight:700}
body.menu .btn-primary{background:var(--primary-color);color:#fff}
body.menu .btn-primary:hover{background:var(--accent-color);color:var(--primary-color)}
body.menu .alert{margin-top:10px;background:var(--err-bg);color:var(--err);border:1px solid rgba(179,38,30,.2);border-radius:10px;padding:10px 12px;display:none}
body.menu .access-actions{display:flex;justify-content:flex-end;margin-top:12px}

/* Modal cambiar password */
body.menu .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:1200;opacity:0;transition:opacity .25s}
body.menu .modal-overlay.visible{display:flex;opacity:1}
body.menu .modal-card{width:min(92vw,460px);background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.25);border:1px solid rgba(212,175,55,.35);overflow:hidden}
body.menu .modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(212,175,55,.25);background:linear-gradient(180deg,#fffdf6 0%,#ffffff 100%)}
body.menu .modal-title{margin:0;font-family:var(--font-header);font-size:1.8rem;color:var(--primary-color)}
body.menu .modal-close{background:transparent;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:#8a1e26;padding:6px 8px;border-radius:10px;transition:background .2s}
body.menu .modal-close:hover{background:rgba(212,175,55,.17)}
body.menu .modal-body{padding:16px;text-align:left}
body.menu .form-row{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
body.menu .form-row label{font-size:.95rem;color:#5a5a5a;font-weight:600}
body.menu .form-row input[type="password"]{padding:12px 14px;border:2px solid #eadfbd;border-radius:10px;background:#fff;outline:none;font-size:1rem;color:var(--primary-color);transition:border-color .2s,box-shadow .2s}
body.menu .form-row input[type="password"]:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(212,175,55,.25)}
body.menu .modal-footer{display:flex;gap:10px;justify-content:flex-end;padding:14px 16px 18px;border-top:1px solid rgba(212,175,55,.25);background:#fff}
body.menu .msg{margin-top:4px;border-radius:10px;padding:10px 12px;font-size:.94rem;display:none}
body.menu .msg.ok{display:block;background:var(--ok-bg);color:var(--ok);border:1px solid rgba(27,143,82,.2)}
body.menu .msg.err{display:block;background:var(--err-bg);color:var(--err);border:1px solid rgba(179,38,30,.2)}
body.menu .backdrop{position:fixed;inset:0;background:rgba(255,255,255,.5);display:none;align-items:center;justify-content:center;z-index:1300;backdrop-filter:blur(2px)}
body.menu .backdrop.visible{display:flex}
body.menu .spinner{width:44px;height:44px;border:3px solid #eadfbd;border-top-color:var(--accent-color);border-radius:50%;animation:spin .9s linear infinite}

/* Responsive Menú */
@media (max-width:600px){
  body.menu header h1{font-size:2.8rem}
  body.menu .menu-boton{width:80%;padding:16px}
  body.menu .countdown{font-size:1.4rem;padding:10px 20px}
  body.menu .top-actions{top:10px;right:10px}
}

/* ===========================
   Página: Confirmados
   =========================== */
.confirmados {
  background: var(--bg-color);
  color: var(--primary-color);
  font-family: var(--font-body);
}
.confirmados .page { max-width: 1100px; margin: 0 auto; padding: 28px 20px 40px; }
.confirmados header{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
  margin-bottom:16px; padding-bottom:14px; border-bottom:2px solid rgba(212,175,55,.18);
}
.confirmados header h1{
  margin:0; font-family: var(--font-header); font-weight:400; font-size:2.4rem; line-height:1; color: var(--accent-color);
}

.confirmados .meta{
  font-size:.98rem; color:#6c7a89; display:flex; align-items:center; gap:10px;
  border:1px dashed rgba(212,175,55,.18); padding:6px 10px; border-radius:999px; background:#fff;
  box-shadow: var(--shadow-sm);
}
.confirmados .bullet{ width:6px; height:6px; border-radius:50%; background:var(--accent-color); display:inline-block; }

.confirmados .meta .icon-link,
.confirmados .meta .icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--accent-color); background:#fff; color:var(--primary-color);
  margin-left:6px; box-shadow:0 3px 10px rgba(0,0,0,0.08);
  transition: transform .2s, box-shadow .2s, background .2s; text-decoration:none;
}
.confirmados .meta .icon-link:hover,
.confirmados .meta .icon-btn:hover{
  transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.12); background:#fffdf6;
}
.confirmados .meta .icon-link svg,
.confirmados .meta .icon-btn svg{ width:18px; height:18px; display:block; }
.confirmados .icon-btn{ cursor:pointer; }

.confirmados .error-card{
  display:flex; gap:12px; align-items:flex-start; background:#fff5f5;
  border:1.5px solid #ffc9c9; color:#7a0e1a; border-radius:12px; padding:12px 14px; margin:14px 0 18px;
  box-shadow:0 6px 18px rgba(179,18,47,.08);
}
.confirmados .error-badge{
  min-width:26px; height:26px; border-radius:50%; background:#b3122f; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:0 4px 10px rgba(179,18,47,.25);
}
.confirmados .error-body small{ color:#9a3b3b; }
.confirmados .error-tech{
  margin-top:6px; padding:8px 10px; background:#fff; border:1px dashed #ffc9c9; border-radius:8px;
  color:#7a0e1a; font-family:ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap;
}

.confirmados .toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }

.confirmados .search{ position:relative; width:250px; flex:none; }
.confirmados .search input{
  width:100%; background:#fff; border:2px solid rgba(0,0,0,.12); border-radius:12px;
  padding:12px 44px 12px 12px; font-size:1rem; outline:none;
  transition:border-color .18s,box-shadow .18s; box-shadow:0 6px 16px rgba(0,0,0,.06); color:var(--primary-color);
}
.confirmados .search input:focus{ border-color:rgba(179,18,47,.6); box-shadow:0 6px 18px rgba(179,18,47,.15); }
.confirmados .search .clear-btn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:var(--accent-color); border:none; border-radius:50%; width:28px; height:28px;
  color:#fff; font-weight:bold; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.confirmados .legend{ display:flex; gap:10px; align-items:center; color:#6c7a89; font-size:.9rem; }
.confirmados .legend .chip{ transform:none; box-shadow:none; }

.confirmados .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.confirmados .card{
  position:relative; background:linear-gradient(180deg,#fff,#fffefe); border-radius:16px;
  padding:18px 16px 16px; box-shadow:0 10px 26px rgba(0,0,0,.06); border:1px solid #eee;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; color:var(--primary-color);
}
.confirmados .card:before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,rgba(212,175,55,.0),rgba(212,175,55,.9),rgba(212,175,55,.0));
}
.confirmados .card:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.12); border-color:rgba(212,175,55,.28); }
.confirmados .card h3{ margin:0 0 6px 0; font-family:var(--font-header); font-size:1.5rem; }
.confirmados .count{ font-size:.92rem; color:#6c7a89; margin-bottom:8px; }

.confirmados .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.confirmados .chip{
  border-radius:999px; padding:7px 12px; font-size:.93rem; line-height:1; color:#fff;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.confirmados .chip--yes{ background:linear-gradient(180deg,#8b1526 0%, #6f0e1b 100%); }
.confirmados .chip--no{ background:linear-gradient(180deg,#9aa5b1 0%, #6b7280 100%); border-left:3px solid #c73a3a; }

.confirmados .msg{
  margin-top:6px; padding:12px 14px;
  background:linear-gradient(180deg,#8b1526 0%, #6f0e1b 100%); border-left:4px solid var(--accent-color);
  color:#fff; border-radius:10px; white-space:pre-wrap;
}

.confirmados .empty,
.confirmados .no-results{
  max-width:900px; margin:26px auto; color:#6c7a89; font-size:1.02rem; text-align:center;
  background:#fff; border:1px dashed rgba(212,175,55,.18); padding:16px; border-radius:12px;
}
.confirmados .empty{ margin-top:46px; }
.confirmados .no-results{ display:none; }

.confirmados .fecha-creado{
  font-size:.65rem; color:#6c7a89; margin-top:-4px; margin-bottom:8px; letter-spacing:.3px; font-style:italic;
}

/* Responsive Confirmados (móvil) */
@media (max-width: 600px){
  /* Layout del header en columna */
  .confirmados header{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .confirmados header h1{
    font-size: 2.1rem;
    margin-bottom: 2px;
  }

  /* Meta: ocupa todo el ancho, wrap y reserva espacio para los iconos */
  .confirmados .meta{
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 76px;     /* espacio para 2 iconos */
    position: relative;      /* referencia para posicionar iconos */
    font-size: .95rem;
  }

  /* Iconos arriba-derecha dentro del header (no se mueven de sitio en el DOM) */
  .confirmados .meta .icon-btn,
  .confirmados .meta .icon-link{
    position: absolute;
    top: 8px;
    z-index: 2;
  }
  .confirmados .meta .icon-btn{   /* puerta */
    right: 12px;
  }
  .confirmados .meta .icon-link{   /* casa */
    right: 54px;
  }

  /* Contenido */
  .confirmados .page{ padding: 22px 16px 34px; }
  .confirmados .grid{ grid-template-columns: 1fr; }
}

/* Print Confirmados (igual que tenías) */
@media print{
  .confirmados body{ background:#fff; }
  .confirmados header{ border:none; }
  .confirmados .card{ break-inside:avoid; box-shadow:none; }
  .confirmados .toolbar{ display:none; }
}

/* ===========================
   Página: Invitar
   =========================== */
.invitar{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg-color);
  color:var(--primary-color);
}

/* Encabezado fijo */
.invitar .header-fixed{
  position:sticky; top:0; z-index:500; background:var(--surface);
  padding:18px clamp(12px,3vw,24px);
  border-bottom:2px solid var(--gold-soft);
  box-shadow:0 2px 10px var(--ring);
  width:100%;
  display:flex; flex-direction:column; gap:8px;

  /* Anti-recorte + espacio para iconos derechos */
  overflow: visible !important;
  --actions-w: 72px;
  padding-right: calc(clamp(12px, 3vw, 24px) + var(--actions-w)) !important;
}
.invitar h1{
  margin:0 0 10px;
  font-size:clamp(2rem,3vw,2.4rem);
  font-family:var(--font-header);
  color:var(--accent-color);
  letter-spacing:.4px;
}

/* Acciones arriba derecha */
.invitar .top-right-actions{
  position:absolute !important;
  top:18px;
  right:clamp(12px,3vw,24px);
  display:flex; gap:10px;
  z-index:2;
}
.invitar .icon-round{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:2px solid var(--accent-color);
  background:#fff; color:var(--primary-color);
  text-decoration:none; cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.invitar .icon-round:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.12); background:#fffdf6; }
.invitar .icon-round svg{ width:18px; height:18px; display:block; }

/* Botones superiores */
.invitar .top-buttons{
  display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap;
  margin-right: calc(var(--actions-w) + 12px);
}
.invitar .top-buttons a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 16px; border-radius:999px;
  font-weight:600; font-size:14px; text-decoration:none;
  border:1px solid var(--btn-br); box-shadow:var(--btn-shadow);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.invitar .top-buttons a:hover{
  transform:translateY(-1px);
  box-shadow:var(--btn-shadow-hover);
  filter:brightness(1.02);
}

/* Tematizamos colores (sin hex fijos) */
.invitar .btn-invitacion{
  background:linear-gradient(180deg,var(--btn-primary-from),var(--btn-primary-to));
  color:var(--btn-text-on-dark) !important; border:1px solid var(--btn-br);
}
.invitar .btn-confirmado{
  background:linear-gradient(180deg,var(--btn-gold-from),var(--btn-gold-to));
  color:var(--btn-text-on-gold) !important; border:1px solid var(--btn-br);
}

/* Buscador */
.invitar .search-box input{
  width:100%; max-width:420px;
  padding:10px 12px; border:1px solid #ddd; border-radius:12px;
  outline:none; font-size:16px; background:#fff;
}
.invitar .search-box input:focus{
  border-color:var(--accent-color);
  box-shadow:0 0 0 3px rgba(179,18,47,.15);
}

/* Stats */
.invitar .stats{
  margin-top:10px; font-size:.98rem; color:#6c7a89;
  display:flex; gap:16px; flex-wrap:wrap;
  padding:6px 10px; border:1px dashed var(--gold-soft);
  border-radius:999px; background:#fff; width:max-content;
}

/* Tabla */
.invitar .wrap{ max-width:1300px; margin:0 auto; padding:24px; overflow-x:auto; }
.invitar .table{
  width:100%; min-width:1200px; border-collapse:separate; border-spacing:0;
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 10px 26px var(--ring); border:1px solid #eee;
}
.invitar .table th, .invitar .table td{
  padding:14px 12px; border-bottom:1px solid #f1f1f1; text-align:left;
}
.invitar .table th{
  background:linear-gradient(180deg,#fafafa,#f5f5f5);
  font-weight:600; color:var(--primary-color);
}
.invitar .table tr:last-child td{ border-bottom:none; }

/* Botones de acción (tabla) */
.invitar .row-actions{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
.invitar .btn{
  padding:8px 12px; border:0; border-radius:10px; cursor:pointer;
  font-size:13px; transition:.12s ease;
  box-shadow:0 2px 8px var(--ring); font-weight:600;
}
.invitar .btn-edit{
  background:linear-gradient(180deg,var(--btn-primary-from),var(--btn-primary-to));
  color:var(--btn-text-on-dark) !important;
}
.invitar .btn-send{
  background:linear-gradient(180deg,var(--btn-gold-from),var(--btn-gold-to));
  color:var(--btn-text-on-gold) !important; text-decoration:none;
  font-family:var(--font-body); font-size:14px; letter-spacing:.3px;
}
.invitar .btn-danger{
  background:linear-gradient(180deg,var(--btn-danger-from),var(--btn-danger-to));
  color:#fff !important;
}
.invitar .btn-secondary{
  background:linear-gradient(180deg,var(--btn-secondary-from),var(--btn-secondary-to));
  color:#fff !important;
}
.invitar .btn-gold{
  background:linear-gradient(180deg,var(--btn-gold-from),var(--btn-gold-to));
  color:var(--btn-text-on-gold) !important;
}
.invitar .btn:hover{ transform:translateY(-1px); filter:brightness(1.03); box-shadow:0 4px 14px var(--ring-strong); }

/* Badges */
.invitar .badge{ display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.invitar .badge-ok{ background:#eafbef; color:#1e824c; }
.invitar .badge-no{ background:#fff8e6; color:#b7791f; }
.invitar .badge-confirmo{ background:#eafbef; color:#1e824c; }
.invitar .badge-denego{ background:#fdeaea; color:#b71c1c; }
.invitar .badge-pendiente{ background:#fff8e6; color:#b7791f; }

/* Modal */
.invitar .modal{ display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.45); padding:16px; }
.invitar .modal-dialog{
  width:min(96vw,680px); margin:auto; background:#fff; border-radius:16px;
  box-shadow:0 16px 36px rgba(0,0,0,.25); overflow:hidden;
  display:flex; flex-direction:column; max-height:88vh; border:1px solid #eee;
}
.invitar .modal-header{ padding:12px 16px; border-bottom:1px solid #eee; }
.invitar .modal-title{ margin:0; font-size:1.2rem; font-weight:700; color:var(--primary-color); }
.invitar .modal-body{ padding:14px 16px; overflow:auto; }
.invitar .form-control{ width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:12px; }
.invitar .form-control:focus{ border-color:var(--accent-color); box-shadow:0 0 0 3px rgba(179,18,47,.15); }
.invitar .toast{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%) translateY(8px);
  background:#1e824c; color:#fff; padding:10px 14px; border-radius:10px; font-size:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.18); opacity:0; transition:.2s; z-index:2;
}
.invitar .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Ajustes compactos */
.invitar .table{ font-size:13px; }
.invitar .table th{ font-size:13.5px; }
.invitar .table th, .invitar .table td{ padding:10px 10px; }
.invitar .row-actions{ gap:6px; }
.invitar .btn{ padding:6px 10px; font-size:12px; border-radius:8px; box-shadow:0 1px 4px var(--ring); }
.invitar .btn-send{ font-size:12px; }
.invitar .btn-edit, .invitar .btn-secondary, .invitar .btn-danger, .invitar .btn-gold{ box-shadow:0 1px 4px var(--ring); }
.invitar .search-box input{ padding:8px 10px; font-size:14px; }
.invitar .stats{ font-size:.9rem; padding:4px 8px; gap:10px; }
.invitar tbody tr[data-placeholder="1"] td:first-child{ opacity:.85; font-style:italic; }

/* Overlay global de carga */
.invitar .loading-overlay{
  position:fixed; inset:0; z-index:20000;
  display:none; align-items:center; justify-content:center;
  background:rgba(255,255,255,.65); backdrop-filter:blur(2px);
}
.invitar .loading-overlay.show{ display:flex; }
.invitar .loading-overlay .spinner-xl{
  width:54px; height:54px;
  border:4px solid rgba(0,0,0,.15);
  border-top-color: var(--accent-color);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

/* Chips */
.invitar .chip{
  padding:6px 12px; border-radius:999px; border:1px solid #e6e6e6; background:#fff;
  font-weight:600; font-size:12px; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.06);
  appearance:none;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 1px 4px var(--ring);
  transition:transform .12s, box-shadow .12s, background .12s, color .12s;
}
.invitar .chip:hover{ transform:translateY(-1px); box-shadow:0 4px 12px var(--ring-strong); }
.invitar .chip.is-active{
  background:linear-gradient(180deg,#fafafa,#f3f3f3);
  border-color:var(--gold-soft);
  box-shadow:inset 0 0 0 2px rgba(212,175,55,.18), 0 1px 4px var(--ring);
}

/* Stats compactas */
.invitar .stats-compact{
  gap:12px; padding:4px 10px; font-size:.9rem; border-radius:999px; margin-top:6px;
}
.invitar .stats-compact span{
  background:#fff; padding:4px 8px; border-radius:999px;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 1px 3px var(--ring); line-height:1.2;
}
.invitar .stats-compact span > span{
  padding:0 4px; border-radius:6px; background:#fff8e6;
  border:1px solid rgba(212,175,55,.25);
}

/* Botones redondos superiores: ligera reducción */
.invitar .icon-round{ width:34px; height:34px; }
.invitar .icon-round svg{ width:16px; height:16px; }

/* Móvil: header fijo + tabla scroll + SWAP de iconos (puerta derecha, casa izquierda) */
@media (max-width: 768px){
  /* Header fijo y reserva espacio a la derecha para 2 iconos */
  .invitar .header-fixed{
    --hdr-h: 260px;                 /* ajusta si tu header es más alto/bajo */
    position: sticky;
    top: 0;
    z-index: 1000;
    padding-right: 76px !important; /* ~2 iconos de 34px + margen */
  }

  /* No reposicionar el contenedor para no romper layout */
  .invitar .header-fixed .top-right-actions{
    position: static !important;
  }

  /* Base: los iconos flotan arriba-derecha del título */
  .invitar .header-fixed .top-right-actions .icon-round{
    position: absolute !important;
    top: 14px !important;
    z-index: 2;
  }

  /* SWAP solo en móvil: puerta (logout) a la derecha, casa a la izquierda */
  .invitar .header-fixed .top-right-actions #logout-btn{ right: 12px !important; }
  .invitar .header-fixed .top-right-actions a.icon-round{ right: 54px !important; }

  /* Solo la tabla se desplaza */
  html, body{ height: 100dvh; overflow: hidden; }
  .invitar .wrap{
    height: calc(100dvh - var(--hdr-h));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ===========================
   Página: Invitación
   =========================== */
.invitacion * { box-sizing: border-box; }
.invitacion{
  font-family: var(--font-body);
  background: var(--bg-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* OVERLAY (Haz clic para abrir) */
.invitacion #overlay{
  position: fixed; inset: 0;
  background: rgba(255,255,255,0.95);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 1000; cursor: pointer; text-align: center;
  transition: opacity .6s ease;
}
.invitacion #overlay .overlay-content{
  color: var(--primary-color);
  animation: invitacion-fade-in 1.2s ease both;
}
.invitacion .overlay-envelope-wrapper{ position: relative; display:inline-block; margin-bottom:16px; }
.invitacion .overlay-envelope{ width:100px; display:block; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.08)); }
.invitacion .overlay-heart{ position:absolute; top:26px; left:50%; transform:translateX(-50%); font-size:1.6rem; color:var(--accent-color); pointer-events:none; }
.invitacion #overlay .overlay-content h2{ font-family:var(--font-header); font-size:2.5rem; margin-bottom:10px; color:var(--primary-color); }
.invitacion #overlay .overlay-content p{ font-family:var(--font-body); font-size:1.1rem; color: var(--muted-color); }

@keyframes invitacion-fade-in { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }

/* HEADER */
.invitacion header{
  position: relative; text-align:center;
  padding: 120px 20px 100px;
  background: #f3f8ff;              /* ← celeste claro en todo el header */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.invitacion header::before{
  content:""; position:absolute; inset:0;
  background: transparent;          /* ← sin velo rosado */
  z-index:0;
}
.invitacion header .content{ position:relative; z-index:1; }
.invitacion header h1{
  font-family:var(--font-header); font-size:4rem;
  color:var(--primary-color);
  text-shadow:0 2px 6px rgba(37,99,235,0.18); /* sombra azul suave */
  margin-bottom:12px;
}
.invitacion header p{ font-size:1.25rem; font-weight:500; color:#444; }

/* COUNTDOWN */
.invitacion .countdown{
  display:inline-block; margin-top:22px; padding:14px 30px;
  background: rgba(255,255,255,0.95);
  border:1px solid var(--accent-color);      /* borde azul */
  border-radius:50px; box-shadow:0 4px 12px rgba(0,0,0,0.08);
  font-family:var(--font-body); font-size:1.3rem; color:var(--primary-color);
  backdrop-filter: blur(5px);
}

/* SECCIONES */
.invitacion section{ max-width:900px; margin:60px auto; padding:0 20px; }
.invitacion section h2{
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--font-header); font-size:2.5rem; color:var(--primary-color); margin-bottom:40px;
}
.invitacion section h2::before,
.invitacion section h2::after{
  content:""; display:block; height:1px; width:clamp(28px,8vw,72px);
  background: linear-gradient(90deg, rgba(0,0,0,0), var(--accent-color), rgba(0,0,0,0)); opacity:.6;
}

/* ABOUT */
.invitacion #about{ text-align:center; }
.invitacion #about img{
  width:180px; height:180px; object-fit:cover; border-radius:50%;
  border:4px solid var(--primary-color); box-shadow: var(--shadow-sm); margin-bottom:20px;
}

/* DETAILS */
.invitacion #details ul{
  list-style:none; display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:20px;
}
.invitacion #details li{
  background:#fff; padding:20px; border-left:4px solid var(--accent-color);
  border-radius:6px; box-shadow: var(--shadow-sm); font-size:1rem; color:#3a3a3a;
}

/* GALLERY */
.invitacion #gallery{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:20px;
}
.invitacion #gallery .photo{ position:relative; overflow:hidden; border-radius:8px; box-shadow: var(--shadow-md); }
.invitacion #gallery .photo img{ width:100%; height:260px; object-fit:cover; transition: transform .6s ease; }
.invitacion #gallery .photo:hover img{ transform: scale(1.05); }

/* CONTACT */
.invitacion #contact iframe{
  width:100%; height:350px; border:none; border-radius:8px; box-shadow: var(--shadow-md);
}

/* RSVP */
.invitacion #rsvp form{ display:flex; flex-direction:column; gap:16px; }
.invitacion .rsvp-row{ display:flex; gap:16px; flex-wrap:wrap; }
.invitacion .rsvp-row > input{
  flex:1 1 0; min-width:120px; padding:12px;
  border:2px solid var(--hairline); border-radius:6px; background:#fff;
}
.invitacion .rsvp-row > input[readonly]{ background:#f7f7f7; }

.invitacion #lista-invitados{ display:none; flex-direction:column; gap:12px; }
.invitacion #lista-invitados > label{ font-weight:600; color:var(--primary-color); }
.invitacion #checkboxes-invitados{ display:grid; grid-template-columns:1fr; gap:10px; }
.invitacion .checkbox-card{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--hairline);
  border-radius:10px; padding:10px 12px; box-shadow: var(--shadow-sm);
}
.invitacion .checkbox-card span{ font-weight:500; color:#333; }
.invitacion .checkbox-card label{ display:inline-flex; align-items:center; gap:6px; font-size:.95rem; color:#333; }
.invitacion #limite-aviso{ display:none; color:#b3122f; font-size:.9rem; }

/* Mensaje y botón */
.invitacion #rsvp textarea{
  width:100%; padding:12px; border:2px solid var(--hairline);
  border-radius:6px; background:#fff; resize:vertical;
}
.invitacion #rsvp button{
  width:100%; padding:16px;
  background:var(--accent-color); color:#fff;
  border:none; border-radius:8px; font-size:1.1rem; font-family:var(--font-body);
  cursor:pointer; transition: background .3s;
}
.invitacion #rsvp button:hover{ background:var(--accent-dark); }

/* MODAL DE ÉXITO */
.invitacion .modal-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.4); z-index:1200; opacity:0; pointer-events:none;
  transition: opacity .35s ease;
}
.invitacion .modal-overlay.visible{ opacity:1; pointer-events:auto; }
.invitacion .modal-overlay.fade-out{ opacity:0; pointer-events:none; }
.invitacion .modal-content{
  width:min(92vw,440px); background:#fff; border-radius:16px; padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.25); text-align:center; position:relative;
}
.invitacion .modal-close{
  position:absolute; right:10px; top:10px;
  border:none; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer; color:#999;
}
.invitacion .modal-icon{ font-size:2.2rem; margin-bottom:8px; }
.invitacion .modal-content h3{ margin-bottom:6px; color:var(--primary-color); font-family:var(--font-header); font-size:1.8rem; }
.invitacion .modal-content p{ color:#333; }

/* BLOQUEO DE PANTALLA (SPINNER) */
.invitacion #screen-blocker{
  position:fixed; inset:0; z-index:1100;
  background:rgba(255,255,255,0.75); backdrop-filter: blur(2px);
  display:none; align-items:center; justify-content:center;
}
.invitacion .blocker-visible{ display:flex !important; }
.invitacion .spinner{
  width:52px; height:52px; border-radius:50%;
  border:4px solid rgba(0,0,0,0.15); border-top-color: var(--accent-color);
  animation: spin .9s linear infinite;
}

/* FOOTER */
.invitacion footer{
  text-align:center; padding:30px 20px; font-size:.9rem; color: var(--muted-color);
}

/* ====== Parche móvil: habilitar scroll vertical ====== */
@media (max-width: 768px){
  html, body{
    height: auto !important;
    overflow-y: auto !important;   /* re-habilita desplazamiento */
    -webkit-overflow-scrolling: touch; /* inercia iOS */
  }
  .invitacion{
    min-height: 100dvh;   /* altura real del viewport en móviles */
    overflow-y: auto;      /* contenedor desplazable */
    overflow-x: hidden;
  }
}

/* ====== Overlays y bloqueos: no capturen toques cuando estén “ocultos” ====== */
.invitacion .modal-overlay:not(.visible){
  display: none !important;
  pointer-events: none !important;
}

.invitacion #screen-blocker:not(.blocker-visible){
  display: none !important;
  pointer-events: none !important;
}

/* Si tu overlay inicial (#overlay) queda con opacidad 0 por CSS/inline,
   asegúrate de que no intercepte gestos en móvil */
.invitacion #overlay[hidden],
.invitacion #overlay.is-hidden,
.invitacion #overlay[style*="display:none"],
.invitacion #overlay[style*="opacity: 0"],
.invitacion #overlay[style*="opacity:0"]{
  pointer-events: none !important;
}

/* Previene “rebote” del overlay visible (cuando sí debe mostrarse) */
.invitacion #overlay{
  overscroll-behavior: contain;
}

/* ====== Asegurar que ninguna sección rompa el flujo con overflow ====== */
.invitacion section{
  overflow: visible !important; /* evita clips que bloqueen el gesto */
}

/* ====== iOS/Safari: evitar que elementos fijos corten el scroll ====== */
@supports (-webkit-touch-callout: none){
  .invitacion{
    min-height: 100svh; /* fallback específico de iOS */
  }
}

/* ===== Details pegado a la izquierda (sin romper nada) ===== */

/* Elimine sangría del UL para alinear tarjetas */
.invitacion #details ul{
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Ajustes específicos para móvil */
@media (max-width: 600px){
  /* Título y contenido alineados a la izquierda */
  .invitacion #details{
    padding-left: 6 !important;
    padding-right: 6 !important;
    text-align: left;
  }
  .invitacion #details h2{
    justify-content: flex-start;  /* h2 es flex */
    text-align: left;
  }
  .invitacion #details h2::before,
  .invitacion #details h2::after{
    display: none; /* sin líneas decorativas laterales */
  }

  /* Lista en 1 columna ocupando todo el ancho */
  .invitacion #details ul{
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .invitacion #details li{
    width: 100%;
    text-align: left;
    margin-left: 0;
  }
}

@media (max-width: 600px){
  .invitacion section h2{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;              /* espacio entre título y líneas */
    white-space: nowrap;
  }
  .invitacion section h2::before,
  .invitacion section h2::after{
    display: block !important;
    content: "";
    height: 1px;
    width: clamp(24px, 10vw, 60px);  /* ancho de la línea en móvil */
    background: linear-gradient(90deg, rgba(0,0,0,0), var(--accent-color), rgba(0,0,0,0));
    opacity: .6;
  }
}