/* ==========================================
   WIT TIMETRACK - ESTILOS CORPORATIVOS
   Basado en diseño de WitTimeTrack
   ========================================== */

/* FUENTE INTER (autoalojada, variable: cubre los pesos 100-900) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/InterVariable.woff2') format('woff2');
}

/* VARIABLES DE COLOR */
:root {
    --wit-naranja: #E57C23;
    --wit-naranja-hover: #c96a1a;
    --wit-antracita: #111827;
    --wit-gris-claro: #F9FAFB;
    --wit-gris-medio: #6B7280;
    --wit-gris-oscuro: #374151;
    --wit-borde: #E5E7EB;
    --wit-sombra: rgba(0, 0, 0, 0.05);
    --wit-sombra-md: rgba(0, 0, 0, 0.1);
}

/* TIPOGRAFÍA GLOBAL */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--wit-gris-claro);
    color: var(--wit-antracita);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* NAVBAR CORPORATIVO */
.navbar-wit {
    padding: 0.75rem 0;
    background-color: #ffffff !important;
}

.logo-wit {
    background: linear-gradient(135deg, var(--wit-naranja) 0%, #f59e0b 100%);
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo-wit-text {
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.5px;
}

.brand-text {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.nav-link-wit {
    color: var(--wit-gris-oscuro) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.nav-link-wit:hover {
    background-color: var(--wit-gris-claro);
    color: var(--wit-naranja) !important;
}

.nav-link-wit i {
    font-size: 0.9rem;
}

/* BOTONES PERSONALIZADOS */
.btn-wit {
    background-color: var(--wit-naranja);
    border-color: var(--wit-naranja);
    color: white;
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-wit:hover {
    background-color: var(--wit-naranja-hover);
    border-color: var(--wit-naranja-hover);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(229, 124, 35, 0.3);
}

.btn-wit:active {
    transform: translateY(0);
}

.btn-outline-wit {
    border: 2px solid var(--wit-naranja);
    color: var(--wit-naranja);
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    background-color: transparent;
}

.btn-outline-wit:hover {
    background-color: var(--wit-naranja);
    color: white;
    transform: translateY(-1px);
}

.btn-dark-wit {
    background-color: var(--wit-antracita);
    border-color: var(--wit-antracita);
    color: white;
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-dark-wit:hover {
    background-color: #000000;
    border-color: #000000;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.3);
}

/* USER AVATAR */
.user-avatar {
    background-color: var(--wit-naranja) !important;
}

.user-info {
    border: 1px solid var(--wit-borde);
}

/* MAIN CONTENT */
.main-content {
    flex: 1;
    padding: 2rem 0;
}

/* FOOTER */
.footer-wit {
    background-color: #ffffff;
    border-top: 1px solid var(--wit-borde);
}

.hover-wit:hover {
    color: var(--wit-naranja) !important;
}

/* UTILIDADES DE COLOR */
.text-wit {
    color: var(--wit-naranja) !important;
}

.bg-wit {
    background-color: var(--wit-naranja) !important;
}

.border-wit {
    border-color: var(--wit-naranja) !important;
}

/* TARJETAS Y CONTENEDORES */
.card-wit {
    background: white;
    border: none;
    border-radius: 20px;
    box-shadow: 0 4px 20px var(--wit-sombra);
    overflow: hidden;
}

/* INPUTS ESTILIZADOS */
/* ✅ CORRECTO - Solo aplica el icono a los SELECT, no a los inputs de texto */
.form-select.form-control-wit {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E57C23' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

/* Asegurar que los inputs de texto NO tengan background-image */
input.form-control-wit,
textarea.form-control-wit {
    background-image: none !important;
}

.form-control-wit:focus {
    border-color: var(--wit-naranja);
    box-shadow: 0 0 0 0.2rem rgba(229, 124, 35, 0.15);
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: white;
        padding: 1rem;
        border-radius: 12px;
        margin-top: 0.5rem;
        box-shadow: 0 4px 12px var(--wit-sombra-md);
    }
    
    .nav-link-wit {
        padding: 0.75rem 1rem !important;
        border-radius: 8px;
    }
    
    .nav-link-wit:hover {
        background-color: var(--wit-gris-claro);
    }
}

@media (max-width: 767.98px) {
    .brand-text {
        font-size: 1.1rem;
    }
    
    .main-content {
        padding: 1rem 0;
    }
}

/* ANIMACIONES */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.4s ease-out;
}

/* UTILIDADES ADICIONALES */
.rounded-4 {
    border-radius: 1rem !important;
}

.rounded-5 {
    border-radius: 1.5rem !important;
}

.shadow-soft {
    box-shadow: 0 2px 15px var(--wit-sombra) !important;
}

.shadow-wit {
    box-shadow: 0 4px 20px var(--wit-sombra) !important;
}

/* LABELS Y BADGES */
.badge-wit {
    background-color: var(--wit-naranja);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.85rem;
}

.badge-dark-wit {
    background-color: var(--wit-antracita);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.85rem;
}

/* ==========================================
   ESTILOS ESPECÍFICOS PARA JORNADA.CSHTML
   ========================================== */

/* Evita que el reloj "salte" cuando cambian los números (ej: de 1 a 2) */
.font-monospace {
    font-family: 'SF Mono', 'Roboto Mono', 'Courier New', monospace !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -2px;
}

.letter-spacing-1 {
    letter-spacing: 1px;
}

/* Animación de entrada suave para las tarjetas */
.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}

/* Efecto de elevación al pasar el ratón por los botones principales */
.hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .hover-lift:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(229, 124, 35, 0.25) !important;
    }

    .hover-lift:active {
        transform: translateY(-1px);
    }

/* Animación de pulso para el indicador "En curso" */
.pulse-dot {
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(229, 124, 35, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(229, 124, 35, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(229, 124, 35, 0);
    }
}

/* Ajuste específico para móvil: Botón de fichaje aún más grande y accesible */
@media (max-width: 767.98px) {
    .display-1 {
        font-size: 3.5rem; /* Reloj gigante en móvil */
    }

    .card-wit {
        padding: 1.5rem !important;
    }
}

/* ==========================================
   ESTILOS ESPECÍFICOS PARA GESTIONAR CALENDARIOS
   ========================================== */

/* Contenedor de la lista de usuarios con scroll premium */
.user-list-container {
    max-height: 180px;
    overflow-y: auto;
    transition: all 0.3s ease;
}

    .user-list-container:hover {
        border-color: var(--wit-naranja) !important;
        background-color: #fff !important;
    }

    /* Scrollbar personalizado para la lista de usuarios */
    .user-list-container::-webkit-scrollbar {
        width: 6px;
    }

    .user-list-container::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 10px;
    }

    .user-list-container::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }

        .user-list-container::-webkit-scrollbar-thumb:hover {
            background: var(--wit-naranja);
        }

/* Quitar margen del último elemento en la lista */
.last-child-mb-0:last-child {
    margin-bottom: 0 !important;
}

/* Ajuste de checkboxes para que se vean más modernos */
.form-check-input {
    cursor: pointer;
    margin-top: 0.25rem;
}

    .form-check-input:checked {
        background-color: var(--wit-naranja);
        border-color: var(--wit-naranja);
    }

.form-check-label {
    cursor: pointer;
    user-select: none;
    padding-left: 0.25rem;
}

/* En móvil, asegurar que la tabla no rompa el layout */
@media (max-width: 767.98px) {
    .table-responsive {
        border-radius: 16px;
    }

    .user-list-container {
        max-height: 150px; /* Un poco más compacto en móvil */
    }
}

/* ==========================================
   ESTILOS ESPECÍFICOS PARA LISTADO DE LOGS
   ========================================== */

/* Paginación personalizada estilo Wit */
.pagination-wit .page-link {
    color: var(--wit-gris-oscuro);
    border: 1px solid var(--wit-borde);
    margin: 0 4px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pagination-wit .page-item.active .page-link {
    background-color: var(--wit-naranja);
    border-color: var(--wit-naranja);
    color: white;
    box-shadow: 0 4px 10px rgba(229, 124, 35, 0.3);
}

.pagination-wit .page-link:hover:not(.disabled) {
    background-color: var(--wit-gris-claro);
    border-color: var(--wit-naranja);
    color: var(--wit-naranja);
}

.pagination-wit .page-item.disabled .page-link {
    color: var(--wit-gris-medio);
    background-color: transparent;
    border-color: transparent;
}

/* Estilo para el bloque de código/detalle en el modal */
#contenidoDetalle {
    font-family: 'SF Mono', 'Roboto Mono', 'Courier New', monospace !important;
    line-height: 1.6;
    color: var(--wit-antracita);
    border-left: 4px solid var(--wit-naranja) !important;
}

/* Ajuste de selects para que se vean consistentes */
.form-control-wit, .form-select.form-control-wit {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E57C23' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ==========================================
   ESTILOS ESPECÍFICOS PARA CONFIGURACIÓN
   ========================================== */

/* Borde discontinuo elegante para la zona de vista previa */
.border-dashed-wit {
    border: 2px dashed var(--wit-borde) !important;
    transition: all 0.3s ease;
}

    .border-dashed-wit:hover {
        border-color: var(--wit-naranja) !important;
        background-color: #fffaf5 !important; /* Un naranja muy muy suave al pasar el ratón */
    }

/* Ajuste para que las imágenes de logo no se deformen */
.img-fluid {
    max-width: 100%;
    height: auto;
}



/* ==========================================
   ESTILOS ESPECÍFICOS PARA LISTADO DE JORNADA
   ========================================== */

/* Avatar con iniciales */
.avatar-wit {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wit-naranja) 0%, #f59e0b 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Fila de historial expandible */
.historial-row {
    transition: all 0.3s ease;
}

    .historial-row td {
        padding: 0 !important;
    }

/* Animación de pulso para "En curso" */
.pulse-dot {
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(229, 124, 35, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(229, 124, 35, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(229, 124, 35, 0);
    }
}

/* Fila en curso destacada */
.table-warning {
    background-color: #fffbeb !important;
}

    .table-warning:hover {
        background-color: #fef3c7 !important;
    }

/* Tabla interna del historial con bordes redondeados */
.historial-row table {
    border-radius: 12px;
    overflow: hidden;
}


/* ==========================================
   ESTILOS ESPECÍFICOS PARA EDITAR FICHAJE
   ========================================== */

/* Input datetime-local estilizado */
input[type="datetime-local"].form-control-wit-input {
    font-family: 'SF Mono', 'Roboto Mono', 'Courier New', monospace;
    font-weight: 500;
    font-size: 0.95rem;
}

/* Ajuste del icono del calendario en inputs datetime (Chrome/Edge) */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

    input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
        opacity: 1;
    }

/* Textarea con altura mínima y resize vertical */
textarea.form-control-wit {
    resize: vertical;
    min-height: 80px;
    font-size: 0.95rem;
    line-height: 1.6;
}

    textarea.form-control-wit:focus {
        border-color: var(--wit-naranja);
        box-shadow: 0 0 0 0.2rem rgba(229, 124, 35, 0.15);
    }

/* Label con asterisco rojo para campos obligatorios */
.form-label .text-danger {
    font-weight: 700;
}

/* Animación suave al enfocar cualquier input del formulario */
.form-control-wit-input:focus,
.form-control-wit:focus {
    transform: translateY(-1px);
    transition: all 0.2s ease;
}


/* ==========================================
   ESTILOS ESPECÍFICOS PARA REGISTRO SEMANAL
   ========================================== */

/* Contenedor del mapa con bordes redondeados */
#mapa {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid var(--wit-borde);
    z-index: 1;
}

/* Ajuste de Leaflet para que use la fuente Inter */
.leaflet-container {
    font-family: 'Inter', sans-serif !important;
}

/* Badges de entrada/salida mejorados */
.badge.bg-success.bg-opacity-10 {
    background-color: #d1fae5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0;
}

.badge.bg-danger.bg-opacity-10 {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca;
}

/* Tarjetas diarias en móvil */
@media (max-width: 767.98px) {
    .card-wit .d-flex.align-items-center.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Ajuste de badges en móvil */
    .badge.rounded-pill {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
    }
}

/* Navegación de semana responsive */
@media (max-width: 767.98px) {
    .card-wit .d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
    }

        .card-wit .d-flex.justify-content-between > * {
            width: 100%;
            text-align: center;
        }
}

/* Tabla de fichajes - Ajuste de celdas */
.table td {
    vertical-align: top !important;
}

/* Animación suave en badges */
.badge {
    transition: all 0.2s ease;
}

    .badge:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }