/* ==========================================================================
   Invitación de boda — hoja de estilos única para index.html, novios.html
   y admin.html.
   Sistema: blanco + azules, botones con degradado, tipografía elegante
   y legible (serif para titulares, sans para texto).
   ========================================================================== */

/* ---------- 1. Tokens de diseño (variables CSS) ---------- */
:root{
  /* Base neutra: blanco y grises azulados */
  --bg:            #ffffff;
  --bg-soft:       #f4f7fc;   /* azul muy pálido, para bloques alternos */
  --surface:       #ffffff;  /* fondo de tarjetas */
  --line:          rgba(20,40,70,.12);

  /* Azules — color de marca */
  --blue-50:  #eef3fb;
  --blue-100: #dce7f7;
  --blue-200: #bcd3ef;
  --blue-300: #8fb4e0;
  --blue-400: #5f90cd;
  --blue-500: #3d72b8;
  --blue-600: #2a5a9c;   /* azul principal */
  --blue-700: #1f4478;
  --blue-800: #17325a;
  --blue-900: #101f3a;   /* azul marino profundo, para fondos oscuros */

  /* Alias semánticos (se usan en el resto del archivo) */
  --sage:       var(--blue-600);
  --sage-dark:  var(--blue-700);
  --sage-deep:  var(--blue-900);
  --gold:       var(--blue-600);
  --gold-soft:  var(--blue-200);
  --sand:       var(--blue-100);

  --ink:        #172436;   /* texto principal, azul-negro cálido */
  --ink-soft:   #57647a;   /* texto secundario */
  --white:      #ffffff;

  /* Degradados de botones y acentos */
  --gradient-primary:       linear-gradient(135deg, var(--blue-400) 0%, var(--blue-700) 100%);
  --gradient-primary-hover: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-800) 100%);
  --gradient-deep:          linear-gradient(160deg, var(--blue-800) 0%, var(--blue-900) 100%);

  /* Estado (panel privado) — se mantienen distintos del azul para que se lean con claridad */
  --ok:            #2f7d5b;
  --warn:          #b8873f;
  --danger:        #b23b3b;
  --ok-bg:         #e9f3ee;
  --warn-bg:       #f7ecd9;
  --danger-bg:     #f8eaea;

  /* Tipografía */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Nunito', 'Helvetica Neue', Arial, sans-serif;

  /* Espaciado */
  --space-xs: .5rem;
  --space-s:  1rem;
  --space-m:  2rem;
  --space-l:  4rem;
  --space-xl: 7rem;

  /* Radios — sistema de tres escalas para dar jerarquía y coherencia */
  --radius-sm: 8px;    /* botones, inputs, chips */
  --radius-md: 18px;   /* tarjetas */
  --radius-lg: 28px;   /* paneles grandes, modales, hero */
  --radius: var(--radius-sm); /* alias retrocompatible */

  /* Sombras — sistema de elevación consistente */
  --shadow-sm: 0 2px 12px rgba(16,31,58,.07);
  --shadow-md: 0 16px 36px -14px rgba(16,31,58,.22);
  --shadow-lg: 0 30px 70px -20px rgba(16,31,58,.30);
  --shadow-soft: var(--shadow-md); /* alias retrocompatible */

  --border: 1px solid var(--line);
  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1180px;
}

/* ---------- 2. Reset ligero ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body{ margin:0; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; font-size:1rem; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection{ background: var(--blue-100); color: var(--blue-800); }

:focus-visible{
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
}

.container{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-m);
}
@media (max-width: 640px){
  .container{ padding-inline: var(--space-s); }
}

.eyebrow{
  font-family: var(--font-body);
  letter-spacing: .26em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 500;
  color: var(--blue-600);
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .005em;
  margin: 0 0 var(--space-s);
  color: var(--ink);
}

p{ margin: 0 0 var(--space-s); color: var(--ink-soft); max-width: 62ch; }

.section-title{
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-style: italic;
}

/* Divisor firma: monograma flanqueado por líneas azules ----------------- */
.divider{
  display:flex;
  align-items:center;
  gap: var(--space-s);
  margin: var(--space-m) 0;
  color: var(--blue-500);
}
.divider::before, .divider::after{
  content:"";
  flex:1;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--blue-400) 50%, transparent);
  opacity:.7;
}
.divider__mark{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: .05em;
  white-space: nowrap;
}
.divider--center{ justify-content:center; }

