/* ==========================================================================
   css/styles.css — PROMO 91 · 35 AÑOS DE AMISTAD
   Paleta, tipografía, tokens y componentes base
   ========================================================================== */

/* ── Google Fonts ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap');

/* ── Tokens de diseño ────────────────────────────────────────────────────── */
:root {
  /* Colores — NUNCA usar dorado (#D6B35A) sobre blanco: no pasa AA */
  --color-verde:       #123B2D;
  --color-verde-mid:   #285744;
  --color-dorado:      #D6B35A;
  --color-blanco:      #FFFFFF;
  --color-gris:        #F4F5F2;
  --color-gris-borde:  #DDE0DA;
  --color-texto:       #1A2B22;
  --color-texto-suave: #4A6358;
  --color-error:       #C0392B;
  --color-exito:       #1D6B45;

  /* Tipografía */
  --fuente-titulo: 'Playfair Display', Georgia, serif;
  --fuente-cuerpo: 'Inter', system-ui, sans-serif;

  /* Espaciado */
  --espacio-xs:  0.25rem;
  --espacio-sm:  0.5rem;
  --espacio-md:  1rem;
  --espacio-lg:  1.5rem;
  --espacio-xl:  2rem;
  --espacio-2xl: 3rem;
  --espacio-3xl: 4rem;

  /* Bordes */
  --radio-sm:  0.375rem;
  --radio-md:  0.75rem;
  --radio-lg:  1.25rem;
  --radio-xl:  2rem;

  /* Sombras */
  --sombra-sm:  0 1px 3px rgba(18, 59, 45, 0.08);
  --sombra-md:  0 4px 12px rgba(18, 59, 45, 0.12);
  --sombra-lg:  0 8px 24px rgba(18, 59, 45, 0.16);

  /* Transiciones */
  --transicion: 200ms ease;

  /* Layout */
  --ancho-max:       1200px;
  --ancho-contenido: 720px;
}

/* ── Reset mínimo ────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-texto);
  background-color: var(--color-gris);
  min-height: 100dvh;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-verde-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transicion);
}

a:hover { color: var(--color-verde); }

ul, ol { list-style: none; }

/* ── Tipografía ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  line-height: 1.2;
  color: var(--color-verde);
}

h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); }
h2 { font-size: clamp(1.35rem, 3.5vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); }

p + p { margin-top: var(--espacio-sm); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--espacio-lg);
}

.contenedor--angosto {
  max-width: var(--ancho-contenido);
}

/* ── Cabecera de sitio ───────────────────────────────────────────────────── */
.cabecera {
  background-color: var(--color-verde);
  padding-block: var(--espacio-md);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--sombra-md);
}

.cabecera__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-md);
}

.cabecera__logo {
  font-family: var(--fuente-titulo);
  font-size: 1.1rem;
  color: var(--color-dorado);
  text-decoration: none;
  line-height: 1.2;
}

.cabecera__logo span {
  display: block;
  font-family: var(--fuente-cuerpo);
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Navegación */
.nav__lista {
  display: flex;
  gap: var(--espacio-sm);
  flex-wrap: wrap;
}

.nav__enlace {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: var(--espacio-xs) var(--espacio-sm);
  border-radius: var(--radio-sm);
  transition: background-color var(--transicion), color var(--transicion);
}

.nav__enlace:hover,
.nav__enlace[aria-current="page"] {
  background-color: rgba(255,255,255,0.12);
  color: var(--color-blanco);
}

/* ── Pie de página ───────────────────────────────────────────────────────── */
.pie {
  background-color: var(--color-verde);
  color: rgba(255,255,255,0.7);
  padding-block: var(--espacio-xl);
  margin-top: var(--espacio-3xl);
  font-size: 0.85rem;
}

.pie__inner {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
  align-items: center;
  text-align: center;
}

.pie a {
  color: var(--color-dorado);
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-xs);
  padding: 0.65rem 1.25rem;
  border: none;
  border-radius: var(--radio-sm);
  font-family: var(--fuente-cuerpo);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
  min-height: 2.75rem; /* toque cómodo en móvil */
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.6; cursor: not-allowed; }

.btn--primario {
  background-color: var(--color-verde);
  color: var(--color-blanco);
}
.btn--primario:hover:not(:disabled) {
  background-color: var(--color-verde-mid);
  box-shadow: var(--sombra-md);
}

