/*
 * mao.css — Fusion Calculator
 * Extracted from mao.html (batch-29b2-css-extraction-mao)
 * Source: 4 inline <style> blocks merged in document order
 *   Block 1 (unnamed):               original lines 14–218
 *   Block 2 (lf-disable-menus):      original lines 220–594
 *   Block 3 (lf-autofill-natural-reset): original lines 600–629
 *   Block 4 (lf-autofill-lastwins):  original lines 632–674
 * Do not add shared/global rules here — page-specific styles only.
 */
        body {
            background: linear-gradient(to bottom right, #134160, #586C75, #134160, #586C75) no-repeat fixed;
            background-size: cover;
            padding: 20 20px 20px;
        }



        h1 {
            font-family: 'alfarn', serif;
            text-align: center;
            color: #FDA929;
            letter-spacing: 1.5px;
            font-weight: 700;
            /* misma distancia arriba y abajo */
            margin: 40px 0;
        }

        h2 {
            font-family: 'alfarn', serif;
            text-align: center;
            color: #FDA929;
            letter-spacing: 1.5px;
            font-weight: 300;
            font-size: 20px;
            /* evita márgenes extra que rompan la simetría */
            margin: 0;
        }

        /* ===== Ocultar COMPLETAMENTE el scrollbar (seguir desplazando) ===== */
        /* WebKit (Chrome / Edge / Safari) */
        html::-webkit-scrollbar,
        body::-webkit-scrollbar {
            width: 0;
            /* sin ancho */
            height: 0;
            /* sin alto (para ejes horizontales) */
            background: transparent;
            /* por si el motor pinta pista */
        }

        /* Firefox */
        html,
        body {
            scrollbar-width: none;
            /* oculta el scrollbar */
            scrollbar-color: transparent transparent;
            /* redundante: “por si acaso” */
        }

        /* Windows/IE legado (EdgeHTML) – no estorba en navegadores modernos */
        html,
        body {
            -ms-overflow-style: none;
            /* esconder barras en motores MS antiguos */
        }

        form {
            max-width: none;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 1) !important;
            padding: 20px;
            border-radius: 15px;
        }


        label {
            margin-top: 10px;
            margin-bottom: 3px;
            font-weight: bold;
            color: white;
            position: relative;
            display: inline-block;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

        }

        #maoForm label {
            margin-top: 0;
            font-weight: bold;
            color: white;
            position: relative;
            display: inline-block;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }


        input {
            font-size: 16px !important;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
        }


        input::placeholder {
            color: #ccc;
        }

        .navbar {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
        }

        .navbar a {
            color: #fff;
            text-decoration: none;
            padding: 15px 35px;
            border-radius: 5px;
            font-family: 'alfarn-2', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .navbar a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .navbar a.active {
            background-color: #ff9900;
            color: #000;
        }

        .main-wrapper {
            display: flex;
            flex-direction: column;
            min-height: 95vh;
        }

        .main-content {
            flex: 1;
            padding: 20px;
        }

        /* Inline results panel (always visible) */
        .results-panel {
            box-shadow: 0 0 10px 2px #FDA929 !important;
            background-color: #2b4a5e;
            color: white;
            margin: 0 auto 30px auto;
            padding: 20px;
            border: 2px solid #FDA929;
            width: 100%;
            max-width: 900px;
            /* match Rehab */
            border-radius: 15px;
            text-align: center;
        }

        .results-panel p {
            margin: 10px 0;
            font-size: 22px;
        }

        .results-panel strong {
            color: #FDA929;
            font-size: 25px;
        }

        .hint {
            opacity: 0.85;
            font-size: 16px;
            margin-top: 8px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
        }

        .footer {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
            text-align: center;
            padding: 5px;
            margin-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2) !important;
        }

        .footer .disclaimer {
            width: 70%;
            font-size: 14px;
            line-height: 1.6;
            margin: 10px auto;
            letter-spacing: 0.5px;
        }

        .disclaimer-label {
            color: #FDA929;
            font-size: 20px;
            line-height: 1.6;
            margin: 5px;
            font-weight: bold;
        }

        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
            }

            .navbar a {
                padding: 10px;
                width: 100%;
                text-align: center;
            }
        }

