/* Layout and theme tokens shared by the operational screens and sign-in. */
:root {
  color-scheme:light;
  --fondo:#f3f5f5; --panel:#ffffff; --surface-2:#edf1f1; --hover:#f0f6f4;
  --texto:#232b2a; --suave:#586764; --borde:#d8e0de; --gris:#273e38;
  --acento:#126b58; --verde:#126b58; --rojo:#b12d46; --ambar:#856008;
  --positive-bg:#e6f4ed; --warning-bg:#fff5d7; --negative-bg:#fcebf0;
  --info-bg:#eaf1fb; --info-text:#365d98; --amarillo:#f6db30;
  --verde-suave:var(--positive-bg); --ambar-suave:var(--warning-bg); --rojo-suave:var(--negative-bg);
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --fondo:#151a19; --panel:#1e2523; --surface-2:#28322f; --hover:#2a3933;
  --texto:#edf2ef; --suave:#afbeb6; --borde:#3a4841; --gris:#d6e5db;
  --acento:#85dcb3; --verde:#85dcb3; --rojo:#ffa4b4; --ambar:#f2cf79;
  --positive-bg:#243e32; --warning-bg:#3b3421; --negative-bg:#402b32;
  --info-bg:#263544; --info-text:#aecbfa;
}
body { background:var(--fondo); color:var(--texto); font-family:'Segoe UI',system-ui,sans-serif; font-size:14px; line-height:1.5; }
*,*::before,*::after { box-sizing:border-box; }
button,input,select,textarea { font:inherit; }
button { min-height:40px; border:1px solid var(--borde); background:var(--panel); color:var(--texto); border-radius:6px; padding:8px 12px; white-space:normal; }
button:hover { background:var(--hover); border-color:var(--suave); }
button:disabled { opacity:.55; cursor:wait; }
button svg { pointer-events:none; }
.icon-button { background:var(--panel); color:var(--texto); border-color:var(--borde); }
button.primario,button.aprobar { background:var(--gris); border-color:var(--gris); color:var(--panel); padding:10px 16px; }
button.peligro { color:var(--rojo); background:var(--negative-bg); border-color:var(--rojo); }
button.quitar { color:var(--rojo); width:36px; height:36px; padding:7px; min-height:36px; }
button.chico { font-size:12px; min-height:34px; padding:6px 10px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible { outline:3px solid var(--acento); outline-offset:3px; }
input,select,textarea { background:var(--panel); color:var(--texto); border:1px solid var(--borde); min-width:0; min-height:42px; max-width:100%; padding:9px 11px; border-radius:6px; }
input::placeholder,textarea::placeholder { color:var(--suave); opacity:.85; }
input[type="checkbox"],.filtros input[type="checkbox"] { width:17px!important; min-width:17px; height:17px; min-height:17px; flex:0 0 17px; margin:0; padding:0; accent-color:var(--acento); }
label { color:var(--suave); font-size:12px; font-weight:500; }
h1 { font-size:27px; line-height:1.25; color:var(--texto); font-weight:650; }
h2 { font-size:17px; line-height:1.35; color:var(--texto); }
h1,h2,p,.det { overflow-wrap:anywhere; }
.sub { color:var(--suave); max-width:80ch; font-size:13px; }
.sidebar { width:248px; background:var(--panel); padding:24px 16px 16px; border-color:var(--borde); }
.brand { padding:0 10px 28px; color:var(--texto); }
.brand-mark { color:#242b22; }
.brand small,.nav-group p { color:var(--suave); }
.nav-group { margin-bottom:20px; }
.sidebar nav button { color:var(--suave); gap:10px; min-height:44px; font-size:13px; }
.sidebar nav button:hover { background:var(--hover); color:var(--texto); }
.sidebar nav button.activo { background:var(--surface-2); color:var(--texto); box-shadow:inset 3px 0 var(--amarillo); }
.sidebar-bottom { border-color:var(--borde); gap:16px; padding:16px 8px 0; }
.sidebar-bottom img { background:#fff; padding:5px; border-radius:3px; width:118px; }
.theme-control { display:flex; align-items:center; gap:4px; }
.theme-control button { display:grid; place-items:center; width:40px; height:36px; min-height:36px; padding:7px; border:1px solid transparent; background:transparent; color:var(--suave); }
.theme-control button[aria-pressed="true"] { background:var(--surface-2); color:var(--texto); border-color:var(--borde); }
header.topbar { margin-left:248px; background:var(--panel); border-color:var(--borde); height:64px; padding:0 30px; }
.breadcrumb,.breadcrumb strong,.sesion,.sesion strong { color:var(--texto); }
.sesion .rol { color:var(--suave); background:var(--surface-2); }
.sesion .salir { color:var(--suave); border-color:var(--borde); }
main#vista { margin-left:248px; padding:28px 30px 48px; min-height:calc(100dvh - 64px); animation:none; }
.entre { align-items:flex-start; gap:16px; }
.entre>div { min-width:0; flex:1; }
.entre>button { flex:none; }
.page-heading { margin-bottom:24px; }
.filtros { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px 0; margin:12px 0 0; border-top:1px solid var(--borde); }
.filtros>input:not([type="checkbox"]) { flex:1 1 230px; max-width:380px; }
.filtros>select { flex:0 1 210px; width:auto; }
.filtros>label { display:flex; align-items:center; gap:8px; margin:0; min-height:42px; flex:none; }
.filtros input[type="date"] { width:148px; }
.resultado-lista { margin:0 0 14px; color:var(--suave); font-size:12px; }
.tarjeta { background:transparent; border-top:1px solid var(--borde); border-radius:0; box-shadow:none; overflow:visible; min-width:0; }
.fila { display:flex; gap:24px; align-items:flex-start; }
.crece { min-width:0; }
.table-scroll { width:100%; min-width:0; max-width:100%; overflow:auto; border:1px solid var(--borde); border-radius:6px; background:var(--panel); overscroll-behavior-x:contain; }
.table-scroll table { border:0; margin:0; min-width:620px; width:100%; background:var(--panel); }
.table-scroll .table-scroll { border:0; }
table { color:var(--texto); border-collapse:collapse; }
th { background:var(--surface-2); color:var(--suave); font-size:12px; font-weight:600; white-space:nowrap; padding:12px 16px; }
td { padding:13px 16px; border-bottom:1px solid var(--borde); font-size:13px; vertical-align:middle; line-height:1.5; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--hover); }
td .mono,td.mono { white-space:nowrap; }
td:first-child { min-width:135px; }
td:has(.det) { min-width:130px; }
td .det { color:var(--suave); font-size:12px; margin-top:3px; }
td.num,th.num { white-space:nowrap; }
td:not(.num) { max-width:360px; }
#vista[data-seccion="cxp"] #cxp-cuerpo>.tarjeta table { min-width:1120px; }
#vista[data-seccion="directorio"] table { min-width:520px; }
#vista[data-seccion="catalogo"] table { min-width:740px; }
.table-scroll .lineas { min-width:1100px; table-layout:fixed; }
.table-scroll .lineas:has(.s-serv) { min-width:1280px; }
.lineas:has(.s-serv) th:first-child { width:210px; }
.lineas:has(.s-serv) th:nth-child(2) { width:260px; }
.lineas:has(.s-serv) th:nth-child(3) { width:90px; }
.lineas:has(.s-serv) th:nth-child(4) { width:110px; }
.lineas th:first-child,.lineas td:first-child { width:260px; }
.lineas td { padding:10px 8px; min-width:0; }
.lineas input,.lineas select { width:100%; }
.lineas th:last-child,.lineas td:last-child { width:50px; }
.eti { border-radius:4px; padding:3px 7px; line-height:1.5; background:var(--surface-2); color:var(--suave); }
.eti.ganada,.eti.aprobada,.eti.pagada,.eti.confirmado { background:var(--positive-bg); color:var(--verde); }
.eti.enviada,.eti.emitida,.eti.montaje { background:var(--info-bg); color:var(--info-text); }
.eti.pendiente,.eti.seguimiento,.eti.demo,.eti.facturada { background:var(--warning-bg); color:var(--ambar); }
.eti.perdida { background:var(--negative-bg); color:var(--rojo); }
.kpis,.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:20px 0 24px; }
.kpi,.metric { min-width:0; background:var(--panel); border:1px solid var(--borde); border-radius:6px; padding:16px; box-shadow:none; }
.kpi .val,.metric>strong { font-size:26px; line-height:1.25; margin:10px 0 8px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.kpi .et,.metric-label { font-size:12px; color:var(--suave); }
.kpi .pie,.metric p { color:var(--suave); font-size:12px; line-height:1.5; }
.kpi.mal .val { color:var(--rojo); }
.kpi.bien .val { color:var(--verde); }
.metric-sales { border-top:3px solid var(--verde); padding-top:14px; }
.aviso { border:1px solid var(--borde); border-left:3px solid currentColor; border-radius:5px; padding:12px 14px; font-size:13px; line-height:1.6; }
.aviso.ojo,.aviso.demo { background:var(--warning-bg); color:var(--ambar); border-color:var(--ambar); }
.aviso.mal { background:var(--negative-bg); color:var(--rojo); border-color:var(--rojo); }
.aviso.info { background:var(--info-bg); color:var(--info-text); border-color:var(--info-text); }
.tabs { display:flex; gap:4px; overflow-x:auto; border-color:var(--borde); margin:20px 0; padding:0; }
.tabs button { flex:none; white-space:nowrap; border-radius:0; color:var(--suave); padding:12px 14px; }
.tabs button.activo { color:var(--acento); border-color:var(--acento); }
.fondo-modal { background:#080f0dc4; padding:28px; align-items:flex-start; backdrop-filter:blur(3px); }
.modal { background:var(--panel); color:var(--texto); width:640px; max-width:100%; max-height:calc(100dvh - 56px); padding:24px; border:1px solid var(--borde); border-radius:8px; overflow-y:auto; overflow-x:hidden; box-shadow:0 24px 72px #0004; }
.modal.ancho { width:1240px; max-width:100%; }
.modal h2 { font-size:20px; }
.modal>.entre { padding-bottom:16px; border-bottom:1px solid var(--borde); }
.modal>.entre h2 { font-size:23px; }
.modal .kpis { margin:18px 0; }
.modal .kpi { border:0; border-left:2px solid var(--borde); background:var(--surface-2); border-radius:0; }
.modal .kpi .val { font-size:24px; }
.modal .campos { grid-template-columns:repeat(2,minmax(0,1fr)); }
.modal.ancho .campos { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.campo { min-width:0; margin-bottom:16px; }
.campo label { display:block; margin-bottom:6px; }
.pie-modal { display:flex; flex-wrap:wrap; gap:8px; border-color:var(--borde); padding-top:16px; margin-top:20px; }
.margen-vivo { background:var(--surface-2); color:var(--texto); border-color:var(--borde); border-radius:6px; padding:16px; flex-wrap:wrap; gap:16px; margin-top:20px; }
.margen-vivo .b { color:var(--suave); }
.margen-vivo .v.bien { color:var(--verde); }
.margen-vivo .v.mal { color:var(--rojo); }
.margen-vivo .v.ojo { color:var(--ambar); }
.margen-vivo { position:static; box-shadow:none; }
.margen-vivo .v { font-size:22px; }
.margen-vivo .acciones { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.vacio { background:var(--surface-2); color:var(--suave); padding:32px 24px; border-radius:5px; }
.vacio>b { color:var(--texto); }
.dashboard-charts,.dashboard-bottom,.chart-section+.chart-section,.conversion,.attention-item,.agenda-item { border-color:var(--borde); }
.dashboard-charts { grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); }
.section-heading p,.chart-note,.pipeline-summary>span,.conversion small,.agenda-item small,.agenda-date,.attention-item small,.unit-label,.eyebrow { color:var(--suave); }
.status-row { grid-template-columns:120px minmax(24px,1fr) 110px; }
.status-track { background:var(--surface-2); }
.empty-agenda { background:var(--surface-2); }
.empty-agenda>span { color:var(--suave); }
.attention-item>b { background:var(--warning-bg); color:var(--ambar); }
.hist { color:var(--suave); border-color:var(--borde); }
.hist b { color:var(--texto); }
.login-page { min-height:100dvh; display:grid; place-items:center; padding:24px; background:var(--fondo); }
.login-page .caja { width:100%; max-width:420px; background:var(--panel); border:1px solid var(--borde); border-top:4px solid var(--amarillo); border-radius:8px; padding:32px; box-shadow:none; }
.login-logo { width:160px; height:65px; object-fit:contain; background:#fff; padding:6px; border-radius:4px; margin-bottom:24px; }
.login-page .caja h1 { font-size:25px; }
.login-page .caja button[type="submit"] { width:100%; margin-top:8px; }
.login-page .theme-control { margin-top:24px; justify-content:center; }
.login-page .error { background:var(--negative-bg); color:var(--rojo); }
@media(min-width:1800px) { main#vista { padding:36px 48px; } }
@media(max-width:1200px) {
  .kpis,.metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-charts,.dashboard-bottom { grid-template-columns:minmax(0,1fr); }
  .chart-section+.chart-section { border-left:0; border-top:1px solid var(--borde); padding:24px 0 0; }
  #vista[data-seccion="directorio"]>.fila,#vista[data-seccion="ajustes"]>.fila { flex-direction:column; }
  #vista[data-seccion="directorio"]>.fila>.crece,#vista[data-seccion="ajustes"]>.fila>.crece { width:100%; }
}
@media(max-width:800px) {
  .sidebar { width:260px; }
  header.topbar { margin:0; padding:0 16px; height:60px; gap:12px; }
  .sesion strong { display:none; }
  main#vista { margin:0; padding:24px 16px 40px; }
  h1 { font-size:24px; }
  .breadcrumb strong { font-size:12px; }
  .filtros { gap:10px; }
  .filtros>input:not([type="checkbox"]),.filtros>select { flex:1 1 100%; max-width:none; width:100%; }
  .filtros>label { flex-wrap:wrap; }
  .filtros>button { margin-left:auto; }
  .table-scroll table { min-width:700px; }
  .tarjeta { overflow:visible; }
  .kpis,.metrics { gap:10px; }
  .kpi,.metric { padding:12px; }
  .kpi .val,.metric>strong { font-size:21px; }
  .kpi .et,.metric-label,.kpi .pie,.metric p { font-size:12px; }
  .metric>strong { overflow-wrap:anywhere; }
  .fondo-modal { padding:8px; }
  .modal,.modal.ancho { padding:16px; max-height:calc(100dvh - 16px); width:100%; }
  .modal>.entre h2 { font-size:21px; }
  .modal .kpi .val { font-size:20px; }
  .modal .campos,.modal.ancho .campos { grid-template-columns:minmax(0,1fr); }
  .modal>.entre>div { flex-basis:calc(100% - 60px); }
  .modal .pie-modal button { flex:1 1 auto; }
  .status-row { grid-template-columns:112px minmax(12px,1fr) 104px; gap:6px; }
  button,input,select { min-height:44px; }
  .theme-control button { width:44px; height:44px; }
  .period-controls { flex-wrap:wrap; }
  .login-page .caja { padding:24px; }
}
@media(max-width:480px) {
  .kpis { grid-template-columns:minmax(0,1fr); }
  .kpi { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 10px; }
  .kpi .val,.modal .kpi .val { margin:0; font-size:21px; white-space:nowrap; }
  .kpi .pie { grid-column:1/-1; }
}
.eti.borrador,.eti.anulada,.eti.cerrado { background:var(--surface-2); color:var(--suave); }
.eti.recibida { background:var(--info-bg); color:var(--info-text); }
.eti.realizado { background:var(--positive-bg); color:var(--verde); }
.boton { background:var(--panel); color:var(--texto); border-color:var(--borde); }
.boton:hover { background:var(--hover); }
button.primario:hover { background:var(--acento); border-color:var(--acento); color:var(--panel); }