/*
Ejemplo de uso de variables en CSS

DEFINICION:
:root {
    --bg-color: blue;
    --fuente12: 12px;
}

USO:
div {
    font-size: var(--fuente12);
    background-color: var(--bg-color);
}
*/

:root {
    --col-verde: DarkGreen;
    --col-azul: SteelBlue;
    --col-rojo: DarkRed;
    --col-amarillo: DarkKhaki;
    --col-naranja: DarkOrange;
    --col-gris: SlateGray;
    --col-morado: RebeccaPurple;
}

.content-wrapper {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: 1fr auto;
}

footer {
    background-color: cadetblue;
    color: white;
    padding: 1rem 2rem;
    text-align: center;
    font-style: bold;
}

/* FORMULARIOS */

/* Etiquetas label */
.lbl-req::after {
    content: " *";
    color: red; /* Color rojo para el asterisco */
}

.error-msg {
    color: red;
    display: none;
    font-style: italic;
}

textarea {
    resize: vertical;
    overflow: auto;
    min-height:115px;
}

.lectura, .lectura:focus {
    background-color: transparent;
    border: 0px;
    border-bottom: 1px black solid;
    width: 100%;
    height: calc(2.25rem + 2px);
    pointer-events: none;
    user-select: none;
}

/* BOTONES PARA TABLAS CRUD */