.btn--secundario {
  background-color: transparent;
  color: var(--color-verde);
  border: 2px solid var(--color-verde);
}
.btn--secundario:hover:not(:disabled) {
  background-color: var(--color-verde);
  color: var(--color-blanco);
}

.btn--peligro {
  background-color: transparent;
  color: var(--color-error);
  border: 2px solid var(--color-error);
}
.btn--peligro:hover:not(:disabled) {
  background-color: var(--color-error);
  color: var(--color-blanco);
}

.btn--dorado {
  background-color: var(--color-dorado);
  color: var(--color-verde);
}
.btn--dorado:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: var(--sombra-md);
}

.btn--fantasma {
  background-color: transparent;
  color: var(--color-texto-suave);
  border: 1px solid var(--color-gris-borde);
}
.btn--fantasma:hover:not(:disabled) {
  background-color: var(--color-gris);
}

/* ── Formularios ─────────────────────────────────────────────────────────── */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-xs);
}

.campo label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-verde);
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 0.65rem 0.875rem;
  border: 2px solid var(--color-gris-borde);
  border-radius: var(--radio-sm);
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  color: var(--color-texto);
  background-color: var(--color-blanco);
  transition: border-color var(--transicion), box-shadow var(--transicion);
  min-height: 2.75rem;
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  outline: none;
  border-color: var(--color-verde-mid);
  box-shadow: 0 0 0 3px rgba(40, 87, 68, 0.15);
}

.campo__contador {
  text-align: right;
  font-size: 0.78rem;
  color: var(--color-texto-suave);
}

.campo__error {
  font-size: 0.8rem;
  color: var(--color-error);
}

/* Campo trampa — invisible para humanos, visible para bots */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Tarjeta genérica ────────────────────────────────────────────────────── */
.tarjeta {
  background-color: var(--color-blanco);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
  transition: box-shadow var(--transicion), transform var(--transicion);
}

.tarjeta:hover { box-shadow: var(--sombra-md); }
.tarjeta--resaltada { outline: 3px solid var(--color-dorado); }

/* ── Estados de UI ───────────────────────────────────────────────────────── */

/* Cargando — esqueleto */
.esqueleto {
  background: linear-gradient(90deg, var(--color-gris) 25%, #e8eae6 50%, var(--color-gris) 75%);
  background-size: 200% 100%;
  animation: pulso-esqueleto 1.5s infinite;
  border-radius: var(--radio-sm);
}

@keyframes pulso-esqueleto {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; background: var(--color-gris); }
}

/* Estado vacío */
.estado-vacio {
  text-align: center;
  padding: var(--espacio-3xl) var(--espacio-lg);
  color: var(--color-texto-suave);
}

.estado-vacio__icono {
  font-size: 2.5rem;
  margin-bottom: var(--espacio-md);
  opacity: 0.5;
}

/* Estado de error */
.estado-error {
  background-color: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radio-md);
  padding: var(--espacio-lg);
  text-align: center;
  color: var(--color-error);
}

/* Toast */
.toast-contenedor {
  position: fixed;
  bottom: var(--espacio-lg);
  right: var(--espacio-lg);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
  max-width: 360px;
}

.toast {
  padding: var(--espacio-sm) var(--espacio-md);
  border-radius: var(--radio-sm);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--sombra-lg);
  animation: entrar-toast 0.3s ease;
}

