:root {
    --app-primary: #e86c14;
    --app-primary-dark: #ba5610;
    --app-primary-light: #ed8943;
    --app-primary-text: #9c3f00;
    --app-primary-rgb: 232, 108, 20;
    --app-secondary: #ffc66e;
    --app-secondary-dark: #c79b56;
    --app-secondary-light: #ffd391;
    --app-secondary-text: #7a5315;
    --app-secondary-rgb: 255, 198, 110;
    --app-on-primary: #ffffff;
    --app-on-secondary: #111827;
    --app-on-gradient: #ffffff;
    --app-brand-gradient: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%);
}

body.logged-in.pwa-custom-theme {
    --kd-primary: var(--app-primary-text);
    --kd-primary-strong: var(--app-primary);
    --kd-primary-dark: var(--app-primary-dark);
    --kd-primary-soft: rgba(var(--app-primary-rgb), 0.1);
    --kd-primary-rgb: var(--app-primary-rgb);
    --kd-ring-color: var(--app-primary);
    --kd-on-primary: var(--app-on-primary);
    --kd-secondary: var(--app-secondary-text);
    --kd-secondary-strong: var(--app-secondary);
    --kd-secondary-soft: rgba(var(--app-secondary-rgb), 0.12);
    --kd-secondary-rgb: var(--app-secondary-rgb);
}

body.logged-in.pwa-custom-theme .btn-primary,
body.logged-in.pwa-custom-theme .rutina-btn.btn-primary,
body.logged-in.pwa-custom-theme .btn-view-rutina,
body.logged-in.pwa-custom-theme .gym-transfer-shell,
body.logged-in.pwa-custom-theme .sp-payment-logo-fallback {
    color: var(--app-on-gradient) !important;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-dark)) !important;
    border-color: var(--app-primary) !important;
}

body.logged-in.pwa-custom-theme .sp-create-plan-button,
body.logged-in.pwa-custom-theme .sp-create-submit-button,
body.logged-in.pwa-custom-theme .sp-detail-cta,
body.logged-in.pwa-custom-theme .sp-plan-link,
body.logged-in.pwa-custom-theme .sp-self-plan-cta-button,
body.logged-in.pwa-custom-theme .spd-day-chip.is-active,
body.logged-in.pwa-custom-theme .spd-exercise-action,
body.logged-in.pwa-custom-theme .spd-exercise-step-number,
body.logged-in.pwa-custom-theme .spd-hero-pill,
body.logged-in.pwa-custom-theme .spd-modal-btn-primary,
body.logged-in.pwa-custom-theme .spd-toggle-btn.is-active {
    color: var(--app-on-gradient) !important;
    background: var(--app-brand-gradient) !important;
    border-color: var(--app-primary) !important;
}

body.logged-in.pwa-custom-theme .spd-runner-step-card.is-current,
body.logged-in.pwa-custom-theme .tab-btn.active,
body.logged-in.pwa-custom-theme .stat-card .stat-icon,
body.logged-in.pwa-custom-theme .body-action-btn {
    color: var(--app-on-gradient) !important;
    background: var(--app-brand-gradient) !important;
}

body.logged-in.pwa-custom-theme .spd-runner-step-card.is-current {
    background: var(--app-brand-gradient) !important;
}

