@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
:root {
    --bs-body-font-family: "Montserrat", sans-serif;
    --color-principal: #1b1464ff;
    --color-secundario: #29abe2ff;
    --color-terciario: #344daaff;
    --color-cuaternario: #3b369dff;
    --color-quiternario: #4667e3ff;
    --color-sexto: #939cb2ff;

    --bs-body-color: #54607aff;
    --bs-btn-active-color: white;
    --bs-btn-active-bg: var(--color-terciario);
    --bs-btn-active-border-color: var(--color-terciario);
    --bs-primary: var(--color-terciario);
    --bs-primary-rgb: 52, 77, 170;
    --bs-table-active-bg: 52, 77, 170;

    --color_table_1: #304b86ff;
    --color_table_2: var(--color-quiternario);
}

body {
    font-family: "Montserrat", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.background-banner {
    background: linear-gradient(135deg, #42c373 0%, #1da1b4 45%, #0575b6 100%);
    /* Asegura que ocupe todo el espacio si lo usas como banner */
}

.banner {
    width: 100%;
    height: 400px; /* Ajusta la altura según tus necesidades */
}

.background-pastel {
    background: linear-gradient(
        to bottom,
        #b9d2e1 0%,
        /* Azul celeste pastel superior */ #c4e9e5 30%,
        /* Verde agua claro */ #f4eff8 65%,
        /* Blanco con un toque rosa/lavanda */ #dcd3e4 100%
            /* Violeta/lavanda pastel en la base */
    );

    /* Configuración para que cubra toda la pantalla o un contenedor alto */
    width: 100%;
    min-height: 100vh;
}

.img-header {
    background-image: url("../img/1232.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
}

.color-text-blue {
    color: var(--color-principal) !important;
}

.color-text-blue-2 {
    color: #344daaff !important;
}

.color-text-blue-3 {
    color: #2e3192ff !important;
}

.bg-blue {
    background-color: var(--color-principal) !important;
}
.bg-blue th {
    background-color: var(--color-principal) !important;
    color: white;
}

.bg-blue2 {
    background-color: #344daaff !important;
}

.color-text-blue-claro {
    color: #0071bcff !important;
}
.bg-blue-claro {
    background-color: #0071bcff !important;
}

.bg-blue-claro-2 {
    background-color: var(--color-secundario) !important;
}

.bg-blue-claro-3 {
    background-color: #ebf6ffff !important;
}

/* Aplica a todos los td dentro del div con la clase */
.bg-blue-claro-3 td {
    background-color: #ebf6ffff !important;
}

.color-text-blue-claro-2 {
    color: var(--color-secundario) !important;
}

.color-text-greed {
    color: #22b573ff !important;
}

.color-text-greed-2 {
    color: #00a99dff !important;
}

.fs-1 .moneda {
    font-size: 1.2rem;
}

.esfera-degradado {
    width: 2rem; /* Ajusta el tamaño a tu gusto */
    height: 2rem; /* Debe ser igual al width para que sea un círculo perfecto */

    /* El truco del degradado circular con tus colores */
    background: radial-gradient(circle at 50% 20%, #29abe2, #1b1464);

    /* Esto lo convierte en círculo */
    border-radius: 50%;

    /* Por si acaso, para que te respete el width/height que vimos antes */
    display: inline-block;
}

.texto-pequeno {
    font-size: 0.7rem;
}

.tarjeta {
    width: 200px;
}

.fondo_azul {
    background-color: #344daaff;
    color: white;
}

/* validamos tamaño de celular */
@media (max-width: 768px) {
    .img-header {
        background-size: 60%; /* Ajusta la altura para pantallas pequeñas */
    }
}

.ldot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.card {
    border: none;
}

/*CLASES PROPIAS DEL MODULO DE CALCULADORA DE PRESUPUESTOS*/
.img-header-presupuesto {
    background-image: url("../img/fondo2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
}

.bg-table-blue {
    background-color: var(--color_table_1);
    color: white;
}

.text-table-blue {
    color: var(--color_table_1) !important;
}

.bg-table-blue-claro {
    background-color: var(--color_table_2);
    color: white;
}

.text-table-blue-claro {
    color: var(--color_table_2) !important;
}

/* clases mensaje inicial */
.img-header-mensaje {
    background-image: url("../img/fondo3.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
}

@media (max-width: 768px) {
    .img-header-mensaje {
        background-size: 60%;
    }
}

.degradado_1 {
    /* Para navegadores antiguos (fallback) */
    background: var(--color-principal);

    /* Estándar */
    background: linear-gradient(
        to right,
        var(--color-principal),
        var(--color-secundario),
        var(--color-secundario)
    );
    color: white;
}

.btn_doble {
    background: transparent !important;
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.btn_doble div:not(.icono_med):not(.icono_ase) {
    background-color: white;
    color: var(--color-principal);
    /*font-size: 1.5rem;*/
    font-weight: 600 !important;
    border-radius: 2rem;
    padding: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn_doble div.icono {
    margin-right: 5px;
    width: 3rem;
    height: 3rem;
    fill: var(--color-principal);
}

.btn_doble.active div:not(.icono_med):not(.icono_ase) {
    background: linear-gradient(
        100deg,
        var(--color-principal) 0%,
        var(--color-terciario) 50%,
        var(--color-secundario) 100%
    );
    color: white;
    border: white 2px solid;
    /*font-size: 1.5rem;*/
    font-weight: 600 !important;
    border-radius: 2rem;
    padding: 0.5rem;
}

.btn_doble.active div.icono {
    background: var(--color-principal);
    fill: white;
}

.icono_med {
    background-image: url("../img/icono1_oscuro.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 90%;
    height: 90%;
}

.btn_doble.active div.icono_med {
    background-image: url("../img/icono1.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 90%;
    height: 90%;
}

.icono_med_claro {
    background-image: url("../img/icono1.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 90%;
    height: 90%;
}

.icono_ase {
    background-image: url("../img/icono2_oscuro.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 90%;
    height: 90%;
}

.icono_ase_claro {
    background-image: url("../img/icono2.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 90%;
    height: 90%;
}

.btn_doble.active div.icono_ase {
    background-image: url("../img/icono2.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 90%;
    height: 90%;
}

.bg-blue3 {
    background-color: var(--color-cuaternario);
    color: white;
}

.bg-blue4 {
    background-color: var(--color-quiternario);
    color: white;
}

.icono_1 {
    background-image: url("../img/icono3.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin: auto;
    margin-right: 5px;
}

.icono_2 {
    background-image: url("../img/icono4.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin: auto;
    margin-right: 5px;
}

.icono_3 {
    background-image: url("../img/icono5.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin: auto;
    margin-right: 5px;
}

.esfera-flotante {
    position: relative;
    top: 10px;
    z-index: 4;
}

/*capsulas informativas*/
.img-header-capsulas {
    background-image: url("../img/fondo4.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
}

@media (max-width: 768px) {
    .img-header-capsulas {
        background-size: 60%;
    }
}

.msg-logo {
    height: 2rem;
    width: auto;
}

.esfera-flotante_izquierda {
    position: relative;
    left: 10px;
    z-index: 4;
    background-color: var(--color-principal);
    color: white;
    font-weight: bold;
    width: 20px; /* Tamaño base */
    aspect-ratio: 1/1; /* Mantiene el círculo perfecto */
    border-radius: 50%;
    display: inline-flex; /* Para centrar el texto */
    align-items: center;
    justify-content: center;
    font-size: 12px; /* Ajusta según necesidad */

    /* Para que sea responsive */
    width: clamp(20px, 3vw, 25px);
    font-size: clamp(10px, 1.5vw, 13px);
}

.border-greed-2 {
    border-color: #00a99dff !important;
    border: solid 1px;
}

.img-header-contact {
    background-image: url("../img/contact_verde.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 5rem;
    height: 5rem;
}

.img-header-contact_1 {
    background-image: url("../img/contact.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 3rem;
    height: 3rem;
}

/* Estilo para el TR con esquinas redondeadas */
.tr-redondeado {
    overflow: hidden; /* Importante para que funcione el border-radius */
}

.tr-redondeado td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.tr-redondeado td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Si también quieres redondear el th */
.tr-redondeado th:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.tr-redondeado th:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.bg_btn_doble_2 {
    background: var(--color-sexto) !important;
    color: var(--color-terciario);
}

.bg_btn_doble_2.active {
    background: var(--color-terciario) !important;
    color: white;
    .IconoMED {
        background-image: url("../img/icono7.png");
    }
    .IconoFIN {
        background-image: url("../img/icono8.png");
    }
    .IconoEST {
        background-image: url("../img/icono6.png");
    }
}

.IconoMED {
    background-image: url("../img/icono7_oscuro.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    margin: auto;
    margin-right: 5px;
}

.IconoFIN {
    background-image: url("../img/icono8_oscuro.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    margin: auto;
    margin-right: 5px;
}

.IconoEST {
    background-image: url("../img/icono6_oscuro.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    margin: auto;
    margin-right: 5px;
}

.iconoBuscar {
    background-image: url("../img/iconoBuscar.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px;
    background-color: transparent !important;
}