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

/* La tipografia (IBM Plex) y los tokens (--if-*) se declaran en
   ifacture-componentes.css, que es la hoja unica del Design System.
   Aqui quedan los overrides de layout del tema: sidebar, header, footer
   y dashboard. */

/* ================================================================
   SIDEBAR — claro, "Estado tributario"
   Fondo blanco con borde; el item activo lleva el fondo suave del
   acento. Abajo, el bloque de estado (folios, certificado, SII) que
   llena ifacture-layout.js.
   ================================================================ */

:root {
    --app-sidebar-bg: var(--if-sidebar-bg);
    --app-sidebar-component-color: var(--if-sidebar-text);
    --app-sidebar-active-component-bg: var(--if-sidebar-active-bg);
    --app-sidebar-menu-header-color: var(--if-text-subtle);
    --app-sidebar-menu-divider-bg: var(--if-border);
    --app-sidebar-minify-btn-bg: var(--if-surface-alt);
    --app-sidebar-minify-btn-hover-bg: var(--if-surface-hover);
}

.app-sidebar,
.app-sidebar-bg {
    background: var(--if-sidebar-bg) !important;
    box-shadow: none !important;
}
.app-sidebar { border-right: none !important; }
.app-sidebar-bg { border-right: 1px solid var(--if-sidebar-border) !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: 20px 24px 16px !important;
    margin: 0 0 6px !important;
    border-bottom: 1px solid var(--if-sidebar-border);
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: width 150ms ease, padding 150ms ease;
}

.app-sidebar figure.s-logo img {
    width: 150px !important;
    max-width: 150px !important;
    min-width: 150px !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
   150px, 150 * 42/168 = 37.5px, asi que se recorta el contenedor a 38px. */
#app.app-sidebar-minified .app-sidebar figure.s-logo {
    width: 38px;
    justify-content: flex-start !important;
    padding: 12px 0 !important;
    margin: 0 auto 6px !important;
    border-bottom: none;
}

.app-sidebar .menu { padding: 4px 0; }

/* Items de menu */
.app-sidebar .menu .menu-item .menu-link {
    position: relative;
    color: var(--if-sidebar-text) !important;
    font-size: var(--if-fs-body) !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    margin: 1px 10px !important;
    border-radius: var(--if-radius-sm) !important;
    background: transparent !important;
    transition: color var(--if-dur) var(--if-ease), background-color var(--if-dur) var(--if-ease) !important;
    gap: 10px;
}
.app-sidebar .menu .menu-item .menu-link::before { display: none !important; }

.app-sidebar .menu .menu-item .menu-link:hover {
    color: var(--if-text) !important;
    background: var(--if-surface-hover) !important;
}

.app-sidebar .menu .menu-item.active > .menu-link {
    color: var(--if-sidebar-active-text) !important;
    background: var(--if-sidebar-active-bg) !important;
    font-weight: 600 !important;
}

