/* ============================================================
   ControlH Design System — v1.0
   CSS global aplicado a todas las pantallas
   Solo visual — sin tocar lógica ni funciones
   ============================================================ */

/* ── TOKENS ── */
:root {
    --cl-purple:       #5D55F0;
    --cl-purple-light: #EEF2FF;
    --cl-purple-border:#c4b5fd;
    --cl-dark:         #1A1A2E;
    --cl-gray-text:    #6B7280;
    --cl-gray-subtle:  #9CA3AF;
    --cl-border:       #e8e4d9;
    --cl-bg-cream:     #F6F4ED;
    --cl-bg-white:     #ffffff;
    --cl-green-bg:     #EAF3DE;
    --cl-green-text:   #3B6D11;
    --cl-orange-bg:    #FAEEDA;
    --cl-orange-text:  #854F0B;
    --cl-red-bg:       #FCEBEB;
    --cl-red-text:     #A32D2D;
    --cl-red-border:   #F09595;
    --cl-blue-bg:      #E6F1FB;
    --cl-blue-text:    #185FA5;
}

/* ════════════════════════════════════
   BOTONES — reemplaza todos los estilos
   ════════════════════════════════════ */

/* Reset base para todos los botones del plugin */
.chrrhh-panel button,
.tab-content button,
#tab-empleados button,
#tab-tickets button,
#tab-ausencias button,
#tab-turnos button,
#tab-gestion-fichajes button,
#tab-departamentos button,
#tab-reportes button,
#tab-historial button,
#tab-mensajeria button,
#tab-documentos button,
#tab-configuracion button,
#tab-kpis-ejecutivos button,
[id^="tab-"] button {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 7px 14px !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}
[id^="tab-"] button:hover { opacity: 0.88 !important; }

/* Botón primario — cualquier botón verde o azul brillante de acción principal */
[id^="tab-"] button[style*="background: #10b981"],
[id^="tab-"] button[style*="background:#10b981"],
[id^="tab-"] button[style*="background: #059669"],
[id^="tab-"] button[style*="background: #3b82f6"],
[id^="tab-"] button[style*="background:#3b82f6"],
[id^="tab-"] button[style*="background: #2563eb"],
[id^="tab-"] button[style*="background: green"],
[id^="tab-"] a[style*="background: #10b981"],
[id^="tab-"] a[style*="background:#10b981"] {
    background: var(--cl-purple) !important;
    color: white !important;
    border: none !important;
    box-shadow: none !important;
}

/* Botón destructivo — rojo */
[id^="tab-"] button[style*="background: #ef4444"],
[id^="tab-"] button[style*="background:#ef4444"],
[id^="tab-"] button[style*="background: #dc2626"],
[id^="tab-"] button[style*="background: #b91c1c"],
[id^="tab-"] button[style*="background: red"],
[id^="tab-"] button[style*="background: #e53e3e"],
[id^="tab-"] button[class*="eliminar"],
[id^="tab-"] button[class*="delete"],
[id^="tab-"] button[class*="danger"] {
    background: var(--cl-red-bg) !important;
    color: var(--cl-red-text) !important;
    border: 1px solid var(--cl-red-border) !important;
    box-shadow: none !important;
}

/* Botón naranja/amarillo → outline purple */
[id^="tab-"] button[style*="background: #f59e0b"],
[id^="tab-"] button[style*="background:#f59e0b"],
[id^="tab-"] button[style*="background: #d97706"],
[id^="tab-"] button[style*="background: #fbbf24"],
[id^="tab-"] button[style*="background: orange"] {
    background: var(--cl-purple-light) !important;
    color: var(--cl-purple) !important;
    border: 1px solid var(--cl-purple-border) !important;
    box-shadow: none !important;
}

/* Botón azul morado → primario */
[id^="tab-"] button[style*="background: #7c3aed"],
[id^="tab-"] button[style*="background: #6d28d9"],
[id^="tab-"] button[style*="background: #5b21b6"],
[id^="tab-"] button[style*="background: #4f46e5"],
[id^="tab-"] button[style*="background: #667eea"],
[id^="tab-"] button[style*="background:#4f46e5"],
[id^="tab-"] button[style*="background: #5D55F0"],
[id^="tab-"] button[style*="background:#5D55F0"] {
    background: var(--cl-purple) !important;
    color: white !important;
    border: none !important;
    box-shadow: none !important;
}

/* Botones neutros (grises, blancos con borde) */
[id^="tab-"] button[style*="background: white"],
[id^="tab-"] button[style*="background:#fff"],
[id^="tab-"] button[style*="background: #fff"],
[id^="tab-"] button[style*="background: #f3f4f6"],
[id^="tab-"] button[style*="background: #f8fafc"] {
    background: #F3F4F6 !important;
    color: var(--cl-dark) !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: none !important;
}

