/* ============================================
   ONA Club · Capa de armonía (app v2)
   Se carga la última. Cada pantalla nueva resolvió a su manera las piezas
   comunes (pestañas, chips, botones, volver, «Ver todo», vacíos, foco…);
   aquí se unen en un solo patrón, el que ya usaba la mayoría.
   Los tokens (--grad-primary, --brown-ink…) están en variables.css.
   ============================================ */

/* ── Pestañas segmentadas: contenedor translúcido y la activa en degradado ──
   (Actividades, Mis compras, Puntos… igual que Comunidad) */
.tabs.tabs--main,
.cmp-tabs {
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 8px 22px rgba(94, 79, 63, .06);
}
.tabs.tabs--main .tab,
.cmp-tab { min-height: 42px; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.tabs.tabs--main .tab.tab--active,
.cmp-tab.is-active,
.com-tab.is-on {
    color: #fff;
    background: var(--grad-primary);
    box-shadow: 0 6px 14px rgba(94, 79, 63, .25), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.tabs.tabs--main .tab.tab--active svg { color: #fff; }

/* ── Chips y filtros: el activo, con el mismo degradado ── */
.chip--active,
.my-res-chip.is-active,
.map2-filter.is-on,
.vlog-chip.is-on,
.esp-month__opt.is-active {
    color: #fff;
    border-color: transparent;
    background: var(--grad-primary);
}
.esp-month__opt.is-active .esp-month__year { color: rgba(255, 255, 255, .85); }

/* ── Botón principal: un solo relleno en toda la app ── */
.exp-hero__btn,
.arm-btn,
.hv2-armario__btn,
.com-btn:not(.com-btn--ghost),
.pf-btn--solid,
.cmp-btn--primary,
.map2-btn--primary,
.page-hero__cta {
    color: #fff;
    border: 0;
    background: var(--grad-primary);
    box-shadow: 0 8px 18px rgba(94, 79, 63, .22);
}
.exp-hero__btn,
.arm-btn,
.hv2-armario__btn { min-height: 44px; font-size: 14.5px; font-weight: 600; }
.exp-hero__btn:hover,
.arm-btn:hover,
.hv2-armario__btn:hover { filter: brightness(1.04); }
/* Secundario: blanco con borde fino (Comunidad lo tenía en crema sin borde) */
.com-btn--ghost {
    background: #fff;
    border: 1px solid rgba(94, 79, 63, .16);
    color: var(--text-heading);
}

/* ── Botón volver: el círculo de Mi perfil en todas las subpantallas ── */
.cmp-back,
.arm-back__btn,
.btn-icon-pill:not([style*="hidden"]) {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .95);
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 4px 12px rgba(94, 79, 63, .08);
    color: var(--text-heading);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── «Ver todo / Ver todos» de las secciones ── */
.hv2-sec__more,
.exp-sec__more,
.com-sec__more,
.vlog-sec__more,
.arm-sec__more { font-size: 13.5px; font-weight: 500; color: var(--text-heading); }

/* Títulos de sección dentro de Actividades › Bonos: como el resto de la pantalla */
#act-bonos-content .section-title {
    margin: 4px 4px 10px;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* ── Cabeceras antiguas (Puntos, Premios, Mi seguimiento, Galería, Online, Eventos) ──
   Mismo tamaño de título y misma altura que las pantallas nuevas; sin foto no
   dejan media pantalla vacía. Con foto conservan altura para que se vea. */
.page-hero,
.page--hero .page-hero--compact,
.page--hero .page-hero--mini { padding-top: calc(var(--navbar-height) + env(safe-area-inset-top, 0px)); }
.page-hero__content { min-height: 0; padding: 14px 20px 6px; }
.page-hero:has(.page-hero__bg[style], .page-hero__bg--video) .page-hero__content { min-height: 150px; }
.page-hero__eyebrow { font-size: 11px; letter-spacing: .3em; color: var(--text-secondary); }
.page-hero__title {
    font-weight: 400;
    font-size: clamp(30px, 8.6vw, 40px);
    line-height: 1.05;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}
.page-hero__title em { color: var(--brown-ink); font-weight: 500; }
.page--hero > .page-hero + .page-content { padding-top: 8px; }
/* Volver que añade app.js a estas cabeceras (ahora son subpantallas): en la misma
   fila que el antetítulo, como en las subpantallas de Mi perfil */
.page-hero__content:has(> .page-hero__back) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.page-hero__content:has(> .page-hero__back) > :not(.page-hero__back):not(.page-hero__eyebrow) { grid-column: 1 / -1; }
.page-hero__content:has(> .page-hero__back) > .page-hero__title { margin-top: 10px; }
.page-hero__back { margin: 0; }

/* ── Estados vacíos antiguos: tarjeta como las nuevas ── */
.page .empty-state:not(.empty-state--photo) {
    margin: 4px 0;
    padding: 32px 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 10px 30px rgba(94, 79, 63, .07), 0 1px 3px rgba(94, 79, 63, .05);
    color: var(--text-secondary);
}
.page .empty-state:not(.empty-state--photo) p { margin: 0; font-size: 14.5px; }
.page .empty-state__title { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--text-heading); }

/* ── Foco visible con el mismo anillo en toda la app (antes salía el azul del navegador) ── */
:where(a, button, summary, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid var(--color-primary-darker);
    outline-offset: 2px;
}

/* ── Escritorio: las pantallas de la app no se estiran a 1200 px ── */
@media (min-width: 768px) {
    .page.hv2, .page.exp, .page.arm, .page.pf, .page.cmp, .page.esp-page,
    .page.map2, .page.com, .page.vlog, .page.vlog-detail, .page.cfg, .page.page--hero,
    .page:has(> .profile-nav) {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Mapa: controles de zoom con el estilo de la app (leaflet.css se carga antes) ── */
.leaflet-bar.leaflet-control-zoom { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 16px rgba(94, 79, 63, .14); }
.leaflet-bar.leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; color: var(--text-heading); }
.leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .78) !important; }

/* ── Eventos (lista y detalle): títulos en serif como en el resto de la app ── */
.ona-event-card__title,
.ona-event__title,
.ona-event__heading { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; color: var(--text-heading); }
.ona-event-card__title { font-size: 21px; line-height: 1.15; }
.ona-event__title { font-size: clamp(28px, 8vw, 36px); line-height: 1.08; }
.ona-event-card { border-radius: 24px; overflow: hidden; }
/* Etiquetas sobre la foto (Apuntada, Completo, precio): píldora blanca legible sobre cualquier imagen */
.ona-event-card__img .badge {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 12px rgba(30, 22, 15, .14);
    font-weight: 700;
}
.ona-event-card__img .badge--success { color: var(--ok-ink); }
.ona-event-card__img .badge--error { color: #b5473a; }
.ona-event-card__img .badge--primary { color: var(--brown-ink); }
/* Detalle: cabecera de subpantalla */
.ev { display: flex; flex-direction: column; gap: 14px; }
.ev-top__label { font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--text-secondary); }
.ona-event__banner { border-radius: 24px; }
@media (min-width: 768px) { .page.ev { max-width: 760px; margin-left: auto; margin-right: auto; } }

/* ── Mis datos y Mi armario: cabecera como las subpantallas de Mi perfil
   (volver a la izquierda y el título al lado, no centrado) ── */
.profile-nav { justify-content: flex-start; gap: 12px; padding: 2px 0 16px; }
.profile-nav > span[style*="hidden"] { display: none; }
.profile-nav__title {
    font-size: clamp(27px, 7.6vw, 34px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.01em;
}

/* ── Zonas táctiles: nada que se pulse por debajo de ~36 px ── */
.map2-nav__btn { width: 36px; height: 36px; }
.map2-chip { padding: 8px 12px; }
.wl-item__leave { padding: 10px 8px; margin: -6px -4px; color: var(--text-secondary); }
.dstrip__arrow { width: 36px; height: 36px; }

/* ── Tarjetas antiguas (.card) en las pantallas de socia: mismo acabado que las nuevas
   (blanco translúcido, borde blanco, radio 24) y títulos en serif como «Mi progreso» ── */
.page .card {
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(94, 79, 63, .07), 0 1px 3px rgba(94, 79, 63, .05);
}
.page .card__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -.01em;
}
.page .card__title svg { color: var(--color-primary-dark); }