/* ================================================================
   iFacture Design System — Overrides sobre el tema facturador
   Minimalista, profesional, orientado a facturación B2B chilena
   ================================================================ */

/* --- Tipografía base ---------------------------------------- */
body {
    font-family: 'Inter', 'Public Sans', sans-serif !important;
}

/* Cargar Inter si no está disponible */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ================================================================
   SIDEBAR
   ================================================================ */

.app-sidebar {
    background: #0F1117 !important;
    border-right: none !important;
    box-shadow: 1px 0 0 rgba(255,255,255,0.04) !important;
}

.app-sidebar-bg {
    background: #0F1117 !important;
}

/* Logo */
.s-logo {
    padding: 16px 16px 12px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 6px;
}

/* Sección de menú */
.app-sidebar .menu {
    padding: 4px 0;
}

/* Items de menú */
.app-sidebar .menu .menu-item .menu-link {
    color: #8B95A7 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 9px 14px !important;
    margin: 2px 10px !important;
    border-radius: 8px !important;
    border-left: 2px solid transparent;
    transition: color 0.13s, background 0.13s, border-color 0.13s !important;
    gap: 10px;
}

.app-sidebar .menu .menu-item .menu-link:hover {
    color: #E2E8F0 !important;
    background: rgba(255,255,255,0.06) !important;
    border-left-color: rgba(59, 130, 246, 0.5) !important;
}

.app-sidebar .menu .menu-item.active > .menu-link {
    color: #DBEAFE !important;
    background: rgba(37, 99, 235, 0.15) !important;
    border-left-color: #3B82F6 !important;
    font-weight: 500 !important;
}

/* Íconos */
.app-sidebar .menu .menu-item .menu-icon {
    width: 20px !important;
    min-width: 20px !important;
    font-size: 15px !important;
    color: #6B7280 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.app-sidebar .menu .menu-item .menu-icon img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) invert(0.45) !important;
}

.app-sidebar .menu .menu-item.active .menu-icon,
.app-sidebar .menu .menu-item .menu-link:hover .menu-icon {
    color: #93C5FD !important;
}

.app-sidebar .menu .menu-item.active .menu-icon img,
.app-sidebar .menu .menu-item .menu-link:hover .menu-icon img {
    filter: brightness(0) invert(0.75) sepia(1) saturate(2) hue-rotate(190deg) !important;
}

/* Caret del submenú */
.app-sidebar .menu .menu-caret {
    margin-left: auto;
    opacity: 0.55;
    transition: transform 0.2s, opacity 0.2s;
}

.app-sidebar .menu .menu-item .menu-link:hover .menu-caret,
.app-sidebar .menu .menu-item.active .menu-caret {
    opacity: 0.9;
}

/* Header de submenú (ej: "Emisión", "Historial") */
.app-sidebar .menu .menu-header {
    color: #7E8696 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 14px 16px 5px 14px !important;
}

/* Submenú container */
.app-sidebar .menu .menu-submenu {
    background: transparent !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
    margin: 2px 10px 4px 28px !important;
    padding: 2px 0 !important;
}

/* Items de submenú */
.app-sidebar .menu .menu-item .menu-submenu .menu-item .menu-link {
    color: #6B7280 !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    padding: 7px 12px 7px 14px !important;
    margin: 1px 0 !important;
    border-radius: 6px !important;
    border-left: 2px solid transparent;
}

.app-sidebar .menu .menu-item .menu-submenu .menu-item .menu-link:hover {
    color: #D1D5DB !important;
    background: rgba(255,255,255,0.04) !important;
    border-left-color: rgba(59,130,246,0.5) !important;
}

.app-sidebar .menu .menu-item .menu-submenu .menu-item.active .menu-link {
    color: #93C5FD !important;
    border-left-color: #3B82F6 !important;
    background: rgba(59,130,246,0.08) !important;
    font-weight: 500 !important;
}

/* Puntos del submenú: ocultar puntos genéricos */
.app-sidebar .menu .menu-item .menu-submenu .menu-item:after,
.app-sidebar .menu .menu-item .menu-submenu .menu-item:before {
    display: none !important;
}

/* Botón minify */
.container-sidebar-minify-btn .app-sidebar-minify-btn {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #7E8696 !important;
    border-radius: 8px !important;
    transition: all 0.15s !important;
}