/* Monograma reutilizable ------------------------------------------------- */
.monogram{
  font-family: var(--font-display);
  font-weight: 500;
  display:inline-flex;
  align-items:baseline;
  gap: .35em;
  color: var(--blue-700);
  letter-spacing: .04em;
}
.monogram em{ font-style: italic; color: var(--blue-500); }
.monogram--lg{ font-size: 3rem; }

/* ---------- 3. Navegación ---------- */
.nav{
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .3s var(--ease);
  padding-block: var(--space-s);
}
.nav.is-scrolled{
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(8px);
  padding-block: .6rem;
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-m);
}
.nav__brand{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
  white-space: nowrap;
  transition: color .3s var(--ease), text-shadow .3s var(--ease);
}
.nav.is-scrolled .nav__brand{ color: var(--ink); text-shadow:none; }

.nav__list{
  display:flex;
  gap: clamp(.8rem, 2vw, 1.7rem);
  flex-wrap: wrap;
}
/* Por defecto el nav es transparente sobre la foto de portada, así que el
   texto va en blanco con una sombra sutil para que siempre se pueda leer;
   al hacer scroll (fondo blanco) pasa a un tono oscuro. */
.nav__list a{
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
  position: relative;
  padding-bottom: .2rem;
  transition: color .3s var(--ease), text-shadow .3s var(--ease);
}
.nav.is-scrolled .nav__list a{ color: var(--ink-soft); text-shadow:none; }
.nav__list a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background: rgba(255,255,255,.9);
  transition: right .25s var(--ease), background .3s var(--ease);
}
.nav.is-scrolled .nav__list a::after{ background: var(--blue-500); }
.nav__list a:hover::after, .nav__list a:focus-visible::after{ right:0; }

.nav__toggle{
  display:none;
  background:none; border:none;
  flex-direction:column; gap:5px;
  padding:.4rem;
}
.nav__toggle span{ width:22px; height:1px; background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.3); display:block; transition: background .3s var(--ease); }
.nav.is-scrolled .nav__toggle span{ background: var(--ink); box-shadow:none; }

@media (max-width: 780px){
  .nav__toggle{ display:flex; }
  .nav__list{
    position:absolute; top: calc(100% + 8px); left: var(--space-s); right: var(--space-s);
    background: var(--white);
    flex-direction:column;
    gap: 0;
    padding: .5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height:0; overflow:hidden;
    transition: max-height .35s var(--ease);
  }
  .nav__list.is-open{ max-height: 420px; }
  /* El desplegable siempre tiene fondo blanco, así que el texto va siempre
     oscuro aquí, sea cual sea el estado de scroll del nav. */
  .nav .nav__list a{ display:block; padding: .8rem .9rem; border-radius: var(--radius-sm); color: var(--ink-soft); text-shadow:none; }
  .nav__list a:hover{ background: var(--blue-50); }
  .nav__list a::after{ display:none; }
}

