/* ============================================================
   LumiaFIT App v3 — "Studio"
   Diseño claro boutique: crema + tarjetas blancas + acento por gimnasio
   Theming: todas las decisiones de color pasan por variables --v3-*
   ============================================================ */

.personal-data-note { color: var(--v3-text-2); font-size: 13px; line-height: 1.5; margin: 8px 0 16px; }
.personal-data-form { padding-bottom: 24px; }
.personal-data-section { padding: 20px; margin: 16px 0; min-width: 0; border: 1px solid var(--v3-border); }
.personal-data-section h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--v3-text); }
.personal-data-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.personal-data-section label { display: block; margin-top: 16px; font-size: 13px; font-weight: 600; }
.personal-data-section input, .personal-data-section select { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--v3-border); border-radius: 10px; background: var(--v3-surface); color: var(--v3-text); font: inherit; font-size: 16px; }
.personal-data-section input[readonly] { background: var(--v3-surface-2); }
.personal-data-section input:focus-visible, .personal-data-section select:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
.personal-data-save, .personal-data-secondary { min-height: 48px; border: 0; border-radius: 12px; padding: 12px 20px; font: inherit; font-weight: 700; cursor: pointer; }
.personal-data-save { width: 100%; background: var(--v3-accent); color: var(--v3-on-accent); }
.personal-data-secondary { background: var(--v3-surface-2); color: var(--v3-text); }
.personal-data-save:disabled { opacity: .6; cursor: default; }
.personal-data-feedback { font-size: 14px; line-height: 1.5; color: var(--v3-text); }
.personal-data-feedback.is-error { color: var(--v3-danger); }

:root {
    /* Fondo y superficies */
    --v3-bg: #FAF7F2;
    --v3-surface: #FFFFFF;
    --v3-surface-2: #F3EEE6;
    --v3-border: #ECE5DA;
    --v3-highlight: rgba(255,255,255,.72);
    --v3-shadow: 0 1px 2px rgba(43, 39, 34, 0.04), 0 10px 30px rgba(43, 39, 34, 0.07);

    /* Texto */
    --v3-text: #2B2722;
    --v3-text-2: #8A8378;
    --v3-text-3: #B5AEA2;

    /* Acento (personalizable por gimnasio) */
    --v3-accent-brand: #E8734A;
    --v3-accent: #E8734A;
    --v3-on-accent: #000000;
    --v3-accent-dark: #C95A34;
    --v3-accent-deep: #4A1B0C;
    --v3-accent-soft: #FBEDE6;
    --v3-secondary: #C95A34;
    --v3-secondary-soft: #F7E3DA;

    /* Semánticos */
    --v3-success: #1D9E75;
    --v3-success-soft: #E1F5EE;
    --v3-danger: #D9534F;
    --v3-danger-soft: #FCEBEB;
    --v3-warning: #BA7517;
    --v3-warning-soft: #FAEEDA;

    /* Métricas */
    --v3-radius-lg: 24px;
    --v3-radius: 18px;
    --v3-radius-sm: 12px;

    --v3-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Temas de gimnasio de ejemplo (equivalente a colores_personalizados) */
[data-gym-theme="bosque"] {
    --v3-accent: #2F9E77;
    --v3-secondary: #1F7A5A;
    --v3-accent-dark: #1F7A5A;
    --v3-accent-deep: #0A3327;
    --v3-accent-soft: #E3F4EE;
    --v3-on-accent: #000000;
}

[data-gym-theme="oceano"] {
    --v3-accent: #3B6FD4;
    --v3-secondary: #2A54A8;
    --v3-accent-dark: #2A54A8;
    --v3-accent-deep: #0E2450;
    --v3-accent-soft: #E8EFFC;
    --v3-on-accent: #FFFFFF;
}

[data-gym-theme="rosa"] {
    /* Branding pastel completo: acento + fondos teñidos de rosa */
    --v3-bg: #FBF4F6;
    --v3-surface-2: #F7E9EE;
    --v3-border: #F0DEE5;
    --v3-accent: #E585A8;
    --v3-secondary: #C9648A;
    --v3-accent-dark: #C9648A;
    --v3-accent-deep: #4B1528;
    --v3-accent-soft: #FBE9F0;
    --v3-success: #4CAF93;
    --v3-success-soft: #E6F4EF;
    --v3-warning: #C99459;
    --v3-warning-soft: #F9F0E4;
    --v3-on-accent: #000000;
}

[data-gym-theme="uva"] {
    --v3-accent: #7A5AE0;
    --v3-secondary: #5F41BE;
    --v3-accent-dark: #5F41BE;
    --v3-accent-deep: #241356;
    --v3-accent-soft: #EFEAFC;
    --v3-on-accent: #FFFFFF;
}

/* ---------- Base ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    height: 100%;
    overscroll-behavior-y: none;
}

body {
    font-family: var(--v3-font);
    background:
        radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--v3-accent) 8%, transparent), transparent 28%),
        var(--v3-bg);
    background-attachment: fixed;
    color: var(--v3-text);
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    line-height: 1.45;
}

body.has-mandatory-update {
    overflow: hidden;
}

button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }

/* ---------- Layout ---------- */

.app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.screen {
    display: none;
    flex: 1;
    padding: 0 20px 120px;
    animation: v3-fade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.screen.active { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes v3-fade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Header ---------- */

.header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--v3-bg) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.header .gym {
    display: flex;
    align-items: center;
    min-width: 0;
}

.header .gym-switch {
    gap: 7px;
    max-width: calc(100% - 54px);
    padding: 4px 6px 4px 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
}

.header .gym-switch.is-switchable { cursor: pointer; }

.header .gym-switch.is-switchable:hover,
.header .gym-switch.is-switchable:focus-visible {
    background: var(--v3-surface-2);
}

.header .gym-switch > div {
    min-width: 0;
}

.header .gym-switch > i {
    color: var(--v3-text-2);
    font-size: 12px;
}

.header .gym-switch:not(.is-switchable) > i {
    display: none;
}

.header .gym-name {
    font-weight: 850;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header .gym-sub {
    font-size: 12px;
    font-weight: 650;
    color: var(--v3-text-2);
    margin-top: 2px;
}

.support-mode-banner {
    position: sticky;
    top: calc(70px + env(safe-area-inset-top));
    z-index: 39;
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 16px 12px;
    padding: 11px 14px;
    border: 1px solid #F0B429;
    border-radius: 14px;
    background: #FFF7D6;
    color: #713F12;
    box-shadow: 0 8px 22px rgba(113, 63, 18, 0.12);
}

.support-mode-banner[hidden] { display: none; }
.support-mode-banner > i { font-size: 18px; color: #B45309; }
.support-mode-banner div { min-width: 0; display: flex; flex-direction: column; }
.support-mode-banner strong { font-size: 13px; line-height: 1.25; }
.support-mode-banner span { font-size: 11px; line-height: 1.35; opacity: 0.82; }

.header-actions { display: flex; gap: 8px; }

.header-notification {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v3-text);
    font-size: 18px;
    position: relative;
    transition: background 0.15s ease, transform 0.15s ease;
}

.header-notification:active {
    background: var(--v3-surface-2);
    transform: scale(0.94);
}

.header-notification .dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v3-accent);
    border: 2px solid var(--v3-bg);
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v3-text);
    font-size: 15px;
    position: relative;
    transition: transform 0.15s ease;
}

.icon-btn:active { transform: scale(0.94); }

.icon-btn .dot {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v3-accent);
    border: 2px solid var(--v3-surface);
}

/* ---------- Bottom nav ---------- */

.bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 50;
    width: min(440px, calc(100% - 40px));
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--v3-surface) 68%, transparent),
        color-mix(in srgb, var(--v3-surface) 48%, transparent));
    border: 1px solid var(--v3-border);
    border-radius: 999px;
    box-shadow:
        0 22px 55px rgba(28, 24, 20, 0.18),
        0 6px 18px color-mix(in srgb, var(--v3-accent) 10%, transparent),
        inset 0 1px 0 var(--v3-highlight),
        inset 0 -1px 0 color-mix(in srgb, var(--v3-text) 7%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(1.65);
    backdrop-filter: blur(28px) saturate(1.65);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px;
    isolation: isolate;
}

.bottom-nav.over-subview {
    z-index: var(--bottom-nav-subview-z, 70);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 0 7px;
    border-radius: 999px;
    color: var(--v3-text-2);
    font-size: 10.5px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item i { font-size: 17px; }

.nav-item.active {
    background: color-mix(in srgb, var(--v3-accent) 13%, var(--v3-surface) 48%);
    box-shadow:
        0 5px 16px color-mix(in srgb, var(--v3-accent) 13%, transparent),
        inset 0 1px 0 var(--v3-highlight);
    color: var(--v3-accent-dark);
}

.nav-item:active { transform: scale(0.95); }

/* ---------- Componentes ---------- */

.card {
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
    box-shadow: var(--v3-shadow);
}

.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 26px 0 12px;
}

.section-title h2 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.section-title .link {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--v3-accent-dark);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 700;
}

.pill.accent { background: var(--v3-accent-soft); color: var(--v3-accent-dark); }
.pill.success { background: var(--v3-success-soft); color: var(--v3-success); }
.pill.danger { background: var(--v3-danger-soft); color: var(--v3-danger); }
.pill.warning { background: var(--v3-warning-soft); color: var(--v3-warning); }
.pill.neutral { background: var(--v3-surface-2); color: var(--v3-text-2); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:active { transform: scale(0.97); }

.btn.primary { background: var(--v3-accent); color: var(--v3-on-accent); }
.btn.primary:active { background: var(--v3-accent-dark); }
.btn.ghost { background: var(--v3-surface-2); color: var(--v3-text); }
.btn.outline-danger { background: var(--v3-danger-soft); color: var(--v3-danger); }
.btn.block { width: 100%; }
.btn.sm { padding: 9px 16px; font-size: 12.5px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.mandatory-update {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--v3-bg);
    color: var(--v3-text);
}

.mandatory-update-card {
    width: min(100%, 390px);
    text-align: center;
}

.mandatory-update-icon {
    width: 78px;
    height: 78px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    background: var(--v3-accent-soft);
    color: var(--v3-accent-dark);
    font-size: 30px;
}

.mandatory-update h1 {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.08;
}

.mandatory-update p {
    margin: 0;
    color: var(--v3-text-2);
    font-size: 15px;
    line-height: 1.5;
}

.mandatory-update-meta {
    margin: 18px 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--v3-surface-2);
    color: var(--v3-text-2);
    font-size: 12px;
    font-weight: 700;
}

.mandatory-update-help {
    margin-top: 16px;
    color: var(--v3-text-3);
    font-size: 13px;
    line-height: 1.45;
}

/* ---------- Inicio ---------- */

.greeting { margin-top: 10px; }

.greeting .date {
    font-size: 12px;
    font-weight: 700;
    color: var(--v3-text-2);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.greeting h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.6px;
    margin-top: 2px;
}

.greeting h1 .accent { color: var(--v3-accent-dark); }

/* Próxima clase (hero) */
.next-class {
    margin-top: 16px;
    background: var(--v3-accent);
    border-radius: var(--v3-radius-lg);
    padding: 20px;
    color: var(--v3-on-accent);
    position: relative;
    overflow: hidden;
}

.next-class-image,
.next-class-image-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.next-class-image {
    z-index: 0;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
}

.next-class-image[hidden] { display: none !important; }

.next-class-image-overlay {
    z-index: 1;
    display: none;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--v3-accent-deep) 92%, #000 8%) 0%,
        color-mix(in srgb, var(--v3-accent-deep) 76%, transparent) 55%,
        color-mix(in srgb, var(--v3-accent-deep) 50%, transparent) 100%);
}

.next-class.has-image .next-class-image-overlay { display: block; }

.next-class > :not(.next-class-image):not(.next-class-image-overlay) {
    position: relative;
    z-index: 2;
}

.next-class::after {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    z-index: 1;
}

.next-class.has-image {
    color: #fff;
    box-shadow:
        0 18px 38px color-mix(in srgb, var(--v3-accent-deep) 28%, transparent),
        inset 0 1px 0 rgba(255,255,255,.2);
}

.next-class.has-image .label { color: rgba(255,255,255,.82); }
.next-class.has-image .meta { color: #fff; opacity: .9; }
.next-class.has-image .btn.translucent { background: rgba(255,255,255,.16); color: #fff; }

.next-class.is-empty {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--v3-surface) 90%, var(--v3-accent-soft)),
        color-mix(in srgb, var(--v3-surface) 70%, var(--v3-accent-soft)));
    border: 1px solid color-mix(in srgb, var(--v3-accent) 18%, var(--v3-border));
    color: var(--v3-text);
    box-shadow:
        0 12px 30px color-mix(in srgb, var(--v3-text) 8%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}

.next-class.is-empty::after {
    background: color-mix(in srgb, var(--v3-accent) 9%, transparent);
}

.next-class.is-empty .label { color: var(--v3-accent-dark); }
.next-class.is-empty h3 { font-size: 20px; margin-top: 5px; }
.next-class.is-empty .meta { color: var(--v3-text-2); opacity: 1; }
.next-class.is-empty .actions { margin-top: 14px; }

.next-class .label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: color-mix(in srgb, var(--v3-on-accent) 82%, var(--v3-accent));
}

.next-class h3 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 4px 0 6px;
}

.next-class .meta {
    font-size: 13px;
    opacity: 0.92;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.next-class .meta i { margin-right: 5px; }

.next-class .actions {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.next-class .btn.white { background: #fff; color: var(--v3-accent-deep); }
.next-class .btn.translucent { background: color-mix(in srgb, var(--v3-on-accent) 18%, transparent); color: var(--v3-on-accent); }
.next-class.is-empty .btn.white {
    background: var(--v3-accent);
    color: var(--v3-on-accent);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--v3-accent) 20%, transparent);
}

/* Stats */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.stat {
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--v3-surface) 88%, var(--v3-accent-soft)),
        color-mix(in srgb, var(--v3-surface) 68%, var(--v3-accent-soft)));
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-sm);
    padding: 12px 10px;
    text-align: center;
    box-shadow:
        0 8px 22px color-mix(in srgb, var(--v3-text) 7%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}

.stat .value {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.4px;
}