/* === lf-disable-menus === */
        nav,
        .navbar,
        .menu,
        .tabs,
        .tab-nav,
        .topnav,
        #tabs {
            display: none !important;
        }


        /* Stacked layout: form above results (Rehab) */
        .calc-two-col {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        /* Make the calculator a bit wider but centered */
        .calc-two-col #maoForm {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
        }

        /* Results panel sits UNDER the form and matches its width */
        .calc-two-col .results-panel {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            position: static;
            text-align: center;
        }


        /* ===================== unified style (from rehab) ===============*/

        /* ===== Unified Control Theme (glass + gold) ===== */
        :root {
        }

        .lf-control {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 100%;
            padding: var(--ctrl-pad-y) var(--ctrl-pad-x);
            border-radius: var(--ctrl-radius);
            border: 1px solid rgba(253, 169, 41, 0.45);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
                rgba(19, 65, 96, 0.35);
            color: #eaf2f7;
            font-size: 16px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
            outline: none;
            transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
            backdrop-filter: blur(3px);
            box-sizing: border-box;
        }


        .lf-control:hover {
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)),
                rgba(19, 65, 96, 0.42);
            border-color: var(--ctrl-border-hover);
        }

        .lf-control:focus {
            border-color: #FDA929;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 3px var(--ctrl-ring) !important;
        }

        .lf-control::placeholder {
            color: #9fb2be;
        }

        .lf-control:disabled {
            opacity: var(--ctrl-disabled);
            cursor: not-allowed;
        }


        /* ======================== AUTOFILL FIX FROM REHAB ============*/

        /* Unify autofill with glass-gold */
        /* ======================== AUTOFILL — KEEP NORMAL LOOK =================== */

        /* Keep text color only; don't repaint background globally */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        select:-webkit-autofill,
        textarea:-webkit-autofill {
            -webkit-text-fill-color: var(--ctrl-fg, #eaf2f7) !important;
            caret-color: var(--ctrl-fg, #eaf2f7) !important;
            /* remove sticky background hack */
        }

        /* For our styled inputs, explicitly restore the usual gradient */
        input.lf-control:-webkit-autofill,
        input.lf-control:-webkit-autofill:hover,
        input.lf-control:-webkit-autofill:focus,
        textarea.lf-control:-webkit-autofill,
        textarea.lf-control:-webkit-autofill:hover,
        textarea.lf-control:-webkit-autofill:focus,
        select.lf-control:-webkit-autofill,
        select.lf-control:-webkit-autofill:hover,
        select.lf-control:-webkit-autofill:focus {
            /* neutralize UA paint bucket completely */
            -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
            box-shadow: none !important;

            /* apply the SAME background your .lf-control uses */
            background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
            background-color: rgba(19, 65, 96, 0.35) !important;
            -webkit-background-clip: padding-box !important;

            /* keep border + typography */
            border: 1px solid rgba(253, 169, 41, 0.45) !important;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;

            -webkit-box-shadow: 0 0 0 1000px rgba(19, 65, 96, 0.35) inset !important;
            box-shadow: 0 0 0 1000px rgba(19, 65, 96, 0.35) inset !important;
            background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
            background-color: rgba(19, 65, 96, 0.35) !important;
            -webkit-background-clip: padding-box !important;
            -webkit-text-fill-color: #eaf2f7 !important;
            caret-color: #eaf2f7 !important;
        }



        .form-rows {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .two-col {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 20px;
        }

        .two-col .field {
            min-width: 0;
            display: flex;
            flex-direction: column;
        }

        @media (max-width:900px) {
            .two-col {
                grid-template-columns: 1fr;
            }
        }


        /* =================== INFOR ICONS ======================*/
        /* Info icons + overlays (Rehab) */
        .info-icon {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 14px;
            height: 14px;
            margin-left: 4px;
            border-radius: 50%;
            background: #ffffff4d;
            color: #1c3341;
            font-size: 13px;
            font-weight: 400;
            cursor: pointer;
            position: relative;

            /* Add smooth transitions */
            transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
        }

        /* On hover: invert colors + lift slightly */
        .info-icon:hover {
            background: #FDA929;
            color: #fff;
            transform: translateY(-1px);
        }

        /* Keep ::after for very short tooltips if you want, OR comment it out */
        /* Instead, use .help-text as a real hover panel */

        /* Help panel container (sits right after .info-icon) */
        .help-text {
            position: absolute;
            top: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%);
            width: 380px;
            max-width: min(90vw, 420px);
            background: #2B4A5E;
            color: #fff;
            padding: 8px 12px;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .35) !important;
            z-index: 9999;
            font-size: 14px;
            line-height: 1.4;

            /* Hidden by default */
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            user-select: text;
            /* allow copy-paste */
            transition: opacity .2s ease, transform .2s ease;
        }

        .help-text::before {
            content: "";
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-bottom-color: #2B4A5E;
        }

        /* When hovering icon OR the box, keep it visible */
        .info-icon:hover+.help-text,
        .help-text:hover {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }

        /* Wrapper so hover covers the icon + box together */
        .info {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        /* Show the panel when hovering the wrapper OR the panel itself */
        .info:hover .help-text,
        .help-text:hover,
        .help-text:focus-within {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }

        /* Make text easy to copy across browsers */
        .help-text {
            -webkit-user-select: text;
            user-select: text;
        }

        /* ======================= RESULTS CONTAINER 3 GRID ===============*/
        /* Rehab-style results grid */
        /* ---- Glass Golden KPI cards (from Rehab) ---- */
        .kpi-band {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 25px;
            flex-wrap: wrap;
            margin: 20px auto;
            width: 100%;
            max-width: 900px;
        }

        .kpi-card {
            flex: 1;
            min-width: 200px;
            max-width: 200px;
            text-align: center;
            background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
            border: 1px solid rgba(255, 255, 255, .22);
            border-radius: 16px;
            padding: 0px 10px;
            backdrop-filter: blur(8px);
            box-shadow: 0 10px 28px rgba(0, 0, 0, .30), 0 0 0 1px rgba(255, 255, 255, .06) inset !important;
            position: relative;
        }

        .kpi-card:before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 16px;
            pointer-events: none;
            box-shadow: 0 0 0 1px rgba(253, 169, 41, .35), 0 0 22px rgba(253, 169, 41, .15) inset !important;
        }

        .kpi-label {
            font-family: 'alfarn', serif;
            font-size: 12px;
            letter-spacing: .5px;
            color: #FDA929;
            opacity: .95;
        }

        .kpi-value {
            margin-top: 1px;
            font-weight: 800;
            font-size: 18px;
            color: #fff;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, .35);
        }

        /* Emphasize middle card a bit */
        .kpi-card:nth-child(2) {
            min-width: 240px;
            max-width: 240px;
            padding: 6px 12px;
            transform: scale(1.1);

        }

        /* Slightly larger text inside the emphasized card */
        .kpi-card:nth-child(2) .kpi-label {
            font-size: 13px;
        }

        .kpi-card:nth-child(2) .kpi-value {
            font-size: 20px;
        }


        /* Main total highlight (MAO total) */
        #totalMAO {
            display: block;
            font-weight: 900;
            font-size: 24px !important;
            color: #fff;
            text-shadow: 0 4px 4px rgb(0, 0, 0);
            letter-spacing: .5px;
        }


        .kpi-card.small {
            padding: 7px 6px;
            border-radius: 12px;
        }

        /* Highlight main Rehab Total Cost metric */
        #totalMAO {
            text-shadow:
                0 4px 4px rgb(0, 0, 0);
            color: #fff;
            font-size: 24px !important;
            font-weight: 900;
            letter-spacing: 0.5px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;

        }

