/* ============================================================
   ESTILOS DE LAS MEJORAS — se cargan en TODOS los diseños.

   Van acá y no en cada styles.css porque son componentes nuevos
   compartidos: si mañana sumás un diseño, los hereda solos.
   Usan `currentColor` y variables genéricas para adaptarse tanto
   a los diseños claros como a los oscuros.
   ============================================================ */

/* ===== ABIERTO / CERRADO (#1) ===== */
.estado {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: 999px; font-size: .84rem;
  border: 1px solid currentColor; opacity: .95;
}
.estado[hidden] { display: none; }
.estado__punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.estado--abierto { color: #1f9e4d; }
.estado--cerrado { color: #c0392b; }
.estado b { font-weight: 700; }
.estado__detalle { opacity: .75; font-size: .8em; }
@media (prefers-reduced-motion: no-preference) {
  .estado--abierto .estado__punto { animation: estadoLatir 2s ease-in-out infinite; }
  @keyframes estadoLatir { 50% { opacity: .4; } }
}

/* ===== "¿LO DE SIEMPRE?" (#2) ===== */
.repetir {
  display: grid; gap: 4px; width: 100%; text-align: left; cursor: pointer;
  border: 2px dashed currentColor; border-radius: 14px;
  padding: 15px 18px; margin-bottom: 18px;
  background: transparent; color: inherit; font: inherit;
  transition: transform .12s, opacity .12s;
}
.repetir:hover { transform: translateY(-2px); }
.repetir:active { transform: translateY(0); }
.repetir__eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; opacity: .65; }
.repetir__items { font-weight: 700; font-size: 1.02rem; }
.repetir__accion { font-size: .85rem; opacity: .75; }

/* ===== FILTROS POR ETIQUETA (#9) ===== */
.filtros-carta { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 22px; }
.filtros-carta button {
  border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; opacity: .55;
  padding: 7px 15px; font: inherit; font-size: .8rem; cursor: pointer;
  transition: opacity .14s;
}
.filtros-carta button:hover { opacity: .85; }
.filtros-carta button.on { opacity: 1; font-weight: 600; }

/* ===== BOTÓN DE CALENDARIO (#3) ===== */
.btn-calendario { margin-top: 10px; }

/* ===== LIGHTBOX (#4) ===== */
.ampliable { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 400; background: rgba(10,10,14,.95);
  display: grid; place-items: center; padding: 20px; color: #f0f0f5;
}
.lightbox[hidden] { display: none; }
.lightbox__marco { max-width: 92vw; max-height: 82svh; display: grid; gap: 12px; justify-items: center; }
.lightbox__marco img { max-width: 92vw; max-height: 74svh; object-fit: contain; border-radius: 8px; display: block; }
.lightbox__marco figcaption { font-size: .88rem; text-align: center; opacity: .8; }
.lightbox__cerrar, .lightbox__nav {
  position: absolute; background: rgba(255,255,255,.12); border: 0; color: #fff;
  border-radius: 999px; cursor: pointer; display: grid; place-items: center;
}
.lightbox__cerrar { top: 16px; right: 16px; width: 42px; height: 42px; font-size: 1.05rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 1.8rem; line-height: 1; }
.lightbox__nav--prev { left: 12px; } .lightbox__nav--next { right: 12px; }
.lightbox__cuenta { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-family: ui-monospace, monospace; font-size: .76rem; opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox:not([hidden]) .lightbox__marco { animation: lbEntra .25s cubic-bezier(.2,.8,.2,1); }
  @keyframes lbEntra { from { opacity: 0; transform: scale(.96); } }
}

/* ===== INVITACIÓN A INSTALAR (PWA) ===== */
.pwa-invite {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 350;
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  background: #16161d; color: #f0f0f5; border: 1px solid rgba(240,240,245,.15);
  border-radius: 14px; padding: 13px 15px; font-size: .88rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.45); max-width: 460px; margin: 0 auto;
}
.pwa-invite__ok { background: #7c5cff; color: #fff; border: 0; border-radius: 999px;
  padding: 9px 18px; font: inherit; font-weight: 700; cursor: pointer; }
.pwa-invite__no { background: transparent; border: 0; color: #9295a5; font-size: 1rem;
  cursor: pointer; padding: 6px 8px; }
@media (prefers-reduced-motion: no-preference) {
  .pwa-invite { animation: pwaSube .35s cubic-bezier(.2,.8,.2,1); }
  @keyframes pwaSube { from { opacity: 0; transform: translateY(20px); } }
}

/* ===== Botón de pedido bloqueado por horario ===== */
[data-cerrado="1"] { opacity: .55 !important; cursor: not-allowed !important; }