/*
 * JC Ltda - Institutional Safety Management UI
 * Estilo orientado a la seriedad, autoridad y claridad de información.
 * Enfoque: Credibilidad, jerarquía institucional y limpieza visual.
 */

:root {
    /* 1. Colores Institucionales - Paleta de Confianza */
    --inst-navy-deep: #0f172a;    /* Azul muy profundo para sidebar y headers */
    --inst-navy-muted: #1e293b;  /* Azul grisáceo para elementos secundarios */
    --inst-blue-action: #2563eb; /* Azul profesional para acciones principales */
    --inst-slate-gray: #475569;  /* Gris técnico para textos secundarios */
    
    /* 2. Colores de Estado - Semántica Normativa */
    --inst-success: #15803d;     /* Verde bosque (Cumplimiento) */
    --inst-warning: #b45309;     /* Ocre (Precaución) */
    --inst-danger: #b91c1c;      /* Granate (Riesgo Crítico) */
    --inst-info: #0369a1;        /* Azul información */
    
    /* 3. Colores de Superficie */
    --inst-bg-light: #f8fafc;
    --inst-bg-white: #ffffff;
    --inst-border: #e2e8f0;
    
    /* 4. Tipografía Profesional */
    --inst-font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --inst-font-data: 'Inter', sans-serif; /* Cambiado de mono a sans para seriedad */
}

/* ========================================
   BASES Y ESTRUCTURA
   ======================================== */

body {
    background-color: var(--inst-bg-light);
    color: #1e293b;
    font-family: var(--inst-font-main);
    font-size: 0.9rem;
    line-height: 1.5;
}

.app-shell {
    background: var(--inst-bg-light) !important;
}

/* ========================================
   SIDEBAR INSTITUCIONAL - SOBRIEDAD ABSOLUTA
   ======================================== */

.app-sidebar {
    background: #0f172a !important;
    border-right: 1px solid #1a2740 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
}

.app-menu {
    flex: 1 1 auto;
    overflow-y: auto;
}

.app-logo {
    padding: 1.75rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: transparent;
}

.app-logo img {
    height: 38px !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.app-menu {
    padding: 1rem 0;
}

/* Enlaces y Toggles base */
.app-menu-toggle, .app-menu-link {
    font-family: var(--inst-font-main);
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    padding: 0.75rem 1.5rem !important;
    color: #94a3b8 !important; /* Gris slate suave */
    text-decoration: none;
    display: flex;
    align-items: center;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    background: transparent !important;
}

/* Hover: Solo aclarado de texto y fondo casi imperceptible */
.app-menu-link:hover, .app-menu-toggle:hover {
    color: #f8fafc !important;
    background: rgba(255,255,255,0.02) !important;
}

/* Estado Activo: Línea de acento y texto brillante */
.app-menu-link.active {
    color: #ffffff !important;
    background: rgba(255,255,255,0.04) !important;
    border-left: 3px solid #3b82f6 !important; /* Azul acción más fino */
    font-weight: 600 !important;
}

/* Grupos y Sub-elementos */
.app-menu-group {
    border: none !important;
    margin-bottom: 0.25rem;
}

.app-menu-toggle {
    font-weight: 500 !important;
}

.app-menu-items {
    background: transparent !important; /* Quitar fondos oscuros extra */
    padding: 0 !important;
}

.app-menu-items .app-menu-link {
    padding-left: 3rem !important; /* Indentación clara */
    font-size: 0.78rem !important;
    border-left: none !important;
    color: #64748b !important;
}

.app-menu-items .app-menu-link:hover {
    color: #cbd5e1 !important;
}

.app-menu-items .app-menu-link.active {
    color: #ffffff !important;
    background: transparent !important;
    font-weight: 600 !important;
}

/* Flecha minimalista */
.app-menu-caret {
    border-width: 1px !important;
    width: 5px;
    height: 5px;
    opacity: 0.5;
}

/* ========================================
   TARJETAS E INDICADORES
   ======================================== */

.card {
    background: var(--inst-bg-white) !important;
    border: 1px solid var(--inst-border) !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    transition: none !important; /* Eliminar transiciones */
}

/* Forzar que no haya movimiento ni cambios de sombra en el hover */
.card:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.card-header {
    background: #fcfcfd !important;
    border-bottom: 1px solid var(--inst-border) !important;
    padding: 0.85rem 1.25rem !important;
}

.card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--inst-navy-deep);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.stat-widget {
    padding: 1.5rem;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--inst-slate-gray);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--inst-navy-deep);
    letter-spacing: -0.02em;
}

/* ========================================
   TABLAS DE DATOS - ALTA DENSIDAD TÉCNICA
   ======================================== */