.container-sidebar-minify-btn .app-sidebar-minify-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #9CA3AF !important;
}

/* Sidebar colapsado: float submenu */
.app-sidebar-float-submenu-container {
    background: #1A1D27 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

.app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item .menu-link {
    color: #9CA3AF !important;
}

.app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item .menu-link:hover {
    color: #E2E8F0 !important;
    background: rgba(255,255,255,0.06) !important;
}

/* ================================================================
   HEADER
   ================================================================ */

.app-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #EEF1F8 !important;
    box-shadow: 0 1px 0 #EEF1F8 !important;
    height: 54px !important;
}

/* Botón usuario */
.app-header .navbar-nav .navbar-item .navbar-link {
    background: #F8FAFC !important;
    border: 1px solid #E8EDF5 !important;
    border-radius: 8px !important;
    color: #0F172A !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    gap: 8px;
    transition: background 0.13s, border-color 0.13s !important;
}

.app-header .navbar-nav .navbar-item .navbar-link:hover {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

/* Avatar usuario */
.nav-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: #1E40AF !important;
    border: none !important;
    font-size: 13px !important;
    color: #fff !important;
}

.navbar-link:hover .nav-avatar,
.navbar-link.show .nav-avatar {
    background: #1D4ED8 !important;
    border-color: transparent !important;
}

/* Dropdown usuario */
.app-header .navbar-nav .navbar-item .dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid #E8EDF5 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(15,23,42,0.1) !important;
    padding: 6px !important;
    min-width: 175px !important;
}

.app-header .navbar-nav .navbar-item .dropdown-menu .dropdown-item {
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    color: #0F172A !important;
    font-weight: 400 !important;
}

.app-header .navbar-nav .navbar-item .dropdown-menu .dropdown-item:hover {
    background: #F1F5F9 !important;
    color: #1E40AF !important;
}

.app-header .navbar-nav .navbar-item .dropdown-menu .dropdown-divider {
    border-color: #EEF1F8 !important;
    margin: 4px 0 !important;
}

/* ================================================================
   KPI CARDS — Dashboard
   ================================================================ */

.kpi-card-dash {
    border-radius: 10px !important;
    border: 1px solid #EEF1F8 !important;
    box-shadow: 0 1px 4px rgba(15,23,42,0.06) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.kpi-card-dash:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(15,23,42,0.1) !important;
}

.kpi-card-dash .panel-body {
    padding: 20px 22px !important;
}

.kpi-dash-label {
    font-size: 11px !important;
    letter-spacing: 0.07em !important;
    color: #94A3B8 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

.kpi-dash-value {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    letter-spacing: -0.02em !important;
    font-variant-numeric: tabular-nums !important;
}

.kpi-dash-sub {
    font-size: 11.5px !important;
    color: #94A3B8 !important;
}

/* Íconos de KPI */
.kpi-dash-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
}