.btn-add {
    position: relative;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    border: 2px solid var(--col-verde);
    color: var(--col-verde);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.btn-add::before {
    content: "\2b";
    font-family: "Font Awesome 6 Free";
    font-size: 1rem;
}

.btn-add:hover {
    transition: 0.2s;
    background-color: var(--col-verde);
    color: #ffffff;
}

.btn-add:disabled {
    background-color: var(--col-verde);
    color: gray;
    cursor: not-allowed;
    opacity: 0.7; /* Reduce la opacidad */
}

.btn-view {
    position: relative;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    border: 2px solid var(--col-gris);
    color: var(--col-gris);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.btn-view::before {
    content: "\f06e";
    font-family: "Font Awesome 6 Free";
    font-size: 1rem;
}

.btn-view:hover {
    transition: 0.2s;
    background-color: var(--col-gris);
    color: #ffffff;
}

.btn-view:disabled {
    background-color: var(--col-gris);
    color: gray;
    cursor: not-allowed;
    opacity: 0.7; /* Reduce la opacidad */
}

.btn-edit {
    position: relative;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    border: 2px solid var(--col-amarillo);
    color: var(--col-amarillo);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.btn-edit::before {
    content: "\f044";
    font-family: "Font Awesome 6 Free";
    font-size: 1rem;
}

.btn-edit:hover {
    transition: 0.2s;
    background-color: var(--col-amarillo);
    color: #ffffff;
}

.btn-edit:disabled {
    background-color: var(--col-amarillo);
    color: gray;
    cursor: not-allowed;
    opacity: 0.7; /* Reduce la opacidad */
}

.btn-del {
    position: relative;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    border: 2px solid var(--col-rojo);
    color: var(--col-rojo);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.btn-del::before {
    content: "\f2ed";
    font-family: "Font Awesome 6 Free";
    font-size: 1rem;
}

.btn-del:hover {
    transition: 0.2s;
    background-color: var(--col-rojo);
    color: #ffffff;
}

.btn-del:disabled {
    background-color: var(--col-rojo);
    color: gray;
    cursor: not-allowed;
    opacity: 0.7; /* Reduce la opacidad */
}

.btn-cancel {
    position: relative;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    border: 2px solid var(--col-rojo);
    color: var(--col-rojo);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.btn-cancel:hover {
    transition: 0.2s;
    background-color: var(--col-rojo);
    color: #ffffff;
}

.btn-cancel:disabled {
    background-color: var(--col-rojo);
    color: gray;
    cursor: not-allowed;
    opacity: 0.7; /* Reduce la opacidad */
}

.btn-validar {
    position: relative;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    border: 2px solid var(--col-verde);
    color: var(--col-verde);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.btn-validar:hover {
    transition: 0.2s;
    background-color: var(--col-verde);
    color: #ffffff;
}

.btn-validar:disabled {
    background-color: var(--col-verde);
    color: gray;
    cursor: not-allowed;
    opacity: 0.7; /* Reduce la opacidad */
}

/*
.btn-add:hover:not(:disabled), .btn-view:hover:not(:disabled), .btn-edit:hover:not(:disabled), .btn-del:hover:not(:disabled) {
  box-shadow: 0 0.1rem 0.4rem #000000;
  transition: 0.2s;
} 
*/

/* BOTONES DE USO GENERAL */

.btn-azul {
    background-color: var(--col-azul);
    border: 2px solid var(--col-azul); 
    color: #ffffff;
    padding: 0.275rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem; 
}

.btn-verde {
    background-color: var(--col-verde);
    border: 2px solid var(--col-verde); 
    color: #ffffff;
    padding: 0.275rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem; 
}

.btn-gris {
    background-color: var(--col-gris);
    border: 2px solid var(--col-gris); 
    color: #ffffff;
    padding: 0.275rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem; 
}

.btn-dorado {
    background-color: var(--col-amarillo);
    border: 2px solid var(--col-amarillo); 
    color: #ffffff;
    padding: 0.275rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem; 
}

.btn-rojo {
    background-color: var(--col-rojo);
    border: 2px solid var(--col-rojo); 
    color: #ffffff;
    padding: 0.275rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem; 
}

.btn-amarillo {
    background-color: var(--col-amarillo);
    border: 2px solid var(--col-amarillo); 
    color: #ffffff;
    padding: 0.275rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem; 
}

.btn-morado {
    background-color: var(--col-morado);
    border: 2px solid var(--col-morado); 
    color: #ffffff;
    padding: 0.275rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem; }

.btn-naranja {
    background-color: var(--col-naranja);
    border: 2px solid var(--col-naranja); 
    color: #ffffff;
    padding: 0.275rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem; 
}

.btn-verde:hover:not(:disabled), .btn-amarillo:hover:not(:disabled), .btn-dorado:hover:not(:disabled), .btn-gris:hover:not(:disabled),
.btn-rojo:hover:not(:disabled), .btn-azul:hover:not(:disabled), .btn-morado:hover:not(:disabled), .btn-naranja:hover:not(:disabled) {
    box-shadow: 0 0.1rem 0.4rem #000000;
    transition: 0.2s;
} 

.btn-verde:disabled, .btn-amarillo:disabled, .btn-dorado:disabled, .btn-gris:disabled,
.btn-rojo:disabled, .btn-azul:disabled, .btn-morado:disabled, .btn-narajnja:disabled  {
    background-color: DarkSlateGray;
    border: 2px solid DarkSlateGray; 
    color: LightGray;
    cursor: not-allowed;
    opacity: 0.5; /* Reduce la opacidad */
}

/* TABLAS */

.table > thead > tr > th {
    background-color: #13322b !important;
    color: #ffffff !important;
    text-align: center;
    font-size: 14px;
}

.table > tbody > tr > td {
    font-size: 12px;
}

.img-datatable {
    width: 150px;
    max-height: 200px;
}

/* Paginado de las tablas */
.page-link {
    color: #13322b;
}

.page-item.active .page-link {
    color: #fff;
    background-color: #13322b;
    border-color: #13322b;
}

/* MODALES */
.modal {
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,.4);
}

.modal-header{
    background-color: #808080;
}

.modal-title{
    color: #ffffff;
}

/* PESTAÑAS */

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  color: #ffffff;
  background-color: #13322b;
  border-color: #dee2e6 #dee2e6 #fff;
}

.nav-link{
  color: #13322b;
  background-color: #ffffff; 
}

.nav-link:hover{
  transition: 0.2s;
  background-color: #13322b;
  color: #ffffff;
}

.badge {
    font-size: 1.2em;
    padding: 5px 15px;
    margin-top: 2px
}

.font-white {
    color: white;
}

fieldset {
    background: white;
    padding: 20px;
    border: 1px solid;
    border-color: lightgray;
    border-radius: 5px;
    margin-bottom: 10px;
    position: relative;        /* Necesario para posicionar la leyenda */
}

legend {
    background-color: lightgray;
    border-radius: 5px;
    font-family: "Open Sans", Arial, Helvetica, Sans-Serif;
    font-weight: bold;
    font-size: 1em;
    color: #02598B;
    padding: 0 10px;
    position: absolute;        /* Posicionamiento absoluto */
    top: -10px;                /* Mover hacia arriba para superponer al borde */
    left: 50%;                 /* Centrar horizontalmente */
    transform: translateX(-50%); /* Ajustar el centrado */
    width: calc(100% - 40px);  /* Ancho del legend con márgenes */
    text-align: center;        /* Centrar el texto dentro del legend */
}

.borde-oscuro {
    background: white;
    padding: 10px;
    border: 1px solid;
    border-color: dimgray;
    border-radius: 5px;
    margin-bottom: 10px;
}

.borde-medio {
    background: white;
    padding: 10px;
    border: 1px solid;
    border-color: gray;
    border-radius: 5px;
    margin-bottom: 10px;
}

.borde-claro {
    background: white;
    padding: 10px;
    border: 1px solid;
    border-color: lightgray;
    border-radius: 5px;
    margin-bottom: 10px;
}

.divisor-blanco {
    height: 10px; 
    background-color: white;
}

.divisor-dash {
    border-top: 2px dashed grey;
    height: 0;
    margin-top: 7px;
    margin-bottom: 7px;
}