/* Iconos */
.app-sidebar .menu .menu-item .menu-icon {
    width: 20px !important;
    min-width: 20px !important;
    font-size: 16px !important;
    color: var(--if-text-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color var(--if-dur) !important;
}
.app-sidebar .menu .menu-item .menu-link:hover .menu-icon { color: var(--if-text) !important; }
.app-sidebar .menu .menu-item.active > .menu-link .menu-icon { color: var(--if-sidebar-active-text) !important; }

.app-sidebar .menu .menu-item .menu-icon img {
    width: 18px !important;
    height: 18px !important;
    filter: brightness(0) !important;
    opacity: .5;
}
.app-sidebar .menu .menu-item.active .menu-icon img { opacity: .9; }

/* Caret del submenu */
.app-sidebar .menu .menu-caret {
    margin-left: auto;
    color: var(--if-text-subtle) !important;
    opacity: 1;
    transition: transform .2s;
}
.app-sidebar .menu .menu-item.active > .menu-link .menu-caret { color: var(--if-sidebar-active-text) !important; }

/* Encabezado de grupo (ej: "Emision", "Historial"). Es una etiqueta, no
   una opcion navegable: queda por debajo del item en color y peso. */
.app-sidebar .menu .menu-header {
    color: var(--if-text-subtle) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    padding: 12px 14px 4px 14px !important;
}

/* Submenu */
.app-sidebar .menu .menu-submenu {
    background: transparent !important;
    border-left: 1px solid var(--if-sidebar-border) !important;
    margin: 2px 10px 6px 30px !important;
    padding: 2px 0 !important;
}

.app-sidebar .menu .menu-item .menu-submenu .menu-item .menu-link {
    color: var(--if-sidebar-text) !important;
    font-size: var(--if-fs-body) !important;
    font-weight: 400 !important;
    padding: 6px 10px 6px 12px !important;
    margin: 1px 0 1px 6px !important;
    background: transparent !important;
}
.app-sidebar .menu .menu-item .menu-submenu .menu-item .menu-link:hover {
    color: var(--if-text) !important;
    background: var(--if-surface-hover) !important;
}
.app-sidebar .menu .menu-item .menu-submenu .menu-item.active > .menu-link {
    color: var(--if-sidebar-active-text) !important;
    background: var(--if-sidebar-active-bg) !important;
    font-weight: 600 !important;
}

/* 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;
}

/* Enlace que abre fuera de la plataforma (Soporte) */
.app-sidebar .menu-externo { margin-left: auto; font-size: 13px; color: var(--if-text-subtle); }
#app.app-sidebar-minified .menu-externo { display: none; }

/* Contadores junto a un item (rechazados, por responder) */
.sb-count {
    margin-left: auto;
    font-family: var(--if-font-mono);
    font-size: var(--if-fs-xs);
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid;
    font-variant-numeric: tabular-nums;
}
.sb-count--danger  { color: var(--if-danger);  background: var(--if-danger-bg);  border-color: var(--if-danger-br); }
.sb-count--warning { color: var(--if-warning); background: var(--if-warning-bg); border-color: var(--if-warning-br); }

/* Boton minify */
.container-sidebar-minify-btn .app-sidebar-minify-btn {
    background: var(--if-surface) !important;
    border: 1px solid var(--if-sidebar-border) !important;
    color: var(--if-text-muted) !important;
    border-radius: var(--if-radius-sm) !important;
    transition: background-color var(--if-dur), color var(--if-dur) !important;
}
.container-sidebar-minify-btn .app-sidebar-minify-btn:hover {
    background: var(--if-surface-hover) !important;
    color: var(--if-text) !important;
}

/* Sidebar colapsado: submenu flotante */
.app-sidebar-float-submenu-container {
    background: var(--if-surface) !important;
    border: 1px solid var(--if-border) !important;
    border-radius: var(--if-radius-lg) !important;
    box-shadow: var(--if-shadow-lg) !important;
}
.app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item .menu-link {
    color: var(--if-sidebar-text) !important;
}
.app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item .menu-link:hover {
    color: var(--if-text) !important;
    background: var(--if-surface-hover) !important;
}
.app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item.active .menu-link {
    color: var(--if-sidebar-active-text) !important;
    background: var(--if-sidebar-active-bg) !important;
}
.app-sidebar-float-submenu-container .menu-header {
    color: var(--if-text-subtle) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    padding: 8px 14px 2px !important;
}
.app-sidebar-float-submenu-container .menu-item:before,
.app-sidebar-float-submenu-container .menu-item:after,
.app-sidebar-float-submenu-container .menu-link:after { display: none !important; }
.app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item .menu-link {
    padding: 6px 14px !important;
    border-radius: var(--if-radius-sm) !important;
    margin: 0 4px !important;
}

#app.app-sidebar-minified .sb-estado,
#app.app-sidebar-minified .sb-count { display: none !important; }

/* ── Bloque Estado tributario ───────────────────────────────────── */
.sb-estado {
    margin: 16px 10px 8px;
    padding: 10px 12px 12px;
    border: 1px solid var(--if-sidebar-border);
    border-radius: var(--if-radius);
    background: var(--if-surface-alt);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: var(--if-fs-sm);
    color: var(--if-text);
}
.sb-estado[hidden] { display: none; }
.sb-estado__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--if-text-subtle);
}
.sb-estado__sii {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--if-fs-xs);
    font-weight: 500;
    color: var(--if-text-body);
}
.sb-estado__sii::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--if-text-subtle);
}
.sb-estado__sii.is-online::before  { background: var(--if-success); box-shadow: 0 0 0 3px var(--if-success-bg); }
.sb-estado__sii.is-offline::before { background: var(--if-danger);  box-shadow: 0 0 0 3px var(--if-danger-bg); }
.sb-estado__folios { display: flex; flex-direction: column; gap: 10px; }
.sb-estado__row { display: flex; flex-direction: column; gap: 4px; }
.sb-estado__row[hidden] { display: none; }
.sb-estado__top { display: flex; justify-content: space-between; gap: 8px; }
.sb-estado__top span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-estado__top span:last-child {
    font-family: var(--if-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--if-text-body);
    white-space: nowrap;
}
.sb-estado__row.is-warn .sb-estado__top span:last-child   { color: var(--if-warning); }
.sb-estado__row.is-danger .sb-estado__top span:last-child { color: var(--if-danger); }
.sb-meter { height: 4px; border-radius: 2px; background: var(--if-border); overflow: hidden; }
.sb-meter i { display: block; height: 100%; border-radius: 2px; background: var(--if-success); }
.sb-estado__row.is-warn .sb-meter i   { background: var(--if-warning); }
.sb-estado__row.is-danger .sb-meter i { background: var(--if-danger); }
.sb-estado__vacio { color: var(--if-text-muted); }
.sb-estado__links { display: flex; gap: 14px; padding-top: 2px; border-top: 1px solid var(--if-sidebar-border); padding-top: 8px; }
.sb-estado__links a { color: var(--if-primary); font-weight: 500; text-decoration: none; }
.sb-estado__links a:hover { text-decoration: underline; }

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

