/* Design system corporativo. Esta capa no modifica estilos de documentos impresos. */
:root{
  --ground:#f6f8fb;--surface:#fff;--surface-2:#f8fafc;--surface-3:#eef2f7;
  --line:#e4e9f0;--line-fuerte:#cfd8e3;--ink:#172133;--ink-2:#526176;--ink-3:#7c8a9d;
  --acento:#2563a9;--acento-fuerte:#173f70;--acento-suave:#eaf2fb;--acento-borde:#b9d2ec;
  --azul:#2563a9;--azul-suave:#eaf2fb;--bien:#17845b;--bien-suave:#e6f5ee;
  --alerta:#b56a0a;--alerta-suave:#fff4dd;--mal:#c83d4b;--mal-suave:#fcecef;
  --riel-bg:#17365d;--riel-ink:#dce8f5;--riel-ink-2:#9eb5ce;--riel-activo:#fff;--riel-hover:#21466f;
  --sombra:0 1px 2px rgba(16,33,52,.04),0 8px 24px rgba(16,33,52,.05);
  --r:10px;--r-s:7px;--display:"Inter","Segoe UI",system-ui,sans-serif;--texto:"Inter","Segoe UI",system-ui,sans-serif;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0f1722;--surface:#172231;--surface-2:#1c2939;--surface-3:#253448;--line:#2b3a4d;--line-fuerte:#40526a;
  --ink:#edf3f9;--ink-2:#b5c2d1;--ink-3:#8292a6;--acento:#69a5e6;--acento-fuerte:#9bc5f2;--acento-suave:#172f4d;--acento-borde:#315a85;
  --riel-bg:#0d2643;--riel-hover:#183a60;--riel-ink:#e2edf8;--riel-ink-2:#8fa9c4;
}}
html,body{max-width:100%;overflow-x:hidden}
body{font-size:14px;line-height:1.45;letter-spacing:-.005em}
.app{grid-template-columns:250px minmax(0,1fr);transition:grid-template-columns .18s ease}
.riel{padding:18px 12px 14px;gap:18px;border-right:1px solid rgba(255,255,255,.06);transition:width .18s ease;padding-bottom:12px}
.marca{height:48px;padding:0 6px;position:relative;min-width:0}
.marca-logo{width:38px;height:38px;border-radius:9px;background:#fff;color:var(--riel-bg);box-shadow:none;font-size:14px;flex:0 0 auto}
.marca-nom{font-size:14px!important;max-width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca-sub:empty:after{content:"GESTIÓN EMPRESARIAL"}.marca-sub{font-size:9px;letter-spacing:.12em}
.btn-colapsar{position:absolute;right:-25px;top:9px;width:25px;height:28px;border:1px solid var(--line);border-left:0;background:var(--surface);color:var(--ink-2);border-radius:0 7px 7px 0;font-size:20px;line-height:1;z-index:2}
.menu{gap:3px}
.nav{display:flex;align-items:center;gap:11px;min-height:38px;padding:8px 11px;font-size:13px;border-radius:7px;transition:background .16s,color .16s}
.nav-icon{display:grid;place-items:center;width:18px;height:18px;font-size:16px;font-family:"Segoe UI Symbol",sans-serif;flex:0 0 18px;opacity:.88}
.nav.activo{background:#fff;color:var(--riel-bg);box-shadow:0 5px 16px rgba(6,25,48,.18)}
.nav.activo .nav-icon{color:var(--acento);opacity:1}.nav:hover{background:var(--riel-hover)}
.grupo-head{padding:11px 10px 6px;font-size:10px;letter-spacing:.09em}.grupo-items{padding-left:3px;margin-left:0;border-left:0}.grupo-items .nav{font-size:12.5px;padding:7px 11px}
.riel-pie{font-size:10px}.riel #riel-usuario .btn{color:var(--riel-ink);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
body.sidebar-colapsado .app{grid-template-columns:72px minmax(0,1fr)}
body.sidebar-colapsado .riel{padding-inline:10px;overflow-x:hidden}
body.sidebar-colapsado .marca>div:not(.marca-logo),body.sidebar-colapsado .grupo-head span:first-child,body.sidebar-colapsado .grupo-head .chev,body.sidebar-colapsado .nav-label,body.sidebar-colapsado .riel-pie{display:none}
body.sidebar-colapsado .marca{justify-content:center;padding:0}body.sidebar-colapsado .nav{justify-content:center;padding-inline:0}body.sidebar-colapsado .grupo-head{height:8px;padding:0;border-top:1px solid rgba(255,255,255,.1);margin:7px 3px}body.sidebar-colapsado .grupo-items{display:block;margin:0;padding:0}body.sidebar-colapsado .btn-colapsar{right:-24px}
.tope{min-height:76px;padding:13px 28px;background:color-mix(in srgb,var(--surface) 94%,transparent);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(16,33,52,.02)}
.page-heading{min-width:0}.breadcrumb{font-size:10.5px;color:var(--ink-3);margin-bottom:2px}.breadcrumb span{color:var(--acento)}.tope h1{font-size:20px;font-weight:650;line-height:1.25}
.topbar-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}.topbar-tools #acciones-tope{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.estado-sistema{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-size:11.5px;white-space:nowrap}.estado-sistema span{width:7px;height:7px;border-radius:50%;background:var(--bien);box-shadow:0 0 0 3px var(--bien-suave)}.estado-sistema.offline span{background:var(--alerta);box-shadow:0 0 0 3px var(--alerta-suave)}
.top-user{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);padding:5px 8px 5px 5px;border-radius:9px;color:var(--ink);max-width:190px}.top-user:hover{background:var(--surface-2)}.top-avatar{width:30px;height:30px;border-radius:7px;background:var(--acento-suave);color:var(--acento-fuerte);display:grid;place-items:center;font-weight:700;font-size:11px}.top-user-copy{display:flex;flex-direction:column;text-align:left;min-width:0}.top-user-copy b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-user-copy small{font-size:9.5px;color:var(--ink-3)}
.contenido{padding:24px 28px 40px;max-width:1680px;width:100%;margin:0 auto}
.btn{min-height:36px;padding:7px 13px;border-radius:7px;font-size:12.5px;font-weight:600;box-shadow:0 1px 1px rgba(16,33,52,.02)}.btn:hover{transform:translateY(-1px)}.btn-pri{box-shadow:0 4px 12px rgba(37,99,169,.18)}.btn-mal{background:var(--surface);border-color:#efbdc4}.btn-sm{min-height:29px;padding:4px 9px;font-size:11.5px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:16px}.kpi{position:relative;padding:16px 17px;border-radius:9px;box-shadow:var(--sombra);overflow:hidden}.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acento)}.kpi-lbl{font-size:10.5px;letter-spacing:.055em}.kpi-val{font-size:23px;letter-spacing:-.04em;margin-top:6px}
.panel{border-radius:10px;box-shadow:var(--sombra)}.panel-tope{min-height:52px;padding:12px 16px}.panel-tope h2{font-size:14px;font-weight:650}
.tabla-wrap{scrollbar-width:thin}.tabla-wrap:after{content:"";display:block;height:1px}table{font-size:12.5px}th{font-size:10px;letter-spacing:.06em;padding:10px 13px;background:var(--surface-2);position:sticky;top:0;z-index:1}td{padding:9px 13px}tbody tr{transition:background .12s}tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 45%,transparent)}tbody tr:hover{background:var(--acento-suave)}
.chip{display:inline-block;padding:4px 9px;border-radius:999px;font-size:9.5px;text-transform:uppercase;letter-spacing:.045em;border:1px solid transparent;white-space:nowrap;vertical-align:middle;line-height:1.35}.chip.PAGADA,.chip.COMPLETADO,.chip.SYNCED,.chip.VALIDADO,.chip.FACTURADO{background:var(--bien-suave);color:var(--bien);border-color:color-mix(in srgb,var(--bien) 20%,transparent)}.chip.PENDIENTE,.chip.RECIBIDO,.chip.EN_PREPARACION,.chip.PENDING_SYNC{background:var(--alerta-suave);color:var(--alerta)}.chip.ANULADA,.chip.CANCELADO,.chip.ERROR,.chip.SYNC_ERROR{background:var(--mal-suave);color:var(--mal)}
.busca{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:12px;margin-bottom:14px;box-shadow:0 1px 2px rgba(16,33,52,.025)}
input,select,textarea{min-height:38px;border-radius:7px;padding:8px 11px;transition:border .15s,box-shadow .15s;background:var(--surface);font-size:13px}textarea{min-height:78px}input::placeholder,textarea::placeholder{color:var(--ink-3)}.campo{gap:5px;margin-bottom:13px}.campo label{font-size:11.5px;color:var(--ink-2)}
.grid2,.grid3{gap:0 16px}.grid-cards{gap:14px}.mini-row{padding:8px 0;font-size:12.5px}
.modal-fondo{background:rgba(12,25,42,.58);backdrop-filter:blur(3px)}.modal{border-radius:12px;box-shadow:0 24px 70px rgba(7,20,37,.25)}.modal-tope{padding:15px 20px}.modal-tope h3{font-size:15px}.modal-cuerpo{padding:20px}.modal-pie{padding:13px 20px;background:var(--surface-2)}
.toast{border-radius:8px;font-size:12.5px;box-shadow:0 12px 36px rgba(7,20,37,.22)}.vacio{padding:42px 20px;color:var(--ink-3)}
.sub-tabs{border-bottom:1px solid var(--line);gap:2px;margin-bottom:16px}.sub-tab{border:0;border-bottom:2px solid transparent;border-radius:0;padding:9px 12px;background:transparent}.sub-tab.activo{background:transparent;color:var(--acento);border-bottom-color:var(--acento)}
#login-ov{background:radial-gradient(circle at 15% 15%,#254e7c 0,#17365d 42%,#102a49 100%);overflow-y:auto;overflow-x:hidden}.login-card{max-width:390px;border-radius:14px;padding:34px;box-shadow:0 30px 80px rgba(4,18,35,.35)}.login-logo{font-size:20px;color:var(--acento-fuerte)}.login-card:before{content:"";display:block;width:42px;height:4px;background:var(--acento);border-radius:5px;margin:0 auto 18px}
#ia-fab{background:var(--acento);box-shadow:0 8px 24px rgba(37,99,169,.35)}.ia-cab{background:var(--riel-bg)}
@media(max-width:1100px){.estado-sistema,.top-user-copy{display:none}.top-user{padding-right:5px}.contenido{padding-inline:20px}}
@media(max-width:760px){
  .app,body.sidebar-colapsado .app{grid-template-columns:1fr}.riel{width:274px}.btn-colapsar{display:none}.marca>div:not(.marca-logo),body.sidebar-colapsado .marca>div:not(.marca-logo),body.sidebar-colapsado .nav-label,body.sidebar-colapsado .grupo-head span:first-child,body.sidebar-colapsado .grupo-head .chev{display:block}.nav,body.sidebar-colapsado .nav{justify-content:flex-start;padding:8px 11px}.grupo-head,body.sidebar-colapsado .grupo-head{height:auto;padding:11px 10px 6px;border:0;margin:0;display:flex}.grupo-items,body.sidebar-colapsado .grupo-items{display:none}.grupo.abierto>.grupo-items,body.sidebar-colapsado .grupo.abierto>.grupo-items{display:block}
  .tope{min-height:62px;padding:10px 12px}.breadcrumb{display:none}.tope h1{font-size:17px}.topbar-tools{gap:6px}.top-user{display:none}.topbar-tools #acciones-tope{position:absolute;left:12px;right:12px;top:62px;background:var(--ground);padding:8px 0}.topbar-tools #acciones-tope:not(:empty)+.top-user{margin-bottom:0}.tope:has(#acciones-tope:not(:empty)){margin-bottom:52px}
  .contenido{padding:14px 12px 32px}.kpis{grid-template-columns:1fr 1fr;gap:9px}.kpi{padding:13px}.kpi-val{font-size:18px}.panel{border-radius:8px}.busca{padding:9px}.modal-fondo{padding:8px}.modal-cuerpo{padding:16px}.modal-pie{padding:11px 16px}.grid2,.grid3{grid-template-columns:1fr}
}