body.logged-in.pwa-custom-theme .sp-catalog-card-action,
body.logged-in.pwa-custom-theme .sp-catalog-count,
body.logged-in.pwa-custom-theme .sp-catalog-empty .material-symbols-outlined,
body.logged-in.pwa-custom-theme .sp-catalog-search .material-symbols-outlined,
body.logged-in.pwa-custom-theme .sp-create-day-heading > label,
body.logged-in.pwa-custom-theme .sp-create-exercise-heading,
body.logged-in.pwa-custom-theme .sp-create-kicker,
body.logged-in.pwa-custom-theme .sp-detail-list .material-symbols-outlined,
body.logged-in.pwa-custom-theme .sp-plan-top .material-symbols-outlined,
body.logged-in.pwa-custom-theme .sp-self-plan-cta-kicker,
body.logged-in.pwa-custom-theme .spd-back-link,
body.logged-in.pwa-custom-theme .spd-exercise-action-secondary,
body.logged-in.pwa-custom-theme .spd-exercise-profile .material-symbols-outlined,
body.logged-in.pwa-custom-theme .spd-exercise-technique-heading,
body.logged-in.pwa-custom-theme .spd-runner-step-card.is-done:not(.is-current),
body.logged-in.pwa-custom-theme .spd-runner-timer-label,
body.logged-in.pwa-custom-theme .spd-toggle-btn,
body.logged-in.pwa-custom-theme .loading-spinner i,
body.logged-in.pwa-custom-theme .no-payments-content i,
body.logged-in.pwa-custom-theme .no-plans i,
body.logged-in.pwa-custom-theme .sp-payment-chip.is-method,
body.logged-in.pwa-custom-theme .sp-payment-chip.is-method i,
body.logged-in.pwa-custom-theme .sp-payment-note i,
body.logged-in.pwa-custom-theme .gym-action-tile.is-location i,
body.logged-in.pwa-custom-theme .gym-copy-btn,
body.logged-in.pwa-custom-theme .gym-transfer-icon,
body.logged-in.pwa-custom-theme .gym-transfer-kicker,
body.logged-in.pwa-custom-theme .form-label i,
body.logged-in.pwa-custom-theme .section-header h3 i,
body.logged-in.pwa-custom-theme .modal-header h3 i,
body.logged-in.pwa-custom-theme .password-toggle:hover,
body.logged-in.pwa-custom-theme .tab-btn:hover,
body.logged-in.pwa-custom-theme .rutina-simple-title i,
body.logged-in.pwa-custom-theme .rutina-meta-item .meta-label i {
    color: var(--app-primary-text) !important;
}

body.logged-in.pwa-custom-theme .profile-photo-wrapper,
body.logged-in.pwa-custom-theme .form-input:focus,
body.logged-in.pwa-custom-theme .cropper-view-box {
    border-color: var(--app-primary) !important;
    outline-color: var(--app-primary) !important;
}

body.logged-in.pwa-custom-theme .cropper-point,
body.logged-in.pwa-custom-theme .crop-control-btn:hover,
body.logged-in.pwa-custom-theme .loading::after,
body.logged-in.pwa-custom-theme .spd-spinner,
body.logged-in.pwa-custom-theme .loading-state .spinner {
    border-top-color: var(--app-primary) !important;
    background-color: var(--app-primary) !important;
}

body.logged-in.pwa-custom-theme .bottom-nav-item.active,
body.logged-in.pwa-custom-theme .bottom-nav-item:hover,
body.logged-in.pwa-custom-theme .bottom-nav-item.is-home.active .bottom-nav-item-icon,
body.logged-in.pwa-custom-theme .bottom-nav-item.is-home:hover .bottom-nav-item-icon {
    color: var(--app-primary-text) !important;
}

body.logged-in.pwa-custom-theme .bottom-nav-item.active:not(.is-home) .bottom-nav-item-icon,
body.logged-in.pwa-custom-theme .sp-payment-chip.is-method {
    background: rgba(var(--app-primary-rgb), 0.1) !important;
}

body.logged-in.pwa-custom-theme .bottom-nav-item.is-home .bottom-nav-item-icon,
body.logged-in.pwa-custom-theme .bottom-nav-item.is-home.active .bottom-nav-item-icon,
body.logged-in.pwa-custom-theme .bottom-nav-item.is-home:hover .bottom-nav-item-icon {
    box-shadow: 0 16px 38px rgba(var(--app-primary-rgb), 0.18) !important;
}

body.logged-in.pwa-custom-theme .bottom-nav-item.is-home.active .bottom-nav-item-icon {
    color: var(--app-on-gradient) !important;
    background: var(--app-brand-gradient) !important;
    border-color: #ffffff !important;
    box-shadow:
        0 0 0 2px rgba(var(--app-secondary-rgb), 0.22),
        0 18px 42px rgba(var(--app-primary-rgb), 0.34) !important;
}

body.logged-in.pwa-custom-theme .bottom-nav-item.is-home:not(.active):hover .bottom-nav-item-icon {
    background: linear-gradient(
        135deg,
        rgba(var(--app-primary-rgb), 0.16),
        rgba(var(--app-secondary-rgb), 0.1)
    ) !important;
}

