:root {
    /* Color Principal */
    --colPrin: #0e8700;
    --colSec: #23345f; 
    /* Colores de fondo */
    --colFondoPrin: #ddfed9;
    --colFondoSec: #e5ebfa; 

    /* Colores Genéricos */
    --colNegro: #000; /* Texto oscuro */
    --colBlanco: #FFF; /* Blanco, para fondos y elementos */
    --colGrisObs: #666666; /* Texto gris oscuro */
    --colGrisCla: #d1d1d1; /* Texto gris claro */
  
    /* Colores de Éxito, Advertencia, y Error */
    --colSuccess: #43cb43; /* Verde para éxito */
    --colPregunta: #b7d7d6; /* Pregunta */
    --colWarning: #ffac1c; /* Amarillo/naranja para advertencias */
    --colError: #f20000; /* Rojo para errores, similar a colSec-2 */
  }
 
.botonPrin {
background-color: var(--colPrin);
color: var(--colBlanco);    
} 
.botonSec {
background-color: var(--colSec);
color: var(--colBlanco);    
}
.botonGris {
background-color: var(--colGrisObs);
color: var(--colBlanco);    
}
.botonDanger {
    background-color: var(--colError); /* Rojo para indicar error o peligro */
    color: var(--colBlanco);    
}

/* Botón de alerta */
.botonAlerta {
    background-color: var(--colWarning); /* Amarillo/naranja para advertencias */
    color: var(--colNegro);    
}

/* Botón de pregunta o confirmación */
.botonPregunta {
    background-color: var(--colPregunta); /* Azul oscuro para preguntas o confirmaciones */
    color: var(--colNegro);    
}

/* Estilos comunes para todos los botones */
.botonGris,
.botonSec,
.botonPrin,
.botonDanger,
.botonAlerta,
.botonPregunta {
    text-align: center;
    font-weight: bold;
    padding: 4px 12px; /* Espaciado interno */
    border-radius: 8px; 
    cursor: pointer; /* Cambia el cursor al pasar el ratón */
    text-decoration: none;
}

.labelBase {
    background-color: var(--colPrin);
    color: var(--colBlanco);
    text-align: center; 
    font-weight: bold;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;    
    width: 100%;
}           
.inputBase {
    width: 100%;
    margin-bottom: 10px; 
    background-color: var(--colFondoPrin);
    color: var(--colNegro);
    padding: .2em .2em .2em .2em;
    border: 1px solid #aaa;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 100%;
}
.navBase {
    background-color: var(--colPrin);
    font-weight:500;
}

/* Estilo para los enlaces dentro de los elementos de navegación */
.nav-item, .nav-link {
    color: var(--colBlanco);
    white-space: nowrap;
}

.navbar-toggler .navbar-toggler-icon {
    background-color: var(--colPrin);
    color: var(--colNegro);
}

.cardPrin {
    background-color: var(--colFondoPrin);
    border: 1px solid var(--colGrisObs);
}
.cardSec {
  background-color: var(--colFondoSec);
  border: 1px solid var(--colGrisObs);
}  
.cardPrin,
.cardSec {
  border-radius: 10px;
  margin: 10px;
  padding: 4px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
}
.cardPrin-header{
    background: linear-gradient(to right, var(--colPrin),var(--colFondoPrin));
    color: var(--colBlanco);
}
.cardSec-header {
    background: linear-gradient(to right, var(--colSec),var(--colFondoSec));
    color: var(--colBlanco);

}
.cardPrin-header,
.cardSec-header
{
    font-weight: bold;
    padding: 3px 6px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;    
}

/* Estilos para el pie de las tarjetas */
.cardSec-footer,
.cardPrin-footer {
    background: linear-gradient(to left, var(--colGrisCla),var(--colGrisObs));
    color: var(--colNegro);
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Estilos generales */
.divPadre {
    display: flex;
    flex-wrap: wrap; /* Para que los elementos hijos se envuelvan si no hay suficiente espacio */
    width: 100%;
    overflow-y: auto;    
}

.divHijo {
    padding: 15px; /* Espacio alrededor del contenido del hijo */
    overflow-y: auto;    
}


.video {
    position: relative;
}
.video-controls {
    position: absolute;
    bottom: 10px;
    right: 10px; /* Cambiado para mover los botones a la izquierda */
    display: flex;
    gap: 10px; /* Espacio entre los botones */
}

.video-controls button {
    opacity: 0.3;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

.video-controls button:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 1);
}

.tabBase {
    width: 100%;
    border: 1px solid var(--colSecundario);
}
.tabBase th {
    background-color: var(--colPrimario);
    color: var(--colFondo);
}
.tabBase td,
.tabBase th {
    padding: 1px 4px; /* Reducir el padding horizontal y vertical */
    text-align: left;
    border: 1px solid var(--colBorde);
    line-height: 1.2; /* Reducir la altura de la línea */
}

.tabBase tr:nth-child(even) td {
    background-color: var(--colFondo);
}