.stat .value.accent { color: var(--v3-accent-dark); }

.stat .label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--v3-text-2);
    margin-top: 1px;
}

.home-routine-card {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding: 14px 16px;
    text-align: left;
    width: 100%;
}

.home-routine-icon {
    align-items: center;
    background: var(--v3-accent-soft);
    border-radius: 15px;
    color: var(--v3-accent-dark);
    display: flex;
    flex: 0 0 46px;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.home-routine-body {
    flex: 1;
    min-width: 0;
}

.home-routine-kicker {
    color: var(--v3-accent-dark);
    font-size: 10.5px;
    font-weight: 850;
    text-transform: uppercase;
}

.home-routine-title {
    font-size: 14.5px;
    font-weight: 850;
    line-height: 1.2;
    margin-top: 2px;
}

.home-routine-sub {
    color: var(--v3-text-2);
    font-size: 12px;
    line-height: 1.3;
    margin-top: 3px;
}

.home-routine-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.home-routine-meta span {
    background: var(--v3-surface-2);
    border-radius: 999px;
    color: var(--v3-text-2);
    font-size: 10.5px;
    font-weight: 750;
    padding: 4px 7px;
}

.home-routine-chevron {
    color: var(--v3-text-3);
    flex-shrink: 0;
    font-size: 12px;
}

.activity-scroll {
    display: flex;
    gap: 12px;
    margin: 0 -20px;
    overflow-x: auto;
    padding: 0 20px 7px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.activity-scroll::-webkit-scrollbar {
    display: none;
}

.home-activity-card {
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
    box-shadow: var(--v3-shadow);
    flex: 0 0 174px;
    overflow: hidden;
    scroll-snap-align: start;
    text-align: left;
}

.home-activity-visual {
    background: var(--v3-accent);
    height: 132px;
    overflow: hidden;
    position: relative;
}

.home-activity-placeholder,
.home-activity-visual > img,
.home-activity-shade {
    inset: 0;
    position: absolute;
}

.home-activity-placeholder {
    align-items: center;
    background: linear-gradient(145deg, var(--v3-accent), var(--v3-secondary));
    color: color-mix(in srgb, var(--v3-on-accent) 92%, transparent);
    display: flex;
    font-size: 32px;
    justify-content: center;
}

.home-activity-visual > img {
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
    width: 100%;
}

.home-activity-card:active .home-activity-visual > img {
    transform: scale(1.03);
}

.home-activity-shade {
    background: linear-gradient(180deg, transparent 28%, rgba(10, 16, 25, .78) 100%);
}

.home-activity-card:not(.has-image) .home-activity-shade {
    background: linear-gradient(180deg, transparent 15%, rgba(10, 16, 25, .3) 100%);
}

.home-activity-name {
    bottom: 13px;
    color: #fff;
    font-size: 15px;
    font-weight: 850;
    left: 14px;
    line-height: 1.15;
    position: absolute;
    right: 14px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}

.home-activity-card:not(.has-image) .home-activity-name,
.home-activity-card:not(.has-image) .home-activity-placeholder {
    color: var(--v3-on-accent);
}

.home-activity-meta {
    align-items: center;
    color: var(--v3-text-2);
    display: flex;
    font-size: 11.5px;
    font-weight: 700;
    justify-content: space-between;
    min-height: 42px;
    padding: 10px 13px;
}

.home-activity-meta i {
    color: var(--v3-accent-dark);
    font-size: 10px;
}

.payment-data-card {
    display: flex;
    gap: 13px;
    padding: 18px;
}

.payment-membership-card {
    align-items: center;
    display: flex;
    gap: 12px;
    padding: 16px;
}

.payment-membership-icon {
    align-items: center;
    background: var(--v3-accent-soft);
    border-radius: 14px;
    color: var(--v3-accent-dark);
    display: flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.payment-membership-copy {
    flex: 1;
    min-width: 0;
}

.payment-membership-kicker {
    color: var(--v3-text-2);
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.payment-membership-copy h3 {
    font-size: 15px;
    line-height: 1.2;
    margin: 3px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-membership-copy p {
    color: var(--v3-text-2);
    font-size: 11.5px;
    line-height: 1.35;
    margin: 4px 0 0;
}

.payment-membership-side {
    align-items: flex-end;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 7px;
}

.payment-membership-side strong {
    color: var(--v3-text);
    font-size: 13px;
    font-weight: 850;
}

.payment-info-section {
    margin-top: 26px;
}

.payment-info-section .section-title {
    margin-bottom: 10px;
}

.payment-data-icon {
    align-items: center;
    background: var(--v3-accent-soft);
    border-radius: 16px;
    color: var(--v3-accent-dark);
    display: flex;
    flex: 0 0 46px;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.payment-data-card h3 {
    font-size: 16px;
    line-height: 1.2;
    margin: 0;
}

.payment-data-card p {
    color: var(--v3-text-2);
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0 0;
    white-space: pre-line;
}

.payment-copy-btn {
    margin-top: 14px;
}

/* Resumen permanente del abono */
.abono-alert {
    margin-top: 14px;
    border-radius: var(--v3-radius);
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--v3-surface) 92%, var(--v3-accent-soft)),
        color-mix(in srgb, var(--v3-surface) 74%, var(--v3-accent-soft)));
    border: 1px solid var(--v3-border);
    box-shadow:
        0 12px 30px color-mix(in srgb, var(--v3-text) 9%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}

.abono-alert.visible { display: flex; }

.abono-alert.danger {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--v3-danger-soft) 72%, var(--v3-surface)),
        color-mix(in srgb, var(--v3-danger-soft) 42%, var(--v3-surface)));
    border-color: color-mix(in srgb, var(--v3-danger) 22%, transparent);
    box-shadow:
        0 14px 32px color-mix(in srgb, var(--v3-danger) 13%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}
.abono-alert-copy { flex: 1; min-width: 0; }

.abono-alert-kicker {
    color: var(--v3-accent-dark);
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .45px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.abono-alert-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.abono-alert .title { font-size: 14px; font-weight: 800; }
.abono-alert-price {
    color: var(--v3-text);
    font-size: 13px;
    font-weight: 850;
    margin-top: 4px;
}
.abono-alert .sub { font-size: 12px; color: var(--v3-text-2); margin-top: 3px; }
.abono-alert .pill { padding: 4px 8px; font-size: 10.5px; }

.abono-alert-link {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--v3-accent-soft);
    color: var(--v3-accent-dark);
    display: inline-flex;
    font-size: 12px;
}

.home-quick-actions {
    display: flex;
    gap: 9px;
    margin-top: 12px;
}

.home-quick-actions > button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 6px;
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-sm);
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--v3-surface) 92%, var(--v3-accent-soft)),
        color-mix(in srgb, var(--v3-surface) 72%, var(--v3-accent-soft)));
    color: var(--v3-text);
    font-size: 11px;
    font-weight: 750;
    box-shadow:
        0 10px 26px color-mix(in srgb, var(--v3-text) 8%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}

.home-quick-actions:has(> button:first-child[hidden]):has(> button:last-child[hidden]) > button:not([hidden]) {
    min-height: 64px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 16px;
    font-size: 12.5px;
}

.home-quick-actions > button[hidden],
.abono-alert-link[hidden] {
    display: none !important;
}

.home-quick-actions > button > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--v3-accent-soft);
    color: var(--v3-accent-dark);
    font-size: 14px;
}

.home-quick-actions > button:active {
    transform: scale(.97);
}

/* Lista de clases */
.class-list { display: flex; flex-direction: column; gap: 10px; }

.class-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-color: var(--v3-border);
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--v3-surface) 96%, var(--v3-accent-soft)),
        color-mix(in srgb, var(--v3-surface) 82%, var(--v3-accent-soft)));
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--v3-text) 9%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}

.class-item .time {
    text-align: center;
    min-width: 48px;
    flex-shrink: 0;
}

.class-item .time .hour {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.class-item .time .ampm {
    font-size: 10px;
    font-weight: 700;
    color: var(--v3-text-3);
    text-transform: uppercase;
}

.class-item .divider {
    width: 1px;
    align-self: stretch;
    background: color-mix(in srgb, var(--v3-accent) 24%, var(--v3-border));
}

.class-item .info { flex: 1; min-width: 0; }

.class-item .name { font-size: 14.5px; font-weight: 800; }

.class-item .detail {
    font-size: 12px;
    color: var(--v3-text-2);
    margin-top: 1px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.class-item .detail > .dot-sep { display: none; }

.class-item .detail > span {
    display: block;
}

.class-item .detail > .class-sede {
    display: inline-flex;
}

.class-item > :is(.btn, .pill, .class-waitlist-actions) {
    flex-shrink: 0;
}

.class-sede {
    align-items: center;
    background: var(--v3-accent-soft);
    border-radius: 999px;
    color: var(--v3-accent-dark);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    gap: 4px;
    margin-right: 2px;
    max-width: 100%;
    padding: 2px 7px;
    vertical-align: middle;
}

.class-sede i {
    font-size: 10px;
}

.class-item .cupos {
    font-size: 11px;
    font-weight: 700;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.cupos-bar {
    height: 4px;
    border-radius: 4px;
    background: var(--v3-surface-2);
    flex: 1;
    max-width: 90px;
    overflow: hidden;
}

.cupos-bar span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--v3-accent);
}

/* Aviso informativo: conserva contraste en los temas claros y oscuros. */
.class-last-places {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    background: #fff1cf;
    color: #8a4b08;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}
.class-last-places i { flex-shrink: 0; }

/* Novedades */
.home-featured-news {
    width: 100%;
    min-height: 96px;
    margin: 12px 0 0;
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 68px 14px;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--v3-text);
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
    box-shadow: var(--v3-shadow);
}

.home-featured-news-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.home-featured-news-kicker {
    color: var(--v3-accent-dark);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.home-featured-news-copy strong {
    overflow: hidden;
    font-size: 15px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-featured-news-copy > span:last-child {
    overflow: hidden;
    color: var(--v3-text-2);
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-featured-news-media {
    position: relative;
    width: 68px;
    height: 68px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--v3-surface-2);
}

.home-featured-news-media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-featured-news-media.show-full-image img {
    object-fit: contain;
}

.home-featured-news-chevron {
    color: var(--v3-text-2);
    font-size: 12px;
}

.news-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 20px 6px;
    margin: 0 -20px;
    scroll-padding-left: 20px;
    scrollbar-width: none;
}

.news-scroll::-webkit-scrollbar { display: none; }

.news-card {
    scroll-snap-align: start;
    flex: 0 0 240px;
    border-radius: var(--v3-radius);
    overflow: hidden;
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    box-shadow: var(--v3-shadow);
    text-align: left;
}

.news-card .cover {
    height: 110px;
    background: linear-gradient(135deg, var(--v3-accent), var(--v3-secondary));
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px;
    position: relative;
    overflow: hidden;
}

.news-card .cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.news-card .cover.show-full-image .cover-img {
    object-fit: contain;
}

.news-card .cover.has-image i { display: none; }

.news-card .cover.has-image .pill {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
}

.news-card .cover i { color: var(--v3-accent-dark); font-size: 26px; }

.news-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--v3-accent) 18%, transparent), transparent 36%),
        linear-gradient(135deg, var(--v3-accent-soft), var(--v3-surface-2));
    z-index: 0;
}

.news-placeholder::before {
    content: "";
    position: absolute;
    inset: -45%;
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--v3-accent) 14%, transparent), transparent 28%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--v3-accent) 10%, transparent), transparent 24%);
    transform: rotate(-12deg);
}

.news-placeholder-mark {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    color: var(--v3-accent-dark);
    box-shadow: var(--v3-shadow);
}

.news-placeholder.compact {
    inset: 0;
    border-radius: inherit;
}

.news-placeholder.compact .news-placeholder-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 15px;
}

.news-emoji {
    color: var(--v3-accent-dark);
    font-size: 28px;
    line-height: 1;
}

.news-card .cover .pill {
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    color: var(--v3-accent-dark);
}

.news-card .cover.has-image .pill {
    background: rgba(255,255,255,0.94);
    border-color: rgba(255,255,255,0.72);
    color: var(--v3-accent-deep);
}

.news-card .body { padding: 12px 14px 14px; }

.news-card .title { font-size: 13.5px; font-weight: 700; }

.news-card .sub { font-size: 12px; color: var(--v3-text-2); margin-top: 2px; }

/* ---------- Agenda ---------- */

.screen-intro {
    margin-top: 5px;
    color: var(--v3-text-2);
    font-size: 13px;
    font-weight: 650;
}

.agenda-tools {
    margin-top: 12px;
}

.agenda-tools[hidden] { display: none !important; }

.agenda-search {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid var(--v3-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--v3-surface) 82%, transparent);
    color: var(--v3-text-2);
    box-shadow:
        0 8px 22px color-mix(in srgb, var(--v3-text) 7%, transparent),
        inset 0 1px 0 var(--v3-highlight);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.agenda-search:focus-within {
    border-color: var(--v3-accent);
    box-shadow: 0 0 0 3px var(--v3-accent-soft);
}

.agenda-search input {
    min-width: 0;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--v3-text);
    font: 600 13px/1 var(--v3-font);
}

.agenda-search input::placeholder { color: var(--v3-text-3); }

.agenda-selects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.agenda-selects label > span {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 6px 3px;
    color: var(--v3-text-2);
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.agenda-selects label > span i { color: var(--v3-accent-dark); font-size: 10px; }

.agenda-selects select {
    width: 100%;
    height: 42px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--v3-border);
    border-radius: 13px;
    outline: 0;
    background: color-mix(in srgb, var(--v3-surface) 86%, transparent);
    color: var(--v3-text);
    font: 700 11.5px/1 var(--v3-font);
    box-shadow:
        0 7px 18px color-mix(in srgb, var(--v3-text) 6%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}

.agenda-selects select:focus { border-color: var(--v3-accent); }

.agenda-clear {
    min-height: 34px;
    margin-top: 7px;
    padding: 7px 2px 2px;
    color: var(--v3-accent-dark);
    font-size: 11.5px;
    font-weight: 750;
}

.pull-refresh-indicator {
    height: 0;
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px) scale(0.96);
    transition: opacity 0.18s ease, transform 0.18s ease, height 0.18s ease, margin-top 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--v3-accent-dark);
    font-size: 12px;
    font-weight: 800;
}

