/* ==========================================================================
   Torre de Control Operativa — hoja de estilos de marca Singular
   --------------------------------------------------------------------------
   Alineada con el sistema Corporate Actions / Middle Office para que los
   sistemas internos de Singular se vean como una sola familia.

   Reglas del manual 2026 que gobiernan este archivo:
     - Superficie web por defecto: blanca. Crudo queda para impresos.
     - Esquinas rectas. Nada de radios grandes ni sombras decorativas.
     - Highlight de sub-marca (Spring Bud) en ~4% de la superficie: solo
       acentos puntuales, nunca rellenando regiones ni el logo.
     - Iconografia lineal 2px, un solo color (Lucide, embebida como SVG).
     - Motion contenido: 220ms ease-out, sin rebotes.
     - Cifras en Exo 2 con numeros tabulares.
     - Eyebrows en mayusculas con tracking 0.24em.

   NO cambia ningun comportamiento: solo presentacion. Los nombres de clase
   son exactamente los que ya usaban el HTML y el JS del tablero.
   ========================================================================== */

:root{
  /* ---------- Paleta oficial ---------- */
  --sg-black:#080808;
  --sg-cardin-green:#152625;
  --sg-spectra:#38615F;
  --sg-jet-stream:#C6D8CF;
  --sg-crudo:#F1F0E2;
  --sg-spring-bud:#A9F900;          /* highlight Wealth Management */
  --sg-persian-red:#D22D2D;
  --sg-amber:#FFBF00;
  --sg-sea-green:#40BF55;
  --sg-blue:#006FFF;
  --sg-dark-silver:#888B8D;
  --sg-light-silver:#EDECEC;
  --sg-676:#676A6D;
  --sg-green-700:#2C4D4C;
  --sg-orange-500:#F7931E;

  /* ---------- Semanticos ---------- */
  --bg:#FFFFFF;
  --bg-elevated:#FAFAF7;
  --surface:#FFFFFF;
  --fg:var(--sg-black);
  --fg-1:var(--sg-cardin-green);
  --fg-2:var(--sg-spectra);
  --fg-muted:var(--sg-676);
  --fg-subtle:var(--sg-dark-silver);
  --fg-on-dark:var(--sg-crudo);
  --border:rgba(8,8,8,.10);
  --border-strong:rgba(8,8,8,.22);
  --divider:var(--sg-light-silver);
  --accent:var(--sg-spectra);        /* estructural: foco, links, activos */
  --highlight:var(--sg-spring-bud);  /* el 4%: acentos puntuales */

  /* ---------- Alias que ya usaban el HTML y el JS ---------- */
  --navy:var(--sg-cardin-green);
  --navy-2:var(--sg-spectra);
  --brand-3:var(--sg-green-700);
  --teal:var(--sg-spectra);
  --teal-d:var(--sg-green-700);
  --card:var(--surface);
  --line:var(--border);
  --txt:var(--fg);
  --muted:var(--fg-muted);
  --amber:var(--sg-orange-500);
  --red:var(--sg-persian-red);
  --green:var(--sg-sea-green);
  --blue:var(--sg-blue);
  --gray:var(--sg-dark-silver);
  --shadow:none;

  /* ---------- Tipografia ---------- */
  --font-sans:"Nunito Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-display:"Exo 2","Nunito Sans",system-ui,sans-serif;

  /* ---------- Geometria y motion ---------- */
  --r-sm:4px;
  --r-pill:999px;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:220ms;
  --dur-fast:140ms;
  --tk-eyebrow:.24em;
  --tk-ui:.16em;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--txt);
  font-size:13.5px;
  line-height:1.5;
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Iconografia Lucide embebida (sin CDN, para no abrir la CSP) */
.ic{width:1em;height:1em;flex:0 0 auto;vertical-align:-.125em;stroke-width:2}
.ic-warn{color:var(--red)}

/* Cifras: Exo 2 tabular */
.sg-num{font-family:var(--font-display);font-variant-numeric:tabular-nums lining-nums}
table{font-variant-numeric:tabular-nums lining-nums}

/* ==========================================================================
   HEADER — negro plano, tinta Crudo. Igual que Corporate Actions.
   ========================================================================== */
header.top{
  background:var(--sg-black);
  color:var(--fg-on-dark);
  padding:0 32px;
  position:sticky;top:0;z-index:20;
}
.top-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding:14px 0 13px;
}
.brand{display:flex;align-items:center;gap:16px}
.logo{height:18px;width:auto;display:block;flex:0 0 auto}
.brand h1{
  font-size:11px;margin:0;font-weight:400;
  letter-spacing:var(--tk-eyebrow);text-transform:uppercase;
  color:rgba(241,240,226,.78);
  padding-left:16px;
  border-left:1px solid rgba(241,240,226,.18);
}
.brand p{
  margin:3px 0 0 16px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(241,240,226,.45);
}

