/* ============================================================
   UAWA · Tema Turquesa (igual al AppScript)
   - Fondo turquesa + textura arches
   - Texto negro, cards blancas
   - Acento azul (botones primarios)
   - Sin “vino tinto” en ningún componente
   ============================================================ */

/* ---------- Tokens globales ---------- */
:root{
  --bg:                #80c0c2;                         /* fondo base */
  --texture:           url("/assets/img/arches.png");   /* ⬅️ ajusta ruta si hace falta */
  --text:              #000;                            /* texto principal negro */
  --muted:             #334155;

  --card:              rgba(255,255,255,.82);
  --surface:           rgba(255,255,255,.82);           /* usado por .site-card (app.js) */
  --table:             #f7f7f7;
  --shadow:            0 8px 24px rgba(0,0,0,.08);
  --radius:            12px;

  /* Acentos (como en App Script) */
  --accent:            #2196F3;  /* azul primario (Validar, primarios) */
  --accent-contrast:   #fff;
  --success:           #4CAF50;  /* verde éxito */
  --whatsapp:          #25D366;  /* botón WhatsApp */
  --warning:           #F59E0B;
  --danger:            #EF4444;
}

/* ---------- Base + textura global ---------- */
*{ box-sizing:border-box; }
html,body{
  margin:0; height:100%;
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.4;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color: transparent;

  background-color: var(--bg);
  background-image: var(--texture);
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: auto;
}

/* Contenedor principal (reutilizable) */
.wrap{
  max-width:1100px; margin:0 auto; min-height:100dvh;
  padding:clamp(12px,2.5vw,28px);
  display:flex; flex-direction:column; gap:clamp(10px,2vw,16px);
  align-items:stretch;
}

/* Títulos */
h1,h2,h3,h4{ color:var(--text); margin:6px 0 6px; }
h2{ text-align:center; font-weight:800; letter-spacing:.2px; font-size:clamp(1.5rem,3.2vw,2.3rem); }
.subtitle{ text-align:center; opacity:.85; margin:0 0 6px; }

/* ---------- Tarjetas / paneles ---------- */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(14px,2vw,20px);
}
.row{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; }
label{ font-weight:700; }

/* Inputs */
input[type="text"], input[type="password"], input[type="number"], select{
  padding:10px 12px; border:1px solid #ddd; border-radius:10px; background:#fff;
  font-size:16px; min-width:220px; outline:none;
}

