:root {
    --colTitulo1: #118C30;
    --colTitulo2: #112F8C;
    --colTitulo3: #0B7C75;
    --colTxtTitulo1: #ffffff;
    --colTxtNormal: #000;    
    --colBoton1: #011766;
    --colBoton2: #009216;
    --colBoton3: #78001c;
    --colFondo: #f4f4f4;
    --colBotonHover: #d5d5d5;    
    --colFondoHover: #46acdb;
    --colTxtHover: #3f3b3b;
}

.botonPrin:hover{
    color: var(--colTxtNormal);
}
.etiqBas {
    background-color: var(--colTitulo2);
    color: var(--colTxtTitulo1);
    text-align: center; 
    font-size: 1.1em;
    padding: 1px 8px;
    border-radius: 5px;
    width: 100%;
}

/* Estilos para los campos de entrada y select */
.txtInput,
.selBas {
    width: 100%;
    margin-bottom: 10px; 
    background-color: var(--colFondo);
    color: var(--colTxtNormal);
    font-weight: bold;
    padding: .2em .2em .2em .2em;
    border: 1px solid #aaa;
    border-radius: .3em;
    width: 100%;
}

/* Estilos para la tabla estrecha */
.tabEstrecha {
    width: 100%;
    border: 1px solid var(--colBoton2);
}
.tabEstrecha th {
    background-color: var(--colBoton1);
    color: var(--colTxtTitulo1);
}
.tabEstrecha td,
.tabEstrecha th {
    padding: 2px 2px;
    text-align: left;
    border: 1px solid var(--colTxtHover);
}
.tabEstrecha tr:nth-child(even) td {
    background-color: var(--colBotonHover);
}

/* Estilos para los botones básicos */
.botonPrin {
    background-color: var(--colBoton1);
    color: var(--colTxtTitulo1);
}
.botonSec {
    background-color: var(--colBoton2);
    color: var(--colTxtTitulo1);
}
.botonCerrar {
    background-color: var(--colFondoHover);
    color: var(--colTxtNormal);
}

.botonPrin,
.botonSec,
.botonCerrar {
    text-align: center;
    font-weight: bold;
    font-size: 1em;
    line-height: 80%;
    border: 1px solid var(--colBoton2);
    padding: 6px 20px; 
    border-radius: 12px; 
    cursor: pointer;
}

/* Estilos al pasar el mouse por encima de los botones */
.botonPrin:hover,
.botonSec:hover,
.botonCerrar:hover {
    background-color: var(--colBotonHover);
    color: var(--colTxtHover);
}

/* Estilos para el navbar */
.navbarBas {
    background-color: var(--colTitulo1);
    color: var(--colTxtTitulo1);
}

/* Estilos para los enlaces del navbar */
.navbarBas .navbar-nav .nav-link {
    color: var(--colTxtTitulo2);
    font-weight: bold;
    transition: color 0.3s;
    border-radius: 4px; 
    padding: 4px 6px; 
    margin: 0 5px;
}

/* Estilos al pasar el mouse por encima de los enlaces del navbar */
.navbarBas .navbar-nav .nav-link:hover {
    background-color: var(--colFondoHover);
    color: var(--colTxtHover);
}

/* Estilos para el icono del botón del navbar */
.navbarBas .navbar-toggler-icon {
    color: var(--colTxtTitulo1) !important;
}

/* Estilos para etiquetas básicas */
.nav-link {
    color: var(--colTxtTitulo1);
    font-size: 1.1em;
    font-weight: bold;
}
/* Estilos para las tarjetas básicas */
.card,
.cardPrin,
.cardSec {
    width: 100%;
    margin: auto;
    border: 1px solid #989898;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.card-header {
    background: var(--colTitulo3);
    color: var(--colTxtTitulo1);
    border-radius: 6px;
    text-align: center;
    padding: 1px;
}
.cardPrin-header {
    background: linear-gradient(to right, var(--colTitulo1), var(--colTitulo2));
    color: var(--colTxtTitulo1);
    border-radius: 6px;
    text-align: center;
    padding: 1px;
}
.cardSec-header {
    background: linear-gradient(to right, var(--colTitulo2), var(--colTitulo1));
    color: var(--colTxtTitulo1);
    border-radius: 4px;
    text-align: center;
}
.cardSec-body,
.cardPrin-body {
    background: var(--colFondo);
    color: var(--colTxtNormal);
    text-align: left;
}
.cardSec-footer,
.cardPrin-footer {
    background: var(--colFondo);
    color: var(--colTxtNormal);
    text-align: center;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0,)
}