.kpi-icon-ventas  { background: rgba(239, 68, 68, 0.1) !important; color: #EF4444 !important; }
.kpi-icon-cert    { background: rgba(37, 99, 235, 0.1) !important; color: #2563EB !important; }
.kpi-icon-compras { background: rgba(245, 158, 11, 0.1) !important; color: #F59E0B !important; }

/* ================================================================
   PANELES — Dashboard widgets
   ================================================================ */

.panel-uwigo {
    border-radius: 10px !important;
    border: 1px solid #EEF1F8 !important;
    box-shadow: 0 1px 4px rgba(15,23,42,0.05) !important;
}

.panel-uwigo .panel-body {
    padding: 20px 22px !important;
}

.panel-uwigo h5 {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748B !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #EEF1F8 !important;
}

/* Badges de folios en header */
[data-card="resumen-folios"] h5::after {
    background: #2563EB !important;
    border-radius: 4px !important;
    font-size: 9px !important;
    padding: 2px 8px !important;
}

[data-card="resumen-folios-integracion"] h5::after {
    background: #0F172A !important;
    border-radius: 4px !important;
    font-size: 9px !important;
    padding: 2px 8px !important;
}

/* Barras de progreso */
.progress {
    background: #F1F5F9 !important;
    border-radius: 3px !important;
    height: 5px !important;
}

.progress-bar {
    border-radius: 3px !important;
}

.bg-yellow  { background-color: #F59E0B !important; }
.bg-green   { background-color: #10B981 !important; }
.bg-red     { background-color: #EF4444 !important; }

/* Widget list */
.widget-list-item {
    padding: 10px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

.widget-total-label,
.widget-total-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    font-variant-numeric: tabular-nums !important;
}

/* ================================================================
   TABLAS DATATABLES — DTEs y Folios
   ================================================================ */

/* Cabeceras */
.dataTable thead th,
#t-caf thead th,
#t-caf-integracion thead th {
    background: #F8FAFC !important;
    color: #64748B !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #EEF1F8 !important;
    white-space: nowrap !important;
}

/* Filas */
.dataTable tbody td,
#t-caf tbody td,
#t-caf-integracion tbody td {
    font-size: 13px !important;
    padding: 10px 12px !important;
    color: #334155 !important;
    border-bottom: 1px solid #F8FAFC !important;
    vertical-align: middle !important;
}

/* Zebra sutil */
.dataTable tbody tr:nth-child(even),
#t-caf tbody tr:nth-child(even),
#t-caf-integracion tbody tr:nth-child(even) {
    background: #FAFBFF !important;
}

/* Hover */
.dataTable tbody tr:hover td,
#t-caf tbody tr:hover td,
#t-caf-integracion tbody tr:hover td {
    background: #F1F5F9 !important;
}

/* Montos: alineación derecha + monospace */
.dataTable td.text-end,
.dataTable td:last-child,
.widget-list-action {
    font-variant-numeric: tabular-nums !important;
}

/* Filas críticas (folios) */
#t-caf tr.folio-critico td,
#t-caf-integracion tr.folio-critico td {
    background: #FEF2F2 !important;
}

#t-caf tr.folio-advertencia td,
#t-caf-integracion tr.folio-advertencia td {
    background: #FFFBEB !important;
}

/* Controles DataTables */
.dataTables_filter input {
    border: 1px solid #E2E8F0 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    transition: border-color 0.13s !important;
}

.dataTables_filter input:focus {
    outline: none !important;
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}

.dt-buttons .btn {
    font-size: 11px !important;
    padding: 5px 11px !important;
    border-radius: 5px !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    color: #334155 !important;
    font-weight: 600 !important;
    transition: background 0.13s !important;
}

.dt-buttons .btn:hover {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

/* Paginación */
.dataTables_paginate .paginate_button {
    padding: 5px 11px !important;
    border-radius: 5px !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    font-size: 12px !important;
    color: #334155 !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: #2563EB !important;
    color: #FFFFFF !important;
    border-color: #2563EB !important;
}

.dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: #F1F5F9 !important;
}

.dataTables_info {
    font-size: 12px !important;
    color: #94A3B8 !important;
}

/* ================================================================
   BARRA DE EMPRESA — Dashboard
   ================================================================ */

.dash-emp-bar {
    border-radius: 8px !important;
    overflow: hidden !important;
}

.dash-emp-bg {
    background: linear-gradient(135deg, #0F1117 0%, #1E293B 100%) !important;
}

.dash-emp-bg::after {
    opacity: 0.4;
}

.dash-emp-nombre {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* ================================================================
   FOOTER — App
   ================================================================ */

#app .app-footer {
    background-color: #0F1117 !important;
    color: rgba(255,255,255,0.35) !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}

#app .app-footer strong {
    color: rgba(255,255,255,0.6) !important;
    font-weight: 600 !important;
}

#app .app-footer .app-footer__brand {
    color: rgba(255,255,255,0.4) !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}

#app .app-footer .app-footer__brand i {
    color: #3B82F6 !important;
}

/* ================================================================
   CONTENIDO GENERAL
   ================================================================ */

.app-content {
    background: #F8FAFC !important;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    font-size: 12px !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #CBD5E1 !important;
}

.breadcrumb-item a {
    color: #64748B !important;
}

.breadcrumb-item.active {
    color: #0F172A !important;
}

/* Botón primario */
.btn-primary {
    background: #2563EB !important;
    border-color: #2563EB !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    border-radius: 6px !important;
}

.btn-primary:hover {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
}