/* Acceso discreto zona privada — pastilla con icono + etiqueta ---------- */
.private-access{
  position: fixed;
  top: 16px; left: 16px;
  z-index: 200;
  min-width: 38px; height: 38px;
  display:flex; align-items:center; justify-content:center;
  gap: .45rem;
  padding: 0 .5rem;
  border-radius: var(--radius-sm);
  background: rgba(16,31,58,.42);
  backdrop-filter: blur(4px);
  opacity: .75;
  transition: opacity .3s var(--ease), background .3s var(--ease);
}
.private-access:hover, .private-access:focus-visible{
  opacity: 1;
  background: var(--gradient-primary);
}
.private-access svg{ width:15px; height:15px; stroke: #fff; flex-shrink:0; }
.private-access span{
  color:#fff;
  font-size: .7rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
@media (max-width: 640px){
  .private-access span{ display:none; }
  .private-access{ padding:0; width:38px; }
}

/* ---------- 4. Hero / Portada ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--white);
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  /* Imagen de ejemplo en alta resolución; se puede sustituir por otra URL
     (o cambiarla directamente desde el panel de administración). */
  background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?q=85&w=2400&auto=format&fit=crop');
  background-size: cover;
  background-position: center 30%;
  transform: scale(1.08);
  animation: hero-zoom 16s ease-out forwards;
}
@keyframes hero-zoom{ to{ transform: scale(1); } }
.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(16,31,58,.30) 0%, rgba(16,31,58,.20) 45%, rgba(10,18,33,.80) 100%);
}
.hero__content{
  position: relative;
  width:100%;
  max-width: 760px;
  margin-inline: auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: calc(var(--space-xl) + 2rem) var(--space-m) var(--space-xl);
  text-align:center;
}
.hero__eyebrow{
  font-size: .78rem;
  letter-spacing: .35em;
  color: var(--blue-100);
  opacity: 0;
  animation: fade-up .9s var(--ease) .2s forwards;
}
.hero__title, .hero__eyebrow{ text-transform: uppercase; }
.hero__title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 9vw, 6.4rem);
  color: var(--white);
  margin: .2em 0;
  opacity: 0;
  animation: fade-up 1s var(--ease) .45s forwards;
}
.hero__title em{ font-style: italic; color: var(--blue-200); font-weight: 400; }
.hero__sub{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--blue-100);
  opacity: 0;
  animation: fade-up 1s var(--ease) .65s forwards;
}
.hero__date{
  margin-top: var(--space-s);
  font-size: .9rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  animation: fade-up 1s var(--ease) .8s forwards;
}
.hero__scroll{
  margin-top: var(--space-m);
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap: .5rem;
  color: var(--white);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  background:none; border:none;
  opacity: 0;
  animation: fade-up 1s var(--ease) 1s forwards;
}
.hero__scroll span{
  width:1px; height: 34px;
  background: var(--white);
  position:relative;
  overflow:hidden;
}
.hero__scroll span::after{
  content:"";
  position:absolute; top:-100%; left:0; right:0; height:100%;
  background: var(--blue-300);
  animation: scroll-line 1.8s ease-in-out infinite;
}
@keyframes scroll-line{ 50%{ top:100%; } 100%{ top:100%; } }
@keyframes fade-up{ from{ opacity:0; transform: translateY(16px);} to{ opacity:1; transform:none; } }

/* ---------- 5. Cuenta atrás — integrada en blanco y azul ---------- */
.countdown{
  padding: var(--space-l) 0;
  text-align:center;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--white) 100%);
  border-block: var(--border);
}
.countdown .eyebrow{ color: var(--blue-600); }
.countdown__grid{
  display:flex;
  justify-content:center;
  gap: clamp(.7rem, 3vw, 1.3rem);
  margin-top: var(--space-m);
  flex-wrap: wrap;
}
.countdown__item{
  min-width: 96px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.2rem .8rem 1rem;
  position: relative;
  overflow: hidden;
}
.countdown__item::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background: var(--gradient-primary);
}
.countdown__num{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: var(--blue-700);
  font-variant-numeric: tabular-nums;
  line-height:1;
}
.countdown__label{
  display:block;
  margin-top: .5rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- 6. Secciones generales ---------- */
.section{ padding: var(--space-xl) 0; }
.section--soft{ background: var(--bg-soft); }
.section__head{ max-width: 640px; margin-bottom: var(--space-l); }
.section__head.center{ margin-inline:auto; text-align:center; }

/* Nuestra historia — composición editorial ------------------------------ */
.story__layout{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-l);
  align-items:center;
}
.story__text{ order:1; }
.story__gallery{
  order:2;
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);
}
.story__gallery img{
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  object-fit:cover;
  height:100%;
}
.story__gallery .g1{ grid-column: 1; grid-row: 1 / 3; aspect-ratio: 3/4; }
.story__gallery .g2{ grid-column: 2; grid-row: 1; aspect-ratio: 4/3; margin-top: 2.5rem; }
.story__gallery .g3{ grid-column: 2; grid-row: 2; aspect-ratio: 1/1; }