.pull-refresh-indicator i {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--v3-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--v3-accent);
    transition: transform 0.14s ease;
}

.pull-refresh-indicator.is-visible {
    height: 42px;
    margin-top: 4px;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pull-refresh-indicator.is-refreshing i {
    animation: spin 0.75s linear infinite;
}

.day-strip {
    display: flex;
    gap: 8px;
    margin: 14px -20px 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 2px 20px 8px;
    scroll-padding-inline: 20px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.day-strip::-webkit-scrollbar { display: none; }

.day-chip {
    flex: 0 0 58px;
    min-width: 58px;
    border-radius: 14px;
    padding: 10px 0 8px;
    scroll-snap-align: center;
    text-align: center;
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    transition: all 0.2s ease;
}

.day-chip .dow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--v3-text-2);
}

.day-chip .num { font-size: 15px; font-weight: 800; margin-top: 1px; }

.day-chip.active {
    background: var(--v3-accent);
    border-color: var(--v3-accent);
    color: var(--v3-on-accent);
}

.day-chip.active .dow { color: color-mix(in srgb, var(--v3-on-accent) 82%, var(--v3-accent)); }

.filter-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 14px -20px 4px;
    padding: 2px 20px 6px;
    scrollbar-width: none;
}

.filter-scroll[hidden] { display: none !important; }

.filter-scroll::-webkit-scrollbar { display: none; }

.filter-chip {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 8px 15px;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    color: var(--v3-text-2);
}

.filter-chip.active {
    background: var(--v3-text);
    border-color: var(--v3-text);
    color: var(--v3-bg);
}

.time-group {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--v3-text-3);
    margin: 18px 0 10px;
}

/* ---------- Turnos ---------- */

.segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--v3-surface-2);
    border-radius: 999px;
    padding: 4px;
    margin-top: 14px;
}

.segment button {
    border-radius: 999px;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--v3-text-2);
    transition: all 0.2s ease;
}

.segment button.active {
    background: var(--v3-surface);
    color: var(--v3-text);
    box-shadow: var(--v3-shadow);
}

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--v3-text-2);
}

.empty-state .icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 22px;
    background: var(--v3-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--v3-text-3);
}

.empty-state h3 { font-size: 15px; font-weight: 700; color: var(--v3-text); }

.empty-state p { font-size: 13px; margin-top: 4px; }

.load-error-overlay {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: var(--v3-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
}

.load-error-overlay[hidden] { display: none; }

.load-error-panel {
    width: min(100%, 380px);
    text-align: center;
    color: var(--v3-text);
}

.load-error-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 26px;
    background: var(--v3-surface-2);
    color: var(--v3-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.load-error-panel h2 {
    font-size: 24px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.15;
}

.load-error-panel p {
    margin: 10px auto 0;
    max-width: 320px;
    color: var(--v3-text-2);
    font-size: 14px;
}

.load-error-countdown {
    margin: 22px 0 14px;
    color: var(--v3-text-2);
    font-size: 13px;
    font-weight: 800;
}

/* ---------- Perfil ---------- */

.profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
}

.avatar {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    background: var(--v3-accent);
    color: var(--v3-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
}

.avatar img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.profile-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; }

.profile-head .sub { font-size: 12.5px; color: var(--v3-text-2); margin-top: 2px; }

.credential {
    margin-top: 18px;
    padding: 20px;
    text-align: center;
}

.credential .qr {
    width: 150px;
    height: 150px;
    margin: 10px auto;
    padding: 10px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--v3-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.credential .credential-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin-top: 14px;
}

.credential .qr img, .credential .qr canvas { width: 100%; height: 100%; }

.credential .num {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--v3-text-2);
}

.menu-list { margin-top: 12px; overflow: hidden; }

.menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--v3-border);
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease;
}

.menu-item:last-child { border-bottom: none; }

.menu-item:active { background: var(--v3-surface-2); }

.menu-item .mi-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--v3-accent-soft);
    color: var(--v3-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.menu-item .chev { margin-left: auto; color: var(--v3-text-3); font-size: 12px; }

.menu-item.danger { color: var(--v3-danger); }

.menu-item.danger .mi-icon { background: var(--v3-danger-soft); color: var(--v3-danger); }

/* ---------- Mi salud ---------- */

.health-hero {
    margin-top: 8px;
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: linear-gradient(145deg, var(--v3-surface), var(--v3-accent-soft));
}

.health-hero-icon,
.health-empty-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--v3-accent-dark);
    background: var(--v3-accent-soft);
}

.health-hero-icon { width: 48px; height: 48px; border-radius: 16px; font-size: 21px; }
.health-hero h3 { margin-top: 11px; font-size: 18px; line-height: 1.2; }
.health-hero p { margin-top: 6px; color: var(--v3-text-2); font-size: 12.5px; line-height: 1.5; }

.health-loading { margin-top: 14px; min-height: 96px; padding: 18px; display: flex; align-items: center; gap: 14px; }
.health-loading[hidden] { display: none !important; }
.health-loading-spinner { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 15px; display: grid; place-items: center; color: var(--v3-accent-dark); background: var(--v3-accent-soft); animation: health-loading-pulse 1.35s ease-in-out infinite; }
.health-loading > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.health-loading strong { font-size: 13px; }
.health-loading > div > span { color: var(--v3-text-2); font-size: 11px; line-height: 1.45; }
@keyframes health-loading-pulse { 0%, 100% { transform: scale(1); opacity: .72; } 50% { transform: scale(1.07); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .health-loading-spinner { animation: none; } }

.health-empty { margin-top: 14px; padding: 24px 20px; text-align: center; }
.health-empty-icon { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 18px; font-size: 22px; }
.health-empty h3 { font-size: 17px; }
.health-empty p { margin: 8px 0 18px; color: var(--v3-text-2); font-size: 13px; line-height: 1.5; }

.health-device-help { margin-top: 12px; padding: 0; overflow: hidden; }
.health-device-help-toggle { width: 100%; padding: 13px 14px; border: 0; background: transparent; color: var(--v3-text); display: flex; align-items: center; gap: 11px; text-align: left; }
.health-device-help-icon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; color: var(--v3-accent-dark); background: var(--v3-accent-soft); }
.health-device-help-toggle > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.health-device-help-toggle strong { font-size: 12.5px; }
.health-device-help-toggle small { margin-top: 2px; color: var(--v3-text-2); font-size: 10.5px; line-height: 1.35; }
.health-device-help-toggle > i { color: var(--v3-text-2); font-size: 11px; transition: transform .18s ease; }
.health-device-help-toggle[aria-expanded="true"] > i { transform: rotate(180deg); }
.health-device-help-body { padding: 0 15px 15px; border-top: 1px solid var(--v3-border); }
.health-device-step { padding-top: 13px; }
.health-device-step strong { display: block; font-size: 11.5px; }
.health-device-step p { margin-top: 4px; color: var(--v3-text-2); font-size: 10.5px; line-height: 1.5; }
.health-device-note { margin-top: 12px; padding: 10px; border-radius: 10px; color: var(--v3-text-2); background: var(--v3-bg); font-size: 10px; line-height: 1.45; }

.health-date-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 2px 10px;
}

.health-date-row > div { display: flex; flex-direction: column; gap: 2px; }
.health-date-row span { color: var(--v3-text-2); font-size: 10.5px; font-weight: 800; letter-spacing: 1px; }
.health-date-row strong { font-size: 12px; }
.health-date-row .is-loading i { animation: spin 0.8s linear infinite; }

.health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.health-metric { min-height: 126px; padding: 16px; display: flex; flex-direction: column; }
.health-metric > i { color: var(--v3-accent-dark); font-size: 18px; }
.health-metric strong { margin-top: auto; font-size: 22px; line-height: 1.1; letter-spacing: -0.5px; }
.health-metric span { margin-top: 4px; color: var(--v3-text-2); font-size: 11.5px; font-weight: 650; }

.health-workouts { display: flex; flex-direction: column; gap: 9px; }
.health-workout { width: 100%; padding: 14px 15px; border: 1px solid var(--v3-border); color: var(--v3-text); text-align: left; font: inherit; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.health-workout:active { transform: scale(.985); }
.health-workout:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
.health-workout-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--v3-accent-dark); background: var(--v3-accent-soft); }
.health-workout-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.health-workout-copy strong { font-size: 13px; }
.health-workout-copy span { margin-top: 2px; color: var(--v3-text-2); font-size: 11px; }
.health-workout-source { margin-top: 3px; color: var(--v3-accent-dark); font-size: 9.5px; font-weight: 750; }
.health-workout-duration { color: var(--v3-text-2); font-size: 12px; font-weight: 750; }
.health-workout-chevron { color: var(--v3-text-3); font-size: 10px; }
.health-no-workouts { padding: 18px; color: var(--v3-text-2); text-align: center; font-size: 12.5px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.health-no-workouts > i { color: var(--v3-accent-dark); font-size: 19px; }
.health-no-workouts strong { color: var(--v3-text); font-size: 13px; }
.health-no-workouts span { max-width: 330px; line-height: 1.5; }
.health-no-workouts .btn { margin-top: 5px; max-width: 220px; }

.health-privacy { margin: 16px 0 28px; padding: 14px; display: flex; gap: 11px; align-items: flex-start; box-shadow: none; }
.health-privacy > i { margin-top: 2px; color: var(--v3-success); }
.health-privacy p { color: var(--v3-text-2); font-size: 11.5px; line-height: 1.5; }
.health-privacy strong { color: var(--v3-text); }

.health-sharing { margin: 16px 0 28px; padding: 17px; }
.health-sharing-head { display: flex; align-items: center; gap: 12px; }
.health-sharing-icon { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; color: var(--v3-accent-dark); background: var(--v3-accent-soft); }
.health-sharing-head span { color: var(--v3-text-2); font-size: 9.5px; font-weight: 850; letter-spacing: 1px; }
.health-sharing-head h3 { margin-top: 2px; font-size: 15px; }
.health-sharing > p { margin: 12px 0; color: var(--v3-text-2); font-size: 12px; line-height: 1.5; }
.health-sharing-scope { margin: 13px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.health-sharing-scope span { color: var(--v3-text-2); font-size: 10.5px; font-weight: 650; }
.health-sharing-scope i { width: 15px; color: var(--v3-success); }
.health-sharing .btn + .btn { margin-top: 8px; }
.health-revoke-btn { color: var(--v3-danger); background: var(--v3-danger-soft); }
.health-sharing small { display: block; margin-top: 10px; color: var(--v3-text-2); font-size: 10px; line-height: 1.4; text-align: center; }
.health-sharing small.is-error { color: var(--v3-danger); font-weight: 650; }

/* ---------- Detalle de actividad de salud ---------- */

.health-detail-hero {
    margin-top: 8px;
    padding: 24px 20px 22px;
    text-align: center;
    overflow: hidden;
    position: relative;
    background: linear-gradient(155deg, var(--v3-surface), var(--v3-accent-soft));
}

.health-detail-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 13px;
    border-radius: 21px;
    display: grid;
    place-items: center;
    color: var(--v3-on-accent);
    background: var(--v3-accent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--v3-accent) 28%, transparent);
    font-size: 25px;
}

.health-detail-hero h1 { margin-top: 13px; font-size: 24px; line-height: 1.12; letter-spacing: -0.6px; }
.health-detail-hero > p { margin-top: 6px; color: var(--v3-text-2); font-size: 12px; text-transform: capitalize; }

.health-detail-duration { margin-top: 22px; display: flex; flex-direction: column; align-items: center; }
.health-detail-duration strong { font-size: 48px; line-height: .95; letter-spacing: -2px; }
.health-detail-duration span { margin-top: 7px; color: var(--v3-text-2); font-size: 10px; font-weight: 850; letter-spacing: 1.2px; text-transform: uppercase; }

.health-detail-metrics { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.health-detail-metric { min-height: 126px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; }
.health-detail-metric i { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--v3-accent-dark); background: var(--v3-accent-soft); }
.health-detail-metric span { margin-top: auto; color: var(--v3-text-2); font-size: 10.5px; font-weight: 700; }
.health-detail-metric strong { margin-top: 4px; font-size: 19px; line-height: 1.1; }

.health-detail-card { margin-top: 12px; padding: 17px; }
.health-detail-card > h2 { margin-bottom: 5px; font-size: 14px; }
.health-detail-row { padding: 13px 0; border-bottom: 1px solid var(--v3-border); display: flex; align-items: center; gap: 12px; }
.health-detail-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.health-detail-row-icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; color: var(--v3-accent-dark); background: var(--v3-accent-soft); }
.health-detail-row > div:last-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.health-detail-row span { color: var(--v3-text-2); font-size: 10.5px; }
.health-detail-row strong { font-size: 12.5px; }

.health-detail-note { margin: 12px 0 28px; padding: 14px; display: flex; align-items: flex-start; gap: 11px; box-shadow: none; }
.health-detail-note i { margin-top: 2px; color: var(--v3-accent-dark); }
.health-detail-note p { color: var(--v3-text-2); font-size: 11px; line-height: 1.5; }

