/*
Estilos We Love Media
*/

#layout-navbar.bg-navbar-theme{background-color: transparent !important; box-shadow: none !important}

/*Pin Login*/
.pin-pad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 20px;
        }
        
        .pin-button {
            font-size: 20px !important; 
            border-radius: 50% !important;
            width: 60px;
            height: 60px;
        }
        
        .pin-display {
            letter-spacing: 8px;
            font-size: 24px;
            text-align: center;
        }
	   #pinForm, #loginForm {
            display: none;
        }
		#pinForm,#errorMessage{max-width: 300px}
        .active {
            display: block !important;
        }

/* Horarios estudio */
#horario{display: grid;  grid-auto-flow: row; grid-column-gap: 18px;grid-template-columns: repeat(7, 1fr);}
	#horario div{display: flex;  flex-direction: column;border-radius: 8px;
  border: 1px solid #e7e8e9;
  background: #fff;
  overflow: hidden;}

/* Crear 7 columnas iguales */
#horarioest .col-lg-1-7 {
    @media (min-width: 992px) {
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }
}

/*.card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.card-header {
    padding: 0.5rem;
    text-align: center;
}
*/
.horario-item {
    text-align: center;
    padding: 5px 0;
    font-size: 0.9rem;
}

.horario-item:not(:last-child) {
    border-bottom: 1px dashed #dee2e6;
    margin-bottom: 5px;
}
.dia-semana {border-bottom: 1px solid #ddd;}
        .rangos-container, .btn-agregar, .estado-cerrado {display: none;}
        .dia-semana.abierto .rangos-container, .dia-semana.abierto .btn-agregar, .cerradoporhorario {display: block !important;}
        .dia-semana:not(.abierto) .estado-cerrado, .cerradoporhorario {display: block; color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 10px; border-radius: 4px;}
        .checkbox-dia {width: 20px; height: 20px;}

@media print {
 #layout-navbar,#layout-menu {
    display: none !important;
  }
}