/* Tokens del portal; no alteran el tema del login. Fuente: docs/diseno.md. */
.portal-theme {
    --brand-primary: #d41c6e;
    --brand-strong: #a71657;
    --brand-accent: #d41c6e;
    --brand-primary-rgb: 212 28 110;
    --brand-accent-rgb: 212 28 110;
    --color-bg: #e7e2e2;
    --color-surface: #fff;
    --color-surface-soft: #f7f4f4;
    --color-line: #e5dfe1;
    --color-line-strong: #d1c9cd;
    --color-text: #302d31;
    --color-muted: #736c70;
    --color-action: #d41c6e;
    --color-action-hover: #a71657;
    --color-active-bg: #fcf0f5;
    --color-shadow: rgba(64, 42, 52, .06);
    --font-display: Lato, sans-serif;
    --font-body: Lato, sans-serif;
    --radius-lg: 18px;
    --portal-shadow: 0 4px 16px var(--color-shadow);
    --motion-phase-duration: 320ms;
    --motion-phase-easing: ease-in-out;

    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-7: 7px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-18: 18px;
    --space-20: 20px;
    --space-22: 22px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-36: 36px;
    --space-40: 40px;
    --space-44: 44px;
    --space-48: 48px;
    --space-56: 56px;
    --space-80: 80px;
    --text-xs: 11px;
    --text-caption: 12px;
    --text-small: 13px;
    --text-body: 14px;
    --text-normal: 16px;
    --text-lead: 18px;
    --text-section: 20px;
    --text-subheading: 22px;
    --text-heading: 24px;
    --text-large: 28px;
    --text-amount: 32px;
    --text-title: 36px;
    /* Figma 1920 × 1080: shell, controls and component geometry. */
    --line-body: 1.45;
    --border-width: 1px;
    --control-height: 50px;
    --step-height: 56px;
    --step-indicator-size: 32px;
    --icon-size: 24px;
    --logo-width: 144px;
    --logo-height: 72px;
    --page-max-width: 1760px;
    --page-gutter: var(--space-80);
    --page-menu-height: 40px;
    --page-header-height: 154px;
    --page-gap: var(--space-28);
    --page-bottom-space: var(--space-56);
    --footer-padding: var(--space-24);
    --footer-gap: var(--space-16);
    --panel-padding: var(--space-24);
    --panel-radius: 18px;
    --control-radius: 10px;
    --radius-pill: 100px;
    --focus-width: 2px;
    --focus-offset: 4px;
    --back-button-width: 368px;
    --method-min-width: 180px;
    --method-min-width-mobile: 140px;
    --method-height-mobile: 148px;
    --method-icon-max: 28px;
    --result-detail-min-width: 220px;
    --result-icon-size: 72px;
    --steps-mobile-inline-padding: 3px;
    --receipts-bottom-space: var(--space-16);
    --checkout-overview-gap: var(--space-24);
    --checkout-scroll-gap: var(--space-16);
    --checkout-columns: minmax(0, 804fr) minmax(0, 888fr);
    --method-height: 163px;
    --receipt-row-height: 78px;
    --receipt-table-height: 411px;
    --search-padding: 45.297px;
    --search-gap: 35.231px;
    --search-field-width: 1056.941px;
    --search-control-height: 62.913px;
    --search-heading-size: 30.198px;
    --search-description-size: 20.132px;
    --search-help-size: 17.616px;
    --search-contact-gap: 15.099px;
    --search-radius: 22.649px;
    --color-secondary: #525252;
    --color-paid-bg: #edf8f1;
    --color-paid-text: #23734f;
    --color-reserved-bg: #f0eef3;
    --color-reserved-text: #60516b;
    --color-review-bg: #fff4dd;
    --color-review-text: #805500;
    --color-review-border: #e9c879;
    --color-footer-line: #d5ced0;
}
@media (max-width: 1200px) {
    .portal-theme {--page-gutter: var(--space-32);}
}
@media (max-width: 860px) {
    .portal-theme {
        --page-gutter: var(--space-16);
        --page-header-height: 126px;
        --page-gap: var(--space-20);
        --page-bottom-space: var(--space-24);
        --search-padding: var(--space-24);
        --search-gap: var(--space-24);
        --search-heading-size: var(--text-heading);
        --search-description-size: var(--text-normal);
        --search-help-size: var(--text-body);
        --search-control-height: var(--control-height);
        --logo-width: 100px;
    }
}
/* Adaptación de la misma escala a portátiles: conserva las medidas originales
   a 1080 px de alto y deja espacio útil a los paneles en ventanas más bajas. */
@media (min-width: 861px) and (max-height: 900px) {
    .portal-theme {
        --checkout-overview-gap: var(--space-12);
        --page-menu-height: 32px;
        --page-header-height: 112px;
        --page-gap: var(--space-20);
        --page-bottom-space: var(--space-24);
        --panel-padding: var(--space-16);
        --footer-padding: var(--space-16);
        --step-height: 48px;
        --search-padding: var(--space-32);
        --search-gap: var(--space-24);
        --search-heading-size: var(--text-heading);
        --search-description-size: var(--text-normal);
        --search-help-size: var(--text-body);
    }
}

@media (min-width: 861px) and (max-height: 1050px) {
    .portal-theme {--checkout-overview-gap: var(--space-12);}
}