body.logged-in.pwa-custom-theme .bottom-nav {
    box-shadow:
        0 -14px 44px rgba(15, 23, 42, 0.08),
        0 -6px 20px rgba(var(--app-primary-rgb), 0.12) !important;
}

body.logged-in.pwa-custom-theme .sp-create-plan-button,
body.logged-in.pwa-custom-theme .sp-create-submit-button,
body.logged-in.pwa-custom-theme .sp-self-plan-cta-button {
    box-shadow: 0 10px 20px rgba(var(--app-primary-rgb), 0.18) !important;
}

body.logged-in.pwa-custom-theme .sp-self-plan-cta {
    border-color: rgba(var(--app-primary-rgb), 0.18) !important;
    box-shadow: 0 12px 28px rgba(var(--app-primary-rgb), 0.1) !important;
}

body.logged-in.pwa-custom-theme .sp-create-secondary-button {
    border-color: rgba(var(--app-primary-rgb), 0.24) !important;
}

body.logged-in.pwa-custom-theme .loading-state .spinner {
    background-color: transparent !important;
    border-color: rgba(var(--app-primary-rgb), 0.12) !important;
    border-top-color: var(--app-primary) !important;
}

body.logged-in.pwa-custom-theme .profile-photo-wrapper {
    box-shadow: 0 8px 32px rgba(var(--app-primary-rgb), 0.24) !important;
}

body.logged-in.pwa-custom-theme .tab-btn.active {
    box-shadow: 0 4px 12px rgba(var(--app-primary-rgb), 0.24) !important;
}

body.logged-in.pwa-custom-theme .kinetic-attendance-button {
    color: var(--app-on-gradient) !important;
    background: var(--app-brand-gradient) !important;
    box-shadow: 0 16px 34px rgba(var(--app-primary-rgb), 0.22) !important;
}

body.logged-in.pwa-custom-theme .kinetic-attendance-button:hover {
    box-shadow: 0 20px 38px rgba(var(--app-primary-rgb), 0.28) !important;
}

body.logged-in.pwa-custom-theme .kinetic-retry-btn {
    color: var(--app-on-gradient) !important;
    background: var(--app-brand-gradient) !important;
    box-shadow: 0 14px 24px rgba(var(--app-primary-rgb), 0.24) !important;
}

body.logged-in.pwa-custom-theme .kd-membership-accent,
body.logged-in.pwa-custom-theme .kd-metric-block.highlight::before {
    background: var(--app-secondary) !important;
    box-shadow: 0 8px 18px rgba(var(--app-secondary-rgb), 0.2) !important;
}

body.logged-in.pwa-custom-theme .kinetic-attendance-icon,
body.logged-in.pwa-custom-theme .qr-scanner-header-copy span,
body.logged-in.pwa-custom-theme .qr-scanner-feedback-icon {
    color: var(--app-primary-text) !important;
}

body.logged-in.pwa-custom-theme .scan-frame::after,
body.logged-in.pwa-custom-theme .qr-scanner-primary {
    background: var(--app-primary) !important;
}

body.logged-in.pwa-custom-theme .scan-frame::after {
    box-shadow: 0 0 14px rgba(var(--app-primary-rgb), 0.9) !important;
}

body.logged-in.pwa-custom-theme .qr-scanner-primary {
    color: var(--app-on-primary) !important;
}

body.logged-in.pwa-custom-theme .qr-scanner-secondary {
    color: var(--app-secondary-text) !important;
    background: rgba(var(--app-secondary-rgb), 0.12) !important;
    border-color: rgba(var(--app-secondary-rgb), 0.32) !important;
}