/* === lf-autofill-natural-reset === */
        /* === Natural look for autofill & instant reset on blur/tab change === */
        .lf-control:-webkit-autofill,
        .lf-control:-webkit-autofill:hover,
        .lf-control:-webkit-autofill:focus {
            transition: none !important;
            -webkit-text-fill-color: var(--ctrl-fg, #eaf2f7) !important;
            caret-color: var(--ctrl-fg, #eaf2f7) !important;
            background:
                linear-gradient(180deg, var(--ctrl-bg1, rgba(255, 255, 255, .06)), var(--ctrl-bg2, rgba(255, 255, 255, .02))),
                var(--ctrl-tint, rgba(19, 65, 96, .35)) !important;
            -webkit-background-clip: padding-box !important;
            background-clip: padding-box !important;
            -webkit-box-shadow: 0 0 0 1000px rgba(19, 65, 96, .35) inset !important;
            box-shadow: 0 0 0 1000px rgba(19, 65, 96, .35) inset !important;
        }

        .lf-control:-webkit-autofill:not(:focus) {
            -webkit-box-shadow: 0 0 0 1000px rgba(19, 65, 96, .35) inset !important;
            box-shadow: 0 0 0 1000px rgba(19, 65, 96, .35) inset !important;
            transition: none !important;
        }

        .lf-autofill-reset input:-webkit-autofill,
        .lf-autofill-reset .lf-control:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px rgba(19, 65, 96, .35) inset !important;
            box-shadow: 0 0 0 1000px rgba(19, 65, 96, .35) inset !important;
            transition: none !important;
        }

/* === lf-autofill-lastwins === */
        /* === LAST-WINS AUTOFILL/REPAINT NEUTRALIZER (tab switch / visibility repaint) === */
        .lf-control,
        .select-wrap select.lf-control {
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
                rgba(19, 65, 96, 0.35) !important;
        }

        /* Blink/WebKit autofill + preview repaint (keeps glass theme) */
        .lf-control:-webkit-autofill,
        .lf-control:-webkit-autofill:hover,
        .lf-control:-webkit-autofill:focus,
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        select:-webkit-autofill {
            -webkit-text-fill-color: #eaf2f7 !important;
            caret-color: #eaf2f7 !important;
            background-color: transparent !important;
            background-image: none !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
                0 0 0 1000px rgba(19, 65, 96, 0.35) inset !important;
            -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
                0 0 0 1000px rgba(19, 65, 96, 0.35) inset !important;
            transition: background-color 99999s linear 0s, color 0s !important;
        }

        /* Firefox */
        input.lf-control:-moz-autofill,
        textarea.lf-control:-moz-autofill {
            box-shadow: none !important;
            background: transparent !important;
            color: #eaf2f7 !important;
        }

        /* Enforce glass on focus after return from hidden tab */
        .lf-control:focus {
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)),
                rgba(19, 65, 96, 0.42) !important;
        }

        /* ============================================================
           2C-I — Responsive: tablet & mobile
           All rules below are additive max-width overrides.
           Desktop rules above this block are untouched.
           ============================================================ */

        /* --- 768px: tooltip clipping fix + KPI card reflow --- */
        @media (max-width: 768px) {

            /* Tooltip: switch from centered-on-icon to left-anchored.
               The base rule uses left:50% + translateX(-50%) which can push
               the panel off-screen when the icon sits near the viewport edge.
               On mobile we anchor left:0, clamp width to viewport, and drop
               the centering transform so the panel opens rightward from the icon. */
            .help-text {
                left: 0;
                transform: none;
                width: min(320px, 90vw);
                max-width: min(320px, 90vw);
            }

            /* Arrow stays centered relative to new left-anchored panel */
            .help-text::before {
                left: 20px;
                transform: none;
            }

            /* Keep panel visible on hover (override base transform side-effect) */
            .info-icon:hover + .help-text,
            .help-text:hover,
            .info:hover .help-text {
                transform: none;
            }

            /* KPI cards: reduce min-width so they can pair up on phone */
            .kpi-card {
                min-width: 130px;
                max-width: 160px;
            }

            /* De-emphasize middle card scale on phone — scale(1.1) causes overflow */
            .kpi-card:nth-child(2) {
                min-width: 150px;
                max-width: 180px;
                transform: none;
            }

            /* KPI band gap reduction on phone */
            .kpi-band {
                gap: 12px;
            }

            /* Results panel text tightened */
            .results-panel p      { font-size: 18px; }
            .results-panel strong { font-size: 20px; }
        }

        /* --- 480px: KPI cards single-column + page title scale --- */
        @media (max-width: 480px) {

            /* KPI cards: fully single-column on very small phones */
            .kpi-card,
            .kpi-card:nth-child(2) {
                min-width: 0;
                max-width: 100%;
                flex: 1 1 100%;
                transform: none;
            }

            /* Page title scale */
            h1 { font-size: 1.5rem; margin: 24px 0; }

            /* Body padding */
            body { padding: 12px; }
        }