/* ─────────────────────────────────────────────────────────────
   AVISOS DE CIERRE DE TIENDA
   Vacaciones, motivos personales, imprevistos, obras…
   Se editan en: Panel → Horarios → "Avisos de cierre".

   Esta hoja la usan DOS sitios y por eso no puede vivir dentro
   de index.html:
     1. La web pública.
     2. El iframe de vista previa del panel de administración,
        para que la clienta vea exactamente lo mismo que el visitante.
   ───────────────────────────────────────────────────────────── */

/* ---------- Aviso dentro de la tarjeta de cada tienda ---------- */

.carmela-cierre-aviso {
  position: relative;
  margin: 0 0 18px;
  padding: 14px 18px 14px 48px;
  border: 1px solid rgba(155, 47, 33, 0.3);
  border-left: 3px solid #9b2f21;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(155, 47, 33, 0.09), rgba(201, 169, 110, 0.14));
  box-shadow:
    0 8px 20px rgba(90, 23, 41, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.carmela-cierre-aviso::before {
  content: '⚠';
  position: absolute;
  top: 13px;
  left: 17px;
  font-size: 18px;
  line-height: 1.2;
  color: #9b2f21;
}

.carmela-cierre-aviso-tag {
  display: block;
  margin-bottom: 5px;
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9b2f21;
}

.carmela-cierre-aviso-txt {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  color: #5a1729;
}

.carmela-cierre-aviso-txt + .carmela-cierre-aviso-txt {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(155, 47, 33, 0.18);
}

/* Preaviso: la tienda TODAVIA no ha cerrado, así que se avisa en dorado
   y con el icono del calendario, no en rojo de alarma. */
.carmela-cierre-aviso.es-preaviso {
  border-color: rgba(201, 169, 110, 0.5);
  border-left-color: #c9a96e;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.16), rgba(201, 169, 110, 0.06));
}

.carmela-cierre-aviso.es-preaviso::before {
  content: '🗓';
  color: #8a6a2f;
}

.carmela-cierre-aviso.es-preaviso .carmela-cierre-aviso-tag { color: #8a6a2f; }
.carmela-cierre-aviso.es-preaviso .carmela-cierre-aviso-txt { color: #4a3720; }
.carmela-cierre-aviso.es-preaviso .carmela-cierre-aviso-txt + .carmela-cierre-aviso-txt {
  border-top-color: rgba(201, 169, 110, 0.3);
}

/* ---------- Ventana emergente ----------
   Hereda .carmela-popup-overlay y .carmela-popup de carmela-editable.css.
   Aquí solo va lo específico del aviso de cierre.                */

.carmela-cierre-popup {
  border-top: 4px solid #9b2f21;
}

.carmela-cierre-popup .carmela-popup-title {
  padding-right: 34px; /* deja sitio al aspa de cerrar */
}

.carmela-cierre-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #9b2f21;
}

.carmela-cierre-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 4px;
}

.carmela-cierre-item {
  position: relative;
  padding: 14px 16px 14px 16px;
  border: 1px solid rgba(201, 169, 110, 0.42);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.12), rgba(155, 47, 33, 0.06));
}

.carmela-cierre-item-tienda {
  display: inline-block;
  margin-bottom: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5a1729 0%, #8d2740 55%, #a9793f 100%);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.carmela-cierre-item-txt {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.45;
  color: #3d2a20;
}

/* Botones del pie de la ventana */
.carmela-cierre-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.carmela-cierre-acciones .carmela-cierre-btn {
  flex: 1 1 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #5a1729 0%, #8d2740 48%, #c9a96e 140%);
  color: #fff;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(90, 23, 41, 0.22);
  transition: transform .25s ease, box-shadow .25s ease;
}

.carmela-cierre-acciones .carmela-cierre-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(90, 23, 41, 0.3);
}

.carmela-cierre-acciones .carmela-cierre-btn.is-alt {
  background: transparent;
  border: 1px solid rgba(90, 23, 41, 0.32);
  color: #5a1729;
  box-shadow: none;
}

.carmela-cierre-acciones .carmela-cierre-btn.is-alt:hover {
  background: rgba(90, 23, 41, 0.06);
  box-shadow: none;
}

/* Barra de cierre automático: solo aparece si se configura una duración */
.carmela-cierre-progreso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 0 0 18px 18px;
  background: rgba(90, 23, 41, 0.1);
  overflow: hidden;
}

.carmela-cierre-progreso i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #9b2f21, #c9a96e);
}

.carmela-cierre-progreso.is-running i {
  animation: carmelaCierreBarra linear forwards;
  animation-duration: var(--carmela-cierre-dur, 8s);
}

.carmela-cierre-progreso.is-paused i {
  animation-play-state: paused;
}

@keyframes carmelaCierreBarra {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Marca de agua "VISTA PREVIA": solo dentro del panel, nunca en la web real */
.carmela-cierre-preview-tag {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.86);
  color: #e8d5b0;
  font-family: 'Lato', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  pointer-events: none;
}

@media (max-width: 480px) {
  .carmela-cierre-aviso { padding: 12px 14px 12px 42px; }
  .carmela-cierre-aviso::before { left: 14px; }
  .carmela-cierre-aviso-txt { font-size: 17px; }
  .carmela-cierre-acciones .carmela-cierre-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .carmela-cierre-progreso.is-running i { animation: none; transform: scaleX(0); }
  .carmela-cierre-acciones .carmela-cierre-btn { transition: none; }
}