body.logged-in.pwa-custom-theme .qr-scanner-feedback-icon,
body.logged-in.pwa-custom-theme .kd-membership-logo,
body.logged-in.pwa-custom-theme .kd-class-gym-logo,
body.logged-in.pwa-custom-theme .kd-class-category-icon {
    background: linear-gradient(135deg, rgba(var(--app-primary-rgb), 0.12), #ffffff) !important;
}

body.logged-in.pwa-custom-theme .kd-class-visual-fallback {
    color: var(--app-on-gradient) !important;
    background: var(--app-brand-gradient) !important;
}

body.logged-in.pwa-custom-theme .kinetic-stage-brandmark,
body.logged-in.pwa-custom-theme .kinetic-social-kicker {
    color: var(--app-secondary-text) !important;
}

body.logged-in.pwa-custom-theme .kd-metric-block.secondary::before {
    background: var(--app-secondary) !important;
}

/* El shell siempre conserva su fondo neutro; la marca vive en los componentes. */
body.pwa-custom-theme .app-root,
body.pwa-custom-theme #root,
body.pwa-custom-theme.page-socio-perfil .socio-dashboard-container,
body.pwa-custom-theme.page-socio-perfil .socio-dashboard-container::before,
body.pwa-custom-theme.page-socio-perfil .main-content::before {
    background: #ffffff !important;
    background-image: none !important;
}

/* Acciones y superficies principales. */
body.pwa-custom-theme .gym-logo-fallback,
body.pwa-custom-theme .gym-status-pill.status-active,
body.pwa-custom-theme .sp-self-plan-cta-icon,
body.pwa-custom-theme .sp-create-catalog-button,
body.pwa-custom-theme .pwa-install-btn.primary,
body.pwa-custom-theme .step-number,
body.pwa-custom-theme .registro-form .registro-submit-button,
body.pwa-custom-theme .login-submit-button {
    color: var(--app-on-gradient) !important;
    background: var(--app-brand-gradient) !important;
    border-color: var(--app-primary) !important;
    box-shadow: 0 10px 24px rgba(var(--app-primary-rgb), 0.22) !important;
}

/* Textos, iconos, loaders y enlaces que antes estaban en naranja. */
body.pwa-custom-theme .payments-monthly-copy span i,
body.pwa-custom-theme .no-payments-content .btn-retry,
body.pwa-custom-theme .sp-create-exercise-preview,
body.pwa-custom-theme .sp-catalog-card-media,
body.pwa-custom-theme .sp-create-secondary-button,
body.pwa-custom-theme .sp-create-add-exercise,
body.pwa-custom-theme .sp-plan-image-fallback,
body.pwa-custom-theme .spd-hero-logo,
body.pwa-custom-theme .imc-value,
body.pwa-custom-theme .kd-membership-logo > span,
body.pwa-custom-theme .hamburger-menu-item:hover,
body.pwa-custom-theme .hamburger-menu-item.active,
body.pwa-custom-theme .version-number,
body.pwa-custom-theme .forgot-password,
body.pwa-custom-theme .forgot-password:hover,
body.pwa-custom-theme .register-link-text,
body.pwa-custom-theme .register-link-text:hover,
body.pwa-custom-theme .system-credit a,
body.pwa-custom-theme .step-content i,
body.pwa-custom-theme .pwa-install-benefit i,
body.pwa-custom-theme .qr-attendance-form-icon {
    color: var(--app-primary-text) !important;
}

/* Estados suaves, bordes y sombras derivados de la paleta elegida. */
body.pwa-custom-theme .no-payments-content .btn-retry,
body.pwa-custom-theme .sp-payment-chip.is-method,
body.pwa-custom-theme .qr-attendance-form-icon {
    background: rgba(var(--app-primary-rgb), 0.1) !important;
}

body.pwa-custom-theme .sp-plan-card.is-selected,
body.pwa-custom-theme .sp-plan-card:hover,
body.pwa-custom-theme .form-input:focus,
body.pwa-custom-theme .qr-attendance-form input:focus,
body.pwa-custom-theme .registro-form .form-input:focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), 0.18) !important;
}

body.pwa-custom-theme .gym-transfer-shell,
body.pwa-custom-theme .sp-detail-cta,
body.pwa-custom-theme .kd-membership-accent,
body.pwa-custom-theme .login-submit-button,
body.pwa-custom-theme .registro-form .registro-submit-button {
    box-shadow: 0 14px 28px rgba(var(--app-primary-rgb), 0.22) !important;
}

body.pwa-custom-theme .gym-copy-btn:hover {
    background: rgba(var(--app-primary-rgb), 0.16) !important;
}