/* Botones */
button{
  padding:10px 16px; border:0; border-radius:10px;
  background:#fff; color:#1b5e20; box-shadow:var(--shadow);
  font-size:16px; cursor:pointer; transition:transform .06s ease;
  touch-action: manipulation;
}
button:active{ transform:scale(.98); }
.btn-primary{ background:var(--accent); color:var(--accent-contrast); }
.btn-success{ background:var(--success); color:#fff; }
.btn-wa{ background:var(--whatsapp); color:#fff; }
.btn-outline{ background:#fff; color:var(--accent); border:1px solid var(--accent); }

/* ---------- Banners (sin alert()) ---------- */
.banner{
  display:none; width:100%; max-width:1100px; text-align:center;
  padding:10px 14px; border-radius:12px; box-shadow:var(--shadow);
}
#mensaje{ border:1px solid #388E3C; background:#ffffffc4; color:#1b5e20; }
#fatal{ border:1px solid #d32f2f; background:#ffebee; color:#b71c1c; }

/* ---------- Bloques con textura opcional ---------- */
.texture-bg{
  background-color: var(--bg);
  background-image: var(--texture);
  background-repeat: repeat;
  background-size: auto;
}
.texture-bg, .texture-bg h1, .texture-bg h2, .texture-bg h3,
.texture-bg p, .texture-bg a, .texture-bg span, .texture-bg label{
  color: var(--text) !important;
}

/* ---------- Fila de validación (igual App Script) ---------- */
.input-row{
  width:100%; max-width:900px;
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:center;
  padding:8px 12px; background:rgba(255,255,255,.55);
  backdrop-filter: blur(1.5px);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
@media (max-width:600px){
  .input-row{ padding:10px; }
  input[type="text"]{ width:100%; min-width:0; }
}

/* ---------- GRID de boletos (index) ---------- */
#boletos{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); /* pc/tablet */
  gap: 8px;
}
.boleto{
  display:flex; align-items:center; justify-content:center;
  background:#ffff99; border:1px solid #ccc; border-radius:8px;
  user-select:none; cursor:pointer; font-weight:800; letter-spacing:.3px;
  font-size: clamp(14px, 2.6vw, 18px);
  line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  aspect-ratio: 1 / 1; transition:transform .06s ease, box-shadow .06s ease;
}
.boleto:active{ transform:scale(.98); }
.boleto.ocupado{ background:#90ee90!important; cursor:not-allowed; }
.boleto.seleccionado{ background:#0000ff!important; color:#fff; }

@media (max-width: 600px){
  #boletos{ grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap:6px; }
  .boleto{ font-size: clamp(16px, 4.6vw, 20px); letter-spacing:.4px; }
}
@media (max-width: 360px){
  #boletos{ grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .boleto{ font-size: clamp(17px, 5.2vw, 22px); }
}

/* ---------- Comprobante (index) ---------- */
#comprobante{
  display:none; width:100%;
  background:#f4f4f4; color:#000;
  border:1px dashed #999; border-radius:var(--radius);
  padding:clamp(14px,2.4vw,24px); box-shadow:var(--shadow);
}
.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
#imprimirBtn{ background:var(--accent); color:#fff; }
#descargarImg{ background:var(--success); color:#fff; }
#enviarWhatsapp{ background:var(--whatsapp); color:#fff; }

/* ---------- Tablas (admin) ---------- */
table{ width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }
th,td{ padding:8px 10px; border-bottom:1px solid #eee; text-align:left; font-size:14px; }
thead{ background:var(--table); }

/* ---------- Footer neutral (SIN vino) ---------- */
.footer-gradient,
.footer-gradient *{ color: var(--text) !important; }
.footer-gradient{
  background: rgba(255,255,255,.35); /* sutil, sin rojo */
  backdrop-filter: blur(6px);
  box-sizing:border-box; width:100%; overflow-x:hidden;
  padding:.6rem 0;
}
.footer-gradient .footer-container{
  display:flex; flex-wrap:wrap; gap:.8rem;
  justify-content:space-between; padding:0 1rem; box-sizing:border-box;
}
.footer-gradient .col-text{ flex:1 1 220px; max-width:45%; padding-right:1rem; text-align:left; }
.footer-gradient .col-copy{ flex:0 1 auto; max-width:24%; text-align:center; }
.footer-gradient .col-cta{ flex:1 1 220px; max-width:45%; display:flex; flex-direction:column; align-items:flex-end; }

@media (max-width: 767px){
  .footer-gradient .footer-container{
    flex-direction:column; gap:.6rem; align-items:stretch;
  }
  .footer-gradient .col-text,
  .footer-gradient .col-copy,
  .footer-gradient .col-cta{
    max-width:100% !important; flex:1 1 100% !important; text-align:center !important;
    padding:0 !important;
  }
}

/* ---------- Utilidades ---------- */
.btn { padding:.65rem 1.1rem; border-radius:.6rem; border:none; cursor:pointer; }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--success{ background:var(--success); color:#fff; }
.btn--wa{ background:var(--whatsapp); color:#fff; }

/* Utilidades globales usadas por app.js */
.site-card{ background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.text-accent{ color: var(--accent) !important; }
.badge-amber{ display:inline-block; background:#fff3cd; color:#92400e; font-size:.75rem; padding:.25rem .5rem; border-radius:9999px; }

/* =======================
   Logo con borde negro
   ======================= */
.logo-badge{
  background:#fff;
  border:3px solid #000;
  border-radius:14px;
  padding:3px;
  box-shadow: var(--shadow);
}

/* ==========================================
   Social Dock (redes) con expansión en hover
   ========================================== */
.header-socials{
  display:flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.55);
  border-radius:9999px; padding:.35rem .45rem;
  backdrop-filter: blur(6px);
  transition: gap .25s ease, padding .25s ease;
}
.header-socials a{
  display:flex; align-items:center; gap:.35rem;
  height:44px; border-radius:9999px;
  background:#111; color:#fff;
  padding:0 .6rem; width:44px;            /* colapsado: solo icono */
  overflow:hidden;
  transition: width .28s ease, transform .15s ease, background .2s ease;
  box-shadow: var(--shadow);
}
.header-socials a .icon{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:9999px;
}
.header-socials a .label{
  white-space:nowrap; opacity:0; margin-left:0;
  transition: opacity .2s ease, margin .2s ease;
  font-weight:700; color:#000;
}

/* Al pasar el mouse por el contenedor, expandimos todo */
.header-socials:hover{ gap:.6rem; padding:.35rem .8rem; }
.header-socials:hover a{ width:165px; }       /* ancho para icono + texto */
.header-socials:hover a .label{ opacity:1; margin-left:.25rem; }

/* Colores de marca por botón */
.header-socials a.wa{ background:#dff6e7; }
.header-socials a.fb{ background:#e5efff; }
.header-socials a.ig{ background:#ffe7f3; }
.header-socials a.tt{ background:#e9e9e9; }
.header-socials a.yt{ background:#ffe5e5; }
.header-socials a.loc{ background:#e9eef4; }

.header-socials a:hover{ transform: translateY(-2px); }
.header-socials a .icon i{ font-size: 18px; }

/* Iconos circulares de cada red */
.header-socials .wa .icon{ background:#25D366; color:#fff; }
.header-socials .fb .icon{ background:#1877F2; color:#fff; }
.header-socials .ig .icon{ background:#E1306C; color:#fff; }
.header-socials .tt .icon{ background:#000;    color:#fff; }
.header-socials .yt .icon{ background:#FF0000; color:#fff; }
.header-socials .loc .icon{ background:#263238; color:#fff; }

/* Accesibilidad: reducir animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .header-socials, .header-socials a, .header-socials a .label{ transition:none !important; }
}

/* En móvil dejamos sólo iconos (sin expansión) */
@media (max-width: 767px){
  .header-socials:hover a{ width:44px; }
  .header-socials a .label{ display:none; }
}

/* ====== Carrusel encabezado ====== */
.carousel-viewport{ overflow:hidden; }
.carousel-track{
  display:flex;
  gap: 1.5rem;
  width: max-content;           /* permite desplazamiento infinito */
  will-change: transform;
}
.carousel-item{
  color: var(--text);
  transition: color .15s ease, background .15s ease;
  padding: .25rem .45rem;
  border-radius: .4rem;
  white-space: nowrap;
  font-weight: 700;
}
.carousel-item:hover{
  color: var(--accent);
  background: rgba(255,255,255,.5);
}

/* ====== Footer visible + botones que resaltan ====== */
.footer-gradient{
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,.08);
  padding: .9rem 0;
}
.cta-btn-footer{
  display:inline-block;
  background: linear-gradient(180deg,#ffe16b,#facc15);
  color:#000 !important;
  border: 2px solid #facc15;
  border-radius: .6rem;
  padding: .6rem 1rem;
  font-weight: 800;
  text-align: center;
  box-shadow:
    0 10px 18px rgba(0,0,0,.18),
    0 0 10px rgba(250,204,21,.55);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  white-space: normal;
}
.cta-btn-footer:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 14px 24px rgba(0,0,0,.22),
    0 0 14px rgba(250,204,21,.75);
}
.visits-btn-footer{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(0,0,0,.08);
  border-radius:.6rem;
  padding:.45rem .9rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  box-shadow: var(--shadow);
  font-weight:700;
}

/* responsive footer */
@media (max-width: 767px){
  .cta-btn-footer{ width:100%; }
}

/* ====== Logo con borde negro ====== */
.logo-badge{
  background:#fff;
  border:3px solid #000;
  border-radius:14px;
  padding:3px;
  box-shadow: var(--shadow);
}

.animate-scrollLoop{ animation: scrollLoop 40s linear infinite; }
@keyframes scrollLoop{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}