@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;
    --bs-body-color: #54607aff;
    --bs-btn-active-color: white;
    --bs-btn-active-bg: #344daaff;
    --bs-btn-active-border-color: #344daaff;
    --bs-primary: #344daaff;
    --bs-primary-rgb: 52, 77, 170;
    --bs-table-active-bg: 52, 77, 170;

    --color_table_1: #304b86ff;
    --color_table_2: #4667e3ff;
}

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: #1b1464ff !important;
}

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

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

.bg-blue {
    background-color: #1b1464ff !important;
}
.bg-blue th {
    background-color: #1b1464ff !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: #29abe2ff !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: #29abe2ff !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;
}