/* ============================================================
   tienda-estado.css
   Punto Neto v1.0
   Ruta: public/assets/css/tienda-estado.css
   Creado: 2026-07-12
   Descripcion: Banner "Cerrado ahora" + countdown + boton de
                WhatsApp, cargado globalmente por layout.php (mismo
                patron que carrito-panel.css) para que se vea en
                cualquier pagina del storefront, no solo catalogo.
                Solo usa var(--color-*) / var(--sp-*) / var(--radio-*)
                ya definidas por Tema::cssVars() y base.css — cero
                colores hardcoded, mismo criterio que el resto del
                proyecto.
   Depende de:   Tema::cssVars(), public/assets/css/base.css
   Requerido por: src/Views/layout.php
   ============================================================ */

.aviso-cerrado {
  background-color: var(--color-secundario);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.aviso-cerrado__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  flex-wrap: wrap;
}

.aviso-cerrado__texto {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 600;
}

.aviso-cerrado__texto .icono {
  color: var(--color-primario);
}

.aviso-cerrado__countdown {
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  background-color: rgba(255,255,255,.1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radio-sm);
}

.boton-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  background-color: #25D366;
  color: #FFFFFF;
  border-radius: var(--radio-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: var(--sombra-1);
  transition: transform var(--trans-rapida);
}

.boton-whatsapp:hover {
  transform: translateY(-1px);
  color: #FFFFFF;
}

/* ---------------- Modal "Cerrado ahora" (aparece al entrar) ----- */
/* 2026-08-11 — complementa el banner de arriba, no lo reemplaza. El
   banner es un recordatorio persistente y discreto; este modal es
   el aviso fuerte, una sola vez por sesion/dia (ver nav-movil.js /
   inline script en layout.php), para que un usuario nuevo en mobile
   no confunda "cerrado" con "el sitio no sirve" — feedback real de
   Cris 2026-08-11. Mismo patron de modal que
   tracking.js::mostrarCelebracionPremio() (fondo oscuro + tarjeta
   centrada + cierre con click-fuera/Escape), pero SIN JS nuevo de
   creacion de DOM: aqui el HTML ya vive en layout.php (mas facil de
   mantener que armarlo con JS puro), el JS solo abre/cierra. */
.modal-cerrado {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background-color: rgba(0, 0, 0, .6);
}

.modal-cerrado[data-abierto="true"] {
  display: flex;
}

.modal-cerrado__tarjeta {
  position: relative;
  width: 100%;
  max-width: 340px;
  background-color: var(--color-superficie);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-3);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  text-align: center;
}

.modal-cerrado__cerrar {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-superficie-alt);
  color: var(--color-texto-suave);
  transition: background-color var(--trans-rapida);
}

.modal-cerrado__cerrar:hover {
  background-color: var(--color-borde);
  color: var(--color-texto);
}

.modal-cerrado__mascota {
  width: 120px;
  height: auto;
  margin: 0 auto var(--sp-4);
}

.modal-cerrado__titulo {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-titulo);
  margin-bottom: var(--sp-2);
}

.modal-cerrado__texto {
  font-size: 0.9375rem;
  color: var(--color-texto-suave);
  line-height: 1.5;
  margin-bottom: var(--sp-6);
}

.modal-cerrado__texto strong {
  color: var(--color-texto);
}

.modal-cerrado__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.modal-cerrado__boton-menu {
  display: block;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--color-primario);
  color: var(--texto-sobre-primario);
  border-radius: var(--radio-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
}

.modal-cerrado__boton-menu:hover {
  background-color: var(--color-primario-hover);
  color: var(--texto-sobre-primario);
}

/* ---------------- Catalogo en modo solo-lectura ---------------- */
/* Aplicado por catalogo.php cuando la tienda esta cerrada — el
   boton de agregar se reemplaza por este estado, mismo criterio
   visual que .boton-agotado, pero con su propio texto/clase para
   no confundir "sin stock" con "tienda cerrada". */
.boton-no-disponible {
  background-color: var(--color-superficie-alt);
  color: var(--color-texto-suave);
  border-radius: var(--radio-pill);
  padding: var(--sp-2) var(--sp-4);
  font-size: 0.8125rem;
  font-weight: 600;
  width: 100%;
  text-align: center;
  cursor: not-allowed;
}