@media (max-width: 880px){
  .story__layout{ grid-template-columns: 1fr; }
  .story__gallery{ order:1; }
  .story__text{ order:2; }
}

/* El día — horario, en formato tarjeta ------------------------------------*/
.timeline{
  display:flex;
  flex-direction:column;
  gap: var(--space-s);
}
.timeline__item{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-m);
  padding: var(--space-m);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  align-items:baseline;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.timeline__item:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.timeline__time{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--blue-600);
}
.timeline__body h3{ font-size: 1.4rem; margin-bottom:.3rem; }
@media (max-width: 560px){
  .timeline__item{ grid-template-columns: 1fr; gap:.3rem; }
}

/* Ubicación ---------------------------------------------------------------*/
.location__wrap{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-l);
  align-items:stretch;
}
.location__card{
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-m);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.location__card address{ font-style: normal; margin-bottom: var(--space-m); }
.map-embed{
  width:100%;
  aspect-ratio: 4/3;
  border:0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (max-width: 880px){
  .location__wrap{ grid-template-columns: 1fr; }
}

/* Botones -------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding: .85rem 1.9rem;
  border: 1px solid var(--blue-700);
  border-radius: var(--radius-sm);
  color: var(--blue-700);
  background: transparent;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .15s var(--ease);
}
.btn:hover, .btn:focus-visible{ background: var(--blue-700); color: var(--white); }
.btn:active{ transform: scale(.98); }

/* Botón principal: degradado azul con relieve suave */
.btn--gold{
  border: none;
  color: var(--white);
  background: var(--gradient-primary);
  box-shadow: 0 10px 24px -8px rgba(31,68,120,.55);
}
.btn--gold:hover, .btn--gold:focus-visible{
  background: var(--gradient-primary-hover);
  box-shadow: 0 14px 30px -8px rgba(23,50,90,.6);
  color: var(--white);
}

.btn--light{ border-color: rgba(255,255,255,.7); color: var(--white); }
.btn--light:hover{ background: var(--white); color: var(--blue-800); }
.btn--block{ width:100%; justify-content:center; }
.btn--sm{ padding: .55rem 1.1rem; font-size: .68rem; }
.btn--danger{ border-color: var(--danger); color: var(--danger); background:transparent; }
.btn--danger:hover{ background: var(--danger); color: var(--white); }

/* Formulario RSVP -------------------------------------------------------*/
.form{
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-l);
  max-width: 720px;
  margin-inline:auto;
}
.form__row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
.field{ margin-bottom: var(--space-m); }
.field label{
  display:block;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--blue-700);
  margin-bottom: .5rem;
}
.field input, .field select, .field textarea{
  width:100%;
  padding: .75rem .9rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100);
  outline: none;
}
.field--radios{ display:flex; gap: var(--space-m); }
.radio{ display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--ink-soft); }
.field-error{ color: var(--danger); font-size: .78rem; margin-top:.35rem; display:none; }
.field.has-error input, .field.has-error select{ border-color: var(--danger); }
.field.has-error .field-error{ display:block; }
.form__success{
  display:none;
  text-align:center;
  padding: var(--space-m);
  border: 1px dashed var(--blue-400);
  border-radius: var(--radius-md);
  color: var(--blue-700);
}
.form__success.is-visible{ display:block; }
@media (max-width: 640px){ .form__row{ grid-template-columns: 1fr; } .form{ padding: var(--space-m); } }