/* Panel empleado botones jornada */
.btn-jornada {
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 9px 16px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.btn-iniciar  { background: var(--cl-purple) !important; color: white !important; border: none !important; }
.btn-pausar   { background: var(--cl-orange-bg) !important; color: var(--cl-orange-text) !important; border: 1px solid #FAC775 !important; }
.btn-reanudar { background: var(--cl-blue-bg) !important; color: var(--cl-blue-text) !important; border: 1px solid #B5D4F4 !important; }
.btn-finalizar{ background: var(--cl-red-bg) !important; color: var(--cl-red-text) !important; border: 1px solid var(--cl-red-border) !important; }

/* ════════════════════════════════════
   TABLAS
   ════════════════════════════════════ */

[id^="tab-"] table,
.dashboard-v732 table,
.panel-widget table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}

[id^="tab-"]:not(#tab-cuadrante) table thead tr,
[id^="tab-"]:not(#tab-cuadrante) table th,
.dashboard-v732 table th {
    background: var(--cl-bg-cream) !important;
    color: #374151 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 9px 12px !important;
    border-bottom: 0.5px solid var(--cl-border) !important;
    /* Eliminar fondo morado sólido */
    background-image: none !important;
    box-shadow: none !important;
}

[id^="tab-"]:not(#tab-cuadrante) table td,
.dashboard-v732 table td {
    padding: 9px 12px !important;
    color: var(--cl-dark) !important;
    border-bottom: 0.5px solid #f0ece0 !important;
    font-size: 13px !important;
    background: white !important;
}

[id^="tab-"]:not(#tab-cuadrante) table tr:last-child td { border-bottom: none !important; }
[id^="tab-"]:not(#tab-cuadrante) table tbody tr:hover td { background: #fafaf8 !important; }

/* ════════════════════════════════════
   CARDS / PANELS
   ════════════════════════════════════ */

[id^="tab-"] > div,
.panel-widget,
.tab-content > div > div[style*="background: white"],
.tab-content > div > div[style*="background:white"],
.tab-content > div > div[style*="background: #fff"],
.tab-content > div > div[style*="background:#fff"] {
    box-shadow: none !important;
}

/* Eliminar sombras exageradas en todos los bloques */
[id^="tab-"] [style*="box-shadow"],
.panel-widget[style*="box-shadow"],
.dashboard-v732 [style*="box-shadow"] {
    box-shadow: none !important;
}

/* Cards con borde sutil en vez de sombra */
[id^="tab-"] [style*="border-radius: 12px"][style*="background: white"],
[id^="tab-"] [style*="border-radius:12px"][style*="background: white"],
[id^="tab-"] [style*="border-radius: 8px"][style*="background: white"] {
    border: 0.5px solid var(--cl-border) !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════
   BADGES / ESTADO
   ════════════════════════════════════ */

/* Badge verde */
[id^="tab-"] [style*="background: #d1fae5"],
[id^="tab-"] [style*="background:#d1fae5"],
[id^="tab-"] [style*="background: #dcfce7"],
[id^="tab-"] span[style*="color: #065f46"],
[id^="tab-"] span[style*="color: #166534"] {
    background: var(--cl-green-bg) !important;
    color: var(--cl-green-text) !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
}

/* Badge naranja/amarillo */
[id^="tab-"] [style*="background: #fef3c7"],
[id^="tab-"] [style*="background:#fef3c7"],
[id^="tab-"] [style*="background: #fef9c3"],
[id^="tab-"] span[style*="color: #92400e"],
[id^="tab-"] span[style*="color: #854d0e"] {
    background: var(--cl-orange-bg) !important;
    color: var(--cl-orange-text) !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
}

/* Badge rojo */
[id^="tab-"] [style*="background: #fee2e2"],
[id^="tab-"] [style*="background:#fee2e2"],
[id^="tab-"] span[style*="color: #991b1b"],
[id^="tab-"] span[style*="color: #b91c1c"] {
    background: var(--cl-red-bg) !important;
    color: var(--cl-red-text) !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
}

/* Badge azul */
[id^="tab-"] [style*="background: #dbeafe"],
[id^="tab-"] [style*="background:#dbeafe"],
[id^="tab-"] span[style*="color: #1e40af"],
[id^="tab-"] span[style*="color: #1d4ed8"] {
    background: var(--cl-blue-bg) !important;
    color: var(--cl-blue-text) !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
}

/* ════════════════════════════════════
   TIPOGRAFÍA
   ════════════════════════════════════ */

/* Títulos de sección dentro de tabs */
[id^="tab-"] h2,
[id^="tab-"] h3 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cl-dark) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    margin-bottom: 12px !important;
}

/* Títulos principales de página (ej: "Gestión de Fichajes") */
[id^="tab-"] > div > h2:first-child,
[id^="tab-"] > div > h3:first-child {
    font-size: 16px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    color: var(--cl-dark) !important;
}

/* Texto de datos */
[id^="tab-"] p,
[id^="tab-"]:not(#tab-cuadrante) td,
[id^="tab-"] li {
    font-size: 13px !important;
    color: var(--cl-dark) !important;
    line-height: 1.5 !important;
}

/* Texto secundario */
[id^="tab-"] .text-muted,
[id^="tab-"] small,
[id^="tab-"] [style*="color: #64748b"],
[id^="tab-"] [style*="color:#64748b"],
[id^="tab-"] [style*="color: #94a3b8"],
[id^="tab-"] [style*="color: #6b7280"] {
    color: var(--cl-gray-text) !important;
    font-size: 12px !important;
}

/* Números métricas */
[id^="tab-"] [style*="font-size: 24px"],
[id^="tab-"] [style*="font-size:24px"],
[id^="tab-"] [style*="font-size: 28px"],
[id^="tab-"] [style*="font-size: 32px"],
[id^="tab-"] [style*="font-size: 36px"] {
    font-size: 20px !important;
    font-weight: 500 !important;
}

/* ════════════════════════════════════
   GUÍAS RÁPIDAS (3 pasos)
   ════════════════════════════════════ */

[id^="tab-"] [style*="background: linear-gradient"][style*="border-radius"] {
    background: var(--cl-bg-cream) !important;
    color: var(--cl-dark) !important;
    box-shadow: none !important;
    border: 0.5px solid var(--cl-border) !important;
}

/* ════════════════════════════════════
   CABECERAS DE SECCIÓN COLORIDAS
   ════════════════════════════════════ */

/* Bloques con fondo naranja/rojo tipo "Solicitudes Pendientes" */
[id^="tab-"] [style*="background: #f59e0b"],
[id^="tab-"] [style*="background:#f59e0b"],
[id^="tab-"] [style*="background: linear-gradient"][style*="f59e0b"],
[id^="tab-"] [style*="background: linear-gradient"][style*="ef4444"] {
    background: var(--cl-orange-bg) !important;
    color: var(--cl-orange-text) !important;
    border: 0.5px solid #FAC775 !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════
   PANEL EMPLEADO
   ════════════════════════════════════ */

.panel-empleado-tabs button,
[class*="tab-empleado"] button {
    font-size: 12px !important;
    padding: 8px 14px !important;
    border-radius: 7px !important;
}

/* Timer jornada */
#timer-jornada,
[id*="timer"],
[class*="timer"] {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: var(--cl-dark) !important;
    letter-spacing: 3px !important;
}

/* ════════════════════════════════════
   FORMULARIOS
   ════════════════════════════════════ */

[id^="tab-"] input[type="text"],
[id^="tab-"] input[type="email"],
[id^="tab-"] input[type="number"],
[id^="tab-"] input[type="date"],
[id^="tab-"] select,
[id^="tab-"] textarea {
    font-size: 13px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 7px !important;
    padding: 8px 12px !important;
    color: var(--cl-dark) !important;
    background: white !important;
    box-shadow: none !important;
    outline: none !important;
}
[id^="tab-"] input:focus,
[id^="tab-"] select:focus,
[id^="tab-"] textarea:focus {
    border-color: var(--cl-purple) !important;
    box-shadow: 0 0 0 2px rgba(93,85,240,0.1) !important;
}

/* ════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════ */

@media (max-width: 768px) {
    [id^="tab-"] h2 { font-size: 14px !important; }
    [id^="tab-"] button { padding: 8px 12px !important; }
    [id^="tab-"] table { font-size: 12px !important; }
    [id^="tab-"] table th,
    [id^="tab-"] table td { padding: 7px 8px !important; }
}


/* ════════════════════════════════════
   CUADRANTE — sábados y domingos en rojo
   Festivos en rojo también
   ════════════════════════════════════ */

/* La tabla del cuadrante tiene th con data-day o class weekend */
#tab-cuadrante table th.weekend,
#tab-cuadrante table th.sabado,
#tab-cuadrante table th.domingo,
#tab-cuadrante table th[data-weekend="true"],
#tab-cuadrante table th[data-day="0"],
#tab-cuadrante table th[data-day="6"] {
    background: #FCEBEB !important;
    color: #A32D2D !important;
}

/* Festivos — F con fondo amarillo arena */
#tab-cuadrante table td.festivo,
#tab-cuadrante table th.festivo,
#tab-cuadrante table td[data-festivo="true"] {
    background: #FAEEDA !important;
    color: #854F0B !important;
    font-weight: 600 !important;
}

/* ════════════════════════════════════
   TABLA EMPLEADOS — cabecera lavanda → crema
   El thead tiene background inline hardcodeado
   ════════════════════════════════════ */

#tab-empleados table thead tr,
#tab-empleados table thead th,
#tab-empleados #tabla-empleados thead tr,
#tab-empleados #tabla-empleados thead th,
#tab-empleados #tbody-empleados-header {
    background: #F6F4ED !important;
    background-color: #F6F4ED !important;
    color: #374151 !important;
}

/* Botones empleados en JS — inline styles */
#tab-empleados button[style*="background:#3b82f6"],
#tab-empleados button[style*="background: #3b82f6"] {
    background: var(--cl-blue-bg) !important;
    color: var(--cl-blue-text) !important;
    border: 1px solid #B5D4F4 !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════
   FESTIVOS — cabecera lavanda → crema
   ════════════════════════════════════ */

#tab-festivos table thead tr,
#tab-festivos table thead th {
    background: #F6F4ED !important;
    background-color: #F6F4ED !important;
    color: #374151 !important;
}

/* ════════════════════════════════════
   SOLICITUDES VACACIONES — tipografía
   ════════════════════════════════════ */

#tab-ausencias h2,
#tab-ausencias h3,
#tab-ausencias .section-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
}

/* Bloque solicitudes pendientes */
#solicitudes-pendientes-container,
#widget-solicitudes {
    font-size: 13px !important;
}


/* ════════════════════════════════════
   FIX: seccion-pendientes-v3 wrapper
   ════════════════════════════════════ */

#seccion-pendientes-v3 {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#seccion-pendientes-v3 .panel-section > h2,
#seccion-pendientes-v3 > .panel-section > h2 {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    color: #1A1A2E !important;
    margin-bottom: 12px !important;
}

/* Solicitudes cards grandes → compactar */
#seccion-pendientes-v3 .solicitud-card,
#seccion-pendientes-v3 > div > div[style*="border-radius"],
#lista-solicitudes-pendientes > div[style*="background"],
#lista-solicitudes-pendientes > div {
    background: white !important;
    border: 0.5px solid #e8e4d9 !important;
    border-left: 3px solid #FAC775 !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    margin-bottom: 6px !important;
    border-radius: 0 8px 8px 0 !important;
}