.app-header {
    background: var(--if-surface) !important;
    border-bottom: 1px solid var(--if-border) !important;
    box-shadow: none !important;
    height: 56px !important;
}
.container-uwigo-header { align-items: center; gap: 16px; }

.if-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.if-header-toggler {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -8px;
    border: none;
    border-radius: var(--if-radius-sm);
    background: transparent;
    color: var(--if-text);
    font-size: 20px;
}
.if-header-toggler:hover { background: var(--if-surface-hover); }
.if-header-logo { display: none; height: 28px; width: auto; }
.if-header-empresa { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.if-header-empresa__nombre {
    font-size: var(--if-fs-body);
    font-weight: 600;
    color: var(--if-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.if-header-empresa__rut { font-size: var(--if-fs-xs); color: var(--if-text-muted); }

/* Boton usuario */
.app-header .navbar-nav .navbar-item .navbar-link {
    background: var(--if-surface) !important;
    border: 1px solid var(--if-border) !important;
    border-radius: var(--if-radius-sm) !important;
    color: var(--if-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 5px 10px 5px 6px !important;
    gap: 8px;
    transition: background-color var(--if-dur), border-color var(--if-dur) !important;
}
.app-header .navbar-nav .navbar-item .navbar-link:hover {
    background: var(--if-surface-hover) !important;
    border-color: var(--if-border-input) !important;
}

/* Avatar usuario */
.nav-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--if-radius-sm) !important;
    background: var(--if-primary-bg) !important;
    border: none !important;
    font-size: 14px !important;
    color: var(--if-primary) !important;
}
.navbar-link:hover .nav-avatar,
.navbar-link.show .nav-avatar {
    background: var(--if-primary) !important;
    color: #fff !important;
}

/* Dropdown usuario */
.app-header .navbar-nav .navbar-item .dropdown-menu {
    background: var(--if-surface) !important;
    border: 1px solid var(--if-border) !important;
    border-radius: var(--if-radius-lg) !important;
    box-shadow: var(--if-shadow-lg) !important;
    padding: 4px !important;
    min-width: 175px !important;
}
.app-header .navbar-nav .navbar-item .dropdown-menu .dropdown-item {
    border-radius: var(--if-radius-sm) !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    color: var(--if-text) !important;
    font-weight: 400 !important;
}
.app-header .navbar-nav .navbar-item .dropdown-menu .dropdown-item:hover {
    background: var(--if-surface-hover) !important;
    color: var(--if-text) !important;
}
.app-header .navbar-nav .navbar-item .dropdown-menu .dropdown-divider {
    border-color: var(--if-border) !important;
    margin: 4px 0 !important;
}

/* ================================================================
   NAVEGACION MOVIL
   Bajo 768px el sidebar pasa a menu lateral desplegable (Mas) y abajo
   queda una barra con los modulos mas usados y Emitir al centro.
   ================================================================ */

.if-tabbar { display: none; }

@media (max-width: 767.98px) {
    .app-header { left: 0 !important; flex-wrap: nowrap !important; }
    /* Color Admin arma el header movil en dos filas (101px); aqui es una sola */
    #app.app-header-fixed { padding-top: 56px !important; }
    .app-header .navbar-nav {
        margin-left: auto;
        width: auto !important;
        border: none !important;
        background: transparent !important;
    }
    .app-header .navbar-nav .navbar-item .navbar-link { padding: 4px !important; }
    .container-uwigo-header { padding: 0 16px !important; }
    .if-header-toggler { display: inline-flex; }
    .if-header-logo { display: block; }
    .if-header-empresa { display: none; }

    .app-sidebar { box-shadow: var(--if-shadow-overlay) !important; }
    .container-sidebar-minify-btn { display: none !important; }

    .if-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1020;
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        align-items: end;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        background: var(--if-surface);
        border-top: 1px solid var(--if-border);
    }
    .if-tabbar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        height: 60px;
        border: none;
        background: transparent;
        color: var(--if-text-muted);
        font-size: 11px;
        font-weight: 500;
        text-decoration: none;
    }
    .if-tabbar__item i { font-size: 20px; line-height: 1; }
    .if-tabbar__item.is-active { color: var(--if-primary); font-weight: 600; }
    .if-tabbar__item:hover { color: var(--if-text); text-decoration: none; }
    .if-tabbar__fab {
        width: 44px;
        height: 44px;
        margin-top: -18px;
        border-radius: var(--if-radius-lg);
        background: var(--if-primary);
        color: #fff;
        display: grid;
        place-items: center;
        box-shadow: 0 0 0 4px var(--if-surface);
    }
    .if-tabbar__fab i { font-size: 22px; }
    .if-tabbar__emit { color: var(--if-primary); }

    .app-content { padding-bottom: 84px !important; }
    .btn-scroll-to-top { bottom: 76px !important; }
}

