:root {
    /* Color Principal */
    --colPrin: #f51f58;
    --colSec: #d16907; 
    /* Colores de fondo */
    --colFondoPrin: #ffd1dd;
    --colFondoSec: #fbebdc; 

    /* 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: #0bbea3; /* Pregunta */
    --colWarning: #ffac1c; /* Amarillo/naranja para advertencias */
    --colError: #f20000; /* Rojo para errores, similar a colSec-2 */
  }

body,html{
    height: 100%;
    width: 100%;
}
.botonPrin {
    background-color: var(--colPrin);
    color: var(--colBlanco);    
    transition: background-color 0.3s ease, color 0.3s ease;
    } 
.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);    
    }    
.botonAlerta {
        background-color: var(--colWarning); /* Amarillo/naranja para advertencias */
        color: var(--colNegro);    
    }
.botonPregunta {
        background-color: var(--colPregunta); /* Azul oscuro para preguntas o confirmaciones */
        color: var(--colBlanco);    
    }

.botonGris:hover,
.botonSec:hover,
.botonPrin:hover,
.botonDanger:hover,
.botonAlerta:hover,
.botonPregunta:hover {
    background-color: var(--colSuccess); /* Color de fondo cuando el mouse está encima */
    color: var(--colBlanco); /* Color de texto en hover */
}
/* Estilos comunes para todos los botones */
.botonGris,
.botonSec,
.botonPrin,
.botonDanger,
.botonAlerta,
.botonPregunta {
        text-align: center;
        font-weight: bold;
        margin: 6px;
        padding: 5px; /* 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-radius: 5px;
    width: 100%;
    margin: 0;
}              
.inputBase,
.selBase {
    width: 100%;
    margin-bottom: 10px; 
    background-color: var(--colFondoPrin);
    color: var(--colNegro);
    padding: .2em .2em .2em .2em;
    border: 1px solid #aaa;
    border-radius: .3em;
    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);
    font-weight:bold;
    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: 1px;
  padding: 1px;
  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;
}
.cardPrin-body,
.cardSec-body {
    border: 1px solid #989898;
    padding: 5px;
}
.cardSec-footer,
.cardPrin-footer {
    background: linear-gradient(to right, var(--colGrisCla),var(--colBlanco));
    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);
}