/* Estilos personalizados para el sistema */

body {
    font-family: 'Source Sans Pro', sans-serif;
}

/* Logo del sistema */
.brand-link img {
    opacity: .8;
    transition: opacity .2s;
}

.brand-link:hover img {
    opacity: 1;
}

/* Tarjetas personalizadas */
.card-primary.card-outline {
    border-top: 3px solid #007bff;
}

.card-success.card-outline {
    border-top: 3px solid #28a745;
}

.card-warning.card-outline {
    border-top: 3px solid #ffc107;
}

.card-danger.card-outline {
    border-top: 3px solid #dc3545;
}

/* Botones personalizados */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Formularios */
.custom-file-input:focus ~ .custom-file-label {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Mapas */
#mapa-sucursales, #mapa-nueva, #mapa-checador, #mapa-control {
    height: 500px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Video en checador */
#video {
    border: 2px solid #dee2e6;
    border-radius: 5px;
    background-color: #000;
}

/* Countdown */
#countdown {
    font-size: 3rem;
    font-weight: bold;
    color: #dc3545;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Sidebar */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #007bff;
    color: #fff;
}

/* Responsive */
@media (max-width: 767.98px) {
    .content-wrapper {
        margin-left: 0 !important;
    }
    
    .main-sidebar {
        transform: translateX(-250px);
    }
    
    .main-sidebar.open {
        transform: translateX(0);
    }
}

/* Animaciones */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.blink {
    animation: blink 1s infinite;
}

/* Alertas personalizadas */
.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem 1.25rem;
    color: inherit;
}

/* Miniaturas de imágenes */
.img-circle {
    border-radius: 50%;
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}