body.pwa-custom-theme .hamburger-menu-header,
body.pwa-custom-theme .badge {
    color: var(--app-on-primary) !important;
    background: var(--app-primary) !important;
}

body.pwa-custom-theme .hamburger-menu-item.active {
    background: rgba(var(--app-secondary-rgb), 0.12) !important;
    border-left-color: var(--app-secondary) !important;
}

body.pwa-custom-theme .pwa-install-instructions.android {
    background: rgba(var(--app-primary-rgb), 0.1) !important;
    border-color: rgba(var(--app-primary-rgb), 0.24) !important;
}

body.pwa-custom-theme .pwa-install-remember input[type="checkbox"],
body.pwa-custom-theme .login-form input[type="checkbox"],
body.pwa-custom-theme .registro-form input[type="checkbox"] {
    accent-color: var(--app-primary) !important;
}

body.pwa-custom-theme .registro-form .checkbox-input:checked + .checkbox-custom {
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

body.pwa-custom-theme .registro-form .form-select:focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--app-primary-rgb), 0.13) !important;
}

body.pwa-custom-theme .terms-link,
body.pwa-custom-theme .login-link-text {
    color: var(--app-primary-text) !important;
}

body.pwa-custom-theme .scan-frame::after,
body.pwa-custom-theme .qr-attendance-spinner,
body.pwa-custom-theme .loading-state .spinner {
    border-top-color: var(--app-primary) !important;
}

body.pwa-custom-theme .qr-attendance-gym-logo,
body.pwa-custom-theme .qr-attendance-promo-icon,
body.pwa-custom-theme .qr-attendance-form button,
body.pwa-custom-theme .qr-attendance-promo button,
body.pwa-custom-theme .btn-primary {
    color: var(--app-on-gradient) !important;
    background: var(--app-brand-gradient) !important;
    border-color: var(--app-primary) !important;
    box-shadow: 0 10px 24px rgba(var(--app-primary-rgb), 0.2) !important;
}

.pwa-reinstall-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: grid;
    align-items: end;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.pwa-reinstall-modal__scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(8px);
}

.pwa-reinstall-modal__dialog {
    position: relative;
    width: min(100%, 520px);
    max-height: min(760px, calc(100dvh - 32px));
    margin: 0 auto;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 24px;
    border-radius: 28px;
    background: #ffffff;
    color: #18181b;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.32);
}

.pwa-reinstall-modal__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.pwa-reinstall-modal__icon {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 18px;
    background: var(--app-brand-gradient);
    box-shadow: 0 10px 24px rgba(var(--app-primary-rgb), 0.22);
}

.pwa-reinstall-modal__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--app-primary-text);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pwa-reinstall-modal h2 {
    margin: 0;
    color: #18181b;
    font-size: clamp(1.3rem, 5vw, 1.75rem);
    line-height: 1.15;
}

.pwa-reinstall-modal__lead {
    margin: 0 0 18px;
    color: #52525b;
    line-height: 1.6;
}

.pwa-reinstall-modal__steps {
    display: grid;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    counter-reset: reinstall-step;
}

.pwa-reinstall-modal__steps li {
    counter-increment: reinstall-step;
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    color: #3f3f46;
    line-height: 1.45;
}

.pwa-reinstall-modal__steps li::before {
    content: counter(reinstall-step);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(var(--app-primary-rgb), 0.11);
    color: var(--app-primary-text);
    font-weight: 900;
}

.pwa-reinstall-modal__actions {
    display: grid;
    gap: 10px;
}

.pwa-reinstall-modal__button {
    min-height: 48px;
    padding: 12px 18px;
    border: 0;
    border-radius: 16px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}

.pwa-reinstall-modal__button--primary {
    background: var(--app-brand-gradient);
    color: var(--app-on-gradient);
}

.pwa-reinstall-modal__button--secondary {
    background: #f4f4f5;
    color: #3f3f46;
}

.pwa-reinstall-modal__button:focus-visible {
    outline: 3px solid rgba(var(--app-primary-rgb), 0.32);
    outline-offset: 3px;
}

@media (min-width: 700px) {
    .pwa-reinstall-modal {
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-reinstall-modal *,
    .pwa-reinstall-modal *::before,
    .pwa-reinstall-modal *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}