/* ================================================================
   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');

/* Los tokens de color (--if-*) se declaran en ifacture-componentes.css,
   que es la hoja unica de la paleta. Las custom properties resuelven en
   el punto de uso, asi que da igual el orden de carga entre ambas. */

/* ================================================================
   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.
   Va aqui y no en un {% block style %} del template padre: las vistas
   definen su propio block style y lo sobreescriben, por lo que ese
   bloque nunca llega a renderizarse. */
.app-sidebar figure.s-logo {
    height: auto !important;
    overflow: hidden;
    padding: 24px 24px 20px !important;
    margin: 0 0 6px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: width 150ms ease, padding 150ms ease;
}

.app-sidebar figure.s-logo img {
    width: 160px !important;
    max-width: 160px !important;
    min-width: 160px !important;
    height: auto !important;
    display: block !important;
}

/* Sidebar colapsado (60px): el SVG tiene viewBox "0 0 168 52" y el icono
   del documento ocupa las primeras ~42 unidades de 168. Con la imagen a
   160px, 160 * 42/168 = 40px, asi que se recorta el contenedor a 40px. */
#app.app-sidebar-minified .app-sidebar figure.s-logo {
    width: 40px;
    padding: 10px 0 !important;
    margin: 0 auto 6px !important;
}

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

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

/* Píldora indicadora: barra corta y redondeada que crece desde el centro */
.app-sidebar .menu .menu-item .menu-link::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    width: 3px;
    height: 60%;
    background: var(--if-accent);
    border-radius: 0 3px 3px 0;
    transform: translateY(-50%) scaleY(0);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(.4, 0, .2, 1), opacity 0.18s ease;
}

.app-sidebar .menu .menu-item .menu-link:hover::before {
    transform: translateY(-50%) scaleY(1);
    opacity: 0.4;
}

.app-sidebar .menu .menu-item.active > .menu-link::before {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
}

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

/* activo: solo la pildora, sin borde ni caja de fondo */
.app-sidebar .menu .menu-item.active > .menu-link {
    color: #FFFFFF !important;
    background: transparent !important;
    font-weight: 500 !important;
}

.app-sidebar .menu .menu-item.active > .menu-link:hover {
    background: rgba(255,255,255,0.05) !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;
    transition: color 0.18s ease !important;
}

.app-sidebar .menu .menu-item .menu-icon img {
    width: 18px !important;
    height: 18px !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.55;
    transition: opacity 0.18s ease, filter 0.18s ease !important;
}

.app-sidebar .menu .menu-item .menu-link:hover .menu-icon img {
    opacity: 0.9;
}

.app-sidebar .menu .menu-item.active .menu-icon,
.app-sidebar .menu .menu-item .menu-link:hover .menu-icon {
    color: var(--if-accent-soft) !important;
}

/* iconos en <img>: teñir al coral de marca */
.app-sidebar .menu .menu-item.active .menu-icon img {
    filter: brightness(0) saturate(100%) invert(50%) sepia(90%) saturate(2000%) hue-rotate(325deg) brightness(110%) !important;
    opacity: 1;
}

/* Caret del submenú */
.app-sidebar .menu .menu-caret {
    margin-left: auto;
    color: rgba(255,255,255,0.3) !important;
    opacity: 0.55;
    transition: transform 0.2s, opacity 0.2s, color 0.2s;
}

.app-sidebar .menu .menu-item .menu-link:hover .menu-caret,
.app-sidebar .menu .menu-item.active .menu-caret {
    color: rgba(255,255,255,0.5) !important;
    opacity: 0.9;
}

/* Header de grupo (ej: "Emisión", "Historial").
   Es una etiqueta, no una opcion navegable: se mantiene por debajo del
   item en color y peso para que la jerarquia se lea de un vistazo. */
.app-sidebar .menu .menu-header {
    color: #5C6472 !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !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 {
    position: relative;
    color: #B4BCCA !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    padding: 7px 12px 7px 14px !important;
    margin: 1px 0 !important;
    border-radius: 6px !important;
}

/* la pildora del submenu se apoya en la guia vertical del contenedor */
.app-sidebar .menu .menu-item .menu-submenu .menu-item .menu-link::before {
    left: -1px;
    height: 50%;
    width: 2px;
}

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

.app-sidebar .menu .menu-item .menu-submenu .menu-item.active .menu-link {
    color: var(--if-accent-soft) !important;
    background: transparent !important;
    border-left: none !important;
    font-weight: 500 !important;
}

.app-sidebar .menu .menu-item .menu-submenu .menu-item.active .menu-link::before {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
}

/* Puntos y guias genericas del submenu del tema: ocultar */
.app-sidebar .menu .menu-item .menu-submenu .menu-item:after,
.app-sidebar .menu .menu-item .menu-submenu .menu-item:before,
.app-sidebar .menu .menu-item .menu-submenu .menu-item .menu-link:after {
    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: var(--if-accent-bg-soft) !important;
    border-color: rgba(255,89,86,0.3) !important;
    color: var(--if-accent-soft) !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;
}

.app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item.active .menu-link {
    color: var(--if-accent-soft) !important;
    background: var(--if-accent-bg-soft) !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;
}