/* ─────────────────────────────────────────────────────────────────────────
   Franja "Abiertos cerca de ti" (descubrimiento cerca y abierto, F1).
   La pintan discovery-strip.js (filas desde /api/v1/descubrir/cerca) y
   Core\Widgets\OpenNearbyStrip (esqueleto).

   El diseño es el MISMO de las demás secciones de la landing: cabecera
   .wgt-fp__head (widget-featured-products.css) y filas de entidad
   .wgt-sr__ent (widget-search-results.css). Aquí solo vive lo propio de la
   franja: estado de apertura, rótulos de grupo, badge de ofertas, opt-in de
   ubicación y botón "Ocultar". Mobile-first; BEM .disc-strip__*.
   ───────────────────────────────────────────────────────────────────────── */

.disc-strip[hidden] {
    display: none;
}

/* Fuera de la landing (feed): sin el aire de sección del directorio. */
.disc-strip:not(.dir-app *) {
    margin: 0 0 1.5rem;
    padding: 0;
    max-width: none;
}

/* "Ver mapa →" + "Ocultar" a la derecha de la cabecera. */
.disc-strip__tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* El radio ("a 3 km") como kicker de la sección: no lleva mayúsculas. */
.disc-strip .wgt-fp__kicker {
    text-transform: none;
    letter-spacing: 0;
}

/* "Ocultar": la franja se retira lo que dure la sesión de la app. */
.disc-strip__close {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--c-text-muted);
    cursor: pointer;
}

.disc-strip__close svg {
    width: 1rem;
    height: 1rem;
}

.disc-strip__close:hover,
.disc-strip__close:focus-visible {
    background: var(--c-surface-2);
    color: var(--c-text);
    outline: none;
}

/* Opt-in de ubicación (solo en el feed; la landing se auto-oculta sin coords). */
.disc-strip__ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    margin-bottom: var(--space-4, 16px);
    padding: 0.9rem 1rem;
    border: 1px dashed var(--c-line-strong);
    border-radius: 12px;
    background: var(--c-fill);
}

.disc-strip__ask[hidden] {
    display: none;
}

.disc-strip__ask p {
    margin: 0;
    font-size: var(--fs-body);
    color: var(--c-text-muted);
}

.disc-strip__ask-btn {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--c-primary);
    border-radius: 999px;
    background: var(--c-primary);
    color: var(--c-on-brand);
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
}

.disc-strip__ask-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.disc-strip__error {
    width: 100%;
    margin: 0;
    font-size: var(--fs-small);
    color: var(--c-danger);
}

.disc-strip__empty,
.disc-strip__loading {
    margin: 0;
    padding: 0.75rem 0;
    font-size: var(--fs-body);
    color: var(--c-text-muted);
}

.disc-strip__empty[hidden] {
    display: none;
}

/* Rótulo de grupo entre filas (cierran pronto · abiertos · consulta horario · cerrados). */
.disc-strip__group {
    margin: 4px 0 -6px;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.disc-strip__group--closing_soon { color: var(--c-amber-800); }
.disc-strip__group--open         { color: var(--c-green-800); }
.disc-strip__group--closed       { color: var(--c-red-700); }

/* ── Lo propio de cada fila ───────────────────────────────────────────── */

/* Avatar sin foto: iniciales del negocio. */
.wgt-sr__ent-fallback--business {
    background: var(--c-primary-soft);
    color: var(--c-primary-ink);
    letter-spacing: 0.02em;
}

/* Etiqueta "con ofertas" sobre el avatar (productos en oferta o promociones vigentes). */
.disc-strip__deals {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--c-surface, var(--c-white));
    border-radius: 50%;
    background: var(--c-amber-100);
    color: var(--c-amber-800);
    box-shadow: 0 1px 4px rgba(10, 14, 18, 0.18);
}

.disc-strip__deals svg {
    width: 12px;
    height: 12px;
}

/* Estado de apertura en el sitio del pill de tipo, pero legible: sin
   mayúsculas y con su punto de color. */
.disc-strip__status {
    gap: 0.3rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--fs-caption);
    font-weight: 700;
    background: var(--c-surface-2);
    color: var(--c-text-muted);
}

.disc-strip__status::before {
    content: '';
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}

.disc-strip__status--open {
    background: var(--c-green-100);
    color: var(--c-green-800);
}

.disc-strip__status--soon {
    background: var(--c-amber-100);
    color: var(--c-amber-800);
}

.disc-strip__status--closed {
    background: var(--c-red-100);
    color: var(--c-red-700);
}

.disc-strip__dist {
    font-weight: 600;
}

/* ── Móvil (mismo corte que la landing): la cabecera se apila en columna y
   hereda align-items: flex-end de la hoja de widgets, que empujaba el kicker
   y el título a la derecha. El bloque de texto ocupa todo el ancho (texto a
   la izquierda) y "Ver mapa →" + Ocultar quedan a la derecha, debajo, como
   el "Ver más →" de las otras secciones. ── */
@media (max-width: 760px) {
    .disc-strip .wgt-fp__head-text {
        align-self: stretch;
    }

    .disc-strip__tools {
        align-self: flex-end;
    }
}

/* ── Móvil: el pill de estado baja bajo el título para no estrujarlo. ── */
@media (max-width: 479px) {
    .disc-strip .wgt-sr__ent-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .disc-strip .wgt-sr__ent-head .wgt-sr__type-label {
        margin: 0;
    }
}