.health-route-consent { margin: 12px 0; padding: 12px; border: 1px solid var(--v3-border); border-radius: 14px; display: flex; align-items: flex-start; gap: 10px; background: var(--v3-surface-2); cursor: pointer; }
.health-route-consent input { width: 19px; height: 19px; margin-top: 1px; accent-color: var(--v3-accent); }
.health-route-consent span { display: flex; flex-direction: column; gap: 3px; }
.health-route-consent strong { font-size: 12px; }
.health-route-consent small { color: var(--v3-text-2); font-size: 10.5px; line-height: 1.4; }
.health-detail-loading { margin: 12px 0; min-height: 72px; padding: 16px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--v3-text-2); background: var(--v3-surface-2); font-size: 11.5px; }
.health-detail-loading[hidden],
.health-detail-empty[hidden] { display: none !important; }
.health-detail-loading i { color: var(--v3-accent-dark); }
.health-detail-advanced { margin-top: 12px; }
.health-detail-metrics-advanced { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.health-detail-metrics-advanced .health-detail-metric { min-height: 112px; }
.health-detail-card-head { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.health-detail-card-head > div { min-width: 0; }
.health-detail-card-head span { color: var(--v3-text-2); font-size: 9px; font-weight: 850; letter-spacing: .8px; text-transform: uppercase; }
.health-detail-card-head h2 { margin-top: 3px; font-size: 15px; }
.health-text-btn { padding: 5px 0; border: 0; color: var(--v3-accent-dark); background: transparent; font-size: 10.5px; font-weight: 800; }
.health-route-preview { position: relative; min-height: 230px; overflow: hidden; border-radius: 15px; background: linear-gradient(145deg, var(--v3-accent-soft), var(--v3-surface-2)); }
.health-route-preview::before { content: ''; position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(var(--v3-border) 1px, transparent 1px), linear-gradient(90deg, var(--v3-border) 1px, transparent 1px); background-size: 28px 28px; }
.health-route-preview > svg { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); overflow: visible; }
.health-route-preview > svg polyline { fill: none; stroke: var(--v3-accent-dark); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.health-route-preview.has-map::before { display: none; }
.health-route-preview .leaflet-control-attribution { font-size: 7px; }
.health-route-preview .leaflet-control-zoom a { color: #263238; }
.health-route-marker { position: absolute; width: 10px; height: 10px; border: 3px solid white; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 1px 7px rgb(0 0 0 / 22%); }
.health-route-marker.start { background: #27ae60; }
.health-route-marker.end { background: #e8554e; }
#healthDetailRouteHelp { display: block; margin-top: 10px; color: var(--v3-text-2); font-size: 10px; line-height: 1.45; }
.health-mini-chart { min-height: 145px; padding: 8px 0 0; }
.health-mini-chart svg { width: 100%; height: 130px; overflow: visible; }
.health-mini-chart .chart-area { opacity: .14; fill: var(--v3-accent); }
.health-mini-chart .chart-line { fill: none; stroke: var(--v3-accent-dark); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.health-chart-labels { display: flex; justify-content: space-between; color: var(--v3-text-2); font-size: 9.5px; }
.health-zones { margin-top: 15px; display: grid; gap: 9px; }
.health-zone { display: grid; grid-template-columns: 28px minmax(0, 1fr) 52px; align-items: center; gap: 8px; }
.health-zone > span { color: var(--v3-text-2); font-size: 9.5px; font-weight: 800; }
.health-zone-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--v3-surface-2); }
.health-zone-track i { display: block; height: 100%; border-radius: inherit; }
.health-zone strong { text-align: right; font-size: 9.5px; }
.health-zone:nth-child(1) i { background: #8bc9db; }.health-zone:nth-child(2) i { background: #5dbb88; }.health-zone:nth-child(3) i { background: #dcc85b; }.health-zone:nth-child(4) i { background: #e69a4e; }.health-zone:nth-child(5) i { background: #df5b58; }
.health-laps { display: grid; }
.health-lap { padding: 11px 0; border-bottom: 1px solid var(--v3-border); display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; }
.health-lap:last-child { border-bottom: 0; }
.health-lap > span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--v3-accent-dark); background: var(--v3-accent-soft); font-size: 10px; font-weight: 850; }
.health-lap div { display: flex; flex-direction: column; gap: 2px; }
.health-lap small { color: var(--v3-text-2); font-size: 9.5px; }
.health-lap strong { font-size: 11px; }
.health-detail-empty { margin: 12px 0; padding: 16px; display: flex; gap: 12px; align-items: flex-start; box-shadow: none; }
.health-detail-empty > i { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--v3-accent-dark); background: var(--v3-accent-soft); }
.health-detail-empty strong { font-size: 11.5px; }.health-detail-empty p { margin-top: 4px; color: var(--v3-text-2); font-size: 10.5px; line-height: 1.4; }
.health-sport-summary { display: grid; gap: 0; }
.health-sport-row { padding: 11px 0; border-bottom: 1px solid var(--v3-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.health-sport-row:last-child { border-bottom: 0; }
.health-sport-row span { color: var(--v3-text-2); font-size: 10.5px; }
.health-sport-row strong { text-align: right; font-size: 11.5px; }
.health-segment-list { display: grid; gap: 7px; }
.health-segment { padding: 11px; border-radius: 12px; display: grid; grid-template-columns:minmax(0,1fr) auto; gap: 10px; background: var(--v3-surface-2); }
.health-segment strong { font-size: 11px; }.health-segment small { display: block; margin-top: 3px; color: var(--v3-text-2); font-size: 9.5px; }.health-segment > span { color: var(--v3-accent-dark); font-size: 11px; font-weight: 850; }

/* Selector de tema demo */
.theme-row {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    align-items: center;
}

.theme-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid transparent;
    transition: transform 0.15s ease;
}

.theme-swatch.active { border-color: var(--v3-text); transform: scale(1.08); }

/* ---------- Subvistas (pagos, progreso, notificaciones) ---------- */

.subview {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--v3-bg);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    padding: 0 20px 40px;
}

.subview.open { transform: translateX(0); }

.subview.keeps-bottom-nav {
    padding-bottom: calc(122px + env(safe-area-inset-bottom));
}

.subview .app-inner { max-width: 480px; margin: 0 auto; }

.subview-head {
    position: sticky;
    top: 0;
    background: color-mix(in srgb, var(--v3-bg) 88%, transparent);
    backdrop-filter: blur(14px);
    padding: calc(14px + env(safe-area-inset-top)) 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 5;
}

.subview-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }

.row-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--v3-border);
}

.row-item:last-child { border-bottom: none; }

.row-item .ri-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: var(--v3-surface-2);
    color: var(--v3-text-2);
}

.row-item .ri-icon.success { background: var(--v3-success-soft); color: var(--v3-success); }
.row-item .ri-icon.accent { background: var(--v3-accent-soft); color: var(--v3-accent-dark); }
.row-item .ri-icon.warning { background: var(--v3-warning-soft); color: var(--v3-warning); }
.row-item .ri-icon.danger { background: var(--v3-danger-soft); color: var(--v3-danger); }

.row-item .title { font-size: 13.5px; font-weight: 700; }
.row-item .sub { font-size: 12px; color: var(--v3-text-2); margin-top: 1px; }
.row-item .right { margin-left: auto; text-align: right; }
.row-item .amount { font-size: 14px; font-weight: 800; }

.paquetes-title {
    margin-top: 18px;
}

.pago-planes-title {
    margin-top: 8px;
}

.pago-planes-title > span {
    color: var(--v3-text-2);
    font-size: 12px;
    font-weight: 700;
}

.pago-planes-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.pago-plan-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px;
    margin-top: 8px;
}

.pago-planes-stack .pago-plan-card {
    margin-top: 0;
}

.pago-plan-copy {
    min-width: 0;
}

.pago-plan-eyebrow {
    color: var(--v3-text-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .35px;
}

.pago-plan-name {
    font-size: 18px;
    font-weight: 850;
    line-height: 1.2;
    margin-top: 3px;
}

.pago-plan-price {
    color: var(--v3-text);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.2;
    margin-top: 7px;
}

.pago-plan-detail {
    color: var(--v3-text-2);
    font-size: 12.5px;
    line-height: 1.35;
    margin-top: 4px;
}

.pago-plan-card > .pill {
    flex: 0 0 auto;
}

.paquetes-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.paquete-card {
    padding: 14px;
}

.paquete-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.paquete-name {
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.paquete-range {
    font-size: 11.5px;
    color: var(--v3-text-2);
    margin-top: 1px;
}

.paquete-head .pill {
    margin-left: auto;
    flex: 0 0 auto;
}

.paquete-counter {
    font-size: 20px;
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: -0.3px;
    margin-top: 14px;
}

.paquete-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--v3-surface-2);
    overflow: hidden;
    margin-top: 10px;
}

.paquete-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--v3-accent), var(--v3-secondary));
}

.paquete-activity-quotas {
    border-top: 1px solid var(--v3-border);
    margin-top: 14px;
    padding-top: 12px;
}

