/*
 * mobile-premium-layout.css
 * EligeTusFotos — Mobile Premium Flow
 *
 * Alcance: tokens de diseño, layout base, aislamiento desktop/mobile.
 * Breakpoint único: 768px.
 * Solo activo cuando body.etf-premium-flow-page está presente.
 * No toca clases Bootstrap, clases legacy, ni selectors globales.
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. TOKENS DE DISEÑO
   ─────────────────────────────────────────────────────────────────────── */

.etf-premium-flow-page {
    /* Colores */
    --mp-bg:             #F2F2F7;
    --mp-card:           #FFFFFF;

    --mp-primary:        #0066FF;
    --mp-primary-soft:   #EAF2FF;

    --mp-whatsapp:       #25D366;
    --mp-whatsapp-soft:  #E9FBEF;

    --mp-success:        #16A34A;
    --mp-success-soft:   #E8F8EE;

    --mp-danger:         #FF3B30;
    --mp-danger-soft:    #FFE9E6;

    --mp-text:           #111111;
    --mp-text-secondary: #6E6E73;
    --mp-text-muted:     #8E8E93;

    --mp-border:         rgba(229, 229, 234, 0.72);

    /* Radios */
    --mp-radius-card:    28px;
    --mp-radius-card-lg: 32px;
    --mp-radius-button:  22px;
    --mp-radius-icon:    999px;
    --mp-radius-pill:    999px;

    /* Sombras */
    --mp-shadow-card:
        0 10px 30px rgba(0, 0, 0, 0.07),
        0 2px  8px  rgba(0, 0, 0, 0.04);

    --mp-shadow-soft:
        0 8px 24px rgba(0, 0, 0, 0.055);

    --mp-shadow-footer:
        0 -18px 44px rgba(15, 23, 42, 0.10);

    /* Tipografía */
    --mp-font:
        "SF Pro Display",
        "SF Pro Text",
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /* Layout */
    --mp-shell-max:  430px;
    --mp-screen-x:   28px;

    /* Espaciados */
    --mp-space-4:   4px;
    --mp-space-8:   8px;
    --mp-space-12:  12px;
    --mp-space-16:  16px;
    --mp-space-20:  20px;
    --mp-space-24:  24px;
    --mp-space-28:  28px;
    --mp-space-32:  32px;
    --mp-space-40:  40px;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. AISLAMIENTO DESKTOP / MOBILE
   Principio: los dos mundos coexisten en el DOM.
   En mobile (<=768px): premium visible, legacy oculto.
   En desktop (>=769px): legacy visible, premium oculto.
   ─────────────────────────────────────────────────────────────────────── */

/* Por defecto: premium oculto, legacy visible */
.etf-premium-mobile-flow {
    display: none;
}

.etf-legacy-desktop-viewport {
    display: block;
}

@media (max-width: 768px) {
    .etf-premium-flow-page .etf-premium-mobile-flow {
        display: block;
    }

    .etf-premium-flow-page .etf-legacy-desktop-viewport {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .etf-premium-flow-page .etf-premium-mobile-flow {
        display: none !important;
    }

    .etf-premium-flow-page .etf-legacy-desktop-viewport {
        display: block;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   3. OCULTAR CHROME LEGACY EN MOBILE PREMIUM
   Solo aplica en body.etf-premium-flow-page + mobile.
   Nunca oculta footer glass premium (.mp-bottom-glass).
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    body.etf-premium-flow-page #legacy-brand-header-block,
    body.etf-premium-flow-page #navbar-op,
    body.etf-premium-flow-page .social-links,
    body.etf-premium-flow-page > footer {
        display: none !important;
    }

    body.etf-premium-flow-page #bg-project-panel,
    body.etf-premium-flow-page .bg-project-panel-gray,
    body.etf-premium-flow-page #bg-project-panel .container.body-content {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        background: var(--mp-bg, #F2F2F7) !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. SHELL Y PANTALLA BASE
   ─────────────────────────────────────────────────────────────────────── */

.etf-premium-mobile-flow {
    min-height: 100dvh;
    background:
        radial-gradient(
            900px 520px at 50% -180px,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(242, 242, 247, 0)    72%
        ),
        var(--mp-bg, #F2F2F7);
    color: var(--mp-text, #111111);
    font-family: var(--mp-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.etf-premium-mobile-flow *,
.etf-premium-mobile-flow *::before,
.etf-premium-mobile-flow *::after {
    box-sizing: border-box;
}

.etf-premium-mobile-flow button,
.etf-premium-mobile-flow input,
.etf-premium-mobile-flow select,
.etf-premium-mobile-flow textarea {
    font-family: var(--mp-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* Shell: centra el contenido con ancho máximo mobile */
.mp-shell {
    width: 100%;
    max-width: var(--mp-shell-max, 430px);
    min-height: 100dvh;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
}

/* Pantalla: padding lateral y bottom */
.mp-screen {
    padding-left: var(--mp-screen-x, 28px);
    padding-right: var(--mp-screen-x, 28px);
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}

/* Pantalla con barra fija abajo (footer glass) */
.mp-screen--with-bottom-bar {
    padding-bottom: calc(235px + env(safe-area-inset-bottom, 0px));
}