:root {
            /* ═══ Tokens alineados con tokens-marca.css / shared-components.css del sitio ═══ */

            /* Azul institucional UBA (PANTONE 288 C) */
            --azul-uba: #1d2554;
            --indigo: #1d2554;            /* alias */
            --azul-hover: #2e3a6e;
            --azul-activo: #3f4b7f;

            /* Cian FADU (hilo de identidad) */
            --cian: #00b8db;              /* PANTONE 306 C — acento/borde/fondo, NO texto sobre blanco */
            --cian-profundo: #0e7490;     /* = --cian-fadu-texto, 5.36:1 s/blanco (AA) */
            --celeste-medio: #0e7490;     /* mismo hilo cian, alineado */

            /* Celestes / niebla */
            --celeste: #91bde1;           /* = --celeste-uba (PANTONE 278 C) */
            --celeste-claro: #bdd7ed;
            --niebla: #bdd7ed;

            /* Morado FADU (área Diseño, PANTONE 272 C) */
            --fadu-violeta: #6861ac;

            /* Naranja/ámbar — acento de acción (uso restringido; nunca azul+amarillo) */
            --amarillo-uba: #f7a600;
            --amarillo-claro: #fccd8e;
            --amarillo-hover: #e69500;
            --amarillo-activo: #cc8500;

            /* Colores por área temática (= sitio). Rampa -dark = valores canónicos de
               shared-components.css (single-source); blanco sobre -dark pasa AA en las 6 áreas. */
            --color-sustentabilidad:#6bbf3a; --color-sustentabilidad-bg:#e6f7e0; --color-sustentabilidad-dark:#3a6b1a;
            --color-patrimonio:#952b6c;      --color-patrimonio-bg:#f5e8f0;    --color-patrimonio-dark:#6b1e4d;
            --color-urbanismo:#2e86c1;       --color-urbanismo-bg:#ecf4f9;     --color-urbanismo-dark:#246997;
            --color-diseno:#6861ac;          --color-diseno-bg:#e8e6f5;        --color-diseno-dark:#4a4080;
            --color-proyecto:#ff7621;        --color-proyecto-bg:#fff3e8;      --color-proyecto-dark:#a34d15;
            --color-gestion:#3bc3ad;         --color-gestion-bg:#edfaf8;       --color-gestion-dark:#21695c;

            /* Neutros / texto */
            --blanco: #ffffff;
            --gris-claro: #f5f5f5;
            --gris-medio: #e0e0e0;
            --gris-oscuro: #666666;
            --texto-terciario: #52596b;   /* 7:1 s/blanco = AAA para cuerpo */

            /* Tipografía */
            --font-bitter: 'Bitter', Georgia, serif;

            /* Sombras: fallback LOCAL por si shared-components.css no carga (el simulador es la única
               superficie viva en mantenimiento; no debe depender de un asset del sitio caído). */
            --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
            --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-bitter);
            background: linear-gradient(135deg, var(--celeste-claro) 0%, var(--blanco) 100%);
            min-height: 100vh;
            padding: 0;
            color: var(--azul-uba);
            line-height: 1.6;
        }

        /* Logo Header */
        .logo-header {
            background: var(--blanco);
            padding: 30px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .logo-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-text {
            font-size: 3rem;
            font-weight: 900;
            letter-spacing: -1px;
        }

        .logo-uba-blue {
            color: var(--celeste-medio);
        }

        .logo-fadu-black {
            color: #000000;
        }

        .logo-image {
            max-height: 80px;
            width: auto;
        }

        /* Hero Section - Sin breadcrumb */
        .hero {
            background: linear-gradient(135deg, var(--azul-uba) 0%, var(--azul-hover) 100%);
            color: var(--blanco);
            padding: 60px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect fill="%231d2554" width="100" height="100"/><circle fill="%236861ac" opacity="0.1" cx="50" cy="50" r="40"/></svg>');
            opacity: 0.1;
            z-index: 0;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 900px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 2.8rem;
            font-weight: 900;
            margin-bottom: 15px;
            line-height: 1.2;
        }

        .hero .subtitle {
            font-size: 1.4rem;
            font-weight: 300;
            margin-bottom: 10px;
            opacity: 0.95;
        }

        .hero .claim {
            font-size: 1.1rem;
            font-weight: 400;
            opacity: 0.9;
            max-width: 700px;
            margin: 0 auto;
        }

        /* Contenedor Principal (scoped a main: no pisar el .container del header/footer del sitio) */
        main .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .content {
            background: var(--blanco);
            border-radius: 2px;
            padding: 40px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        /* Franja informativa */
        .franja-institucional {
            background: linear-gradient(135deg, var(--amarillo-uba) 0%, var(--amarillo-claro) 100%);
            color: var(--azul-uba);
            padding: 20px 30px;
            border-radius: 2px;
            text-align: center;
            font-weight: 600;
            font-size: 1.05rem;
            margin-bottom: 40px;
            box-shadow: 0 2px 8px rgba(247, 166, 0, 0.3);
        }

        /* Secciones numeradas */
        .section {
            margin-bottom: 40px;
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 3px solid var(--celeste-medio);
        }

        .section-number {
            background: var(--celeste-medio);
            color: var(--blanco);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            font-weight: 900;
            flex-shrink: 0;
        }

        .section-header h2 {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--azul-uba);
            flex: 1;
        }

        /* Cards */
        .card {
            background: var(--gris-claro);
            padding: 30px;
            border-radius: 2px;
            border-left: 5px solid var(--celeste-medio);
        }

        .card label {
            display: block;
            font-weight: 700;
            font-size: 1.15rem;
            color: var(--azul-uba);
            margin-bottom: 15px;
        }

        .card select {
            width: 100%;
            padding: 15px 20px;
            font-size: 1.05rem;
            font-family: var(--font-bitter);
            border: 2px solid var(--gris-medio);
            border-radius: 2px;
            background: var(--blanco);
            color: var(--azul-uba);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .card select:hover {
            border-color: var(--celeste-medio);
        }

        .card select:focus {
            outline: none;
            border-color: var(--celeste-medio);
            box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.1);
        }

        /* Radio buttons mejorados */
        .radio-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .radio-option {
            position: relative;
        }

        .radio-option input[type="radio"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        .radio-option .radio-label {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 20px 15px;
            background: var(--blanco);
            border: 3px solid var(--gris-medio);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--azul-uba);
            min-height: 110px;
        }

        .radio-option input[type="radio"]:checked + .radio-label {
            background: var(--celeste-medio);
            color: var(--blanco);
            border-color: var(--celeste-medio);
            box-shadow: 0 4px 15px rgba(0, 119, 200, 0.3);
            transform: translateY(-3px);
        }

        .radio-option:hover .radio-label {
            border-color: var(--celeste-medio);
            transform: translateY(-2px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .descuento-tag {
            display: inline-block;
            background: var(--amarillo-uba);
            color: var(--azul-uba);
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .radio-option input[type="radio"]:checked + .radio-label .descuento-tag {
            background: var(--blanco);
            color: var(--celeste-medio);
        }

        /* Estilos diferenciados para opciones destacadas */
        .radio-destacado .radio-label {
            background: linear-gradient(135deg, var(--amarillo-claro) 0%, var(--blanco) 100%);
            border-color: var(--amarillo-uba);
            border-width: 4px;
        }

        .radio-destacado input[type="radio"]:checked + .radio-label {
            background: linear-gradient(135deg, var(--amarillo-uba) 0%, var(--amarillo-hover) 100%);
            border-color: var(--amarillo-uba);
        }

        .radio-destacado .radio-label {
            padding: 25px 30px;
            font-size: 1.2rem;
        }

        .radio-secundario .radio-label {
            padding: 12px 14px;
            font-size: 0.9rem;
        }

        .btn-calcular {
            width: 100%;
            padding: 18px 40px;
            font-size: 1.3rem;
            font-weight: 700;
            font-family: var(--font-bitter);
            color: var(--blanco);
            background: linear-gradient(135deg, var(--celeste-medio) 0%, var(--azul-uba) 100%);
            border: none;
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 119, 200, 0.3);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn-calcular:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 119, 200, 0.4);
        }

        .btn-calcular:active {
            transform: translateY(0);
        }

        .button-container {
            margin-top: 40px;
        }

        /* Resultados */
        .resultados {
            margin-top: 50px;
            padding: 40px;
            background: linear-gradient(135deg, var(--gris-claro) 0%, var(--blanco) 100%);
            border-radius: 2px;
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
        }

        .resultados.hidden {
            display: none;
        }

        .resultados-title {
            text-align: center;
            font-size: 2.2rem;
            font-weight: 900;
            color: var(--azul-uba);
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 4px solid var(--amarillo-uba);
        }

        .resultados-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .resultado-section {
            background: var(--blanco);
            padding: 30px;
            border-radius: 2px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }

        .resultado-section h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--celeste-medio);
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--celeste-medio);
        }

        .result-card {
            background: var(--gris-claro);
            padding: 20px;
            border-radius: 2px;
            margin-bottom: 15px;
            border-left: 4px solid var(--celeste-medio);
        }

        .result-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--gris-oscuro);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .result-value {
            font-size: 2rem;
            font-weight: 900;
            color: var(--azul-uba);
        }

        .result-detail {
            font-size: 0.9rem;
            color: var(--gris-oscuro);
            margin-top: 5px;
            font-style: italic;
        }

        .total-section {
            background: linear-gradient(135deg, var(--celeste-medio) 0%, var(--azul-uba) 100%);
            color: var(--blanco);
            padding: 25px;
            border-radius: 2px;
            text-align: center;
            margin-top: 20px;
            box-shadow: 0 4px 15px rgba(0, 119, 200, 0.3);
        }

        .total-label {
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
            opacity: 0.95;
        }

        .total-value {
            font-size: 2.8rem;
            font-weight: 900;
            margin-bottom: 5px;
        }

        /* Info Box */
        .info-box {
            background: linear-gradient(135deg, #e8f5ff 0%, #f0f9ff 100%);
            border-left: 5px solid var(--celeste-medio);
            padding: 30px;
            border-radius: 2px;
            margin-top: 40px;
        }

        .info-box h3 {
            color: var(--celeste-medio);
            font-weight: 700;
            font-size: 1.4rem;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .info-icon {
            background: var(--celeste-medio);
            color: var(--blanco);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .info-box p {
            margin-bottom: 15px;
            line-height: 1.7;
            color: var(--azul-uba);
        }

        .info-box ul {
            list-style: none;
            padding-left: 0;
        }

        .info-box li {
            padding: 12px 0;
            padding-left: 30px;
            position: relative;
            line-height: 1.6;
            color: var(--azul-uba);
        }

        .info-box li::before {
            content: "▸";
            position: absolute;
            left: 0;
            color: var(--celeste-medio);
            font-size: 1.3rem;
            font-weight: 900;
        }

        .highlight-box {
            background: rgba(247, 166, 0, 0.1);
            border: 2px solid var(--amarillo-uba);
            border-radius: 2px;
            padding: 20px;
            margin: 20px 0;
        }

        .alert-badge {
            display: inline-block;
            background: var(--amarillo-uba);
            color: var(--azul-uba);
            padding: 5px 15px;
            border-radius: 15px;
            font-weight: 700;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            margin-right: 10px;
        }

        /* Footer del sitio: estilizado por shared-components.css (header/footer reales vía components.js).
           Las reglas .footer* ad-hoc se removieron para no pisar el footer real. */

        /* Responsive */
        @media (max-width: 768px) {
            .logo-text {
                font-size: 2rem;
            }

            .hero h1 {
                font-size: 2rem;
            }

            .hero .subtitle {
                font-size: 1.2rem;
            }

            .hero .claim {
                font-size: 1rem;
            }

            .content {
                padding: 25px;
            }

            .section-header h2 {
                font-size: 1.4rem;
            }

            .section-number {
                width: 40px;
                height: 40px;
                font-size: 1.4rem;
            }

            .radio-group {
                grid-template-columns: 1fr;
            }

            .radio-destacado .radio-label {
                padding: 25px 30px;
                font-size: 1.2rem;
            }

            .radio-secundario .radio-label {
                padding: 12px 14px;
                font-size: 0.9rem;
            }

            .btn-calcular {
                width: 100%;
                padding: 18px 40px;
            }

            .resultados-grid {
                grid-template-columns: 1fr;
            }

            .resultados-title {
                font-size: 1.8rem;
            }

            .total-value {
                font-size: 2.5rem;
            }
        }

        /* Animaciones */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .resultados {
            animation: fadeIn 0.6s ease;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        }

        button:active {
            transform: translateY(0);
        }

        /* ===== TAB SWITCHER — botones grandes ===== */
        .tab-switcher { display:flex; gap:16px; margin:0 0 32px 0; flex-wrap:wrap; }
        .tab-btn {
            flex:1; min-width:220px;
            padding:22px 28px;
            background:white;
            color:var(--azul-uba);
            border:2.5px solid var(--azul-uba);
            border-radius:16px;
            font-family:var(--font-bitter);
            font-size:1rem;
            font-weight:800;
            cursor:pointer;
            transition:all .25s ease;
            text-transform:uppercase;
            letter-spacing:.5px;
            line-height:1.4;
            box-shadow:0 4px 14px rgba(29,37,84,.10);
            text-align:center;
        }
        .tab-btn.active {
            background:linear-gradient(135deg,var(--azul-uba) 0%,#6861ac 100%);
            color:white;
            border-color:transparent;
            box-shadow:0 8px 24px rgba(29,37,84,.25);
            transform:translateY(-2px);
        }
        .tab-btn:not(.active):hover {
            background:#f0f4ff;
            border-color:#6861ac;
            color:#6861ac;
            transform:translateY(-2px);
            box-shadow:0 6px 18px rgba(104,97,172,.2);
        }
        .tab-icon { font-size:2rem; display:block; margin-bottom:8px; }
        .tab-sub  { font-size:.75rem; font-weight:600; opacity:.8; text-transform:none; letter-spacing:0; display:block; margin-top:4px; }
        .panel { display:none; }
        .panel.active { display:block; }

        /* ===== PANEL CURSANDO ===== */
        .cursando-card { background:white; border-radius:14px; box-shadow:0 4px 18px rgba(29,37,84,.1); overflow:hidden; margin-bottom:20px; }
        .cursando-card-header { background:linear-gradient(135deg,var(--azul-uba) 0%,#6861ac 100%); padding:18px 24px; color:white; display:flex; align-items:center; gap:12px; }
        .cursando-card-header .num { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
        .cursando-card-header h3 { margin:0; font-size:1rem; font-weight:700; }
        .cursando-card-body { padding:22px 24px; }
        .dni-input-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
        .dni-input-row input[type="text"] { flex:1; min-width:150px; padding:13px 16px; border:2px solid var(--gris-medio); border-radius:10px; font-family:var(--font-bitter); font-size:1.1rem; font-weight:700; color:var(--azul-uba); letter-spacing:2px; outline:none; transition:border-color .2s; }
        .dni-input-row input[type="text"]:focus { border-color:#6861ac; }
        .btn-consultar { padding:13px 26px; background:linear-gradient(135deg,#6861ac 0%,#4a43a0 100%); color:white; border:none; border-radius:10px; font-family:var(--font-bitter); font-size:.95rem; font-weight:700; cursor:pointer; transition:all .25s; text-transform:uppercase; white-space:nowrap; }
        .btn-consultar:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(104,97,172,.4); }
        .resultado-alumno { background:linear-gradient(135deg,#f0f4ff 0%,#f7f0ff 100%); border-left:5px solid #6861ac; border-radius:12px; padding:22px 24px; margin-bottom:14px; }
        .alumno-nombre { font-size:1.25rem; font-weight:800; color:var(--azul-uba); margin-bottom:3px; }
        .alumno-carrera { font-size:.9rem; color:#6861ac; font-weight:600; margin-bottom:14px; }
        .arancel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:10px; }
        .arancel-chip { background:white; border-radius:10px; padding:13px 15px; border:1.5px solid var(--gris-medio); text-align:center; }
        .arancel-chip.destacado { border-color:#6861ac; background:linear-gradient(135deg,var(--azul-uba) 0%,#6861ac 100%); color:white; }
        .arancel-chip .chip-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; opacity:.7; margin-bottom:5px; }
        .arancel-chip.destacado .chip-label { opacity:.85; }
        .arancel-chip .chip-value { font-size:1.1rem; font-weight:800; color:var(--azul-uba); }
        .arancel-chip.destacado .chip-value { color:white; font-size:1.25rem; }
        .bonificacion-selector { margin-top:18px; background:white; border:1.5px solid var(--gris-medio); border-radius:12px; padding:18px 22px; }
        .bonificacion-selector label { font-size:.82rem; text-transform:uppercase; letter-spacing:.5px; color:var(--gris-oscuro); display:block; margin-bottom:8px; }
        .bonificacion-selector select { width:100%; padding:11px 14px; border:2px solid var(--gris-medio); border-radius:8px; font-family:var(--font-bitter); font-size:.9rem; color:var(--azul-uba); outline:none; cursor:pointer; }
        .bonificacion-selector select:focus { border-color:#6861ac; }
        .aviso-ripte { background:#fffbeb; border-left:4px solid #d4af37; border-radius:6px; padding:11px 15px; font-size:.8rem; color:#78350f; margin-top:14px; line-height:1.5; }
        .no-encontrado { background:#fff5f5; border-left:4px solid #dc2626; border-radius:8px; padding:16px 20px; color:#7f1d1d; font-size:.92rem; }
        .inscripcion-aviso { background:linear-gradient(135deg,#fff7ed 0%,#fef3c7 100%); border:2px solid #d4af37; border-radius:12px; padding:18px 22px; margin-bottom:22px; display:flex; align-items:flex-start; gap:12px; }
        .inscripcion-aviso .aviso-icon { font-size:1.8rem; flex-shrink:0; }
        .inscripcion-aviso h4 { margin:0 0 5px 0; color:var(--azul-uba); font-size:.95rem; font-weight:800; }
        .inscripcion-aviso p { margin:0; font-size:.85rem; color:#78350f; line-height:1.5; }


/* ===================================================================
   Clases extraidas de estilos inline del HTML estatico
   Extraccion 1:1 — sin cambios visuales. El restyle FADU va despues.
   =================================================================== */

/* Notas / hints chicos */
.hint{margin-top:10px;font-size:.8rem;color:var(--gris-oscuro);}
.hint--xs{font-size:.76rem;}

/* Panel admin del padron */
.admin-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center;}
.btn-admin-update{background:linear-gradient(135deg,#1a5276,#6861ac);padding:10px 18px;font-size:.85rem;}
.btn-limpiar{padding:10px 16px;background:#fee2e2;color:#991b1b;border:1.5px solid #fca5a5;border-radius:10px;font-family:var(--font-bitter);font-size:.82rem;font-weight:700;cursor:pointer;}

/* Aviso de errores (caja gris) */
.aviso-errores{background:#f8fafc;border:1.5px solid #cbd5e1;border-radius:12px;padding:15px 18px;margin-top:22px;display:flex;gap:10px;align-items:flex-start;}
.aviso-errores__icon{font-size:1.3rem;flex-shrink:0;cursor:default;}
.aviso-errores__body{font-size:.82rem;color:#475569;line-height:1.6;}
.aviso-errores__title{color:#1e293b;}
.aviso-errores__link{color:#6861ac;font-weight:700;text-decoration:none;}

/* Link dentro de la franja institucional */
.franja-link{color:white;font-weight:700;}

/* Banner de carrera seleccionada (resultados) */
.carrera-banner{background:linear-gradient(135deg,var(--azul-uba) 0%,var(--fadu-violeta) 100%);padding:20px;border-radius:8px;margin-bottom:30px;text-align:center;color:white;}
.carrera-banner__eyebrow{font-size:.9rem;opacity:.9;margin-bottom:8px;}
.carrera-banner__nombre{font-size:1.4rem;font-weight:700;line-height:1.3;}

/* Notas dentro de total-section */
.total-detalle{margin-top:10px;font-size:.88rem;opacity:.9;}
.total-aviso{margin-top:15px;font-size:.85rem;opacity:.85;line-height:1.4;}
.total-ripte{margin-top:12px;font-size:.75rem;opacity:.75;line-height:1.3;font-style:italic;}

/* Fila de botones de accion (resultados) */
.acciones-row{display:flex;gap:15px;margin:30px 0 20px 0;flex-wrap:wrap;}
.btn-volver{flex:1;min-width:200px;padding:18px 30px;background:white;color:var(--fadu-violeta);border:2px solid var(--fadu-violeta);border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;}
/* OJO RIESGO BOCA: amarillo sobre azul. Candidato #1 del restyle FADU. */
.btn-inscribite{flex:1.5;min-width:250px;padding:22px 40px;background:linear-gradient(135deg,var(--amarillo-uba) 0%,#ffd700 100%);color:var(--azul-uba);border:none;border-radius:8px;font-size:1.2rem;font-weight:800;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px rgba(255,193,7,.4);}

/* Nota "siempre a tu favor" */
.nota-favor{background:#f0f9ff;border-left:4px solid var(--azul-uba);padding:15px 20px;margin:20px 0 30px 0;border-radius:4px;}
.nota-favor__text{margin:0;font-size:.85rem;color:#1e3a8a;line-height:1.5;}

/* Info-box: subtitulos y listas */
.info-subtitle{margin-top:30px;}
.lista-indent{margin:10px 0 0 20px;}

/* Footer del sitio: lo estiliza shared-components.css (no pisar .footer* acá) */

/* Utilidades de espaciado */
.u-mt-15{margin-top:15px;}
.u-mb-12{margin-bottom:12px;}


/* ====================================================================
   CAPA FADU — Identidad posgrado (índigo + cian) y rediseño de estados
   Va al final: gana en empates de especificidad sobre el CSS base.
   Objetivos: (1) identidad FADU-UBA, (2) que "no elegido" y "elegido"
   sean inequívocos, (3) micro-animaciones de interacción.
   Ámbar: demotado a barra fina de 3px. Sin azul+amarillo (riesgo Boca).
   ==================================================================== */


/* ---- Franja institucional: fuera el ámbar ---- */
.franja-institucional{
  background:var(--niebla);
  color:var(--indigo);
  border-top:3px solid var(--cian);   /* única barra fina de acento */
  box-shadow:0 2px 8px rgba(29,37,84,.10);
}
.franja-link{ color:var(--cian-profundo); text-decoration:underline; }

/* ---- Aviso de inscripción: de oro a celeste/cian ---- */
.inscripcion-aviso{ background:#eef5fb; border:2px solid var(--cian); }
.inscripcion-aviso h4{ color:var(--indigo); }

/* ---- Highlight / alert ---- */
.highlight-box{ background:rgba(0,184,219,.08); border:2px solid var(--cian-profundo); }
.alert-badge{ background:var(--indigo); color:#fff; }

/* ---- Tabs y headers de card: gradiente índigo→cian, esquinas 2px ---- */
.tab-btn{ border-radius:2px; border-color:var(--indigo); }
.tab-btn.active{ background:linear-gradient(135deg,var(--indigo) 0%,var(--cian-profundo) 100%); }
.tab-btn:not(.active):hover{ background:#eef5fb; border-color:var(--cian-profundo); color:var(--cian-profundo); }
.cursando-card{ border-radius:2px; }
.cursando-card-header{ background:linear-gradient(135deg,var(--indigo) 0%,var(--cian-profundo) 100%); }
.dni-input-row input[type="text"]{ border-radius:2px; }
.dni-input-row input[type="text"]:focus{ border-color:var(--cian); }

/* ====================================================================
   RADIOS — el corazón del fix: recomendar ≠ elegir
   ==================================================================== */

/* "destacado" deja de ser relleno ámbar: ahora es solo tamaño/prominencia */
.radio-destacado .radio-label{ background:var(--blanco); border-color:var(--niebla); border-width:2px; }
.radio-destacado input[type="radio"]:checked + .radio-label{ background:var(--indigo); border-color:var(--cian); }

/* Estado base — NO elegido: neutro, claramente "disponible" */
.radio-option .radio-label{
  background:var(--blanco);
  border:2px solid var(--niebla);
  color:var(--indigo);
  position:relative;
}
/* indicador ○ arriba-derecha (vacío = no elegido) */
.radio-option .radio-label::after{
  content:"";
  position:absolute; top:10px; right:10px;
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--niebla); background:transparent;
  transition:all .25s ease;
}

/* La no elegida NO late: calma y neutra. El ○ vacío arriba-derecha es la señal de "esto se elige". */
.radio-option input[type="radio"]:not(:checked) + .radio-label{
  animation:none;
}
/* Hover sobre no elegida: corta el latido, sube borde cian */
.radio-option:hover input:not(:checked) + .radio-label{
  animation:none; border-color:var(--cian);
  transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,112,143,.18);
}
.radio-option:hover .radio-label::after{ border-color:var(--cian); }

/* Estado ELEGIDO — índigo sólido, anillo cian, check ✓, sin latido */
.radio-option input[type="radio"]:checked + .radio-label{
  background:var(--indigo);
  color:#fff;
  border:3px solid var(--cian);
  box-shadow:0 0 0 4px rgba(0,184,219,.20), 0 8px 22px rgba(29,37,84,.28);
  transform:translateY(-3px);
  animation:check-pop .35s ease;
}
.radio-option:hover input:checked + .radio-label{ transform:translateY(-4px); }
.radio-option input[type="radio"]:checked + .radio-label::after{
  content:"\2713";
  border-color:var(--cian); background:var(--cian);
  color:var(--indigo); font-size:13px; font-weight:900; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

/* Foco accesible por teclado */
.radio-option input[type="radio"]:focus-visible + .radio-label{
  outline:3px solid var(--cian-profundo); outline-offset:3px;
}

/* descuento-tag: chip informativo (no ámbar) */
.descuento-tag{ background:var(--cian-profundo); color:#fff; }
.radio-option input[type="radio"]:checked + .radio-label .descuento-tag{ background:#fff; color:var(--indigo); }

/* Cinta "Recomendada" — solo en 1 CUOTA. Recomendar ≠ elegir. */
.radio-reco .radio-label{ overflow:hidden; }
.radio-reco .radio-label::before{
  content:"Recomendada";
  position:absolute; top:0; left:0;
  background:var(--cian); color:var(--indigo);
  font-size:.62rem; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  padding:3px 10px; border-bottom-right-radius:2px;
}

/* ====================================================================
   CTAs — animación (hover lift + barrido de luz + press)
   ==================================================================== */
.btn-calcular{ background:linear-gradient(135deg,var(--indigo) 0%,var(--cian-profundo) 100%); position:relative; overflow:hidden; }
.btn-consultar{ background:linear-gradient(135deg,var(--indigo) 0%,var(--cian-profundo) 100%); border-radius:2px; }
.btn-consultar:hover{ box-shadow:0 6px 18px rgba(0,112,143,.4); }
.btn-admin-update{ background:linear-gradient(135deg,var(--indigo),var(--cian-profundo)); }
.btn-volver{ color:var(--cian-profundo); border-color:var(--cian-profundo); }
.btn-volver:hover{ background:#eef5fb; }

/* Botón final — fuera el Boca: índigo + brillo cian + latido de invitación */
.btn-inscribite{
  background:var(--indigo); color:#fff;
  position:relative; overflow:hidden;
  box-shadow:0 4px 15px rgba(0,184,219,.35);
  /* sin latido: CTA firme, no parpadeante */
}
.btn-inscribite:hover{ animation:none; box-shadow:0 8px 26px rgba(0,184,219,.5); }

/* Barrido de luz en hover */
.btn-calcular::after, .btn-inscribite::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg); pointer-events:none;
}
.btn-calcular:hover::after, .btn-inscribite:hover::after{ animation:shine .9s ease; }
.btn-calcular:active, .btn-inscribite:active, .btn-consultar:active{ transform:translateY(1px) scale(.99); }

/* ---- Keyframes ---- */
@keyframes latido-invitacion{
  0%,100%{ box-shadow:0 0 0 0 rgba(0,184,219,0), 0 2px 8px rgba(29,37,84,.06); }
  50%    { box-shadow:0 0 0 4px rgba(0,184,219,.18), 0 4px 14px rgba(29,37,84,.10); }
}
@keyframes check-pop{
  0%{ transform:translateY(-3px) scale(.96); }
  55%{ transform:translateY(-5px) scale(1.04); }
  100%{ transform:translateY(-3px) scale(1); }
}
@keyframes shine{ to{ left:130%; } }

/* Accesibilidad: sin movimiento. La diferenciación se sostiene por
   color + borde + check ✓, que no dependen de animación. */
@media (prefers-reduced-motion: reduce){
  .radio-option input + .radio-label,
  .btn-inscribite{ animation:none !important; }
  .btn-calcular::after, .btn-inscribite::after{ display:none; }
}

/* ---- Intro de las pestañas: enmarca la decisión "¿cuál es tu caso?" ---- */
.tab-intro{ text-align:center; margin-bottom:18px; }
.tab-intro__title{ font-size:1.25rem; font-weight:800; color:var(--indigo); margin:0 0 4px; }
.tab-intro__hint{ font-size:.9rem; color:var(--gris-oscuro); margin:0; }
/* Sin emoji en las pestañas: el texto queda centrado y respira */
.tab-btn{ padding-top:18px; padding-bottom:18px; }

/* ---- Tarjetas de ruta: cada opción dice qué acción dispara ---- */
.tab-btn{ text-transform:none; letter-spacing:0; text-align:left; align-items:flex-start; display:flex; flex-direction:column; padding:22px 24px; }
.ruta-case{ font-size:1.2rem; font-weight:800; }
.ruta-desc{ font-size:.86rem; font-weight:500; opacity:.92; margin:8px 0 14px; line-height:1.45; }
.ruta-cta{ font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; margin-top:auto; }
.tab-btn:not(.active) .ruta-cta{ color:var(--cian-profundo); }
.tab-btn.active .ruta-cta{ color:var(--cian); }

/* ====================================================================
   SELECTOR DE RUTA — jerarquía primaria/secundaria (no dos toggles)
   "Lleno" ahora significa ACCIÓN PRIMARIA, no "seleccionado".
   La simetría rompía la jerarquía; acá inscribirse manda.
   ==================================================================== */
.tab-switcher{ flex-direction:column; gap:14px; }
.tab-btn{ flex:none; width:100%; }

/* PRIMARIA — inscribirse (misión federal): domina el primer vistazo */
.ruta-primary{
  background:linear-gradient(135deg,var(--indigo) 0%,var(--cian-profundo) 100%);
  color:#fff; border:none; padding:28px 30px;
  box-shadow:0 6px 20px rgba(29,37,84,.22);
  /* sin latido: la tarjeta primaria manda por jerarquía (tamaño/color), no por parpadeo */
}
.ruta-primary:hover{ animation:none; transform:translateY(-2px); box-shadow:0 10px 28px rgba(29,37,84,.3); }
.ruta-primary .ruta-case{ font-size:1.5rem; font-weight:800; }
.ruta-primary .ruta-desc{ font-size:.95rem; opacity:.92; margin:8px 0 10px; }
/* Barra de fechas: el plazo de inscripción, integrado a la card del aspirante (antes era un bloque aparte que repetía info) */
.ruta-primary .ruta-fechas{ align-self:stretch; display:flex; align-items:flex-start; gap:8px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); border-radius:2px;
  padding:9px 13px; margin:0 0 16px; font-size:.85rem; font-weight:500; line-height:1.4; }
.ruta-primary .ruta-fechas strong{ font-weight:800; }
.ruta-primary .ruta-fechas svg{ flex-shrink:0; margin-top:1px; }
.ruta-primary .ruta-cta{ font-size:.92rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--cian); margin-top:0; }

/* SECUNDARIA — PUERTA a Mi Posgrado (página aparte). Subordinada al aspirante, pero con
   FORMA DE PUERTA (ícono + borde + hover + flecha), no una fila fina. Opción B. */
.ruta-secondary{
  background:#fbfdff; border:2px solid var(--niebla); color:var(--indigo);
  border-radius:2px; padding:16px 20px;
  flex-direction:row; align-items:center; gap:14px; flex-wrap:nowrap;
  text-decoration:none; animation:none;
}
.ruta-secondary,.ruta-secondary:hover,.ruta-secondary:focus{ color:var(--indigo); text-decoration:none; }  /* no heredar el a:hover naranja global */
.ruta-secondary:hover{ border-color:var(--cian-profundo); background:#eef5fb;
  box-shadow:0 4px 14px rgba(14,116,144,.14); transform:none; }
.ruta-sec-ic{ width:44px; height:44px; border-radius:2px; background:#eef5fb;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--cian-profundo); }
.ruta-sec-txt{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.ruta-secondary .ruta-sec-q{ font-size:1.05rem; font-weight:800; color:var(--indigo); }
.ruta-secondary .ruta-sec-a{ font-size:.82rem; font-weight:500; color:var(--texto-terciario); }
.ruta-sec-arr{ margin-left:auto; font-size:1.3rem; font-weight:800; color:var(--cian-profundo); }

/* ====================================================================
   ANIMACIÓN DE CAMBIO ENTRE OPCIONES + sin preselección
   Nada viene elegido: al cargar, ambas laten (invitan). Al elegir,
   el relleno cruza y el check ENTRA. Cambiar de una a otra se ve.
   ==================================================================== */
/* Transición explícita (excluye box-shadow para no pelear con el latido) */
.radio-option .radio-label{ transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; }
/* El check aparece al entrar la selección (fade), sin compal con el pop del card */
.radio-option input[type="radio"]:checked + .radio-label::after{ animation: marca-in .3s ease; }
@keyframes marca-in{ 0%{ opacity:0; } 100%{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .radio-option input:checked + .radio-label::after,
  .ruta-primary{ animation:none !important; }
}

/* ---- Marcas de campo: obligatorio vs opcional (recomendar ≠ obligar) ---- */
.field-label{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; }
.req-tag{ font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:2px; background:var(--cian-profundo); color:#fff; }
.opt-tag{ font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:2px; background:transparent; border:1px solid var(--niebla); color:var(--gris-oscuro); }
.field-help{ font-size:.82rem; color:var(--gris-oscuro); margin:4px 0 10px; line-height:1.4; }

/* ====================================================================
   FIGURA / FONDO — que las opciones se separen y "vivan"
   Problema: opción blanca sobre card casi-blanca = se aplana.
   Solución: card = superficie fría con identidad; opción = flota
   (gradiente + elevación + latido que respira).
   ==================================================================== */

/* Card: deja de ser blanca plana, pasa a superficie fría sutil */
.card{ background:linear-gradient(180deg,#edf3f9 0%,#e4ecf5 100%); }

/* Opción SIN elegir: gradiente leve (no blanco plano) + elevación CALMA y estática.
   Antes latía ("latido-card"), pero el glow se leía como "ya seleccionada". Sin latido. */
.radio-option input[type="radio"]:not(:checked) + .radio-label{
  background:linear-gradient(180deg,#ffffff 0%,#f1f7fd 100%);
  border-color:var(--niebla);
  box-shadow:0 2px 8px rgba(29,37,84,.08);
}
/* Latido que incluye la sombra de elevación (constante) + el glow (respira) */
@keyframes latido-card{
  0%,100%{ box-shadow:0 3px 10px rgba(29,37,84,.10), 0 0 0 0 rgba(0,184,219,0); }
  50%    { box-shadow:0 6px 16px rgba(29,37,84,.14), 0 0 0 4px rgba(0,184,219,.16); }
}
/* Hover: se despega más y frena el latido */
.radio-option:hover input[type="radio"]:not(:checked) + .radio-label{
  animation:none;
  transform:translateY(-4px);
  border-color:var(--cian);
  box-shadow:0 10px 24px rgba(0,112,143,.22);
}

/* Reduced-motion: sin latido, pero conserva la elevación estática */
@media (prefers-reduced-motion: reduce){
  .radio-option input[type="radio"]:not(:checked) + .radio-label{
    animation:none !important;
    box-shadow:0 3px 10px rgba(29,37,84,.10);
  }
}

/* ====================================================================
   ALINEACIÓN CON LA PÁGINA NUEVA (posgrado.fadu.uba.ar)
   Valores canónicos tomados de tokens-marca.css + shared-components.css
   de la home, para una sola fuente de verdad de color.
   ==================================================================== */

/* Título de resultados: subrayado ámbar (Boca) -> cian */
.resultados-title{ border-bottom-color:var(--cian); }

/* Banner "Has seleccionado": morado genérico -> chrome índigo/cian de la home
   (el morado es área Diseño; acá no corresponde a un área puntual) */
.carrera-banner{ background:linear-gradient(135deg,var(--indigo) 0%,var(--cian-profundo) 100%); }

/* Texto de ayuda/hints: a --texto-terciario (AAA), igual que la home */
.field-help, .hint{ color:var(--texto-terciario); }

/* Footer #TuPosgradoEstáEnLaUBA: lo estiliza el footer real del sitio (shared-components.css) */

/* ── Tarjetas del padrón (panel "Ya estoy cursando"): morado/dorado -> chrome ── */
.resultado-alumno{ background:linear-gradient(135deg,#eef5fb 0%,#e8f4f8 100%); border-left-color:var(--cian-profundo); }
.alumno-carrera{ color:var(--cian-profundo); }
.arancel-chip.destacado{ border-color:var(--cian); background:linear-gradient(135deg,var(--indigo) 0%,var(--cian-profundo) 100%); }
.aviso-ripte{ background:#eef5fb; border-left-color:var(--cian); color:var(--indigo); }
.aviso-errores__link{ color:var(--cian-profundo); }

/* Bug arrastrado: al aviso de inscripción le cambiamos el fondo a celeste
   pero el texto quedó marrón. Lo alineo a índigo. */
.inscripcion-aviso p{ color:var(--indigo); }

/* ====================================================================
   COLOR POR ÁREA TEMÁTICA (data-driven desde data-area del programa)
   El color lo dicta el área del posgrado elegido — congruente con el
   sitio. Se usa como ACENTO (barra/borde/chip), NUNCA como relleno con
   texto blanco (verde/gestión/proyecto/urbanismo fallan WCAG con blanco).
   Tokens tomados de la home (shared-components.css).
   ==================================================================== */
/* Mapeo área -> variables activas. El JS pone data-area en #panel-ingresante al elegir el
   posgrado (sección 2); el hilo tiñe desde ahí hacia abajo. -dark = single-source del sitio. */
#panel-ingresante{ --area-actual:var(--cian); --area-actual-dark:var(--cian-profundo); --area-actual-bg:#eef5fb; }
#panel-ingresante[data-area="sustentabilidad"]{ --area-actual:var(--color-sustentabilidad); --area-actual-dark:var(--color-sustentabilidad-dark); --area-actual-bg:var(--color-sustentabilidad-bg); }
#panel-ingresante[data-area="patrimonio"]{ --area-actual:var(--color-patrimonio); --area-actual-dark:var(--color-patrimonio-dark); --area-actual-bg:var(--color-patrimonio-bg); }
#panel-ingresante[data-area="urbanismo"]{ --area-actual:var(--color-urbanismo); --area-actual-dark:var(--color-urbanismo-dark); --area-actual-bg:var(--color-urbanismo-bg); }
#panel-ingresante[data-area="diseno"]{ --area-actual:var(--color-diseno); --area-actual-dark:var(--color-diseno-dark); --area-actual-bg:var(--color-diseno-bg); }
#panel-ingresante[data-area="proyecto"]{ --area-actual:var(--color-proyecto); --area-actual-dark:var(--color-proyecto-dark); --area-actual-bg:var(--color-proyecto-bg); }
#panel-ingresante[data-area="gestion"]{ --area-actual:var(--color-gestion); --area-actual-dark:var(--color-gestion-dark); --area-actual-bg:var(--color-gestion-bg); }

/* (Sección 1 número/card = parte del sistema de color de área: ver bloque al final.) */
.area-chip-sel{ display:inline-block; margin-top:14px; padding:5px 13px; border-radius:2px;
  background:#fff; color:var(--area-actual-dark, var(--cian-profundo));
  border-left:4px solid var(--area-actual, var(--cian));
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.area-chip-sel[hidden]{ display:none; }
/* Aviso "ya te lo pusimos" cuando el posgrado llega pre-seleccionado desde su ficha */
.aviso-preset{ margin-top:12px; font-size:.82rem; line-height:1.4;
  color:var(--area-actual-dark, var(--cian-profundo));
  background:var(--area-actual-bg, #eef5fb);
  border-left:3px solid var(--area-actual, var(--cian));
  padding:9px 13px; border-radius:2px; }
/* (El RESULTADO va institucional para TODAS las áreas — regla única más abajo, línea ~1390.) */

/* Banner: índigo sólido (texto blanco 14:1) + barra de acento del área */
.carrera-banner{ background:var(--indigo); border-top:6px solid var(--area-actual); border-radius:2px; }
/* Chip del área: tinte claro + texto índigo (WCAG-safe) + borde del área */
/* Chip del área en el RESULTADO: institucional (cian + neutro), NO color de área.
   El área ya se conoce por el nombre del posgrado; su color acá desarmonizaba (Ana 9/7). */
.area-chip{ display:inline-block; margin-top:12px; padding:4px 12px; border-radius:2px;
  background:#eef5fb; color:var(--indigo);
  border-left:4px solid var(--cian);
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.area-chip[hidden]{ display:none; }
/* Subrayado del título de resultados: toma el color del área */
.resultados-title{ border-bottom-color:var(--cian); }   /* institucional: el subrayado NO toma el área (con cálidas —patrimonio/proyecto— se salía del sistema) — Ana 9/7 */

/* ====================================================================
   ALINEAR A "FICHA DEL SITIO" (decisión Ana 6/7/2026)
   Que el simulador se lea como una ficha del sitio nuevo: cards planas,
   botones sólidos de shared-components, menos gradientes y sombras
   livianas. Capa al final = gana en especificidad pareja; reversible.
   Valores del single-source (css/shared-components.css):
   --radius-sm:2px · --shadow-sm · --shadow-md · botón navy sólido.
   ==================================================================== */

/* Hero: fuera la textura SVG y la sombra pesada (gradiente navy limpio) */
.hero{ box-shadow:none; }
.hero::before{ display:none; }

/* Cards planas: borde sutil + sombra liviana (como las cards del sitio) */
.card{
  background:#e8eff7;                        /* tinte frío: en blanco puro quedaba "muy blanco" sobre el fondo claro */
  border:1px solid var(--celeste);          /* borde parejo: SIN barra de acento izq (competía con el stepper) — Ana 8/7 */
  box-shadow:var(--shadow-sm);
}
.content,
.resultados,
.resultado-section{ box-shadow:var(--shadow-md); }
.resultado-section{ border:1px solid var(--gris-medio); }
.result-card{ box-shadow:none; }
.info-box{ background:#eef5fb; box-shadow:none; }

/* Botones = shared-components: navy SÓLIDO, sin gradiente ni barrido de luz */
.btn-calcular,
.btn-inscribite{ background:var(--azul-uba); box-shadow:none; }
.btn-calcular:hover,
.btn-inscribite:hover{ background:var(--azul-hover); box-shadow:0 8px 20px rgba(29,37,84,.3); }

/* El botón Calcular es el CLÍMAX (completaste los 4 pasos → acá aparece tu número): más grande + elevado,
   para que tenga jerarquía de acción principal y no quede del mismo peso que los pasos. */
.btn-calcular{ padding:24px 40px; font-size:1.55rem; box-shadow:0 8px 24px rgba(29,37,84,.30); }
.btn-calcular:hover{ box-shadow:0 12px 30px rgba(29,37,84,.40); transform:translateY(-2px); }

/* Radius 2px en TODOS los botones (estándar del sitio; btn-inscribite y btn-volver tenían 8px) */
.btn-calcular, .btn-inscribite, .btn-volver, .btn-consultar{ border-radius:2px; }

/* El color por área vive en UN solo lugar: bloque "SISTEMA DE COLOR DE ÁREA" al final del archivo. */

/* Sombras ligadas al ÁREA elegida (Ana 8/7): al elegir posgrado, las sombras toman un tinte del área.
   color-mix moderno; si el browser no lo soporta, la declaración cae y usa el fallback gris del :root. */
#panel-ingresante[data-area]{
  --shadow-sm: 0 1px 3px color-mix(in srgb, var(--area-actual-dark) 22%, transparent);
  --shadow-md: 0 4px 12px -2px color-mix(in srgb, var(--area-actual-dark) 30%, transparent);
}

/* Resultados MÁS COMPACTOS: la pantalla de montos medía 1.44× el viewport (no entraba en un monitor).
   Menos padding/margen y números un poco más chicos, sin perder legibilidad. — Ana 7/7 */
.resultados{ padding:22px; margin-top:36px; }
.resultados-title{ font-size:1.6rem; margin-bottom:20px; padding-bottom:12px; }
.resultados-grid{ gap:18px; margin-bottom:18px; }
.resultado-section{ padding:20px; }
.resultado-section h3{ margin-bottom:12px; padding-bottom:9px; }
.resultado-sub{ margin:-8px 0 14px; }
.result-card{ padding:12px 15px; margin-bottom:9px; }
.result-value{ font-size:1.55rem; }
.result-label{ margin-bottom:5px; }
.total-section{ padding:16px; margin-top:12px; }
.total-value{ font-size:2rem; }
.total-label{ margin-bottom:8px; }
.carrera-banner{ padding:16px; margin-bottom:20px; }
/* Volver + Inscribite = barra única borde a borde: sin gap entre botones ni contra el panel de arriba (Ana 8/7) */
.acciones-row{ margin:0 0 14px; gap:0; }
.nota-favor{ margin:12px 0 18px; }
.nota-continuacion{ margin-top:10px; }

/* Destello de UNA sola vez en el paso siguiente al completar uno (guía la atención; NO es loop,
   para no repetir el problema del "latido" que parecía pre-seleccionado). Prueba en el paso 2. — Ana 7/7 */
@keyframes destello-paso-glow{
  0%   { box-shadow:0 0 0 0 rgba(0,184,219,0), 0 2px 8px rgba(29,37,84,.06); }
  30%  { box-shadow:0 0 0 6px rgba(0,184,219,.35), 0 6px 16px rgba(29,37,84,.14); }
  100% { box-shadow:0 0 0 0 rgba(0,184,219,0), 0 2px 8px rgba(29,37,84,.06); }
}
@keyframes destello-paso-num{
  0%,100%{ transform:scale(1); }
  35%    { transform:scale(1.16); }
}
.section.paso-destello > .card{ animation:destello-paso-glow .8s ease; }
.section.paso-destello .section-number{ animation:destello-paso-num .8s ease; }
@media (prefers-reduced-motion: reduce){
  .section.paso-destello > .card,
  .section.paso-destello .section-number{ animation:none; }
}

/* Formulario MÁS COMPACTO: los pasos eran muy altos → el paso siguiente (y su destello) quedaba fuera de
   pantalla. Menos padding/margen por paso; los números quedan en 50px (no rompe el stepper). — Ana 7/7 */
.section{ margin-bottom:24px; }
.section-header{ margin-bottom:14px; padding-bottom:2px; }
.section-header h2{ font-size:1.55rem; }
.card{ padding:20px 24px; }
.card label.field-label{ margin-bottom:8px; }
.field-help{ margin:2px 0 10px; }
.radio-group{ gap:12px; margin-top:10px; }
.radio-option .radio-label{ min-height:76px; padding:14px 15px; }
.radio-destacado .radio-label{ padding:16px 20px; font-size:1.05rem; }
.como-funciona{ margin:0 0 16px; }
#panel-ingresante .section::before{ height:calc(100% + 24px); }   /* la línea acompaña el nuevo margen */

/* Filas compactas del resultado (reemplazan las cajas grandes de valor/bonif/cuotas → mucho más bajo) */
.result-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid rgba(29,37,84,.08); }
.result-row .r-label{ font-size:.92rem; color:var(--texto-terciario); }
.result-row .r-value{ font-size:1.25rem; font-weight:800; color:var(--azul-uba); white-space:nowrap; }
.result-row .r-value.r-menos{ color:var(--azul-uba); }   /* montos "menos" en navy: paleta resultado = navy+cian+gris (Ana 9/7) */
.r-detail{ font-size:.78rem; color:var(--texto-terciario); font-style:italic; margin:2px 0 6px; }

/* Panel contenedor del resultado: banner "Has seleccionado" + columnas en UN cuadro, con MARCO del área
   (acento, no relleno → sirve también para las cálidas). Los totales adentro siguen navy. — Ana 7/7 */
.resultado-panel{ border:2px solid var(--area-actual, var(--cian)); border-top:6px solid var(--area-actual, var(--cian));
  border-radius:2px; overflow:hidden; background:var(--blanco); box-shadow:var(--shadow-md); margin-bottom:0; }  /* sin gap: los botones van pegados abajo */
.resultado-panel .carrera-banner{ margin:0; border-radius:0; border-top:none; }
.resultado-panel .resultados-grid{ margin:0; padding:20px; }
.resultado-panel .resultado-section{ background:transparent; border:none; box-shadow:none; padding:6px 14px;
  display:flex; flex-direction:column; }                                 /* columna flex: el total se ancla abajo */
.resultado-panel .resultado-section .total-section{ margin-top:auto; }   /* los dos totales quedan en la misma línea de base */
@media (min-width:820px){ .resultado-panel .resultado-section:first-child{ border-right:1px solid rgba(29,37,84,.10); } }

/* Área PROYECTO (naranja): su tono oscuro (#a34d15) se va a MARRÓN en los elementos con texto blanco
   (números, línea) y el durazno de fondo tira a barro. Para PROYECTO, esos van INSTITUCIONALES (navy/frío);
   el naranja queda solo como ACENTO fino (borde de card + chip + marco del resultado). — Ana 7/7 */
/* (Excepción cálida proyecto → navy: en el SISTEMA DE COLOR DE ÁREA al final.) */

/* Paso 5 (Calcular): el cuerpo (antesala + botón) se indenta como las cards, para alinear con el canal del stepper */
.paso5-body{ margin-left:66px; }
.paso5-body .button-container{ margin-top:14px; }

/* Link "mirá los posgrados por área" dentro del help del paso 1 (salida para el que no sabe cuál elegir) */
.field-help a{ color:var(--cian-profundo); font-weight:700; text-decoration:none; }
.field-help a:hover{ text-decoration:underline; }

/* ── Header/footer DEDICADOS y autónomos (no dependen de components.js ni de shared-components.css) ──
   Header sin botonera; footer solo bloque institucional. Estilos LOCALES → cargan aunque el sitio esté caído. */
.sim-header{ background:var(--azul-uba); }
.sim-header-inner{ max-width:1200px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:16px; }
.sim-header-logo{ display:inline-flex; }
.sim-header-logo-img{ height:34px; width:auto; }
.sim-header-unidad{ font-family:var(--font-bitter); color:#fff; font-size:.98rem; font-weight:700; }

.sim-footer{ background:var(--azul-uba); color:#fff; margin-top:40px; }
.sim-footer-inner{ max-width:1200px; margin:0 auto; padding:32px 24px; text-align:center; }
.sim-footer-logo{ height:38px; width:auto; margin-bottom:12px; }
.sim-footer-unidad{ font-family:var(--font-bitter); font-size:1rem; font-weight:700; margin:0 0 3px; }
.sim-footer-bajada{ color:#9aa7b8; font-size:.75rem; margin:0 0 10px; }
.sim-footer-tagline{ color:var(--cian); font-size:.85rem; font-weight:600; margin:0 0 4px; }
.sim-footer-hashtag{ color:#fff; font-size:.85rem; font-weight:700; margin:0 0 10px; }
.sim-footer-social{ color:#fff; text-decoration:none; font-size:.85rem; font-weight:600; }
.sim-footer-social:hover{ text-decoration:underline; }
.sim-footer-copy{ color:#7e8ba0; font-size:.72rem; margin:16px 0 0; border-top:1px solid rgba(255,255,255,.1); padding-top:14px; }

/* Botón INSCRIBITE = CTA de conversión FINAL → cian FADU para destacarlo del navy (Calcular).
   Texto NAVY sobre el cian (blanco sobre cian falla WCAG; el cian va de fondo, no de texto). — Ana 8/7 */
.btn-inscribite{ background:var(--cian); color:var(--azul-uba); }
.btn-inscribite:hover{ background:#0298b6; color:var(--azul-uba); box-shadow:0 8px 26px rgba(0,184,219,.45); }

/* ── Guardar / compartir la simulación (PDF 1 página · WhatsApp · mail) ── */
.compartir-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:6px 0 18px; padding-top:14px; border-top:1px solid var(--gris-medio); }
.compartir-label{ font-size:.85rem; color:var(--texto-terciario); font-weight:600; margin-right:2px; }
.btn-compartir{ display:inline-block; padding:8px 15px; border:2px solid var(--cian-profundo); border-radius:2px;
  background:#fff; color:var(--cian-profundo); font-family:var(--font-bitter); font-size:.83rem; font-weight:700;
  text-decoration:none; cursor:pointer; transition:all .2s ease; }
.btn-compartir:hover{ background:var(--cian-profundo); color:#fff; }

/* Impresión / Guardar PDF: solo el resultado, en 1 página */
.print-brand{ display:none; }
@media print{
  @page{ margin:1cm; }
  /* Ocultar TODO menos el resultado (una sola página) */
  .sim-header, .sim-footer, .hero, .plazo-inscripcion, .link-mi-posgrado, .como-funciona,
  #panel-ingresante .section, .antesala-resultado, .acciones-row, .compartir-row,
  .info-box, .franja-institucional, .nota-favor, .no-print{ display:none !important; }
  html, body{ background:#fff !important; font-size:12px !important; }
  main, main .container, .content, #panel-ingresante{
    background:#fff !important; box-shadow:none !important;
    padding:0 !important; margin:0 !important; max-width:none !important; width:auto !important; }
  .resultados{ display:block !important; box-shadow:none !important; padding:0 !important; margin:0 !important; animation:none !important; }
  .print-brand{ display:block !important; font-family:var(--font-bitter); font-weight:700; color:#000; font-size:.95rem; margin-bottom:6px; }
  .resultados-title{ font-size:1.05rem !important; margin:0 0 8px !important; border:none !important; padding:0 !important; }
  /* El panel entero cabe en una página */
  .resultado-panel{ box-shadow:none !important; border:1px solid #999 !important; padding:10px !important;
    page-break-inside:avoid; break-inside:avoid; }
  .carrera-banner{ padding:8px 10px !important; margin-bottom:10px !important; }
  /* La grilla NO se apila en impresión: se mantiene en 2 columnas → compacta */
  .resultados-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; }
  .resultado-section{ padding:0 !important; }
  .result-row{ padding:4px 0 !important; }
  .total-section{ box-shadow:none !important; padding:10px !important; }
  a[href]:after{ content:none !important; }   /* que NO imprima la URL entre paréntesis */
}
.btn-calcular::after,
.btn-inscribite::after{ display:none; }     /* fuera el "shine": los botones del sitio no lo tienen */
.btn-volver{ background:transparent; color:var(--azul-uba); border:2px solid var(--azul-uba); box-shadow:none; }
.btn-volver:hover{ background:var(--azul-uba); color:var(--blanco); }

/* Totales: navy plano por defecto (con área elegida ya son area-dark plano) */
.total-section{ background:var(--azul-uba); box-shadow:var(--shadow-md); }

/* UPPERCASE: el sitio lo reserva para botones; en labels de dato va normal */
.result-label,
.total-label{ text-transform:none; letter-spacing:0; }

/* ── Página = una sola puerta (aspirante). Franja de plazo + link subordinado al alumno ── */
.plazo-inscripcion{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--niebla); color:var(--indigo);
  border-left:3px solid var(--cian); border-radius:2px;
  padding:12px 16px; margin:0 0 14px;
  font-size:.92rem; line-height:1.45;
}
.plazo-inscripcion svg{ flex-shrink:0; margin-top:2px; color:var(--cian-profundo); }
.link-mi-posgrado{ margin:0 0 30px; font-size:.9rem; color:var(--texto-terciario); }
.link-mi-posgrado a{ color:var(--cian-profundo); font-weight:700; text-decoration:none; }
.link-mi-posgrado a:hover{ text-decoration:underline; }

/* Hero: más jerarquía en la audiencia (aspirantes) — subtítulo firme + frase clave en cian */
.hero .subtitle{ font-weight:700; opacity:1; font-size:1.55rem; }
.hero .subtitle .destacar-aspirantes{ color:var(--cian); }

/* Combos (select): el borde gris clarito se leía invisible sobre blanco → borde teal visible.
   Blanco del combo sobre la card con tinte = el campo "se lee" como control. */
.card select{ border:2px solid var(--cian-profundo); background:var(--blanco); }
.card select:hover,
.card select:focus{ border-color:var(--cian); box-shadow:0 0 0 3px rgba(0,184,219,.15); }

/* Rayas bajo los títulos de sección: NO suman. El número + el título ya estructuran, y la raya
   hacía doble borde con la card + un "subrayado de todo" algo viejo. Fuera → encabezado limpio. */
.section-header{ border-bottom:none; padding-bottom:4px; }

/* Stepper con CANAL a la izquierda (Ana 7/7): los números + la línea viven en una columna propia;
   las cards se indentan a la derecha, así la línea conecta 1→2→3→4 SIN cruzar por encima de nada. */
#panel-ingresante .section{ position:relative; }
#panel-ingresante .section .card{ margin-left:66px; }              /* card indentada → deja libre el canal */
#panel-ingresante .section::before{                                 /* la línea vive en el canal (x≈24), detrás del número */
  content:''; position:absolute;
  left:23px; top:25px; height:calc(100% + 40px);
  width:4px; background:var(--celeste-medio); z-index:0;
}
#panel-ingresante .section:not(:has(~ .section))::before{ display:none; }  /* el último no cuelga */
#panel-ingresante .section-number{ position:relative; z-index:1; }

/* "Cómo funciona": el modelo de la acción antes del primer paso. Que la persona sepa el trato
   (completar 4 pasos → Calcular → ve su número) antes de empezar. Comprensión, no cálculo. */
.como-funciona{ font-size:1.05rem; line-height:1.5; color:var(--indigo); font-weight:500; margin:0 0 22px; }
.como-funciona strong{ color:var(--cian-profundo); }

/* Validación EN EL PASO (reemplaza el alert del navegador): el hueco se marca donde ESTÁ el hueco. */
.card.paso-falta{ border-color:#c0392b; border-left-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.15); }
.aviso-paso{ margin:14px 0 0; padding:9px 13px; border-radius:2px;
  background:#fdecea; border-left:3px solid #c0392b; color:#8a1c1c; font-size:.86rem; font-weight:700; }

/* Antesala del resultado: hace tangible el premio antes de calcular (skeleton sobrio, punteado).
   Se retira sola cuando aparece el resultado real, para no duplicar. */
.antesala-resultado{ background:#eef5fb; border:1.5px dashed var(--celeste); border-radius:2px;
  padding:16px 20px; margin:8px 0 16px; text-align:center; }
.antesala-eyebrow{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--cian-profundo); margin-bottom:10px; }
.antesala-grid{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.antesala-item{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.antesala-label{ font-size:.8rem; color:var(--texto-terciario); }
.antesala-dash{ font-size:1.7rem; font-weight:900; color:var(--celeste); line-height:1; }
.antesala-hint{ margin:12px 0 0; font-size:.82rem; color:var(--texto-terciario); }
/* Cuando el resultado real está visible, la antesala se retira */
#panel-ingresante:has(#resultados:not(.hidden)) .antesala-resultado{ display:none; }

/* El hilo de área en los RESULTADOS quedaba raro con áreas cálidas (proyecto → marrón/naranja #a34d15,
   patrimonio → magenta): leía como el amarillo/Boca que evitamos. Los recuadros del número van
   INSTITUCIONALES (navy + cian), igual para todas las áreas. El área ya se ve en el banner + el chip. */
#panel-ingresante[data-area] .resultado-section h3{ color:var(--azul-uba); border-bottom-color:var(--cian); }  /* navy, no teal (armonía resultado) */
#panel-ingresante[data-area] .result-card{ border-left-color:var(--cian-profundo); }
#panel-ingresante[data-area] .total-section{ background:var(--azul-uba); }

/* Microcopy bajo cada título de resultado: aclara qué es cada cosa en términos del aspirante */
.resultado-sub{ margin:-14px 0 20px; font-size:.86rem; color:var(--texto-terciario); font-style:italic; }
/* Nota (palabras de Ana): continuar esp→maestría no re-cobra la matrícula */
.nota-continuacion{ margin:0; padding:12px 16px 14px; border-top:1.5px solid var(--celeste);
  background:#eef5fb; color:var(--indigo); font-size:.82rem; line-height:1.5; }
.nota-continuacion strong{ color:var(--cian-profundo); }

/* Nota ad honorem: cupo + estricto orden de solicitud. Va al pie del panel (pantalla + PDF),
   strip a todo el ancho separado por una línea cian. Solo visible al elegir ad honorem. */
.nota-adhonorem{ margin:0; padding:12px 16px 14px;
  background:#e6f4f8; border-top:2px solid var(--cian);
  color:var(--indigo); font-size:.83rem; line-height:1.5; }
.nota-adhonorem strong{ color:var(--cian-profundo); }
.nota-adhonorem[hidden]{ display:none; }

/* Nota bajo el combo de bonificación: por qué las de staff no aplican a no residentes */
.field-nota{ margin:10px 0 0; padding:9px 13px; border-radius:2px;
  background:#eef5fb; border-left:3px solid var(--cian);
  font-size:.82rem; line-height:1.45; color:var(--indigo); }
.field-nota strong{ color:var(--cian-profundo); }
.field-nota[hidden]{ display:none; }

/* ════════════════════════════════════════════════════════════════════
   SISTEMA DE COLOR DE ÁREA — ÚNICA FUENTE (Ana 8/7: "armá sistema, no parches")
   Al elegir el posgrado, el JS pone data-area en #panel-ingresante y el
   formulario ENTERO se tiñe desde acá. Un solo bloque = una sola verdad.

   Principios del sistema:
   1) UNA sola línea vertical = el STEPPER (canal izq.). Las cards NO llevan
      barra de acento (competía con el stepper → borde parejo 1px).
   2) RELLENOS sólidos (número de paso, stepper, radio elegido, borde de
      combo) = color del área (variante -dark, texto blanco AA).
   3) TINTES suaves (fondo de card) = color del área (-bg, no falla WCAG).
   4) Excepción CÁLIDA: proyecto → navy institucional (su marrón #a34d15
      sobre relleno lee como amarillo/Boca, prohibido por marca).
   5) El RESULTADO (banner/totales) va institucional para TODAS las áreas
      (regla más arriba); el área ahí se ve solo en el banner-top + chip.
   Mapeo área→variables: ver "#panel-ingresante[data-area=...]" (arriba).
   ════════════════════════════════════════════════════════════════════ */

/* — Consumidores del color de área — */
#panel-ingresante[data-area] .section-number,
#panel-ingresante[data-area] #secnumPosgrado{ background:var(--area-actual-dark); }
#panel-ingresante[data-area] .section::before{ background:var(--area-actual-dark); }   /* la línea del stepper */
#panel-ingresante[data-area] .card,
#panel-ingresante[data-area] #cardPosgrado{ background:var(--area-actual-bg); }
#panel-ingresante[data-area] .card select{ border:2px solid var(--area-actual); }      /* combo: shorthand = pinta seguro */
#panel-ingresante[data-area] .card select:hover,
#panel-ingresante[data-area] .card select:focus{
  border-color:var(--area-actual-dark);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--area-actual) 20%, transparent);
}
#panel-ingresante[data-area] .radio-option input[type="radio"]:checked + .radio-label{
  background:var(--area-actual-dark); border-color:var(--area-actual);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--area-actual) 28%, transparent), 0 8px 22px rgba(29,37,84,.28);
}
#panel-ingresante[data-area] .radio-option input[type="radio"]:checked + .radio-label::after{
  border-color:var(--area-actual); background:var(--area-actual); color:#fff;
}
#panel-ingresante[data-area] .radio-option input[type="radio"]:checked + .radio-label .descuento-tag{
  background:#fff; color:var(--area-actual-dark);
}

/* — Excepción CÁLIDA: proyecto → navy en TODOS los rellenos sólidos (un solo lugar) — */
#panel-ingresante[data-area="proyecto"] .section-number,
#panel-ingresante[data-area="proyecto"] #secnumPosgrado,
#panel-ingresante[data-area="proyecto"] .section::before{ background:var(--azul-uba); }
#panel-ingresante[data-area="proyecto"] .card,
#panel-ingresante[data-area="proyecto"] #cardPosgrado{ background:#e8eff7; }
#panel-ingresante[data-area="proyecto"] .card select{ border-color:var(--azul-uba); }
#panel-ingresante[data-area="proyecto"] .radio-option input[type="radio"]:checked + .radio-label{
  background:var(--azul-uba); border-color:var(--cian);
}
#panel-ingresante[data-area="proyecto"] .radio-option input[type="radio"]:checked + .radio-label::after{
  border-color:var(--cian); background:var(--cian); color:var(--azul-uba);
}

/* ════════════════════════════════════════════════════════════════════
   ALIGERAR EL ENVOLTORIO (Ana 9/7) — sacar peso sin tocar marca
   (Bitter, navy #1d2554, cian, radios 2px). Hero más aireado + H1 con
   más presencia + claim con contraste; intro compacto; más salto de
   jerarquía título↔cuerpo. Bloque único al final = gana por orden. Reversible.
   ════════════════════════════════════════════════════════════════════ */

/* Hero: pasada MUY MARCADA (Ana 9/7) — navy fino, H1 protagonista, claim legible.
   El objetivo: que se lea "editorial 2026", no "portada corporativa". */
.hero{ padding:26px 20px 26px; }
.hero h1{ font-size:4.2rem; line-height:1.02; margin-bottom:10px; letter-spacing:-.025em; }
.hero .subtitle{ font-size:1.55rem; margin-bottom:6px; font-weight:700; }
.hero .claim{ font-size:1.05rem; opacity:1; color:rgba(255,255,255,.9); max-width:600px; line-height:1.5; margin:4px auto 0; }

/* Aire generoso: transición hero→card + arranque suelto (respira, no se amontona) */
main .content{ margin-top:14px; padding-top:34px; }
.plazo-inscripcion{ font-size:.9rem; padding:12px 16px; margin:4px 0 16px; }
.link-mi-posgrado{ font-size:.82rem; margin:0 0 32px; opacity:.85; }
.como-funciona{ font-size:1.08rem; margin:0 0 30px; }

/* Jerarquía fuerte: el título del paso domina sobre el cuerpo */
.section-header h2{ font-size:2rem; }
.section{ margin-bottom:34px; }

/* ════════════════════════════════════════════════════════════════════
   RESULTADO como las FICHAS del sitio (Ana 9/7 — definitivo, tras VER una
   ficha real, no adivinar). Patrón de la ficha: navy = estructura y TODO
   el texto; el ÁREA aparece como RELLENO SÓLIDO solo en lo clave (el chip
   y las cajas de total), igual que la ficha usa verde sólido en el chip,
   el CTA y el recuadro de descuento. Nada de área como texto/líneas sueltas.
   ════════════════════════════════════════════════════════════════════ */
/* El ÁREA como RELLENO SÓLIDO en lo clave (cajas de total + chip), texto blanco */
#panel-ingresante[data-area] .total-section{ background:var(--area-actual-dark) !important; }
#panel-ingresante .area-chip{ background:var(--area-actual-dark); color:#fff; border-left:none; padding:5px 14px; }
/* Todo lo demás: navy / gris / marco sutil */
#panel-ingresante[data-area] .resultado-section h3{ color:var(--azul-uba); border-bottom-color:var(--celeste); }
.resultados-title{ border-bottom-color:var(--cian); }
.resultado-panel{ border:1px solid var(--celeste) !important; }
.result-row .r-value.r-menos{ color:var(--azul-uba); }
.compartir-row .btn-compartir{ color:var(--azul-uba); border-color:var(--azul-uba); }
.compartir-row .btn-compartir:hover{ background:var(--azul-uba); color:#fff; }
#resultados .nota-favor__text{ color:var(--indigo); }
#resultados .nota-favor strong,
#resultados .nota-continuacion strong,
#resultados .nota-adhonorem strong{ color:var(--azul-uba); }