/* Apariencia inspirada en el espacio de trabajo de Cartera: sobria, cálida y operativa. */
:root,:root:not([data-theme="dark"]){
  --ground:#f5f7f5;--surface:#fff;--surface-2:#f8faf8;--surface-3:#eef3ee;
  --line:#dde5e0;--line-fuerte:#cbd8d1;--ink:#082e2d;--ink-2:#5d746d;--ink-3:#81958e;
  --acento:#176b57;--acento-fuerte:#104c3f;--acento-suave:#edf4eb;--acento-borde:#b9d0c5;
  --azul:#267aa3;--azul-suave:#e9f3f7;--bien:#3b8c68;--bien-suave:#eaf4ed;
  --alerta:#a9782c;--alerta-suave:#fbf2e3;--mal:#b95a50;--mal-suave:#f9ece9;
  --riel-bg:#104b3e;--riel-ink:#d8e9e0;--riel-ink-2:#9fc2b5;--riel-activo:#eef1d9;--riel-hover:#1b5b4c;
  --sombra:0 1px 2px rgba(8,46,45,.02),0 8px 22px rgba(8,46,45,.035);
  --r:12px;--r-s:8px;
}
body{background:var(--ground);color:var(--ink)}
.app{grid-template-columns:276px minmax(0,1fr)}
.riel{padding:28px 20px 16px;gap:20px;border-right:0;background:var(--riel-bg)}
.marca{height:64px;padding:0 12px 8px;gap:14px}
.marca-logo{width:48px;height:48px;border-radius:14px;background:rgba(238,241,217,.16);border:1px solid rgba(238,241,217,.12);color:#eef1d9;font-family:Georgia,serif;font-size:17px;box-shadow:none}
.marca-nom{font-family:Georgia,"Times New Roman",serif;font-size:21px!important;line-height:1.05;color:#fff;letter-spacing:-.02em}
.marca-sub{color:#d9dca8;font-size:8px;letter-spacing:.25em;margin-top:7px}.marca-sub:empty:after{content:"GESTIÓN EMPRESARIAL"}
.btn-colapsar{border-color:var(--line);color:var(--ink-2);background:#fff}
.empresa-sidebar{display:flex;align-items:center;gap:12px;border:1px solid rgba(224,239,232,.17);border-radius:11px;padding:12px 13px;margin:0 0 5px;color:#fff;min-height:70px}
.empresa-avatar{width:39px;height:39px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.1);color:#edf1db;font:500 15px Georgia,serif;flex:0 0 auto}
.empresa-copy{min-width:0;display:flex;flex-direction:column}.empresa-copy b{font-size:12.5px;line-height:1.25;overflow-wrap:anywhere}.empresa-copy small{font-size:10px;color:var(--riel-ink-2);margin-top:3px}
.menu-etiqueta{padding:5px 16px 0;color:#92bbae;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.18em}
.menu{gap:4px}.nav{min-height:43px;padding:10px 14px;border-radius:8px;font-size:13px;color:var(--riel-ink)}
.nav-icon{width:20px;height:20px;flex-basis:20px;font-size:18px;color:#b5cec4}
.nav-icon svg{width:19px;height:19px;display:block}
body.sidebar-colapsado .nav-icon svg{width:22px;height:22px}
.ic{width:1.05em;height:1.05em;vertical-align:-0.15em;display:inline-block;flex:none}
.btn .ic{margin-right:1px}
.kpi-icon svg{width:17px;height:17px;display:block}
/* El valor naranja usa la clase .alerta solo por color; evita que herede el recuadro
   del componente de alertas del panel (.alerta con borde/fondo/sombra). */
.kpi-val.alerta{display:block;width:auto;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0;text-align:left;gap:0}
.kpi[role="button"]{cursor:pointer}
.kpi[role="button"]:focus{outline:none}
.kpi[role="button"]:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:12px}
.nav.activo{background:var(--riel-activo);color:#164b40;box-shadow:none}.nav.activo .nav-icon{color:#176b57}.nav:hover{background:var(--riel-hover)}
.grupo-head{padding:13px 14px 7px;color:#9fc2b5;font-size:9px;letter-spacing:.15em}.grupo-head:hover{background:transparent;color:#dcebe4}.grupo-items .nav{font-size:12.5px;padding:9px 14px}
.riel-pie{color:#8eb1a5}
body.sidebar-colapsado .app{grid-template-columns:76px minmax(0,1fr)}
body.sidebar-colapsado .empresa-sidebar,body.sidebar-colapsado .menu-etiqueta{display:none}
.tope{min-height:85px;padding:16px 30px 16px 44px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);box-shadow:none}
.breadcrumb{font-size:11px}.breadcrumb:before{content:"Espacio de trabajo  ›  ";color:var(--ink-3)}.tope h1{font-size:17px;margin-top:3px;font-weight:600}
.topbar-tools{gap:14px}.busqueda-global{display:flex;align-items:center;gap:9px;width:min(330px,25vw);height:38px;padding:0 8px 0 12px;border:1px solid transparent;border-radius:8px;color:var(--ink-3);background:transparent}
.busqueda-global:focus-within{border-color:var(--line);background:var(--surface)}.busqueda-global input{border:0!important;box-shadow:none!important;background:transparent;min-height:30px;padding:4px 0;min-width:0;width:100%;font-size:11.5px}.busqueda-global kbd{border:1px solid var(--line);border-radius:5px;padding:3px 6px;background:#fff;color:var(--ink-3);font:9px "IBM Plex Mono",monospace;white-space:nowrap}
.estado-sistema{font-size:10.5px}.top-user{border:0;background:transparent}.top-user:hover{background:var(--surface-2)}
.contenido{padding:30px 22px 48px;max-width:1860px}
.dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:2px 0 30px}.dashboard-hero h2{font-size:32px;font-weight:500;letter-spacing:-.04em;margin:8px 0 6px;color:var(--ink)}.dashboard-hero p{margin:0;color:var(--ink-3);font-size:13px}.kicker{color:#507b6d;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.22em}.hero-action{min-height:48px;padding-inline:20px;border-radius:9px;box-shadow:0 7px 14px rgba(16,76,63,.12)}
.dashboard-meta{display:flex;justify-content:space-between;align-items:center;color:#668077;font-size:10.5px;margin-bottom:14px}.dashboard-meta span{display:flex;align-items:center;gap:9px}.dashboard-meta i{display:block;width:6px;height:6px;border-radius:50%;background:#68a67e}
.kpis{gap:16px}.kpis-principales{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:28px}.kpi{min-height:146px;padding:20px 23px;border-radius:12px;box-shadow:none;position:relative}.kpi:before{display:none}.kpi-icon{position:absolute;right:20px;top:20px;width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:var(--acento-suave);color:#61927e;font-size:18px}.kpi-lbl{padding-right:38px;color:#557268;font-size:10.5px;text-transform:none;letter-spacing:0}.kpi-val{font-size:25px;font-weight:500;letter-spacing:-.045em;margin-top:26px}.kpi-nota{font-size:9.5px;color:var(--ink-3);margin-top:9px}.kpi-nota span{color:var(--ink-3)}.kpi-nota.mal{color:var(--mal)}
.kpis-secundarios .kpi{min-height:112px}.kpis-secundarios .kpi-val{margin-top:15px;font-size:21px}
.panel{border-radius:12px;box-shadow:none}.panel-tope{min-height:68px;padding:17px 24px}.panel-tope h2{font-size:16px;font-weight:600;margin-top:5px}.dashboard-chart .panel-tope{align-items:center}
.btn{border-radius:8px}.btn-pri{background:var(--acento);border-color:var(--acento);box-shadow:0 5px 12px rgba(16,76,63,.1)}.btn-pri:hover{background:var(--acento-fuerte);border-color:var(--acento-fuerte)}
th{background:#fafbf9;color:#789087}.busca{border-radius:10px;box-shadow:none}
#login-ov{background:var(--riel-bg)}.login-card{border-radius:14px;box-shadow:0 30px 70px rgba(4,35,29,.25)}.login-card:before{background:#d9dca8}.login-logo{font-family:Georgia,"Times New Roman",serif;color:var(--acento-fuerte)}
#ia-fab{background:var(--acento);box-shadow:0 8px 20px rgba(16,76,63,.25)}.ia-cab{background:var(--riel-bg)}
@media(max-width:1180px){.kpis-principales{grid-template-columns:repeat(2,minmax(0,1fr))}.busqueda-global{display:none}.contenido{padding-inline:28px}.tope{padding-left:28px}}
@media(max-width:760px){
  .app,body.sidebar-colapsado .app{grid-template-columns:1fr}.riel{width:276px;padding:22px 18px}.empresa-sidebar,.menu-etiqueta{display:flex!important}.tope{min-height:68px;padding:10px 14px}.page-heading{flex:1}.tope h1{font-size:16px}.breadcrumb:before{content:""}.top-user{display:none}.contenido{padding:22px 14px 38px}.dashboard-hero{align-items:flex-start;margin-bottom:22px}.dashboard-hero h2{font-size:26px}.dashboard-hero p{font-size:12px;max-width:270px}.hero-action{width:46px;min-width:46px;height:46px;padding:0;justify-content:center;font-size:0}.hero-action span{font-size:22px}.dashboard-meta time{display:none}.kpis-principales{grid-template-columns:1fr 1fr;gap:10px}.kpi{padding:16px;min-height:138px}.kpi-icon{right:14px;top:14px;width:34px;height:34px}.kpi-val{font-size:20px;margin-top:24px}.kpis-secundarios{grid-template-columns:1fr 1fr}.kpis-secundarios .kpi{min-height:105px}.panel-tope{padding:14px 16px}.dashboard-chart .panel-tope .btn{display:none}
}
@media(max-width:430px){.kpis-principales,.kpis-secundarios{grid-template-columns:1fr}.kpi{min-height:116px}.kpi-val{margin-top:18px}.dashboard-hero h2{font-size:23px}}

/* Variante clara: tipografía exacta de Cartera y navegación blanca. */
:root,:root:not([data-theme="dark"]){
  --ground:#f6f8fc;--surface:#fff;--surface-2:#f8faff;--surface-3:#eef3fb;
  --line:#e4e9f2;--line-fuerte:#cad4e3;--ink:#17243d;--ink-2:#59677d;--ink-3:#8995a7;
  --acento:#2868d7;--acento-fuerte:#174fae;--acento-suave:#eaf2ff;--acento-borde:#b8cef5;
  --azul:#2868d7;--azul-suave:#eaf2ff;--bien:#15946c;--bien-suave:#e8f7f1;
  --alerta:#d58a13;--alerta-suave:#fff5df;--mal:#d8535a;--mal-suave:#feedef;
  --riel-bg:#fff;--riel-ink:#394960;--riel-ink-2:#8592a4;--riel-activo:#eaf2ff;--riel-hover:#f3f6fb;
  --display:"Inter","Segoe UI",Arial,sans-serif;--texto:"Inter","Segoe UI",Arial,sans-serif;
  --cifra:"Inter","Segoe UI",Arial,sans-serif;
  --sombra:0 1px 2px rgba(20,42,75,.025),0 9px 26px rgba(20,42,75,.045);
}
body,button,input,select,textarea,.marca-nom,.marca-logo,.empresa-avatar,.login-logo,.kpi-val,.num,.tot-caja{font-family:"Inter","Segoe UI",Arial,sans-serif}
.num,.kpi-val,.tot-caja{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.riel{background:#fff;color:var(--riel-ink);border-right:1px solid var(--line);box-shadow:5px 0 24px rgba(28,53,87,.025)}
.marca-logo{background:transparent;border:0;border-radius:12px;overflow:hidden;box-shadow:0 7px 16px rgba(40,104,215,.2)}
.marca-logo img{display:block;width:100%;height:100%;object-fit:contain}
.marca{height:auto;min-height:64px}
.marca>div:not(.marca-logo){flex:1;min-width:0}
.marca-nom{color:var(--ink);font-size:18px!important;font-weight:700;letter-spacing:-.025em;max-width:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.2}.marca-sub{color:#3171d9;font-weight:700;letter-spacing:.18em}.marca-sub:empty:after{content:"GESTIÓN EMPRESARIAL"}
.btn-colapsar{border-color:var(--line);color:#68778c;background:#fff;box-shadow:0 2px 8px rgba(23,36,61,.05)}
.empresa-sidebar{border-color:var(--line);background:#fbfcff;color:var(--ink);box-shadow:0 2px 10px rgba(28,53,87,.025)}
.empresa-avatar{background:#eaf2ff;color:#2461c0;font-weight:700}.empresa-copy b{color:var(--ink)}.empresa-copy small{color:var(--ink-3)}
.menu-etiqueta,.grupo-head{color:#8b98aa}.grupo-head:hover{color:#315f9f;background:#f8faff}
.grupo.abierto>.grupo-head,.grupo.abierto>.grupo-head .chev{color:#1d59ba}
.nav{color:#47576e}.nav-icon{color:#76869b}.nav:hover{background:var(--riel-hover);color:#1d4f95}.nav.activo{background:var(--riel-activo);color:#1d59ba;box-shadow:inset 3px 0 #2868d7;font-weight:650}.nav.activo .nav-icon{color:#2868d7}
.riel-pie{color:#8b98aa}.riel #riel-usuario .btn{color:#37506e;background:#f8faff;border-color:var(--line)}#riel-usuario>div{border-top-color:var(--line)!important;color:var(--ink)!important}#riel-usuario div[style*="riel-ink-2"]{color:var(--ink-3)!important}
.tope{background:rgba(255,255,255,.94);box-shadow:0 1px 0 rgba(20,42,75,.02)}
.dashboard-hero h2{font-weight:620}.kicker{color:#3970bd}.dashboard-meta{color:#718096}.dashboard-meta i{background:#24ae7f}
.btn-pri{background:#2868d7;border-color:#2868d7;box-shadow:0 6px 14px rgba(40,104,215,.18)}.btn-pri:hover{background:#174fae;border-color:#174fae}
.kpi{box-shadow:var(--sombra)}.kpi-icon{background:#edf4ff;color:#3c76d4}.kpi-val{font-weight:560;letter-spacing:-.035em}
.panel{box-shadow:var(--sombra)}
#login-ov{background:linear-gradient(145deg,#f4f7fc,#eaf1fc)}.login-card:before{background:#2868d7}.login-logo{color:#174fae;font-weight:700}
#ia-fab{background:#2868d7;box-shadow:0 8px 20px rgba(40,104,215,.28)}.ia-cab{background:#1b55b5}
@media(max-width:760px){.riel{background:#fff;box-shadow:18px 0 45px rgba(20,42,75,.16)}.marca-nom{color:var(--ink)}.empresa-sidebar{background:#fbfcff}.menu-etiqueta{color:#8b98aa}}
@media(max-width:420px){.kpis{grid-template-columns:1fr}.topbar-tools #acciones-tope .btn{font-size:11px;padding-inline:9px}}
@media print{.topbar-tools,.btn-colapsar{display:none!important}}

/* ===== Móvil en HORIZONTAL (apaisado) — pantallas anchas pero de poca altura =====
   Un teléfono acostado tiene ancho >760px (recibiría el layout de escritorio) pero
   solo ~375–430px de alto. Aquí el menú pasa a cajón (hamburguesa) para no comerse
   el ancho, se compacta todo el ritmo vertical, y los KPIs se reparten en varias
   columnas para aprovechar lo ancho. El tope de 500px de alto excluye laptops y
   tablets (que sí tienen altura de sobra). */
@media (orientation:landscape) and (max-height:500px){
  .app,body.sidebar-colapsado .app{grid-template-columns:1fr}
  .btn-menu{display:inline-flex}
  .riel{position:fixed;top:0;left:-320px;height:100vh;height:100dvh;width:250px;z-index:130;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 28px;gap:12px;box-shadow:0 0 40px rgba(0,0,0,.45)}
  body.menu-abierto .riel{left:0}
  #riel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:120}
  body.menu-abierto #riel-overlay{display:block}
  .empresa-sidebar{min-height:0;padding:8px 10px}.menu{gap:2px}.nav{min-height:38px}
  .tope{min-height:0;padding:6px 12px}.tope h1{font-size:15px;margin-top:0}.breadcrumb{display:none}
  .contenido{padding:10px 14px 20px}
  .dashboard-hero{margin:0 0 10px;align-items:center}.dashboard-hero h2{font-size:18px;margin:2px 0}.dashboard-hero p{display:none}.hero-action{min-height:38px;padding-inline:14px}
  .dashboard-meta{margin-bottom:8px}
  .kpis,.kpis-principales,.kpis-secundarios{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
  .kpi{min-height:0;padding:10px 12px}.kpi-icon{display:none}.kpi-lbl{padding-right:0;font-size:9.5px}.kpi-val{font-size:16px;margin-top:4px}.kpi-nota{margin-top:3px}
  .panel{border-radius:9px}.panel-tope{min-height:0;padding:9px 14px}.panel-tope h2{font-size:14px;margin-top:0}
  .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alertas-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.alerta-go{display:inline}
  .grid2,.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal{max-width:96%!important;max-height:94vh}.modal-cuerpo{max-height:none}
  input,select,textarea{font-size:16px}
  #ia-fab{width:44px;height:44px;right:12px;bottom:12px}.ia-panel{height:92vh;max-height:92vh}
}

/* ===== Anti-scroll horizontal (arreglo de raíz, sin recortar dropdowns) ===== */
.grid2>*,.grid3>*{min-width:0}          /* permite que las columnas encojan */
.campo{min-width:0}
.campo input,.campo select,.campo textarea{width:100%;max-width:100%}
select{max-width:100%}
.contenido,.busca{max-width:100%}
/* NOTA: no usar overflow-x:hidden en .contenido/.modal-cuerpo: recorta los
   dropdowns de autocompletado (.ac-drop position:absolute). El min-width:0 de
   arriba ya evita el desbordamiento de los formularios. */
/* Las tablas de líneas con autocompletado NO deben recortar el desplegable:
   .tabla-wrap tiene overflow-x:auto (y la spec fuerza overflow-y:auto), lo que
   tapaba .ac-drop. lineas-wrap deja que el dropdown se muestre por encima. */
.lineas-wrap{overflow:visible}
.tabla-wrap:has(.ac-drop){overflow:visible}

/* ===== Menú colapsado: iconos uniformes, centrados y con buen ritmo =====
   Reemplaza (por orden de cascada) las reglas de colapsado anteriores. Cada
   opción es un botón cuadrado de 44px centrado; los grupos quedan separados por
   una línea fina. El nombre del módulo se muestra al pasar el cursor con el
   atributo title (tooltip nativo, no lo recorta el overflow del menú). */
body.sidebar-colapsado .app{grid-template-columns:68px minmax(0,1fr)}
body.sidebar-colapsado .riel{padding:16px 10px 14px;gap:6px;overflow-y:auto;overflow-x:hidden}
body.sidebar-colapsado .marca{justify-content:center;padding:0 0 8px;height:auto;gap:0}
body.sidebar-colapsado .marca-logo{width:42px;height:42px}
body.sidebar-colapsado .marca>div:not(.marca-logo),
body.sidebar-colapsado .empresa-sidebar,
body.sidebar-colapsado .menu-etiqueta,
body.sidebar-colapsado .nav-label,
body.sidebar-colapsado .grupo-head span,
body.sidebar-colapsado .grupo-head .chev,
body.sidebar-colapsado .riel-pie,
body.sidebar-colapsado #riel-usuario{display:none}
body.sidebar-colapsado .menu{gap:4px}
body.sidebar-colapsado .grupo{margin:0}
body.sidebar-colapsado .grupo-items{display:block;margin:0;padding:0}
body.sidebar-colapsado .grupo-head{height:0;min-height:0;padding:0;margin:8px 12px;border:0;border-top:1px solid rgba(255,255,255,.14)}
body.sidebar-colapsado .nav{display:flex;justify-content:center;align-items:center;width:44px;height:44px;min-height:44px;padding:0;margin:0 auto;border-radius:11px}
body.sidebar-colapsado .nav-icon{width:22px;height:22px;flex-basis:22px;font-size:19px}
body.sidebar-colapsado .btn-colapsar{right:-24px}