h1.title {font-size:54px !important; font-weight:bold;}
h2.title {font-size:54px !important; font-weight:bold;}
        
/* ==========================================================================
RESET Y AISLAMIENTO ESTRICTO PARA LA CALCULADORA
========================================================================== */

/* Forzamos el modelo de caja y eliminamos márgenes externos heredados */
#calculatorView,
#calculatorView * {
    box-sizing: border-box !important;
    font-family: 'Inter', sans-serif !important;
}

#calculatorView {
    display: block !important;
    width: 100% !important;
    background-color: transparent !important;
    color: #232c63 !important;
    line-height: 1.5 !important;
}

/* ==========================================================================
CLASES INDIVIDUALIZADAS POR TIPO DE INPUT (CON BORDES REDONDOS)
========================================================================== */

/* 1. Input Numérico Estándar (Precio, Capital, Plazo, etc.) */
#calculatorView .calc-input-number {
    background-color: #F6F6F8 !important;
    color: #232c63 !important;
    border: 1px solid #5e617e !important;
    padding: 0.5rem 0.75rem !important;
    /*width: 97% !important; */
    transition: all 0.2s ease-in-out !important;
    /* margin-left:10px; */
    appearance: none !important;
    -moz-appearance: textfield !important; /* Oculta flechas en Firefox */
    font-weight: 700 !important;
    border-radius: 20px !important;
    display: block;
    float: left;
}
#calculatorView .calc-input-number:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(22, 10, 139, 0.2) !important;
    border-color: #160a8b !important;
}
/* Oculta flechas numéricas nativas en Chrome/Safari */
#calculatorView .calc-input-number::-webkit-outer-spin-button,
#calculatorView .calc-input-number::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* 2. Input de Solo Lectura (Notaría, Gestoría, etc.) */
#calculatorView .calc-input-readonly {
    background-color: #e5e7eb !important;
    color: #5e617e !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important; /* Bordes redondos */
    padding: 0.5rem 0.75rem !important;
    width: 100% !important;
    cursor: not-allowed !important;
    font-weight: 700 !important;
}

/* 3. Desplegables (Select) */
#calculatorView .calc-select {
    background-color: #F6F6F8 !important;
    color: #232c63 !important;
    border: 1px solid #5e617e !important;
    border-radius: 8px !important; /* Bordes redondos */
    padding: 0.5rem 0.75rem !important;
    width: 100% !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    font-weight: 500 !important;
}
#calculatorView .calc-select:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(22, 10, 139, 0.2) !important;
    border-color: #160a8b !important;
}

/* 4. Sliders / Rangos de arrastre */
#calculatorView .calc-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    background: transparent !important;
    margin: 10px 0 !important;
    border: none !important;
}
#calculatorView .calc-slider:focus {
    outline: none !important;
}
/* Pista del Slider */
#calculatorView .calc-slider::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 6px !important;
    cursor: pointer !important;
    background: #cbd5e1 !important;
    border-radius: 8px !important; /* Pista redonda */
}
/* Botón arrastrable del Slider */
#calculatorView .calc-slider::-webkit-slider-thumb {
    height: 18px !important;
    width: 18px !important;
    border-radius: 50% !important; /* Completamente redondo */
    background: #ffd200 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    margin-top: -6px !important;
    box-shadow: 0 0 5px rgba(0,0,0,0.3) !important;
    transition: background 0.15s ease-in-out !important;
    border: none !important;
}
#calculatorView .calc-slider::-webkit-slider-thumb:hover {
    background: #e6bd00 !important;
}

/* 5. Radio Buttons Personalizados (Comunidad / Manual) */
#calculatorView .calc-radio {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #cbd5e1 !important; /* Borde visible gris claro */
    border-radius: 50% !important; /* Círculo perfecto */
    margin: 0 8px 0 0 !important;
    cursor: pointer !important;
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}
#calculatorView .calc-radio:checked {
    border-color: #ffd200 !important;
    background-color: #ffffff !important;
}
#calculatorView .calc-radio:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #ffd200 !important;
}

/* ==========================================================================
BARRA DE DESPLAZAMIENTO AISLADA (SCROLLBAR PARA TABLAS)
========================================================================== */
#calculatorView .table-container::-webkit-scrollbar { 
    height: 8px !important; 
    width: 8px !important; 
}
#calculatorView .table-container::-webkit-scrollbar-track { 
    background: #F6F6F8 !important; 
    border-radius: 8px !important;
}
#calculatorView .table-container::-webkit-scrollbar-thumb { 
    background: #5e617e !important; 
    border-radius: 8px !important; 
}

.borderRadiusInputs {border-radius: 20px !important;}
.borderRadiusBotones {border-radius: 30px !important;}
.bordeBajoTitulos {border-bottom: 1px solid #a9a9a9 !important;}
.lineaDivisoria {border-bottom: 1px solid #636363 !important;}

.textoGris {color:#a9a9a9 !important;}

.ancho97 {width:97% !important;}
.ancho100 {width:100% !important;}
.marginLeft10 {margin-left: 10px !important;}

.p-5 {
    padding: 2rem !important;
}

/* Forzamos el color y estilos del menú principal por encima de cualquier otra regla,
   incluyendo Tailwind o cualquier CSS que se cargue después */
#header .main-menu .navigation > li > a {
    color: #161e2d !important;
    display: block !important;
    text-align: center !important;
    font-weight: 600 !important;
    padding: 27px 0px !important;
    font-size: 16px !important;
    line-height: 21.86px !important;
}

/* Si el submenú desplegable (Servicios) también se ve afectado, añade esto */
#header .main-menu .navigation > li > ul > li > a {
    color: #161e2d !important;
}