/* Detalles y regalos ------------------------------------------------------*/
.details__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
}
.detail-card{
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-m);
  text-align:center;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.detail-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
.detail-card__icon{ color: var(--blue-600); margin-bottom: var(--space-s); }
.detail-card h3{ font-size: 1.25rem; }
@media (max-width: 880px){ .details__grid{ grid-template-columns: 1fr; } }

/* FAQ (acordeón) --------------------------------------------------------*/
.faq{ max-width: 760px; margin-inline:auto; }
.faq-item{ border-bottom: var(--border); }
.faq-item__q{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  background:none; border:none;
  text-align:left;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
}
.faq-item__q .plus{
  flex-shrink:0;
  width: 22px; height:22px;
  position:relative;
  color: var(--blue-600);
}
.faq-item__q .plus::before, .faq-item__q .plus::after{
  content:"";
  position:absolute; background: currentColor;
}
.faq-item__q .plus::before{ top:50%; left:0; right:0; height:1px; }
.faq-item__q .plus::after{ left:50%; top:0; bottom:0; width:1px; transition: transform .3s var(--ease); }
.faq-item.is-open .plus::after{ transform: scaleY(0); }
.faq-item__a{
  max-height:0; overflow:hidden;
  transition: max-height .35s var(--ease);
}
.faq-item__a p{ padding-bottom: var(--space-s); }

/* Footer -----------------------------------------------------------------*/
.footer{
  background: var(--gradient-deep);
  color: var(--blue-100);
  text-align:center;
  padding: var(--space-l) 0 var(--space-m);
}
.footer .monogram{ color: var(--blue-100); justify-content:center; margin-bottom: var(--space-s); }
.footer .monogram em{ color: var(--white); }
.footer p{ color: var(--blue-100); margin: 0 auto var(--space-xs); opacity:.85; }
.footer__private{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top: var(--space-m);
  padding: .5rem 1rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-100);
  opacity: .8;
}
.footer__private:hover{ opacity:1; background: rgba(255,255,255,.08); }

/* Reveal-on-scroll ---------------------------------------------------------*/
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   ZONA PRIVADA — novios.html y admin.html
   ========================================================================== */

.login-screen{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at 15% 0%, var(--blue-50) 0%, transparent 40%),
              radial-gradient(circle at 85% 100%, var(--blue-100) 0%, transparent 35%),
              var(--bg);
  position: relative;
  padding: var(--space-m);
}
.login-card{
  position:relative;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-l) var(--space-m);
  width:100%;
  max-width: 380px;
  text-align:center;
}
.login-card .monogram{ justify-content:center; margin-bottom: var(--space-s); }
.login-card h1{ font-size: 1.5rem; font-style: italic; margin-bottom: var(--space-s); }
.login-note{
  font-size: .74rem;
  color: var(--ink-soft);
  border-top: 1px dashed var(--line);
  margin-top: var(--space-m);
  padding-top: var(--space-s);
}
.login-error{
  display:none;
  color: var(--danger);
  background: var(--danger-bg);
  padding: .6rem .8rem;
  font-size: .82rem;
  margin-bottom: var(--space-s);
  border-radius: var(--radius-sm);
}
.login-error.is-visible{ display:block; }

/* Panel general ------------------------------------------------------------*/
.dashboard{ display:none; background: var(--bg-soft); min-height:100svh; }
.dashboard.is-visible{ display:block; }

.dash-header{
  background: var(--gradient-deep);
  color: var(--blue-100);
  padding: var(--space-m) 0;
}
.dash-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: var(--space-s);
}
.dash-header h1{ color: var(--white); font-size: 1.6rem; margin:0; font-style: italic; }
.dash-header__date{ color: var(--blue-100); font-size: .82rem; letter-spacing:.08em; text-transform:uppercase; }
.dash-header__user{ margin: .35rem 0 0; color: var(--blue-200); font-size: .78rem; }