/* ---------- Identidad del usuario autenticado (esquina sup. derecha) ---------- */
.me{
  display:flex;flex-direction:row-reverse;align-items:center;gap:11px;
  margin-left:4px;padding-left:18px;
  border-left:1px solid rgba(241,240,226,.18);
}
.me-av{width:32px;height:32px;border-radius:0;flex:0 0 32px}
.me-ph{object-fit:cover;display:none}
.me-ini{
  display:grid;place-items:center;
  background:var(--sg-spectra);color:var(--fg-on-dark);
  font-weight:600;font-size:11px;letter-spacing:.04em;
}
.me-txt{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.me-nm{font-size:12.5px;font-weight:600;color:var(--fg-on-dark)}
.me-links{display:flex;gap:10px;margin-top:2px}
.me-out{
  font-size:10px;letter-spacing:var(--tk-eyebrow);text-transform:uppercase;
  color:rgba(241,240,226,.6);text-decoration:none;width:fit-content;
  transition:color var(--dur-fast) var(--ease);
}
.me-out:hover{color:var(--highlight);text-decoration:none}

.top-right{display:flex;align-items:center;gap:10px;font-size:11.5px;color:rgba(241,240,226,.7)}
/* estado de la base compartida */
.sync{font-size:9.5px;letter-spacing:var(--tk-ui);text-transform:uppercase;white-space:nowrap;color:rgba(241,240,226,.4)}
.sync.ok{color:rgba(241,240,226,.55)}
.sync.warn{color:var(--sg-amber)}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{
  font-family:inherit;
  border:1px solid var(--fg);border-radius:var(--r-sm);
  background:var(--fg);color:var(--bg);
  padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:opacity var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.btn:hover{opacity:.88}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--sg-cardin-green);border-color:var(--sg-cardin-green);color:var(--fg-on-dark)}
.btn-primary:hover{background:var(--sg-cardin-green);opacity:.88}
.btn-ghost{
  background:transparent;color:var(--fg-on-dark);
  border:1px solid rgba(241,240,226,.18);font-weight:400;
}
.btn-ghost:hover{background:rgba(241,240,226,.08);border-color:rgba(241,240,226,.36);opacity:1}
.btn-light{background:var(--surface);color:var(--fg);border:1px solid var(--border-strong)}
.btn-light:hover{background:var(--bg-elevated);border-color:var(--fg);opacity:1}

/* ==========================================================================
   TABS — cajas discretas sobre el header negro, como la nav de Middle Office
   ========================================================================== */