.paquete-activity-quotas-title {
    color: var(--v3-text-2);
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.paquete-activity-quotas-list {
    display: grid;
    gap: 7px;
    margin-top: 8px;
}

.paquete-activity-quota {
    align-items: center;
    display: flex;
    font-size: 12px;
    gap: 10px;
    justify-content: space-between;
}

.paquete-activity-quota span {
    color: var(--v3-text-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.paquete-activity-quota strong {
    color: var(--v3-text);
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 800;
}

.paquete-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    margin-top: 10px;
    color: var(--v3-text-2);
    font-size: 11.5px;
}

.paquete-chips {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.paquete-chips span {
    max-width: 92px;
    border-radius: 999px;
    background: var(--v3-accent-soft);
    color: var(--v3-accent-dark);
    padding: 4px 8px;
    font-size: 10.5px;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-list-grid {
    display: grid;
    gap: 14px;
}

.news-list-card {
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    box-shadow: var(--v3-shadow);
    color: var(--v3-text);
    overflow: hidden;
    padding: 0;
    text-align: left;
    transition: border-color .18s ease, transform .18s ease;
    width: 100%;
}

.news-list-card:active {
    border-color: color-mix(in srgb, var(--v3-accent) 42%, var(--v3-border));
    transform: scale(.99);
}

.news-list-media {
    align-items: center;
    background: linear-gradient(135deg, var(--v3-accent), var(--v3-secondary));
    color: var(--v3-accent-dark);
    display: flex;
    font-size: 24px;
    height: 168px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.news-list-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.news-list-media.show-full-image {
    height: auto;
    min-height: 0;
    background: var(--v3-surface-2);
}

.news-list-media.show-full-image img {
    display: block;
    height: auto;
    object-fit: contain;
    position: relative;
}

.news-list-media.has-image .news-placeholder { display: none; }

.news-list-content {
    display: grid;
    gap: 7px;
    padding: 14px 15px 16px;
}

.news-list-meta {
    align-items: center;
    color: var(--v3-text-3);
    display: flex;
    font-size: 10.5px;
    font-weight: 700;
    gap: 8px;
    justify-content: space-between;
}

.news-list-category {
    background: var(--v3-accent-soft);
    border-radius: 999px;
    color: var(--v3-accent-dark);
    padding: 4px 8px;
}

.news-list-title-row {
    align-items: start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.news-list-title-row h3 {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.news-list-title-row i {
    color: var(--v3-text-3);
    flex: 0 0 auto;
    font-size: 12px;
    margin-top: 4px;
}

.news-list-content p {
    color: var(--v3-text-2);
    display: -webkit-box;
    font-size: 12.5px;
    line-height: 1.45;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.stack-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.objective-card,
.document-card,
.routine-card {
    padding: 16px;
}

.routine-summary {
    padding: 16px;
    margin: 8px 0 12px;
}

.routine-summary-kicker {
    color: var(--v3-accent-dark);
    font-size: 11.5px;
    font-weight: 850;
    text-transform: uppercase;
}

.routine-summary h3 {
    font-size: 18px;
    line-height: 1.15;
    margin: 4px 0 0;
}

.routine-summary p {
    color: var(--v3-text-2);
    font-size: 12.5px;
    line-height: 1.35;
    margin: 5px 0 0;
}

.routine-summary-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.routine-summary-stats div {
    border: 1px solid var(--v3-border);
    border-radius: 14px;
    padding: 9px 8px;
    background: var(--v3-surface-2);
}

.routine-summary-stats strong {
    display: block;
    font-size: 17px;
    line-height: 1;
}

.routine-summary-stats span {
    color: var(--v3-text-2);
    display: block;
    font-size: 10.5px;
    font-weight: 750;
    margin-top: 4px;
}

.routine-summary-next {
    align-items: center;
    background: var(--v3-accent-soft);
    border-radius: 14px;
    color: var(--v3-accent-deep);
    display: flex;
    font-size: 12px;
    font-weight: 800;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 10px;
}

.routine-summary-picker-label {
    color: var(--v3-text-2);
    font-size: 11px;
    font-weight: 750;
    margin-top: 12px;
}

.routine-day-picker {
    display: flex;
    gap: 7px;
    margin-top: 8px;
    overflow-x: auto;
    padding: 1px 1px 3px;
    scrollbar-width: none;
}

.routine-day-picker::-webkit-scrollbar { display: none; }

.routine-day-picker button {
    align-items: center;
    background: var(--v3-surface-2);
    border: 1px solid var(--v3-border);
    border-radius: 13px;
    color: var(--v3-text-2);
    display: flex;
    flex: 1 0 112px;
    gap: 8px;
    min-height: 46px;
    padding: 8px 10px;
    text-align: left;
}

.routine-day-picker button > span {
    align-items: center;
    background: var(--v3-surface);
    border-radius: 9px;
    color: var(--v3-text-2);
    display: flex;
    flex: 0 0 28px;
    font-size: 11px;
    font-weight: 900;
    height: 28px;
    justify-content: center;
}

.routine-day-picker button > strong {
    font-size: 11.5px;
    font-weight: 850;
    line-height: 1.15;
}

.routine-day-picker button.active {
    background: var(--v3-accent-soft);
    border-color: color-mix(in srgb, var(--v3-accent) 38%, var(--v3-border));
    color: var(--v3-accent-deep);
}

.routine-day-picker button.active > span {
    background: var(--v3-accent);
    color: var(--v3-on-accent);
}

.routine-tabs {
    background: var(--v3-surface-2);
    border: 1px solid var(--v3-border);
    border-radius: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin: 0 0 12px;
    padding: 4px;
}

.routine-tabs button {
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--v3-text-2);
    font-size: 12.5px;
    font-weight: 800;
    padding: 9px 10px;
}

.routine-tabs button.active {
    background: var(--v3-surface);
    color: var(--v3-text);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.objective-top,
.document-top,
.routine-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.objective-icon,
.document-icon,
.routine-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--v3-accent-soft);
    color: var(--v3-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.objective-icon.success { background: var(--v3-success-soft); color: var(--v3-success); }
.objective-icon.warning { background: var(--v3-warning-soft); color: var(--v3-warning); }
.objective-icon.danger { background: var(--v3-danger-soft); color: var(--v3-danger); }
.document-icon.pdf { background: var(--v3-danger-soft); color: var(--v3-danger); }

.objective-title,
.document-title,
.routine-title {
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.25;
}

.objective-sub,
.document-sub,
.routine-sub {
    font-size: 12.5px;
    color: var(--v3-text-2);
    margin-top: 3px;
}

.routine-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.routine-meta span,
.routine-chip {
    border-radius: 999px;
    background: var(--v3-surface-2);
    color: var(--v3-text-2);
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 750;
}

.routine-notes {
    margin-top: 12px;
    border-radius: 14px;
    background: var(--v3-accent-soft);
    color: var(--v3-accent-deep);
    padding: 11px 12px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 650;
}

.routine-photo-content {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.routine-photo-copy {
    border-radius: 14px;
    background: var(--v3-accent-soft);
    color: var(--v3-accent-deep);
    padding: 12px 13px;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-line;
}

.routine-photo-gallery {
    display: grid;
    gap: 12px;
}

.routine-photo-sheet {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--v3-border);
    border-radius: 16px;
    background: var(--v3-surface-2);
    color: var(--v3-text-2);
    font: inherit;
    text-decoration: none;
    text-align: left;
    cursor: zoom-in;
}

.routine-photo-sheet:disabled { cursor: wait; }

.routine-photo-sheet img {
    display: block;
    width: 100%;
    max-height: 620px;
    object-fit: contain;
    background: #fff;
}

.routine-photo-sheet.is-loading img,
.routine-photo-sheet img[hidden] {
    display: none !important;
}

.routine-photo-loading {
    display: grid;
    min-height: 220px;
    place-content: center;
    gap: 10px;
    color: var(--v3-text-2);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.routine-photo-loading i {
    color: var(--v3-accent);
    font-size: 22px;
}

.routine-photo-sheet > span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 800;
}

.routine-photo-empty {
    padding: 18px;
    border: 1px dashed var(--v3-border);
    border-radius: 14px;
    color: var(--v3-text-2);
    font-size: 12px;
    text-align: center;
}

.routine-photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: rgba(3, 7, 18, .97);
    color: #fff;
    opacity: 0;
    transition: opacity .18s ease;
}

.routine-photo-viewer[hidden] { display: none; }
.routine-photo-viewer.open { opacity: 1; }

.routine-photo-viewer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: max(14px, env(safe-area-inset-top)) 16px 12px;
    background: linear-gradient(to bottom, rgba(3, 7, 18, .92), transparent);
    position: relative;
    z-index: 2;
}

.routine-photo-viewer-head strong,
.routine-photo-viewer-head span { display: block; }
.routine-photo-viewer-head strong { font-size: 14px; }
.routine-photo-viewer-head span { margin-top: 3px; color: rgba(255,255,255,.66); font-size: 10.5px; }
.routine-photo-viewer-head button,
.routine-photo-viewer-controls button {
    display: grid;
    min-width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 13px;
    background: rgba(255,255,255,.10);
    color: #fff;
    font: inherit;
}

.routine-photo-viewer-stage {
    position: relative;
    display: grid;
    min-height: 0;
    overflow: hidden;
    place-items: center;
    touch-action: none;
    cursor: grab;
}

.routine-photo-viewer-stage:active { cursor: grabbing; }
.routine-photo-viewer-stage img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.routine-photo-viewer-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px max(14px, env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(3, 7, 18, .94), transparent);
    position: relative;
    z-index: 2;
}

.routine-photo-viewer-controls button:nth-child(2) {
    display: block;
    padding: 0 16px;
    font-size: 11px;
    font-weight: 800;
}

.routine-day-group {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--v3-border);
}

.routine-day-group:first-child { margin-top: 10px; padding-top: 0; border-top: 0; }

.routine-day-heading {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 0 2px 8px;
}

.routine-day-heading > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    background: var(--v3-accent-soft);
    color: var(--v3-accent-dark);
    font-size: 12px;
    font-weight: 900;
}

.routine-day-heading strong,
.routine-day-heading small { display: block; }
.routine-day-heading strong { font-size: 13px; }
.routine-day-heading small { margin-top: 2px; color: var(--v3-text-2); font-size: 10.5px; }
.routine-day-heading em { color: var(--v3-text-2); font-size: 10.5px; font-style: normal; font-weight: 750; }
.routine-day-group > .routine-block { margin-top: 7px; }

.routine-block {
    margin-top: 8px;
    border: 1px solid var(--v3-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--v3-surface);
}

.routine-block-head {
    padding: 12px 13px;
    border: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    color: inherit;
    text-align: left;
}

.routine-block-title {
    font-size: 13px;
    font-weight: 850;
}

.routine-block-sub {
    color: var(--v3-text-2);
    font-size: 11.5px;
    margin-top: 2px;
}

.routine-block-actions {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    flex-shrink: 0;
}

.routine-block-actions i {
    color: var(--v3-text-2);
    font-size: 11px;
    transition: transform .18s ease;
}

.routine-block.open .routine-block-actions i {
    transform: rotate(180deg);
}

.routine-block-body {
    border-top: 1px solid var(--v3-border);
    display: none;
    padding: 2px 12px;
    background: var(--v3-surface);
}

.routine-block.open .routine-block-body {
    display: block;
}

.routine-exercise {
    appearance: none;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    min-height: 66px;
    margin: 0;
    padding: 9px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: 100%;
}

.routine-exercise.has-exercise-media { grid-template-columns: 30px 50px minmax(0, 1fr) 16px; }
.routine-exercise:active { opacity: .72; }

.routine-exercise + .routine-exercise { border-top: 1px solid var(--v3-border); }

.routine-exercise.empty {
    display: block;
    min-height: 0;
    margin: 0;
}

.routine-exercise-number {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--v3-border);
    border-radius: 50%;
    background: var(--v3-surface-2);
    color: var(--v3-text);
    font-size: 11px;
    font-weight: 900;
}

.routine-exercise-media {
    align-items: center;
    background: linear-gradient(145deg, var(--v3-accent-soft), var(--v3-surface-2));
    border: 1px solid var(--v3-border);
    border-radius: 11px;
    color: var(--v3-accent-dark);
    display: flex;
    height: 50px;
    justify-content: center;
    overflow: hidden;
    width: 50px;
}

.routine-exercise-media > i { font-size: 17px; opacity: .68; }

.routine-exercise-media.has-media {
    background: #fff;
}

.routine-exercise-media img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.routine-exercise-body {
    flex: 1;
    min-width: 0;
}

.routine-exercise-title {
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
}

.routine-prescription {
    color: var(--v3-text-2);
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}

.routine-exercise-loads {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.routine-exercise-loads span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 8px;
    background: var(--v3-accent-soft);
    color: var(--v3-accent-deep);
    white-space: nowrap;
}

.routine-exercise-loads small { font-size: 9px; font-weight: 750; opacity: .72; }
.routine-exercise-loads b { font-size: 10px; font-weight: 900; }


.routine-exercise-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.routine-exercise-note {
    display: -webkit-box;
    overflow: hidden;
    color: var(--v3-text-2);
    font-size: 11px;
    line-height: 1.35;
    margin-top: 4px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.routine-exercise-open { color: var(--v3-text-2); font-size: 11px; opacity: .6; }

.routine-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px 0 0;
    background: rgba(15, 23, 42, .5);
    opacity: 0;
    transition: opacity .2s ease;
}

.routine-sheet-overlay[hidden] { display: none; }
.routine-sheet-overlay.open { opacity: 1; }

.routine-sheet {
    position: relative;
    width: min(100%, 520px);
    max-height: min(84dvh, 760px);
    padding: 12px 18px calc(22px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: var(--v3-surface);
    box-shadow: 0 -18px 50px rgba(15, 23, 42, .2);
    overflow-y: auto;
    transform: translateY(32px);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.routine-sheet-overlay.open .routine-sheet { transform: translateY(0); }
.routine-sheet-handle { width: 42px; height: 4px; margin: 0 auto 16px; border-radius: 999px; background: var(--v3-border); }
.routine-sheet-close { position: absolute; top: 18px; right: 18px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 11px; background: var(--v3-surface-2); color: var(--v3-text-2); }
.routine-sheet-media { height: 190px; margin: 0 42px 16px 0; overflow: hidden; border-radius: 17px; background: var(--v3-surface-2); }
.routine-sheet-media img { width: 100%; height: 100%; object-fit: contain; }
.routine-sheet-kicker { color: var(--v3-accent-dark); font-size: 10.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.routine-sheet h2 { margin: 5px 42px 0 0; color: var(--v3-text); font-size: 21px; line-height: 1.2; }
.routine-sheet-prescription { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 11px 12px; border-radius: 13px; background: var(--v3-accent-soft); color: var(--v3-accent-deep); font-size: 13px; font-weight: 850; }
.routine-sheet-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.routine-sheet-meta span { padding: 6px 9px; border-radius: 999px; background: var(--v3-surface-2); color: var(--v3-text-2); font-size: 11px; font-weight: 750; }
.routine-sheet-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--v3-border); }
.routine-sheet-section strong { display: block; color: var(--v3-text); font-size: 12px; }
.routine-sheet-section p { margin: 6px 0 0; color: var(--v3-text-2); font-size: 13px; line-height: 1.55; white-space: pre-line; }
.routine-sheet-empty { margin-top: 16px; padding: 16px; border-radius: 14px; background: var(--v3-surface-2); color: var(--v3-text-2); font-size: 12px; text-align: center; }

.routine-load-panel {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--v3-border);
}

.routine-load-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.routine-load-heading > div { display: grid; gap: 3px; }
.routine-load-heading span { color: var(--v3-accent-dark); font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.routine-load-heading strong { color: var(--v3-text); font-size: 16px; }
.routine-load-heading em { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 999px; background: var(--v3-success-soft, var(--v3-accent-soft)); color: var(--v3-success, var(--v3-accent-dark)); font-size: 10px; font-style: normal; font-weight: 850; }
.routine-load-help { margin: 7px 0 14px; color: var(--v3-text-2); font-size: 12px; line-height: 1.4; }

.routine-load-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 10px;
}

.routine-load-form label { display: grid; gap: 6px; }
.routine-load-form label > span { color: var(--v3-text-2); font-size: 10px; font-weight: 800; }
.routine-load-form input,
.routine-load-form select {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--v3-border);
    border-radius: 13px;
    background: var(--v3-surface-2);
    color: var(--v3-text);
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    outline: none;
}
.routine-load-form input:focus,
.routine-load-form select:focus { border-color: var(--v3-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-accent) 15%, transparent); }
.routine-load-note { grid-column: 1 / -1; }
.routine-load-save {
    grid-column: 1 / -1;
    min-height: 46px;
    border: 0;
    border-radius: 14px;
    background: var(--v3-accent);
    color: var(--v3-on-accent, #fff);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
}
.routine-load-save:disabled { cursor: default; opacity: .55; }
.routine-load-loading { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 15px; border-radius: 14px; background: var(--v3-surface-2); color: var(--v3-text-2); font-size: 12px; }
.routine-load-loading i { color: var(--v3-accent); animation: spin .9s linear infinite; }
.routine-load-error { margin: 0 0 10px; padding: 10px 12px; border-radius: 11px; background: rgba(239, 68, 68, .1); color: #b91c1c; font-size: 11px; font-weight: 750; }
.routine-load-closed { margin: 10px 0 0; color: var(--v3-text-2); font-size: 11px; line-height: 1.4; }
.routine-load-history { display: grid; gap: 0; margin-top: 18px; }
.routine-load-history > strong { margin-bottom: 5px; color: var(--v3-text); font-size: 12px; }
.routine-load-history > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--v3-border); font-size: 12px; }
.routine-load-history > div:last-child { border-bottom: 0; }
.routine-load-history span { color: var(--v3-text-2); }
.routine-load-history b { color: var(--v3-text); }

@media (max-width: 390px) {
    .routine-exercise { grid-template-columns: 26px minmax(0, 1fr) 14px; gap: 7px; }
    .routine-exercise.has-exercise-media { grid-template-columns: 26px 46px minmax(0, 1fr) 14px; }
    .routine-exercise-number { width: 25px; height: 25px; font-size: 10px; }
    .routine-exercise-media { width: 46px; height: 46px; border-radius: 10px; }
}

.objective-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.objective-progress .track {
    height: 7px;
    flex: 1;
    border-radius: 999px;
    background: var(--v3-surface-2);
    overflow: hidden;
}

.objective-progress .fill {
    height: 100%;
    border-radius: inherit;
    background: var(--v3-accent);
}

.objective-progress .fill.success { background: var(--v3-success); }
.objective-progress .fill.warning { background: var(--v3-warning); }
.objective-progress .fill.danger { background: var(--v3-danger); }
.objective-progress .pct {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--v3-text-2);
    min-width: 36px;
    text-align: right;
}

.alert-card {
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--v3-radius);
    font-size: 12.5px;
    font-weight: 600;
}

.alert-card.warning {
    background: var(--v3-warning-soft);
    color: var(--v3-warning);
    border: 1px solid color-mix(in srgb, var(--v3-warning) 22%, transparent);
}

.alert-card.danger {
    background: var(--v3-danger-soft);
    color: var(--v3-danger);
    border: 1px solid color-mix(in srgb, var(--v3-danger) 22%, transparent);
}

.upload-panel {
    padding: 16px;
    margin-top: 8px;
}

.field.compact {
    margin: 12px 0 0;
}

.field.compact input {
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
}

.doc-file-label {
    margin-top: 10px;
    font-size: 12px;
    color: var(--v3-text-2);
    text-align: center;
}

.document-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.document-actions .btn {
    flex: 1;
}

/* Detalle de clase: información primero, superficies y acento del gimnasio. */
#sv-clase-detalle,
#sv-novedad-detalle {
    background: var(--v3-bg);
    padding: 0;
    overflow: hidden;
}

/* El pie ocupa su propia fila: queda visible sin tapar el contenido al scrollear. */
#sv-clase-detalle > .app-inner,
#sv-novedad-detalle > .app-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: 0;
}

#sv-clase-detalle .subview-head,
#sv-novedad-detalle .subview-head {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    left: 16px;
    margin: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
}

#claseDetalle {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#clasePullRefresh {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    left: 76px;
    right: 16px;
    z-index: 5;
    overflow: hidden;
    margin: 0;
    padding-inline: 8px;
    border-radius: 24px;
    background: var(--v3-surface);
    color: var(--v3-text);
}

#clasePullRefresh.is-visible {
    height: 48px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}