@keyframes entrar-toast {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

.toast--exito  { background-color: var(--color-exito);  color: #fff; }
.toast--error  { background-color: var(--color-error);  color: #fff; }
.toast--info   { background-color: var(--color-verde);  color: #fff; }

/* ── Sección héroe ───────────────────────────────────────────────────────── */
.heroe {
  background-color: var(--color-verde);
  color: var(--color-blanco);
  padding-block: var(--espacio-3xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.heroe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 30%, rgba(214,179,90,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.heroe__anio {
  font-family: var(--fuente-titulo);
  font-size: clamp(4rem, 15vw, 9rem);
  font-weight: 700;
  color: var(--color-dorado);
  line-height: 1;
  opacity: 0.15;
  position: absolute;
  bottom: -0.2em;
  right: 0.1em;
  user-select: none;
  pointer-events: none;
}

.heroe__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: var(--color-blanco);
  position: relative;
}

.heroe__titulo em {
  color: var(--color-dorado);
  font-style: normal;
}

.heroe__subtitulo {
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  color: rgba(255,255,255,0.8);
  margin-top: var(--espacio-sm);
  position: relative;
}

.heroe__acciones {
  margin-top: var(--espacio-xl);
  display: flex;
  gap: var(--espacio-md);
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ── Contadores de portada ───────────────────────────────────────────────── */
.contadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--espacio-md);
  padding-block: var(--espacio-2xl);
}

.contador {
  background-color: var(--color-blanco);
  border-radius: var(--radio-md);
  padding: var(--espacio-lg);
  text-align: center;
  box-shadow: var(--sombra-sm);
  border-top: 3px solid var(--color-dorado);
}

.contador__numero {
  font-family: var(--fuente-titulo);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-verde);
  line-height: 1;
}

.contador__etiqueta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--espacio-xs);
}

/* ── Grilla del mural ────────────────────────────────────────────────────── */
.grilla-mural {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--espacio-lg);
}

.tarjeta-felicitacion {
  padding: var(--espacio-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
  transition: box-shadow var(--transicion), transform var(--transicion);
}

.tarjeta-felicitacion:hover { transform: translateY(-2px); }

.tarjeta-felicitacion__nombre {
  font-weight: 700;
  color: var(--color-verde);
  font-size: 1rem;
}

.tarjeta-felicitacion__ciudad {
  font-size: 0.8rem;
  color: var(--color-texto-suave);
}

.tarjeta-felicitacion__mensaje {
  font-size: 0.95rem;
  color: var(--color-texto);
  flex: 1;
}

.tarjeta-felicitacion__fecha {
  font-size: 0.75rem;
  color: var(--color-texto-suave);
  margin-top: auto;
  padding-top: var(--espacio-sm);
  border-top: 1px solid var(--color-gris-borde);
}

/* ── Grilla del álbum ────────────────────────────────────────────────────── */
.grilla-album {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--espacio-md);
}

.tarjeta-foto {
  cursor: pointer;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radio-md);
  background-color: var(--color-gris);
}

.tarjeta-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.tarjeta-foto:hover img { transform: scale(1.05); }

.tarjeta-foto__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--espacio-sm) var(--espacio-md);
  background: linear-gradient(transparent, rgba(18,59,45,0.85));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--transicion);
}

.tarjeta-foto:hover .tarjeta-foto__overlay,
.tarjeta-foto:focus-within .tarjeta-foto__overlay {
  opacity: 1;
}

/* ── Visor de foto (modal) ────────────────────────────────────────────────── */
.visor {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-lg);
}

.visor[hidden] { display: none; }

.visor__img {
  max-height: 80vh;
  max-width: 90vw;
  object-fit: contain;
  border-radius: var(--radio-sm);
}

.visor__cerrar {
  position: absolute;
  top: var(--espacio-md);
  right: var(--espacio-md);
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transicion);
}

.visor__cerrar:hover { background: rgba(255,255,255,0.3); }

/* ── Paginación ──────────────────────────────────────────────────────────── */
.paginacion {
  display: flex;
  gap: var(--espacio-xs);
  justify-content: center;
  align-items: center;
  margin-top: var(--espacio-2xl);
  flex-wrap: wrap;
}

/* ── WhatsApp CTA ────────────────────────────────────────────────────────── */
.btn--whatsapp {
  background-color: #25D366;
  color: #fff;
  gap: 0.5rem;
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}

.btn--whatsapp:hover:not(:disabled) {
  background-color: #1ebe5b;
  box-shadow: var(--sombra-md);
}