/* Nombres empleado en solicitudes */
#lista-solicitudes-pendientes [style*="font-size: 16px"],
#lista-solicitudes-pendientes [style*="font-size:16px"],
#lista-solicitudes-pendientes [style*="font-weight: 600"][style*="font-size"],
#lista-solicitudes-pendientes [style*="font-weight:600"][style*="font-size"] {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1A1A2E !important;
}

/* Textos secundarios en solicitudes */
#lista-solicitudes-pendientes [style*="font-size: 14px"],
#lista-solicitudes-pendientes [style*="font-size:14px"],
#lista-solicitudes-pendientes [style*="font-size: 13px"] {
    font-size: 12px !important;
    color: #6B7280 !important;
}

/* "Desde:", "Hasta:", etc */
#lista-solicitudes-pendientes label,
#lista-solicitudes-pendientes [style*="font-weight: 600; font-size: 12px"],
#lista-solicitudes-pendientes [style*="font-weight:600;font-size:12px"] {
    font-size: 11px !important;
    color: #9CA3AF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Botones aprobar/rechazar */
#lista-solicitudes-pendientes button[style*="background: #10b981"],
#lista-solicitudes-pendientes button[style*="background:#10b981"],
#lista-solicitudes-pendientes .btn-aprobar-solicitud {
    background: #EAF3DE !important;
    color: #3B6D11 !important;
    border: 1px solid #C0DD97 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

#lista-solicitudes-pendientes button[style*="background: #ef4444"],
#lista-solicitudes-pendientes button[style*="background:#ef4444"],
#lista-solicitudes-pendientes .btn-rechazar-solicitud {
    background: #FCEBEB !important;
    color: #A32D2D !important;
    border: 1px solid #F09595 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

/* Header widget solicitudes */
.solicitudes-pendientes-widget h3,
#tab-ausencias .solicitudes-pendientes-widget h3 {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #854F0B !important;
}


/* ════════════════════════════════════
   BADGE TABS — fix overflow para números grandes
   ════════════════════════════════════ */

.panel-tab-badge,
.panel-tabs-topbar .panel-tab .panel-tab-badge {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: #ef4444 !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border: 1.5px solid white !important;
}

/* Badge en tabs de la barra oscura */
.panel-tabs-topbar .panel-tab {
    position: relative !important;
}