.dash-nav{
  background: var(--white);
  border-bottom: var(--border);
  position: sticky; top:0; z-index:50;
  overflow-x:auto;
}
.dash-nav__inner{ display:flex; gap: var(--space-m); }
.dash-nav a{
  padding: .9rem 0;
  font-size: .78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--ink-soft);
  white-space:nowrap;
  border-bottom: 2px solid transparent;
}
.dash-nav a:hover{ color: var(--blue-700); border-color: var(--blue-300); }

.dash-section{ padding: var(--space-l) 0; border-bottom: var(--border); }
.dash-section__title{ font-size: 1.6rem; margin-bottom: var(--space-m); display:flex; align-items:center; justify-content:space-between; gap: var(--space-s); flex-wrap:wrap; }

/* Tarjetas resumen -----------------------------------------------------*/
.stat-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-m);
}
.stat-card{
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--blue-500);
  padding: var(--space-m);
}
.stat-card__label{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); }
.stat-card__value{ font-family: var(--font-display); font-size: 2rem; color: var(--blue-700); margin-top:.3rem; }
.stat-card--warn{ border-left-color: var(--warn); }
.stat-card--danger{ border-left-color: var(--danger); }
.stat-card--ok{ border-left-color: var(--ok); }

/* Gráfico presupuesto vs gasto (barras CSS) ----------------------------*/
.chart-card{ background: var(--surface); border: var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-m); }
.bar-chart{ display:flex; flex-direction:column; gap: var(--space-s); margin-top: var(--space-m); }
.bar-row{ display:grid; grid-template-columns: 130px 1fr 90px; align-items:center; gap: var(--space-s); }
.bar-row__label{ font-size: .82rem; color: var(--ink-soft); }
.bar-track{ background: var(--bg-soft); height: 14px; border-radius: 999px; overflow:hidden; position:relative; }
.bar-fill{ height:100%; background: var(--gradient-primary); border-radius: 999px; transition: width .8s var(--ease); }
.bar-fill.is-over{ background: var(--danger); }
.bar-row__value{ font-size: .78rem; color: var(--ink-soft); text-align:right; font-variant-numeric: tabular-nums; }
.chart-legend{ display:flex; gap: var(--space-m); margin-top: var(--space-s); font-size: .74rem; color: var(--ink-soft); }
.chart-legend span{ display:inline-flex; align-items:center; gap:.4rem; }
.chart-legend i{ width:10px; height:10px; border-radius:2px; display:inline-block; }

/* Anillo de progreso global --------------------------------------------*/
.ring-wrap{ display:flex; align-items:center; gap: var(--space-m); flex-wrap:wrap; }
.ring{ width: 140px; height:140px; flex-shrink:0; }
.ring__track{ fill:none; stroke: var(--bg-soft); stroke-width: 10; }
.ring__fill{ fill:none; stroke: var(--blue-600); stroke-width: 10; stroke-linecap: round; transform-origin:center; transform: rotate(-90deg); transition: stroke-dashoffset 1s var(--ease); }
.ring__center{ font-family: var(--font-display); font-size: 1.4rem; fill: var(--blue-700); }

/* Tablas -----------------------------------------------------------------*/
.table-wrap{ overflow-x:auto; background: var(--surface); border: var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
table{ width:100%; border-collapse: collapse; min-width: 640px; }
thead th{
  text-align:left;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--ink-soft);
  padding: .9rem 1rem;
  border-bottom: var(--border);
  background: var(--bg-soft);
}
tbody td{ padding: .8rem 1rem; border-bottom: 1px solid var(--line); font-size:.9rem; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background: var(--blue-50); }
.table-actions{ display:flex; gap:.5rem; }
.rsvp-mesa{
  width: 110px;
  padding: .4rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: .85rem;
}
.rsvp-mesa:focus{ border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); outline:none; }
.pw-cell{ display:inline-flex; align-items:center; gap:.6rem; }
.pw-value{ font-variant-numeric: tabular-nums; letter-spacing:.05em; color: var(--ink-soft); }
.icon-btn{
  background:none; border: 1px solid var(--line);
  width: 30px; height:30px; border-radius: var(--radius-sm);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--ink-soft);
  transition: all .2s var(--ease);
}
.icon-btn:hover{ border-color: var(--blue-600); color: var(--blue-600); }
.icon-btn.danger:hover{ border-color: var(--danger); color: var(--danger); }