#claseDetalle > .class-detail-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 0 20px 24px;
    scroll-padding-block: calc(76px + env(safe-area-inset-top)) 16px;
}

/* Sin imagen, dejar solo el espacio necesario para Volver. */
#claseDetalle > .class-detail-content:not(:has(.class-detail-media)) {
    padding-top: calc(84px + env(safe-area-inset-top));
}

#claseDetalle > .class-detail-actions {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--v3-border);
    background: var(--v3-bg);
}

#claseDetalle:not(:has(> .class-detail-actions > .btn)) > .class-detail-content {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

#sv-clase-detalle .subview-head .icon-btn,
#sv-novedad-detalle .subview-head .icon-btn {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--v3-border);
    border-radius: 50%;
    background: var(--v3-surface);
    box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
    color: var(--v3-text);
}

.class-detail-hero { margin-top: 8px; }

#claseDetalle .class-detail-hero { margin-top: 0; }

#claseDetalle .class-detail-media {
    height: calc(clamp(240px, 66vw, 280px) + env(safe-area-inset-top));
    margin: 0 -20px;
    border-radius: 0;
}

#claseDetalle .class-detail-panel {
    position: relative;
    z-index: 1;
    margin: 0 -20px;
    padding: 0 20px;
    background: var(--v3-bg);
}

#claseDetalle .class-detail-media + .class-detail-panel {
    margin-top: -24px;
    padding-top: 24px;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -8px 24px rgb(0 0 0 / 6%);
    min-height: calc(100% - 60px);
}

#claseDetalle .class-detail-hero-image {
    transform: translate3d(0, var(--class-image-offset, 0px), 0);
}

.class-detail-media {
    position: relative;
    height: clamp(140px, 41vw, 180px);
    overflow: hidden;
    border-radius: 16px;
    background: var(--v3-surface-2);
    margin-bottom: 20px;
}

.class-detail-hero-image {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    object-fit: cover;
    transition: opacity 180ms ease-out;
}

.class-detail-hero-image.is-loaded { opacity: 1; }

.class-detail-hero h1 {
    color: var(--v3-text);
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.8px;
    overflow-wrap: anywhere;
}

.class-detail-date {
    margin-top: 8px;
    color: var(--v3-text-2);
    font-size: 15px;
    line-height: 1.5;
}

.class-detail-time {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    color: var(--v3-text);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.class-detail-time > i { font-size: 22px; }
.class-detail-time > span { white-space: nowrap; }

.class-detail-duration {
    border-left: 1px solid var(--v3-border);
    padding-left: 12px;
    color: var(--v3-text-2);
    font-size: 15px;
    font-weight: 500;
}

.class-detail-status,
.class-detail-availability {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--v3-border);
    border-radius: 14px;
    background: var(--v3-surface);
    color: var(--v3-text);
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.class-detail-status { font-weight: 750; }
.class-detail-status > i,
.class-detail-availability > i { flex: 0 0 22px; font-size: 20px; text-align: center; }

.class-detail-status.success {
    background: color-mix(in srgb, var(--v3-success) 8%, var(--v3-surface));
    border-color: color-mix(in srgb, var(--v3-success) 35%, var(--v3-surface));
    color: color-mix(in srgb, var(--v3-success) 55%, var(--v3-text));
}

.class-detail-status.warning {
    background: color-mix(in srgb, var(--v3-warning) 8%, var(--v3-surface));
    border-color: color-mix(in srgb, var(--v3-warning) 35%, var(--v3-surface));
    color: color-mix(in srgb, var(--v3-warning) 55%, var(--v3-text));
}

.class-detail-status.accent > i { color: var(--v3-accent-dark); }
.class-detail-availability { margin-top: 12px; }
.class-detail-availability > i { color: var(--v3-text-2); }

.class-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.class-detail-grid:has(.class-detail-metric) { margin-top: 16px; }

.class-detail-metric {
    min-width: 0;
    padding: 14px;
    border-radius: 14px;
    border-color: var(--v3-border);
    background: var(--v3-surface);
    box-shadow: none;
}

.class-detail-metric i { color: var(--v3-text-2); margin-bottom: 10px; }
.class-detail-metric .k { font-size: 13px; color: var(--v3-text-2); }
.class-detail-metric .v { font-size: 15px; font-weight: 700; line-height: 1.4; margin-top: 4px; overflow-wrap: anywhere; }

.class-detail-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.class-detail-actions:empty { display: none; }

.class-detail-actions .btn {
    min-height: 52px;
    padding: 14px 18px;
    border-radius: 14px;
    text-align: center;
    white-space: normal;
    font-size: 16px;
}

.class-detail-actions .btn.outline-danger {
    color: color-mix(in srgb, var(--v3-danger) 75%, var(--v3-text));
    border: 1px solid currentColor;
    background: var(--v3-bg);
    box-shadow: none;
}

.class-detail-actions .btn:focus-visible,
#sv-clase-detalle .subview-head .icon-btn:focus-visible {
    outline: 2px solid var(--v3-text);
    outline-offset: 3px;
}

.class-members-card { margin-top: 24px; }
.class-members-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.class-members-head h2 { font-size: 20px; font-weight: 800; }
.class-members-head .pill { min-width: 32px; justify-content: center; background: var(--v3-accent); color: var(--v3-on-accent); }

.class-members-list {
    list-style: none;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--v3-border);
    border-radius: 16px;
    background: var(--v3-surface);
}

.class-member { align-items: center; display: flex; gap: 12px; min-height: 72px; padding: 14px 0; }
.class-member + .class-member { border-top: 1px solid var(--v3-border); }

.class-member-avatar {
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--v3-accent);
    color: var(--v3-on-accent);
    font-size: 13px;
    font-weight: 800;
}

.class-member-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.class-members-status { align-items: center; color: var(--v3-text-2); display: flex; font-size: 14px; line-height: 1.5; gap: 8px; min-height: 52px; }

@media (max-width: 360px) {
    .class-detail-time { font-size: 21px; gap: 8px; }
    .class-detail-duration { font-size: 14px; padding-left: 8px; }
    .class-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .class-detail-hero-image { transition: none; }
    #claseDetalle .class-detail-hero-image { transform: none; }
}

#novedadDetalle {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-top: calc(76px + env(safe-area-inset-top));
}

.news-detail-hero {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.news-detail-media {
    flex: 0 0 auto;
    padding-top: calc(76px + env(safe-area-inset-top));
    /* El solapado ocupa este espacio y no tapa el borde inferior de un flyer. */
    padding-bottom: 24px;
    background: var(--v3-surface-2);
}

.news-detail-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: min(42svh, 360px);
}

.news-detail-body {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: calc(84px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
    background: var(--v3-bg);
    overflow-wrap: anywhere;
}

.news-detail-media + .news-detail-body {
    margin-top: -24px;
    padding-top: 24px;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -8px 24px rgb(0 0 0 / 6%);
}

.news-detail-copy :is(ul, ol) { padding-left: 20px; }

.news-detail-body h1 {
    font-size: 24px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.news-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    color: var(--v3-text-2);
    font-size: 12px;
    font-weight: 700;
}

.news-detail-copy {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--v3-text);
}

.news-detail-copy p + p { margin-top: 10px; }

.news-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(43, 39, 34, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(22px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
}

.news-modal-overlay[hidden] { display: none; }

.news-modal {
    width: min(100%, 390px);
    overflow: hidden;
    border-radius: var(--v3-radius-lg);
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    box-shadow: 0 18px 60px rgba(43, 39, 34, 0.24);
    animation: modal-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-modal-cover {
    min-height: 174px;
    position: relative;
    background: var(--v3-accent-soft);
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-modal-cover.show-full-image {
    background-repeat: no-repeat;
    background-size: contain;
}

.news-modal-cover.has-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.28), transparent 62%);
}

.news-modal-placeholder {
    width: 70px;
    height: 70px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--v3-surface) 72%, transparent);
    color: var(--v3-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.news-modal-cover.has-image .news-modal-placeholder { display: none; }

.news-modal-badge {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 2;
    border-radius: 999px;
    background: var(--v3-accent);
    color: var(--v3-on-accent);
    padding: 7px 11px;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.news-modal-body {
    padding: 20px;
}

.news-modal-body h2 {
    font-size: 22px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.15;
}

.news-modal-body p {
    margin-top: 9px;
    color: var(--v3-text-2);
    font-size: 14px;
    line-height: 1.5;
}

.news-modal-actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

/* Progreso */
.progress-hero {
    padding: 20px;
    margin-top: 14px;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
    margin-top: 16px;
}

.bar-chart .bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
}

.bar-chart .fill {
    width: 100%;
    border-radius: 8px 8px 4px 4px;
    background: var(--v3-accent-soft);
}

.bar-chart .bar.hl .fill { background: var(--v3-accent); }

.bar-chart .lbl {
    font-size: 10px;
    font-weight: 700;
    color: var(--v3-text-3);
    text-transform: uppercase;
}

/* ---------- Modal de confirmación ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(43, 39, 34, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-backdrop.open { display: flex; }

.modal-card {
    width: 100%;
    max-width: 360px;
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    box-shadow: var(--v3-shadow);
    padding: 24px 20px 20px;
    text-align: center;
    animation: modal-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-pop {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 20px;
    background: var(--v3-accent-soft);
    color: var(--v3-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.modal-icon.danger { background: var(--v3-danger-soft); color: var(--v3-danger); }
.modal-icon.warning { background: var(--v3-warning-soft); color: var(--v3-warning); }

.modal-card h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }

.modal-card p {
    font-size: 13.5px;
    color: var(--v3-text-2);
    margin-top: 6px;
    line-height: 1.5;
}

#modalDetalle { margin-top: 12px; text-align: left; }

#modalDetalle .detalle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--v3-surface-2);
    border-radius: var(--v3-radius-sm);
    padding: 10px 12px;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
}

#modalDetalle .detalle-item i { color: var(--v3-accent-dark); }

#modalDetalle .detalle-item.warning i { color: var(--v3-warning); }

.modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

.modal-actions.solo-ok { grid-template-columns: 1fr; }

.modal-actions .btn.danger-solid { background: var(--v3-danger); color: #fff; }

/* Chip de feriado en day strip */
.day-chip .feriado-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--v3-warning);
    margin: 2px auto 0;
}

/* Toast */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(20px);
    background: var(--v3-text);
    color: var(--v3-bg);
    border-radius: 999px;
    padding: 12px 22px;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 90;
    white-space: nowrap;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Login ---------- */

.login-wrap {
    max-width: 420px;
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 28px;
}

.login-logo {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    background: var(--v3-accent);
    color: var(--v3-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 18px;
}

.login-wrap h1 {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.login-wrap .sub {
    text-align: center;
    color: var(--v3-text-2);
    font-size: 13.5px;
    margin: 6px 0 30px;
}

.field { margin-bottom: 14px; }

.field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--v3-text-2);
    margin-bottom: 6px;
}

.field input {
    width: 100%;
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    border-radius: 16px;
    padding: 15px 16px;
    font-size: 15px;
    font-family: inherit;
    color: var(--v3-text);
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus {
    border-color: var(--v3-accent);
    box-shadow: 0 0 0 3px var(--v3-accent-soft);
}

.login-links {
    text-align: center;
    margin-top: 22px;
    font-size: 13px;
    color: var(--v3-text-2);
}

.login-links a {
    color: var(--v3-accent-dark);
    font-weight: 700;
    text-decoration: none;
}

/* ============================================================
   Profundidad visual compartida
   Unifica Perfil, Turnos y todas las subvistas sin alterar
   la forma ni el comportamiento de los filtros de Agenda.
   ============================================================ */

.card {
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--v3-surface) 96%, var(--v3-accent-soft)),
        color-mix(in srgb, var(--v3-surface) 84%, var(--v3-accent-soft)));
    border-color: var(--v3-border);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--v3-text) 5%, transparent),
        0 12px 30px color-mix(in srgb, var(--v3-text) 8%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}

.btn.primary {
    box-shadow:
        0 8px 20px color-mix(in srgb, var(--v3-accent) 24%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}

.btn.ghost {
    border: 1px solid var(--v3-border);
    box-shadow: inset 0 1px 0 var(--v3-highlight);
}

.icon-btn {
    background: color-mix(in srgb, var(--v3-surface) 82%, transparent);
    border-color: var(--v3-border);
    box-shadow:
        0 7px 18px color-mix(in srgb, var(--v3-text) 8%, transparent),
        inset 0 1px 0 var(--v3-highlight);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Perfil: identidad destacada + accesos como tarjetas respiradas. */
.profile-head {
    position: relative;
    isolation: isolate;
    padding: 18px;
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    background:
        radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--v3-accent) 18%, transparent), transparent 42%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--v3-surface) 94%, var(--v3-accent-soft)),
            color-mix(in srgb, var(--v3-surface) 70%, var(--v3-accent-soft)));
    box-shadow:
        0 18px 42px color-mix(in srgb, var(--v3-text) 9%, transparent),
        inset 0 1px 0 var(--v3-highlight);
    overflow: hidden;
}

.profile-head::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 120px;
    height: 120px;
    right: -42px;
    bottom: -66px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--v3-accent) 10%, transparent);
    filter: blur(2px);
}

.profile-head .avatar {
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--v3-accent) 25%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}

.profile-head h2 {
    font-size: 21px;
    line-height: 1.15;
}

.card.menu-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.menu-item {
    min-height: 66px;
    padding: 13px 14px;
    border: 1px solid var(--v3-border);
    border-radius: 17px;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--v3-surface) 96%, var(--v3-accent-soft)),
        color-mix(in srgb, var(--v3-surface) 85%, var(--v3-accent-soft)));
    box-shadow:
        0 8px 22px color-mix(in srgb, var(--v3-text) 7%, transparent),
        inset 0 1px 0 var(--v3-highlight);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.menu-item:last-child {
    border-bottom: 1px solid var(--v3-border);
}

.menu-item:active {
    transform: scale(0.985);
    background: color-mix(in srgb, var(--v3-surface) 68%, var(--v3-accent-soft));
    box-shadow: 0 3px 10px color-mix(in srgb, var(--v3-text) 6%, transparent);
}

.menu-item .mi-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 var(--v3-highlight),
        0 5px 12px color-mix(in srgb, var(--v3-accent) 10%, transparent);
}