/* ── Badge de estado (moderación) ────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge--pendiente { background-color: #FEF3C7; color: #92400E; }
.badge--aprobada  { background-color: #D1FAE5; color: #065F46; }
.badge--rechazada { background-color: #FEE2E2; color: #991B1B; }
.badge--oculta    { background-color: #E5E7EB; color: #374151; }

/* ── Utilidades ──────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.texto-centro { text-align: center; }
.texto-suave  { color: var(--color-texto-suave); }
.fila         { display: flex; gap: var(--espacio-sm); align-items: center; }
.separador    { border: none; border-top: 1px solid var(--color-gris-borde); margin-block: var(--espacio-lg); }

/* Espaciado y Layout sin estilos inline (CSP compatible) */
.seccion-espaciada     { padding-block: var(--espacio-2xl); }
.seccion-espaciada--lg { padding-block: var(--espacio-3xl); }
.mt-xs { margin-top: var(--espacio-xs); }
.mt-sm { margin-top: var(--espacio-sm); }
.mt-md { margin-top: var(--espacio-md); }
.mt-lg { margin-top: var(--espacio-lg); }
.mt-xl { margin-top: var(--espacio-xl); }
.mb-sm { margin-bottom: var(--espacio-sm); }
.mb-md { margin-bottom: var(--espacio-md); }
.mb-lg { margin-bottom: var(--espacio-lg); }
.gap-xs { gap: var(--espacio-xs); }
.gap-sm { gap: var(--espacio-sm); }
.gap-md { gap: var(--espacio-md); }
.gap-lg { gap: var(--espacio-lg); }
.flex-entre { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--espacio-md); }
.barra-herramientas { display: flex; flex-wrap: wrap; gap: var(--espacio-md); align-items: flex-end; margin-top: var(--espacio-lg); }
.campo-flex { flex: 1; min-width: 200px; }
.campo--fecha { flex: 1 1 140px; min-width: 0; }
.formulario-vertical { display: flex; flex-direction: column; gap: var(--espacio-lg); margin-top: var(--espacio-lg); }
.etiqueta-horizontal { display: flex; flex-direction: row; align-items: flex-start; gap: var(--espacio-sm); cursor: pointer; }
.checkbox-ajustado { margin-top: 0.25rem; min-height: unset; width: auto; flex-shrink: 0; }
.texto-pequeno { font-size: 0.85rem; }
.lista-vinetas { padding-left: var(--espacio-lg); list-style: disc; display: flex; flex-direction: column; gap: var(--espacio-xs); }

/* Esqueletos específicos */
.esqueleto-contador { height: 120px; }
.esqueleto-tarjeta  { height: 180px; }
.esqueleto-foto     { aspect-ratio: 4/3; width: 100%; border-radius: var(--radio-md); }

/* Álbum y visor */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--espacio-lg);
  margin-top: var(--espacio-xl);
}
.visor__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: none;
  font-size: 1.75rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transicion);
}
.visor__nav:hover { background: rgba(255,255,255,0.4); }
.visor__anterior  { left: var(--espacio-md); }
.visor__siguiente { right: var(--espacio-md); }
.visor__pie {
  position: absolute;
  bottom: var(--espacio-md);
  color: #fff;
  text-align: center;
  max-width: 80%;
  font-size: 0.95rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* ── Panel Administrativo ─────────────────────────────────────────────────── */
.pestanas {
  display: flex;
  gap: var(--espacio-xs);
  border-bottom: 2px solid var(--color-gris-borde);
  overflow-x: auto;
  margin-block: var(--espacio-lg);
  padding-bottom: 1px;
}
.pestana {
  padding: var(--espacio-sm) var(--espacio-md);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-weight: 600;
  color: var(--color-texto-suave);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transicion), border-color var(--transicion);
}
.pestana:hover { color: var(--color-verde); }
.pestana[aria-selected="true"] {
  color: var(--color-verde);
  border-bottom-color: var(--color-dorado);
}
.tabla-responsive {
  overflow-x: auto;
  width: 100%;
  border-radius: var(--radio-md);
  border: 1px solid var(--color-gris-borde);
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}
.tabla th, .tabla td {
  padding: var(--espacio-sm) var(--espacio-md);
  border-bottom: 1px solid var(--color-gris-borde);
  vertical-align: middle;
}
.tabla th {
  background-color: var(--color-gris);
  font-weight: 600;
  color: var(--color-verde);
}
.tabla tr:hover {
  background-color: rgba(18, 59, 45, 0.02);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .contenedor { padding-inline: var(--espacio-md); }

  .cabecera__inner { flex-direction: column; gap: var(--espacio-sm); }

  .nav__lista { justify-content: center; }

  .heroe { padding-block: var(--espacio-2xl); }

  .toast-contenedor {
    left: var(--espacio-md);
    right: var(--espacio-md);
    max-width: none;
  }
}