.badge{
  display:inline-block;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing:.04em;
  text-transform: uppercase;
}
.badge--pagado{ background: var(--ok-bg); color: var(--ok); }
.badge--pendiente{ background: var(--warn-bg); color: var(--warn); }
.badge--vencido{ background: var(--danger-bg); color: var(--danger); }

.section-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-m); gap: var(--space-s); flex-wrap:wrap; }

/* Objetivos ----------------------------------------------------------------*/
.goal-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--space-m); }
.goal-card{ background: var(--surface); border: var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-m); }
.goal-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.goal-card__title{ font-size: 1rem; color: var(--ink); margin-bottom: .3rem; font-family: var(--font-body); font-weight:600; }
.goal-card__pct{ font-size: .78rem; color: var(--ink-soft); margin-bottom: .5rem; }
.goal-track{ background: var(--bg-soft); height:8px; border-radius:999px; overflow:hidden; }
.goal-fill{ height:100%; background: var(--gradient-primary); border-radius:999px; transition: width .8s var(--ease); }
.goal-fill.is-complete{ background: var(--ok); }

/* Alertas ------------------------------------------------------------------*/
.alerts{ display:flex; flex-direction:column; gap: var(--space-xs); margin-bottom: var(--space-m); }
.alert{
  display:flex; align-items:center; gap:.7rem;
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
}
.alert--warn{ background: var(--warn-bg); color: var(--warn); }
.alert--danger{ background: var(--danger-bg); color: var(--danger); }

/* Modales --------------------------------------------------------------*/
.modal-overlay{
  position: fixed; inset:0;
  background: rgba(16,31,58,.5);
  display:none;
  align-items:center; justify-content:center;
  z-index: 300;
  padding: var(--space-s);
}
.modal-overlay.is-open{ display:flex; }
.modal{
  background: var(--surface);
  border-radius: var(--radius-lg);
  width:100%; max-width: 480px;
  max-height: 90vh; overflow-y:auto;
  padding: var(--space-m);
  box-shadow: var(--shadow-lg);
}
.modal--wide{ max-width: 660px; }
.modal__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-m); }
.modal__head h2{ font-size: 1.4rem; margin:0; }
.modal__close{ background:none; border:none; font-size:1.4rem; line-height:1; color: var(--ink-soft); }
.modal__actions{ display:flex; justify-content:flex-end; gap: var(--space-s); margin-top: var(--space-m); }

.budget-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
@media (max-width:560px){ .budget-grid{ grid-template-columns: 1fr; } }

/* Confirmación de restablecer ---------------------------------------------*/
.confirm-note{ font-size: .85rem; color: var(--ink-soft); }

/* Toast --------------------------------------------------------------------*/
.toast{
  position: fixed; bottom: 20px; left:50%; transform: translateX(-50%) translateY(20px);
  background: var(--gradient-deep); color: var(--white);
  padding: .8rem 1.4rem;
  border-radius: 999px;
  font-size: .85rem;
  box-shadow: var(--shadow-md);
  opacity:0; pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  z-index: 400;
}
.toast.is-visible{ opacity:1; transform: translateX(-50%) translateY(0); pointer-events:auto; }

.empty-state{ padding: var(--space-m); text-align:center; color: var(--ink-soft); font-size: .9rem; }

.dash-footer{ text-align:center; padding: var(--space-m); color: var(--ink-soft); font-size: .78rem; }

/* Utilidades ----------------------------------------------------------------*/
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip: rect(0 0 0 0); white-space:nowrap;
}