/* ================================================================
   PANELES (panel-uwigo)
   Contenedor blanco que usan casi todas las vistas. Los KPI y la barra
   de empresa del dashboard viven ahora en su propia vista.
   ================================================================ */

.panel-uwigo {
    border-radius: var(--if-radius) !important;
    border: 1px solid var(--if-border) !important;
    box-shadow: none !important;
}

.panel-uwigo .panel-body {
    padding: var(--if-space-5) var(--if-space-5) !important;
}

.panel-uwigo h5 {
    font-size: var(--if-fs-xs) !important;
    font-weight: 600 !important;
    color: var(--if-text-body) !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    margin-bottom: var(--if-space-4) !important;
    padding-bottom: var(--if-space-3) !important;
    border-bottom: 1px solid var(--if-border-soft) !important;
}

/* Barras de progreso */
.progress {
    background: var(--if-border-soft) !important;
    border-radius: 2px !important;
    height: 4px !important;
}

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

.bg-yellow  { background-color: var(--if-warning) !important; }
.bg-green   { background-color: var(--if-success) !important; }
.bg-red     { background-color: var(--if-danger) !important; }

/* Widget list */
.widget-list-item {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--if-border-soft) !important;
}

.widget-total-label,
.widget-total-value {
    font-size: var(--if-fs-body) !important;
    font-weight: 600 !important;
    color: var(--if-text) !important;
    font-variant-numeric: tabular-nums !important;
}

/* ================================================================
   TABLAS DE FOLIOS (CAF)
   Las DataTables se estilan en ifacture-componentes.css.
   ================================================================ */

#t-caf thead th,
#t-caf-integracion thead th {
    background: var(--if-surface) !important;
    color: var(--if-text-body) !important;
    font-size: var(--if-fs-xs) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    padding: 10px 12px !important;
    border-bottom: 2px solid var(--if-primary) !important;
    white-space: nowrap !important;
}

#t-caf tbody td,
#t-caf-integracion tbody td {
    font-size: var(--if-fs-body) !important;
    padding: 10px 12px !important;
    color: var(--if-text-body) !important;
    border-top: 1px solid var(--if-border-soft) !important;
    vertical-align: middle !important;
    font-variant-numeric: tabular-nums !important;
}

#t-caf tbody tr:hover td,
#t-caf-integracion tbody tr:hover td {
    background: var(--if-surface-hover) !important;
}

.widget-list-action { font-variant-numeric: tabular-nums !important; }

/* Filas criticas (folios) */
#t-caf tr.folio-critico td,
#t-caf-integracion tr.folio-critico td {
    background: var(--if-danger-bg) !important;
}

#t-caf tr.folio-advertencia td,
#t-caf-integracion tr.folio-advertencia td {
    background: var(--if-warning-bg) !important;
}

/* ================================================================
   FOOTER — App
   Posicion fija y colores en el <style> de index-app-test.html
   (dentro de pagecontainer para que los block style no lo pisen).
   ================================================================ */

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

.app-content {
    background: var(--if-bg) !important;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 var(--if-space-1) !important;
    font-size: var(--if-fs-sm) !important;
    color: var(--if-text-muted);
}

.breadcrumb-item { color: var(--if-text-muted) !important; }

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--if-text-subtle) !important;
}

.breadcrumb-item a {
    color: var(--if-text-muted) !important;
}

.breadcrumb-item.active {
    color: var(--if-text) !important;
}

/* El boton primario se define en ifacture-componentes.css con el acento unico. */