.menu-item .chev {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--v3-surface-2) 78%, transparent);
}

/* Navegación secundaria y estados con el mismo lenguaje visual. */
.subview {
    background:
        radial-gradient(circle at 94% 3%, color-mix(in srgb, var(--v3-accent) 9%, transparent), transparent 27%),
        var(--v3-bg);
}

.subview-head {
    margin: 0 -4px 8px;
    padding-left: 4px;
    padding-right: 4px;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--v3-bg) 92%, transparent) 74%,
        transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.segment,
.routine-tabs {
    border: 1px solid var(--v3-border);
    background: color-mix(in srgb, var(--v3-surface-2) 78%, transparent);
    box-shadow:
        inset 0 1px 0 var(--v3-highlight),
        0 7px 18px color-mix(in srgb, var(--v3-text) 5%, transparent);
}

.segment button.active,
.routine-tabs button.active {
    background: color-mix(in srgb, var(--v3-accent) 14%, var(--v3-surface));
    color: var(--v3-text);
    box-shadow: none;
}

.empty-state.card,
.health-empty.card,
.health-detail-empty.card {
    background:
        radial-gradient(circle at 50% 0, color-mix(in srgb, var(--v3-accent) 11%, transparent), transparent 42%),
        linear-gradient(145deg, var(--v3-surface), color-mix(in srgb, var(--v3-surface) 76%, var(--v3-accent-soft)));
}

.empty-state .icon,
.health-empty-icon {
    border: 1px solid var(--v3-border);
    background: color-mix(in srgb, var(--v3-accent-soft) 72%, var(--v3-surface));
    color: var(--v3-accent-dark);
    box-shadow:
        0 8px 18px color-mix(in srgb, var(--v3-accent) 11%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}

/* Listados cargados por API: dejan de verse como una tabla plana. */
.card.menu-list > .row-item,
#pagosList > .row-item,
#notifList > .row-item {
    margin: 8px;
    border: 1px solid var(--v3-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--v3-surface) 84%, var(--v3-accent-soft));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--v3-text) 5%, transparent);
}

.row-item .ri-icon {
    box-shadow: inset 0 1px 0 var(--v3-highlight);
}

.pago-plan-card,
.paquete-card,
.progress-hero,
.routine-summary,
.objective-card,
.document-card,
.routine-card,
.upload-panel,
.health-metric,
.health-detail-metric {
    position: relative;
    overflow: hidden;
}

.pago-plan-card::after,
.progress-hero::after,
.routine-summary::after {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 110px;
    height: 110px;
    right: -48px;
    top: -54px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--v3-accent) 9%, transparent);
}

.credential {
    background:
        radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--v3-accent) 13%, transparent), transparent 40%),
        linear-gradient(155deg, var(--v3-surface), color-mix(in srgb, var(--v3-surface) 72%, var(--v3-accent-soft)));
}

.credential .qr {
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--v3-text) 10%, transparent),
        inset 0 1px 0 #fff;
}

.health-workout {
    border-radius: 16px;
    border-color: var(--v3-border);
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--v3-surface) 96%, var(--v3-accent-soft)),
        color-mix(in srgb, var(--v3-surface) 84%, var(--v3-accent-soft)));
    box-shadow:
        0 8px 20px color-mix(in srgb, var(--v3-text) 7%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}

.health-privacy,
.health-detail-note {
    box-shadow:
        0 8px 20px color-mix(in srgb, var(--v3-text) 5%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}

.modal-card {
    border-color: var(--v3-border);
    background: linear-gradient(155deg, var(--v3-surface), color-mix(in srgb, var(--v3-surface) 78%, var(--v3-accent-soft)));
    box-shadow:
        0 30px 70px color-mix(in srgb, var(--v3-text) 24%, transparent),
        inset 0 1px 0 var(--v3-highlight);
}

@media (prefers-reduced-motion: reduce) {
    .menu-item { transition: none; }
}

/* Acceso Studio: marca, bienvenida y formulario con jerarquía propia. */
.auth-shell {
    width: 100%;
    max-width: 440px;
    min-height: 100svh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: max(40px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
}
.auth-brand { width: 172px; height: auto; display: block; margin-bottom: 44px; }
.auth-heading { margin-bottom: 32px; }
.auth-heading h1 { font-size: clamp(28px, 8.2vw, 34px); line-height: 1.18; letter-spacing: -1.2px; font-weight: 800; }
.auth-heading p { margin-top: 14px; color: #71695F; font-size: 15px; line-height: 1.65; max-width: 330px; }
.auth-shell .field { margin-bottom: 20px; }
.auth-shell .field label { color: var(--v3-text); font-size: 13px; margin-bottom: 8px; }
.auth-shell .field input { min-height: 56px; font-size: 16px; border-radius: 16px; }
.auth-shell .field input::placeholder { color: #797267; opacity: 1; }
.auth-password { position: relative; }
.auth-password input { padding-right: 58px; }
.auth-password-toggle { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; border-radius: 12px; background: transparent; color: #71695F; font-size: 17px; display: grid; place-items: center; }
.auth-password-toggle:hover { background: var(--v3-surface-2); }
.auth-recovery { align-self: flex-end; display: block; width: fit-content; margin: -8px 0 22px auto; padding: 10px 0; font-size: 13px; font-weight: 700; color: #A54323; text-decoration: none; }
.auth-shell .auth-submit { min-height: 56px; border-radius: 16px; font-size: 16px; box-shadow: 0 4px 12px color-mix(in srgb, var(--v3-accent) 14%, transparent); }
.auth-shell .btn.loading { opacity: 1; }
.auth-help { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--v3-border); }
.auth-help strong { font-size: 13px; font-weight: 700; }
.auth-help p { margin-top: 6px; font-size: 13px; color: #71695F; line-height: 1.6; }
.auth-back { display: inline-flex; align-items: center; gap: 9px; align-self: center; min-height: 48px; margin-top: 20px; font-size: 14px; font-weight: 700; color: #A54323; text-decoration: none; }
.auth-shell button:focus-visible, .auth-shell a:focus-visible { outline: 2px solid var(--v3-text); outline-offset: 4px; }
.auth-shell .error-banner, .auth-shell .msg-banner.error { color: #A52D2A; }
.auth-shell .msg-banner.success { color: #146C50; }
@media (max-height: 650px) {
    .auth-shell { padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
    .auth-brand { margin-bottom: 24px; }
    .auth-heading { margin-bottom: 24px; }
    .auth-help { margin-top: 24px; padding-top: 18px; }
}

/* Los contenedores flex deben respetar la ocultación de novedades vacías. */
#homeNovedadesTitle[hidden], #homeNovedades[hidden] { display: none; }

/* El acceso a cambiar gimnasio solo existe para socios con más de uno. */
#changeGymMenuItem[hidden] { display: none; }

/* Los estilos flex del menú deben respetar los módulos ocultos. */
[data-module][hidden] { display: none !important; }

/* Catálogo informativo del gimnasio */
#catalogoCategorias { display:flex; gap:8px; overflow-x:auto; padding:4px 0 16px; }
.catalogo-catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding-bottom:24px; }
.catalogo-catalog-grid > .empty-state { grid-column:1 / -1; }
.catalogo-product-card { display:flex; flex-direction:column; align-items:flex-start; gap:9px; min-width:0; padding:12px; border:1px solid var(--v3-border); border-radius:18px; background:var(--v3-surface); color:var(--v3-text); text-align:left; font:inherit; cursor:pointer; }
.catalogo-product-card > strong { font-size:15px; line-height:1.35; overflow-wrap:anywhere; }
.catalogo-product-card:focus-visible { outline:2px solid var(--v3-accent); outline-offset:3px; }
.catalogo-product-image { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:12px; background:var(--v3-bg); overflow:hidden; color:var(--v3-text-2); }
.catalogo-product-image > i { font-size:36px; opacity:.4; }
.catalogo-product-image > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.catalogo-product-image.is-detail { aspect-ratio:4 / 3; margin-bottom:16px; }
.catalogo-product-category { color:var(--v3-text-2); font-size:12px; }
.catalogo-product-price { font-size:19px; font-weight:800; }
.catalogo-product-detail { padding:16px; }
.catalogo-product-detail h1 { margin:8px 0; font-size:25px; line-height:1.25; overflow-wrap:anywhere; }
.catalogo-product-detail .pill { margin-top:12px; }
.catalogo-product-description { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; margin-top:20px; color:var(--v3-text-2); }
.catalogo-reception-note { display:flex; gap:12px; margin-top:24px; padding:16px; border-radius:12px; background:var(--v3-bg); }
.catalogo-reception-note > i { padding-top:3px; color:var(--v3-accent); }
.catalogo-reception-note p { margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--v3-text-2); }
@media (max-width:340px) { .catalogo-catalog-grid { grid-template-columns:1fr; } }

/* Foto de perfil: permiso del gimnasio y vista previa antes de guardar. */
.profile-photo-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.profile-photo-button { border: 1px solid var(--v3-border); border-radius: 12px; padding: 9px 12px; background: var(--v3-surface); color: var(--v3-text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.profile-photo-button[hidden], .profile-photo-editor[hidden] { display: none !important; }
.profile-photo-button:disabled { opacity: .55; cursor: wait; }
.profile-photo-button:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 3px; }
.profile-photo-editor { padding: 20px; margin-bottom: 16px; text-align: center; }
.profile-photo-editor h3 { font-size: 17px; margin-bottom: 12px; }
.profile-photo-editor img { width: 180px; max-width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; }
.profile-photo-editor p { margin: 12px 0; font-size: 13px; color: var(--v3-text-2); }
.profile-photo-actions { display: flex; justify-content: center; gap: 10px; }
#profilePhotoSave { background: var(--v3-accent); color: var(--v3-on-accent); border-color: var(--v3-accent); }

/* Foto comunitaria: iniciales visibles hasta recibir una miniatura autorizada. */
.class-member-avatar { position: relative; overflow: hidden; }
.class-member-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.class-member-avatar img[hidden] { display: none; }


/* Cambio de gimnasio desde Inicio y Perfil */
.header .gym-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:3px; }
.header .gym-switch-label { display:inline-flex; align-items:center; gap:6px; padding:4px 7px; border:1px solid var(--v3-border); border-radius:7px; background:var(--v3-surface-2); color:var(--v3-text); font-size:11px; line-height:1.4; font-weight:600; }
.header .gym-switch-label i { color:var(--v3-text-2); font-size:10px; }
.header .gym-switch-label[hidden] { display:none; }
.gym-switch-overlay { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); }
.gym-switch-overlay[hidden] { display:none; }
.gym-switch-dialog { width:100%; max-width:420px; max-height:calc(100dvh - 40px); overflow:auto; padding:24px; border-radius:24px; background:var(--v3-surface); color:var(--v3-text); box-shadow:0 20px 60px rgba(0,0,0,.2); }
.gym-switch-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gym-switch-heading h2 { margin:0; font-size:21px; line-height:1.3; }
.gym-switch-close { flex:0 0 40px; width:40px; height:40px; border:0; border-radius:50%; background:var(--v3-surface-2); color:var(--v3-text); }
#gymSwitchDescription { margin:8px 0 20px; font-size:14px; line-height:1.5; color:var(--v3-text-2); }
.gym-switch-options { display:flex; flex-direction:column; gap:10px; }
.gym-switch-option { display:flex; align-items:center; gap:12px; width:100%; padding:16px; border:1px solid var(--v3-border); border-radius:16px; background:var(--v3-surface-2); color:var(--v3-text); text-align:left; font:inherit; cursor:pointer; }
.gym-switch-option > i { color:var(--v3-text-2); }
.gym-switch-option-name { flex:1; min-width:0; overflow-wrap:anywhere; font-size:15px; font-weight:800; }
.gym-switch-option-status { font-size:12px; font-weight:800; color:var(--v3-text); }
.gym-switch-option.is-current { border-color:var(--v3-accent); background:var(--v3-accent-soft); cursor:default; }
.gym-switch-option:disabled { opacity:1; }
.gym-switch-option.is-loading { opacity:.65; }
.gym-switch-option:focus-visible, .gym-switch-close:focus-visible { outline:2px solid var(--v3-accent); outline-offset:3px; }
.gym-switch-feedback { margin:16px 0 0; font-size:13px; line-height:1.5; color:var(--v3-text-2); }
.gym-switch-feedback:empty { display:none; }
@media (max-width:480px) { .gym-switch-dialog { padding:20px; } }

.gym-switch-dialog { outline:none; }
.gym-switch-close span { font-size:26px; line-height:1; }


/* Notificaciones: filas agrupadas como el historial de Mis clases. */
#notifList {
    overflow: hidden;
    border: 1px solid var(--v3-border);
    border-radius: 18px;
    background: var(--v3-surface);
    box-shadow: none;
}
#notifList > .row-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    color: var(--v3-text);
}
#notifList > .row-item + .row-item { border-top: 1px solid var(--v3-border); }
#notifList > .row-item[onclick]:active { background: var(--v3-surface-2); }
#notifList .ri-icon {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 18px;
}
#notifList .title { color: var(--v3-text); font-weight: 600; overflow-wrap: anywhere; }
#notifList .sub { margin-top: 4px; color: var(--v3-text-2); line-height: 1.5; overflow-wrap: anywhere; }
#notifList .notif-time { margin-top: 5px; font-size: 11px; }
#notifList .right { margin: 7px 0 0; }

/* Perfil: identidad liviana y opciones agrupadas en una superficie por sección. */
#screen-perfil .profile-head {
    flex-wrap: wrap;
    padding: 6px 0 16px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}
#screen-perfil .profile-head::after { content: none; }
#screen-perfil .profile-head .avatar { width: 72px; height: 72px; box-shadow: none; }
#screen-perfil .profile-head h2 { font-size: 20px; line-height: 1.3; }
#screen-perfil .profile-head .sub { margin-top: 5px; line-height: 1.5; }
#screen-perfil .profile-head > .profile-photo-controls + div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.profile-photo-controls { position: relative; }
.profile-photo-toggle {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 3px solid var(--v3-bg);
    border-radius: 50%;
    background: var(--v3-surface);
    color: var(--v3-text);
}
.profile-photo-toggle[hidden] { display: none; }
.profile-photo-toggle:disabled { opacity: .55; cursor: wait; }
.profile-photo-toggle:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
.profile-group { margin-top: 20px; }
.profile-group > h3 { margin: 0 0 8px 4px; font-size: 13px; font-weight: 700; color: var(--v3-text-2); }
.profile-group:not(:has(.menu-item:not([hidden]):not([style*="display: none"]))) { display: none; }
#screen-perfil .card.menu-list {
    margin-top: 0;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--v3-border);
    border-radius: 18px;
    background: var(--v3-surface);
    box-shadow: none;
}
#screen-perfil .menu-item {
    min-height: 56px;
    padding: 14px 16px;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-weight: 600;
    transform: none;
}
#screen-perfil .menu-item[hidden] { display: none; }
#screen-perfil .menu-item:not([hidden]):not([style*="display: none"]) ~ .menu-item:not([hidden]):not([style*="display: none"]) { border-top: 1px solid var(--v3-border); }
#screen-perfil .menu-item:active { background: var(--v3-surface-2); }
#screen-perfil .menu-item:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: -3px; }
#screen-perfil .menu-item .mi-icon { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 0; background: none; box-shadow: none; font-size: 18px; }
#screen-perfil .menu-item .chev { width: auto; height: auto; border-radius: 0; background: none; font-size: 11px; }
.profile-menu-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
#profileAbonoStatus { max-width: 100%; white-space: normal; text-align: left; font-size: 11px; line-height: 1.4; }
#screen-perfil .card.menu-list.profile-logout {
    margin-top: 20px;
    border: 0;
    border-radius: 12px;
    background: none;
    box-shadow: none;
}
#screen-perfil .profile-logout .menu-item {
    min-height: 48px;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--v3-danger) 28%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--v3-danger) 5%, var(--v3-bg));
    font-size: 14px;
}
#screen-perfil .profile-logout .menu-item .mi-icon { flex-basis: 20px; width: 20px; height: 20px; font-size: 16px; }
#screen-perfil .profile-logout .menu-item:active { background: color-mix(in srgb, var(--v3-danger) 12%, var(--v3-bg)); }
#screen-perfil .profile-logout .menu-item:focus-visible { outline-color: var(--v3-danger); }
.profile-photo-manage { display: flex; flex: 1 0 100%; gap: 10px; }
.profile-photo-manage[hidden] { display: none !important; }
.profile-photo-manage .profile-photo-button { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; }
#profilePhotoButton { background: var(--v3-accent-soft); color: var(--v3-text); }
#profilePhotoRemove:disabled { cursor: default; }