/* Contenedor sin márgenes extra y esquinas rectas */
.dataTables_wrapper,
.table-responsive {
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Celda Técnica: Mínimo espacio, máxima información */
table.dataTable thead th,
table.dataTable thead td,
.table > :not(caption) > * > * {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

table.dataTable thead th {
    font-size: 0.68rem !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

table.dataTable tbody td {
    font-size: 0.78rem !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
    line-height: 1.2 !important;
}

/* Forzar que nada en la celda la ensanche */
table.dataTable tbody td * {
    margin: 0 !important;
}

/* BOTONES DE FILA - EQUILIBRIO TÉCNICO */
.table .btn-sm, 
.table .btn-icon-only {
    height: 28px !important;
    width: 28px !important;
    padding: 0 !important;
    font-size: 0.75rem !important;
    line-height: 26px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 2px !important;
    min-height: unset !important;
    min-width: unset !important;
}

.table .btn-icon-only svg,
.table .btn-icon-only i {
    font-size: 13px !important;
    width: 13px !important;
    height: 13px !important;
}

/* Quitar efectos de hover infantiles */
.table-hover tbody tr:hover {
    background-color: #f1f5f9 !important;
    box-shadow: inset 2px 0 0 var(--inst-blue-action) !important; /* Línea de acento lateral en lugar de sombra */
}

/* Controles de DataTables */
.dataTables_length select,
.dataTables_wrapper .dataTables_length select {
    width: auto !important;
    display: inline-block !important;
    height: 28px !important;
    padding: 0 1.75rem 0 0.5rem !important;
    font-size: 0.78rem !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    background-color: #fff !important;
    vertical-align: middle !important;
}

.dataTables_length label,
.dataTables_filter label {
    font-size: 0.78rem !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin-bottom: 0 !important;
}

.dataTables_filter input {
    height: 28px !important;
    padding: 0 0.5rem !important;
    font-size: 0.78rem !important;
    border-radius: 3px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    width: 180px !important;
}
.dataTables_filter input:focus {
    border-color: var(--c-primary, #2563eb) !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.12) !important;
    outline: none !important;
}

/* Select pequeño para controles de página (año, filtros inline) */
.ctrl-select-inline {
    display: inline-block;
    width: auto;
    height: 30px;
    padding: 0 1.75rem 0 0.6rem;
    font-size: 0.82rem;
    font-family: inherit;
    color: #334155;
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    box-shadow: none;
    appearance: auto;
    vertical-align: middle;
    cursor: pointer;
}
.ctrl-select-inline:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
}
body.dark-mode .ctrl-select-inline {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

/* ─── Tabs de informes ────────────────────────────────────────── */
.vel-tab-content {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

body.dark-mode .vel-tab-content {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode .nav-tabs {
    border-color: #334155 !important;
}
body.dark-mode .nav-tabs .nav-link {
    color: #94a3b8 !important;
    border-color: transparent !important;
    background: transparent !important;
}
body.dark-mode .nav-tabs .nav-link:hover {
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
body.dark-mode .nav-tabs .nav-link.active {
    color: #e2e8f0 !important;
    background: #1e293b !important;
    border-color: #334155 #334155 #1e293b !important;
}

/* Tabla de informe velocidades en dark mode */
body.dark-mode .tbl-vel th,
body.dark-mode .tbl-vel td {
    border-color: #334155 !important;
}
body.dark-mode .tbl-vel thead th {
    background: #b08a00 !important;
    color: #0f172a !important;
}
body.dark-mode .tbl-vel tbody tr:nth-child(even) {
    background: #172032 !important;
}
body.dark-mode .tbl-vel tbody tr:nth-child(odd) {
    background: #1e293b !important;
}
body.dark-mode .tbl-vel tbody td,
body.dark-mode .tbl-vel tbody td:first-child {
    color: #cbd5e1 !important;
}
body.dark-mode .tbl-vel-title {
    background: #b08a00 !important;
    color: #0f172a !important;
    border-color: #334155 !important;
}
body.dark-mode .text-muted {
    color: #64748b !important;
}
}

/* PAGINADOR PROFESIONAL - SOBRIEDAD TOTAL */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 1rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 !important;
    margin-left: 2px !important;
    border: none !important;
    background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    border: 1px solid var(--inst-border) !important;
    background: var(--inst-bg-white) !important;
    color: var(--inst-slate-gray) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 0.35rem 0.7rem !important;
    border-radius: 2px !important;
    transition: all 0.15s ease;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background: var(--inst-navy-deep) !important;
    border-color: var(--inst-navy-deep) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover:not(.active) {
    background: #f1f5f9 !important;
    color: var(--inst-navy-deep) !important;
    border-color: #cbd5e1 !important;
}

.dataTables_wrapper .dataTables_info {
    font-size: 0.7rem !important;
    color: var(--inst-slate-gray) !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding-top: 1.25rem !important;
}

/* ========================================
   MODO OSCURO INSTITUCIONAL
   ======================================== */

body.dark-mode {
    --inst-bg-light: #020617;
    --inst-bg-white: #0f172a;
    --inst-border: #1e293b;
    --inst-bg-panel: #1e293b;
}

body.dark-mode .card-header {
    background: #1e293b !important;
}

body.dark-mode .stat-value {
    color: #f8fafc !important;
}

/* Botones Sobrios */
.btn {
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: 4px !important;
}

.btn-primary { background: var(--inst-blue-action) !important; border-color: var(--inst-blue-action) !important; }
.btn-primary:hover { background: #1e40af !important; }

/* ========================================
   ESTILOS LOGIN INSTITUCIONAL
   ======================================== */

.login-body {
    background: #020617; /* Negro Navy muy profundo */
    position: relative;
    overflow: hidden;
}

.login-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(2, 6, 23, 0.8) 100%);
    z-index: 1;
}

.login-bg-image {
    position: fixed;
    inset: 0;
    background-image: url('/assets/images/camino1.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(1) contrast(1.2); /* Look industrial serio */
    opacity: 0.4;
}

.login-card {
    background: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    z-index: 10;
    width: 100%;
    max-width: 420px;
    padding: 2.5rem !important;
}

.login-logo-area {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.login-input-group .form-control {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    color: var(--inst-navy-deep) !important;
    border-radius: 4px !important;
}

.login-input-group .form-control:focus {
    border-color: var(--inst-blue-action) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
}

.login-input-group .form-label {
    font-weight: 700 !important;
    color: var(--inst-navy-deep) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* ========================================
   SIDEBAR — SIMPLE
   ======================================== */

.app-logo {
    padding: 1.25rem 1.25rem 1rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Caret simple, sin animación */
.app-menu-caret {
    font-size: 0.6rem !important;
    opacity: 0.4;
    margin-left: auto;
}

/* Submenú colapsable */
.app-menu div.collapse,
.app-menu div.collapsing {
    background: rgba(0,0,0,0.12);
}

/* Items de submenú — indentados, sin efectos */
.app-menu-child {
    padding: 0.55rem 1.5rem 0.55rem 2.75rem !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    color: #7a93aa !important;
}
.app-menu-child:hover {
    color: #c8d8e8 !important;
    background: rgba(255,255,255,0.03) !important;
}
.app-menu-child.active {
    color: #e2eaf2 !important;
    border-left: 2px solid #3b82f6 !important;
    font-weight: 500 !important;
    background: rgba(59,130,246,0.07) !important;
}

/* Separador fino */
.app-menu-separator {
    height: 1px;
    background: rgba(255,255,255,0.05);
    margin: 0.5rem 1rem;
}

/* ─── Topbar ─────────────────────────────────────────────────── */
.app-topbar {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid #dde3ec !important;
    box-shadow: none !important;
    padding: 0 1.5rem !important;
    height: 52px !important;
    min-height: 52px !important;
}
.app-topbar-title {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* Botón hamburguesa y modo oscuro */
.topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #475569;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
    flex-shrink: 0;
}
.topbar-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
}

/* Botón usuario */
.topbar-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 34px;
    padding: 0 0.85rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s ease;
}
.topbar-user-btn:hover {
    background: #eef2f7;
    border-color: #cbd5e1;
}
.topbar-user-btn::after {
    display: inline-block;
    margin-left: 0.3em;
    vertical-align: middle;
    content: '';
    border-top: 4px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    opacity: 0.5;
}

/* Dark mode topbar */
body.dark-mode .app-topbar {
    background: #0f172a !important;
    border-bottom: 1px solid #1e2d3d !important;
}
body.dark-mode .app-topbar-title { color: #e2e8f0 !important; }
body.dark-mode .topbar-btn {
    border-color: #1e293b;
    color: #94a3b8;
}
body.dark-mode .topbar-btn:hover {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}
body.dark-mode .topbar-user-btn {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}
body.dark-mode .topbar-user-btn:hover { background: #273549; }

/* Dark mode — controles DataTables */
body.dark-mode .dataTables_length select,
body.dark-mode .dataTables_wrapper .dataTables_length select {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
body.dark-mode .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_filter input {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
body.dark-mode .dataTables_filter input:focus,
body.dark-mode .dataTables_wrapper .dataTables_filter input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.2) !important;
}
body.dark-mode .dataTables_length label,
body.dark-mode .dataTables_filter label {
    color: #94a3b8 !important;
}

/* Dark mode — botones DataTables Buttons (Excel, etc) */
body.dark-mode .dt-buttons .btn,
body.dark-mode .dt-buttons .dt-button {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
body.dark-mode .dt-buttons .btn:hover,
body.dark-mode .dt-buttons .dt-button:hover {
    background: #273549 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

/* Sidebar flex para anclar footer */
.app-sidebar {
    display: flex !important;
    flex-direction: column !important;
}
.app-menu {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Footer del sidebar */
.app-sidebar-footer {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.7rem;
    color: #3d566e;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}