nav.tabs{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:14px}
nav.tabs button{
  font-family:inherit;
  background:transparent;color:rgba(241,240,226,.66);
  border:1px solid rgba(241,240,226,.18);border-radius:var(--r-sm);
  padding:7px 14px;font-size:11.5px;font-weight:500;
  letter-spacing:.02em;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
nav.tabs button:hover{background:rgba(241,240,226,.08);color:var(--fg-on-dark);border-color:rgba(241,240,226,.36)}
nav.tabs button.active{
  background:var(--fg-on-dark);color:var(--sg-black);
  border-color:var(--fg-on-dark);font-weight:700;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap{max-width:1440px;margin:0 auto;padding:26px 32px 72px}
.view{display:none}
.view.active{display:block}

.backend-note{
  background:#FFF8E6;border:0;border-left:2px solid var(--sg-amber);
  color:#5A4900;border-radius:0;
  padding:13px 16px;font-size:12.5px;line-height:1.55;
  margin-bottom:20px;display:flex;gap:11px;align-items:flex-start;
}

.section-title{
  font-size:11px;text-transform:uppercase;letter-spacing:var(--tk-eyebrow);
  color:var(--fg-2);font-weight:400;margin:28px 0 11px;
}

/* ==========================================================================
   KPIs — patron .stat de la referencia: recto, sin sombra, cifra en Exo 2
   ========================================================================== */
.kpis{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:0;
  padding:16px 18px;box-shadow:none;position:relative;overflow:hidden;
}
.kpi .n{
  font-family:var(--font-display);
  font-variant-numeric:tabular-nums lining-nums;
  font-size:26px;font-weight:500;line-height:1;letter-spacing:-.01em;
  display:block;
}
.kpi .l{
  font-size:10px;color:var(--fg-muted);margin-top:9px;display:block;
  text-transform:uppercase;letter-spacing:var(--tk-ui);font-weight:400;
}
.kpi .bar{position:absolute;left:0;top:0;bottom:0;width:2px}
.kpi.total .bar{background:var(--sg-cardin-green)}
.kpi.alto .bar{background:var(--red)}
.kpi.medio .bar{background:var(--amber)}
.kpi.bloq .bar{background:var(--amber)}
.kpi.venc .bar{background:var(--red)}
.kpi.nuevos .bar{background:var(--blue)}
.kpi.chk .bar{background:var(--green)}
.kpi.alert .n{color:var(--red)}
.kpi.clk{cursor:pointer;transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.kpi.clk:hover{background:var(--bg-elevated);border-color:var(--border-strong)}
.kpi.clk::after{
  content:"VER";position:absolute;right:14px;bottom:13px;
  font-size:9.5px;letter-spacing:var(--tk-ui);color:var(--fg-subtle);
  opacity:0;transition:opacity var(--dur) var(--ease-out);
}
.kpi.clk:hover::after{opacity:1}

.special-chip{
  display:none;align-items:center;gap:7px;
  background:#F2F5F4;color:var(--fg-1);
  border:0;border-left:2px solid var(--sg-spectra);border-radius:0;
  padding:7px 12px;font-size:12px;font-weight:600;
}
.special-chip button{border:0;background:none;color:var(--fg-2);cursor:pointer;font-size:14px;line-height:1;padding:0}

/* Detalle por area clickeable */
td.dcell{cursor:pointer}
td.dcell:hover{background:var(--bg-elevated);box-shadow:inset 0 0 0 1px var(--sg-jet-stream)}
#detalle td.dname:hover{color:var(--fg-2)}
#topriesgos tr{cursor:pointer}

/* Carga del equipo */
.loadbar{height:8px;background:var(--sg-light-silver);border-radius:0;overflow:hidden;min-width:80px}
.loadbar>div{height:100%;background:var(--sg-spectra);border-radius:0}
#carga-foot td{font-weight:700;color:var(--fg);border-top:1px solid var(--border-strong);background:var(--bg-elevated)}

/* ==========================================================================
   REPORTE DEL DIA
   ========================================================================== */
.report-actions{display:flex;gap:9px;justify-content:flex-end;margin-bottom:14px}
.report{padding:30px 34px;font-size:13px;line-height:1.6}
.report h2{
  margin:0 0 3px;font-size:24px;font-weight:300;letter-spacing:-.01em;
  color:var(--fg);line-height:1.15;
}
.report .sub{color:var(--fg-muted);font-size:12px;margin-bottom:20px}
.report h4{
  margin:24px 0 9px;font-size:11px;text-transform:uppercase;
  letter-spacing:var(--tk-eyebrow);color:var(--fg-2);font-weight:400;
  border-bottom:1px solid var(--divider);padding-bottom:7px;
}
.report ul{margin:7px 0;padding-left:18px}
.report li{margin:4px 0}
.report .kpiline{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.report .kchip{background:var(--bg-elevated);border:1px solid var(--border);border-radius:0;padding:9px 13px;font-size:11px;text-transform:uppercase;letter-spacing:var(--tk-ui);color:var(--fg-muted)}
.report .kchip b{
  color:var(--fg);font-size:19px;display:block;
  font-family:var(--font-display);font-variant-numeric:tabular-nums lining-nums;
  font-weight:500;letter-spacing:0;text-transform:none;margin-bottom:3px;
}
.report .muted{color:var(--fg-muted)}

/* ==========================================================================
   TARJETAS Y GRILLAS
   ========================================================================== */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:0;box-shadow:none;overflow:hidden}
.card h3{
  margin:0;padding:14px 18px;font-size:11px;text-transform:uppercase;
  letter-spacing:var(--tk-eyebrow);color:var(--fg-2);font-weight:400;
  border-bottom:1px solid var(--border);background:var(--bg-elevated);
}
.qa{padding:8px 18px}
.qa .q{font-weight:600;padding:11px 0 4px;font-size:13px;color:var(--fg)}
.qa .a{color:var(--fg-muted);padding-bottom:11px;border-bottom:1px solid var(--divider);font-size:12.5px}
.qa .row:last-child .a{border-bottom:0}

/* ==========================================================================
   TABLAS — cabecera Cardin Green con tinta Crudo, como la referencia
   ========================================================================== */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:0;box-shadow:none;overflow:auto}
table{border-collapse:collapse;width:100%;min-width:760px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--divider);vertical-align:top}
th{
  position:sticky;top:0;z-index:1;
  background:var(--sg-cardin-green);color:var(--fg-on-dark);
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  cursor:pointer;white-space:nowrap;border-bottom:0;
}
th.ns{cursor:default}
tbody tr:hover{background:var(--bg-elevated)}
td.strong{font-weight:600;color:var(--fg)}

/* ---------- Pills de estado (patron .tag de la referencia) ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 9px;border-radius:var(--r-pill);
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;
}
.dot{width:6px;height:6px;border-radius:50%}
.s-Abierto{background:var(--sg-light-silver);color:#4A4D50}
.s-Abierto .dot{background:var(--gray)}
.s-EnProceso{background:#E7EFF7;color:#0B4F86}
.s-EnProceso .dot{background:var(--blue)}
.s-Bloqueado{background:#FFF3CC;color:#6B4F00}
.s-Bloqueado .dot{background:var(--sg-amber)}
.s-Cerrado{background:#E2F0E5;color:#1F6F3A}
.s-Cerrado .dot{background:var(--green)}
.s-Alerta{background:#FBEFEF;color:var(--red)}
.s-Alerta .dot{background:var(--red)}

.rpill{
  padding:2px 8px;border-radius:var(--r-pill);
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.r-Alto{background:#FBEFEF;color:var(--red)}
.r-Medio{background:#FFF3CC;color:#6B4F00}
.r-Bajo{background:#E2F0E5;color:#1F6F3A}
.r-Ninguno{background:var(--sg-light-silver);color:#4A4D50}

.p-Alta{color:var(--red);font-weight:700}
.p-Media{color:#8A5A00;font-weight:700}
.p-Baja{color:var(--fg-muted);font-weight:600}

.area-tag{
  font-size:10px;padding:2px 8px;border-radius:0;
  background:#F2F5F4;color:var(--fg-2);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.venc{color:var(--red);font-weight:700}
.tend-Empeorando{color:var(--red);font-weight:700}
.tend-Mejorando{color:#1F6F3A;font-weight:700}
.tend-Estable{color:var(--fg-muted)}

.row-actions{display:flex;gap:6px}
.icon-btn{
  border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);
  width:29px;height:29px;cursor:pointer;font-size:13px;color:var(--fg-1);
  display:grid;place-items:center;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.icon-btn:hover{background:var(--bg-elevated);border-color:var(--border-strong)}
.icon-btn.del:hover{background:#FBEFEF;border-color:#EFC8C8;color:var(--red)}

/* ==========================================================================
   TOOLBAR Y FORMULARIOS
   ========================================================================== */
.toolbar{
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:0;
  padding:12px 14px;margin-bottom:16px;box-shadow:none;
}
.toolbar input[type=search],.toolbar select,.toolbar input[type=date]{
  border:1px solid var(--border);border-radius:var(--r-sm);
  padding:8px 11px;font-size:12.5px;font-family:inherit;
  background:var(--surface);color:var(--txt);
  transition:border-color var(--dur-fast) var(--ease);
}
.toolbar input[type=search]:focus,.toolbar select:focus,.toolbar input[type=date]:focus{outline:none;border-color:var(--accent)}
.toolbar input[type=search]{min-width:200px;flex:1}
.toolbar .spacer{flex:1}
.count{font-size:11px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:var(--tk-ui)}

/* ==========================================================================
   CHECKLIST
   ========================================================================== */
.chk-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.progress{flex:1;min-width:200px;height:8px;background:var(--sg-light-silver);border-radius:0;overflow:hidden}
.progress>div{height:100%;background:var(--sg-spectra);transition:width var(--dur) var(--ease-out)}
.pct{
  font-family:var(--font-display);font-variant-numeric:tabular-nums lining-nums;
  font-weight:500;font-size:20px;color:var(--fg);
}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.seg button{
  border:0;background:var(--surface);padding:6px 13px;cursor:pointer;
  font-size:11px;font-weight:600;color:var(--fg-muted);font-family:inherit;
  letter-spacing:.06em;text-transform:uppercase;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.seg button:hover{background:var(--bg-elevated)}
.seg button.si.on{background:var(--sg-cardin-green);color:var(--fg-on-dark)}
.seg button.no.on{background:var(--red);color:#fff}
.chk-comment,.chk-resp-sel{
  border:1px solid var(--border);border-radius:var(--r-sm);
  padding:6px 9px;font-size:12px;font-family:inherit;
  background:var(--surface);color:var(--txt);
}
.chk-comment{width:100%}
.chk-comment:focus,.chk-resp-sel:focus{outline:none;border-color:var(--accent)}
.area-group td{background:var(--bg-elevated);font-weight:700;color:var(--fg-1);font-size:11px;text-transform:uppercase;letter-spacing:var(--tk-ui)}
.area-group.clk td{cursor:pointer}
.area-group.clk:hover td{color:var(--fg-2)}
.rlink{cursor:pointer}
.rlink:hover{color:var(--fg-2);text-decoration:underline}

.subtabs{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.subtabs button{
  border:0;background:var(--surface);padding:8px 16px;cursor:pointer;
  font-weight:600;font-size:11.5px;color:var(--fg-muted);font-family:inherit;
  letter-spacing:.04em;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.subtabs button:hover{background:var(--bg-elevated)}
.subtabs button.active{background:var(--fg);color:var(--bg)}
#settle-torre-wrap{cursor:pointer}

/* ==========================================================================
   MI BANDEJA
   ========================================================================== */
.who{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.who button{
  border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);
  padding:8px 15px;cursor:pointer;font-weight:600;font-size:12px;
  color:var(--fg-1);font-family:inherit;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.who button:hover{background:var(--bg-elevated);border-color:var(--border-strong)}
.who button.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.mini-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}

/* ==========================================================================
   MODALES
   ========================================================================== */
.overlay{
  position:fixed;inset:0;background:rgba(8,8,8,.55);
  display:none;align-items:flex-start;justify-content:center;
  padding:40px 16px;z-index:60;overflow:auto;
}
.overlay.open{display:flex}
.modal{
  background:var(--surface);border:1px solid var(--border);border-radius:0;
  width:100%;max-width:640px;
  box-shadow:0 18px 40px -12px rgba(8,8,8,.28);
}
.modal header{
  background:var(--sg-cardin-green);color:var(--fg-on-dark);
  padding:16px 22px;border-radius:0;font-weight:400;font-size:15px;
  display:flex;justify-content:space-between;align-items:center;
  letter-spacing:.01em;
}
.modal .body{padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:15px}
.modal .body .full{grid-column:1/-1}
.field label{
  display:block;font-size:10px;color:var(--fg-1);margin-bottom:6px;
  font-weight:600;text-transform:uppercase;letter-spacing:var(--tk-ui);
}
.field input,.field select,.field textarea{
  width:100%;padding:10px 12px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  font-family:inherit;font-size:13px;
  background:var(--surface);color:var(--txt);
  transition:border-color var(--dur-fast) var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:66px}
.modal footer{padding:15px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
.close-x{background:none;border:0;color:var(--fg-on-dark);font-size:20px;cursor:pointer;line-height:1;padding:0}

.empty{padding:40px;text-align:center;color:var(--fg-muted);font-size:12.5px}
footer.foot{
  max-width:1440px;margin:0 auto;padding:12px 32px 0;
  color:var(--fg-subtle);font-size:10px;
  text-transform:uppercase;letter-spacing:var(--tk-eyebrow);
}

/* ==========================================================================
   IMPRESION
   ========================================================================== */
@media print{
  header.top,.backend-note,.report-actions,footer.foot{display:none!important}
  body{background:#fff}
  .wrap{padding:0;max-width:none}
  .card{border:0;box-shadow:none}
  th{background:var(--sg-cardin-green)!important;color:var(--fg-on-dark)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1050px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:1fr}
}
@media(max-width:640px){
  header.top{padding:0 18px}
  .wrap{padding:20px 18px 60px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .mini-kpis{grid-template-columns:repeat(2,1fr)}
  .modal .body{grid-template-columns:1fr}
  .brand h1{padding-left:12px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   ACCESOS A LOS OTROS SISTEMAS, EN LA BARRA DE NAVEGACION
   Van en el header (que es sticky) para tenerlos desde cualquier pestana.
   Se distinguen de las pestanas por el separador y la flecha de salida.
   ========================================================================== */
.tabs-sep{width:1px;align-self:stretch;background:rgba(241,240,226,.18);margin:0 5px 0 9px}
.tab-ext{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:transparent;color:rgba(241,240,226,.55);
  border:1px solid rgba(241,240,226,.14);border-radius:var(--r-sm);
  padding:7px 13px;font-size:11.5px;font-weight:500;letter-spacing:.02em;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.tab-ext:hover{background:rgba(241,240,226,.08);color:var(--fg-on-dark);border-color:rgba(241,240,226,.36)}
.ext-ic{width:12px;height:12px;flex:0 0 12px;opacity:.75}
@media print{.tabs-sep,.tab-ext{display:none!important}}
@media(max-width:640px){.tabs-sep{display:none}}