/* Pagos: resumen de abono destacado, paquetes e historial agrupados. */
:is(#sv-pagos, #sv-paquetes) .section-title { margin: 24px 4px 8px; }
:is(#sv-pagos, #sv-paquetes) .section-title h2 { font-size: 13px; font-weight: 700; color: var(--v3-text-2); }
:is(#sv-pagos, #sv-paquetes) .card { border: 1px solid var(--v3-border); border-radius: 18px; background: var(--v3-surface); box-shadow: none; }
:is(#sv-pagos, #sv-paquetes) :is(.pago-planes-stack, .paquetes-stack) {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--v3-border);
    border-radius: 18px;
    background: var(--v3-surface);
}
:is(#sv-pagos, #sv-paquetes) :is(.pago-planes-stack, .paquetes-stack) > .card { margin: 0; border: 0; border-radius: 0; background: transparent; }
:is(#sv-pagos, #sv-paquetes) :is(.pago-planes-stack, .paquetes-stack) > .card + .card { border-top: 1px solid var(--v3-border); }
:is(#sv-pagos, #sv-paquetes) .pago-plan-card { align-items: flex-start; padding: 18px; }
:is(#sv-pagos, #sv-paquetes) .pago-plan-card::after { content: none; }
:is(#sv-pagos, #sv-paquetes) .pago-plan-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0; }
:is(#sv-pagos, #sv-paquetes) .pago-plan-name { margin-top: 6px; font-size: 20px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
:is(#sv-pagos, #sv-paquetes) .pago-plan-price { margin-top: 10px; font-size: 17px; font-weight: 700; }
:is(#sv-pagos, #sv-paquetes) .pago-plan-detail { margin-top: 6px; line-height: 1.5; }
:is(#sv-pagos, #sv-paquetes) .pago-plan-card > .pill { margin-top: 2px; }
:is(#sv-pagos, #sv-paquetes) .paquete-card { padding: 16px; }
:is(#sv-pagos, #sv-paquetes) .paquete-head > div:nth-child(2) { flex: 1; }
:is(#sv-pagos, #sv-paquetes) .paquete-head .ri-icon { flex: 0 0 24px; width: 24px; font-size: 18px; color: var(--v3-accent-dark); }
:is(#sv-pagos, #sv-paquetes) .paquete-name { white-space: normal; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
:is(#sv-pagos, #sv-paquetes) .paquete-range { margin-top: 4px; line-height: 1.4; }
:is(#sv-pagos, #sv-paquetes) .paquete-counter { font-weight: 700; }
:is(#sv-pagos, #sv-paquetes) .paquete-progress { height: 5px; }
:is(#sv-pagos, #sv-paquetes) .paquete-progress span { background: var(--v3-accent); }
:is(#sv-pagos, #sv-paquetes) .paquete-activity-quotas-title { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; }
:is(#sv-pagos, #sv-paquetes) .paquete-activity-quota { align-items: baseline; }
:is(#sv-pagos, #sv-paquetes) .paquete-activity-quota span { white-space: normal; overflow-wrap: anywhere; }
:is(#sv-pagos, #sv-paquetes) .paquete-foot { flex-wrap: wrap; justify-content: flex-start; }
:is(#sv-pagos, #sv-paquetes) .paquete-chips { justify-content: flex-start; }
:is(#sv-pagos, #sv-paquetes) .payment-data-card { gap: 12px; padding: 16px; }
:is(#sv-pagos, #sv-paquetes) .payment-data-icon { flex: 0 0 24px; width: 24px; height: 24px; font-size: 18px; border-radius: 0; background: none; }
:is(#sv-pagos, #sv-paquetes) .payment-data-card > div:last-child { min-width: 0; }
:is(#sv-pagos, #sv-paquetes) .payment-data-card h3 { font-size: 14px; font-weight: 600; }
:is(#sv-pagos, #sv-paquetes) .payment-data-card p { overflow-wrap: anywhere; }
:is(#sv-pagos, #sv-paquetes) .payment-copy-btn { min-height: 44px; box-shadow: none; }
:is(#sv-pagos, #sv-paquetes) #pagosList { overflow: hidden; }
:is(#sv-pagos, #sv-paquetes) #pagosList > .row-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
:is(#sv-pagos, #sv-paquetes) #pagosList > .row-item + .row-item { border-top: 1px solid var(--v3-border); }
:is(#sv-pagos, #sv-paquetes) #pagosList .ri-icon { width: 24px; height: 24px; border-radius: 0; background: none; box-shadow: none; font-size: 18px; }
:is(#sv-pagos, #sv-paquetes) #pagosList .title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
:is(#sv-pagos, #sv-paquetes) #pagosList .sub { margin-top: 4px; line-height: 1.5; overflow-wrap: anywhere; }
:is(#sv-pagos, #sv-paquetes) #pagosList .amount { font-size: 14px; font-weight: 700; }
@media (max-width: 360px) {
    :is(#sv-pagos, #sv-paquetes) .pago-plan-card { flex-wrap: wrap; }
    :is(#sv-pagos, #sv-paquetes) .pago-plan-copy { flex: 1 0 100%; }
    :is(#sv-pagos, #sv-paquetes) #pagosList > .row-item { grid-template-columns: 24px minmax(0, 1fr); }
    :is(#sv-pagos, #sv-paquetes) #pagosList .right { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: 0; text-align: left; }
}

/* Pagos: cada período reúne el abono y las clases que le corresponden. */
#sv-pagos .payment-period-section { margin-top: 24px; }
#sv-pagos .payment-period-section:first-child { margin-top: 8px; }
#sv-pagos .payment-period-section .section-title { margin-top: 0; }
.payment-period-stack { display: grid; gap: 12px; }
#sv-pagos .payment-period-card { padding: 20px; margin: 0; }
#sv-pagos .payment-period-card::after { content: none; }
.payment-period-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.payment-period-head h3 { font-size: 19px; font-weight: 750; line-height: 1.35; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.payment-period-head > .pill { flex: 0 0 auto; margin-top: 2px; font-size: 11px; }
.payment-period-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; }
.payment-period-price > span { font-size: 12px; color: var(--v3-text-2); }
.payment-period-price > strong { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.payment-class-summary { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--v3-border); }
.payment-package-name { display: block; font-size: 14px; line-height: 1.4; margin-bottom: 10px; overflow-wrap: anywhere; }
.payment-class-dates { display: grid; gap: 4px; }
.payment-class-dates > span { color: var(--v3-text-2); font-size: 11px; }
.payment-class-dates > strong { font-size: 13px; font-weight: 600; line-height: 1.5; }
.payment-class-balance { font-size: 22px; font-weight: 750; letter-spacing: -.3px; line-height: 1.3; margin-top: 16px; }
.payment-class-note, .payment-class-usage { color: var(--v3-text-2); font-size: 12px; line-height: 1.5; margin: 6px 0 0; }
.payment-class-summary .paquete-progress { margin-top: 10px; height: 5px; }
.payment-class-summary .paquete-chips { justify-content: flex-start; flex-wrap: wrap; margin-top: 12px; }
.payment-class-summary .paquete-chips > span { font-size: 11px; }
.payment-activity-quotas { display: grid; gap: 8px; margin-top: 12px; font-size: 12px; }
.payment-activity-quotas > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.payment-activity-quotas > div > span { color: var(--v3-text-2); }
.payment-period-due { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.6; padding: 12px; border-radius: 10px; background: var(--v3-surface-2); margin-top: 18px; overflow-wrap: anywhere; }
.payment-period-due.danger { background: var(--v3-danger-soft); color: var(--v3-danger); }
.payment-period-due.warning { background: var(--v3-warning-soft); color: var(--v3-text); }
.payment-period-footnote { color: var(--v3-text-2); font-size: 11px; line-height: 1.6; margin: 12px 0 0; }
#sv-pagos .payment-period-card.is-upcoming { border-style: dashed; }
@media(max-width:360px) {
    #sv-pagos .payment-period-card { padding: 16px; }
    .payment-period-head { flex-wrap: wrap; gap: 8px; }
    .payment-period-head h3 { font-size: 18px; }
}

/* Mis clases: mismas superficies agrupadas que Perfil. */
.history-pagination { display: grid; gap: 12px; margin-top: 16px; text-align: center; }
.history-pagination p { color: var(--v3-text-2); font-size: 12px; line-height: 1.5; }
.history-pagination .history-error { color: var(--v3-text); }
.history-pagination .btn { min-height: 48px; border: 1px solid var(--v3-border); box-shadow: none; }
#historialFin:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 4px; }
#turnosList :is(.class-list, .card.menu-list) {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--v3-border);
    border-radius: 18px;
    background: var(--v3-surface);
    box-shadow: none;
}
#turnosList :is(.class-item, .row-item) {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#turnosList :is(.class-item, .row-item) + :is(.class-item, .row-item) {
    border-top: 1px solid var(--v3-border);
}
#turnosList .class-item:active { background: var(--v3-surface-2); }
#turnosList .class-item:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: -3px; }
#turnosList .class-item .divider { display: none; }
#turnosList .class-item .time { min-width: 0; }
#turnosList .class-item .name { font-weight: 700; overflow-wrap: anywhere; }
#turnosList .class-item .cupos { margin-top: 5px; font-size: 11px; }
#turnosList .class-item > .btn {
    min-height: 44px;
    padding: 8px 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
}
#turnosList .row-item { grid-template-columns: 24px minmax(0, 1fr) auto; }
#turnosList .row-item .ri-icon {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 18px;
}
#turnosList .row-item .title { font-weight: 600; overflow-wrap: anywhere; }
#turnosList .row-item .sub { margin-top: 4px; overflow-wrap: anywhere; }
@media (max-width: 360px) {
    #turnosList .class-item { grid-template-columns: 48px minmax(0, 1fr); }
    #turnosList .class-item > :is(.btn, .pill) { grid-column: 2; justify-self: start; }
    #turnosList .row-item { grid-template-columns: 24px minmax(0, 1fr); }
    #turnosList .row-item .right { grid-column: 2; margin-left: 0; justify-self: start; }
}

/* Disponibilidad: misma tarjeta de indicadores, con acceso al desglose. */
.stat-action { min-width: 0; }
.stat-action > span { display: block; }
.stat-action .value.is-text { font-size: 14px; line-height: 1.5; letter-spacing: 0; }
.stat-action:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 3px; }
.stat-action:active { background: var(--v3-surface-2); }
.package-availability-note { color: var(--v3-text-2); font-size: 13px; line-height: 1.5; margin: 8px 0 20px; }

.stat-action .stat-note { margin-top: 4px; font-size: 9px; line-height: 1.4; color: var(--v3-text-2); }
.stat-action .stat-note[hidden] { display: none; }

.class-waitlist-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; max-width: 112px; }
.class-waitlist-actions .btn { min-height: 44px; white-space: normal; }
.class-waitlist-status { margin-top: 6px; white-space: normal; }
#turnosList .class-waitlist-actions { grid-column: -2 / -1; }

/* Aviso informativo exclusivo de una sesión. */
.class-notice-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--v3-text);
}
.class-notice-title > i, .class-notice-heading > i { flex-shrink: 0; color: var(--v3-accent); }
.class-notice-title > span { min-width: 0; overflow-wrap: anywhere; }
.class-notice {
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid var(--v3-border);
    border-left: 3px solid var(--v3-accent);
    border-radius: 12px;
    background: var(--v3-surface-2);
    color: var(--v3-text);
    overflow-wrap: anywhere;
}
.class-notice-heading { display: flex; align-items: baseline; gap: 9px; font-size: 14px; line-height: 1.4; }
.class-notice p { margin: 8px 0 0; white-space: pre-wrap; line-height: 1.5; font-size: 14px; }
#nextClass .class-notice-title { flex-basis: 100%; color: inherit; }
#nextClass .class-notice-title > i { color: inherit; }