/* * Sistema de Gestión de Fichajes - Multi-Centro y Multi-Evento
 * Desarrollado por: Guillermo David Gámez Escobar
 * Fecha: 2026
 * Todos los derechos reservados. 
 * El uso no autorizado o reproducción de este código está prohibido.
 */
/* VARIABLES FCB 25-26 */
:root {
    --fcb-azul: #004d98;
    --fcb-grana: #a50044;
    --fcb-purpura: #6c2d58; 
    --fcb-amarillo: #ffed00;
    --fcb-dorado-kobe: #eec95c;
    --fcb-violeta-persa: #4c2c72;
    --fcb-naranja-coral: #ff7f50;
}

body { 
    background: linear-gradient(135deg, var(--fcb-azul) 0%, var(--fcb-purpura) 50%, var(--fcb-grana) 100%);
    min-height: 100vh;
    font-family: 'Segoe UI', sans-serif;
}

/* ESTRUCTURA Y PANELES */
#seccionFichaje { display: none; } /* Oculto por defecto */

.card-inicio { max-width: 400px; }

.header-fichaje { margin-bottom: 15px; }

.card { 
    border: none; 
    border-radius: 12px;
}

.card-body { padding: 1rem !important; }

/* BOTÓN CAMBIAR EVENTO */
.btn-cambiar-evento { 
    font-size: 0.85rem; 
    color: var(--fcb-amarillo) !important;
    text-decoration: none; 
    cursor: pointer; 
    font-weight: bold;
    padding: 4px 12px;
    border: 1px solid rgba(255, 237, 0, 0.3);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.3);
}

/* BOTONES DE FICHAJE COMPACTOS */
.btn-fichaje { 
    height: 60px; /* Tamaño reducido */
    font-size: 1.1rem; 
    font-weight: bold; 
    border-radius: 10px;
    border: 2px solid var(--fcb-dorado-kobe);
    background-color: white;
    color: var(--fcb-violeta-persa);
    margin-bottom: 0; /* Controlado por el gap del d-grid */
}

.btn-fichaje:hover {
    background-color: var(--fcb-dorado-kobe);
    color: black;
}

/* INFO EMPLEADO */
.info-card { 
    border-left: 6px solid var(--fcb-amarillo); 
}

#dispNombre { color: var(--fcb-azul); margin-bottom: 8px; }

#infoEmpleado p { 
    font-size: 0.9rem; 
    margin-bottom: 3px !important; 
}

#wrapperHora { display: none; margin-top: 5px; }

/* LISTA DE SUGERENCIAS */
#listaSugerencias {
    display: none;
    position: absolute;
    z-index: 1050;
    width: 100%;
    margin-top: 2px;
}

/* BARRA PROGRESO Y RESUMEN */
#contenedorProgreso { height: 8px; display: none; }

#barraProgreso { background-color: var(--fcb-dorado-kobe); }

.resumen-final {
    display: none;
    background: white;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 15px;
    border-left: 5px solid var(--fcb-grana);
}

/* ESTADOS ACTIVOS (JS) */
.btn-centro-activo { background-color: var(--fcb-azul) !important; color: white !important; }
.btn-bar-activo { background-color: var(--fcb-violeta-persa) !important; color: white !important; }
.btn-salida-activo { background-color: var(--fcb-naranja-coral) !important; color: white !important; }

/* Estilo para el Badge de Convocatoria (Dorado FCB) */
#dispHoraConvocatoria {
    background-color: var(--fcb-dorado-kobe) !important;
    color: var(--fcb-violeta-persa) !important; /* Texto violeta para contraste */
    font-weight: bold;
    font-size: 0.9rem;
    padding: 5px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Ajuste del contenedor para que no esté pegado */
#wrapperHora {
    margin-top: 8px;
    padding-top: 5px;
    border-top: 1px transition rgba(0,0,0,0.05);
}

/* MODAL SEGURIDAD (Negro y Dorado) */
#modalSeguridad .modal-content {
    background-color: #1a1a1a;
    color: var(--fcb-dorado-kobe);
    border: 2px solid var(--fcb-dorado-kobe);
}
#modalSeguridad .form-control {
    background-color: #000;
    border: 1px solid var(--fcb-dorado-kobe);
    color: var(--fcb-dorado-kobe);
}
#modalSeguridad .btn-danger {
    background-color: var(--fcb-dorado-kobe);
    color: black;
    border: none;
    font-weight: bold;
}

/* Brillo dorado al escribir el PIN */
#modalSeguridad .form-control:focus {
    background-color: #000;
    border-color: var(--fcb-amarillo-logo);
    color: var(--fcb-amarillo-logo);
    box-shadow: 0 0 10px rgba(255, 237, 0, 0.3);
    outline: none;
}

/* Animación de entrada para el modal */
.modal.fade .modal-dialog {
    transform: scale(0.9);
    transition: transform 0.3s ease-out;
}
.modal.show .modal-dialog {
    transform: scale(1);
}