/* Portal de herramientas: mismo sistema visual que Central v2 (replica/mockups/v2/src/central.css).
   Inter para texto, Plus Jakarta Sans para títulos y cifras; barra lateral grafito #1c1917; contenido en tarjetas blancas;
   naranja Satiwel #c2410c para acciones (antes verde de Central); azul / rosa solo en badges de negocio. Mockup, no producción. */
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-variable.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:200 800;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-variable.woff2") format("woff2")}
:root{
  --bg:#f4f1ec; --card:#fff; --line:#e7e1d9; --line-2:#efeae3; --sunk:#f8f6f2;
  --text:#1c1917; --muted:#6b645d; --faint:#a1998f;
  /* acentos Satiwel (18/10, Juan): naranja; #c2410c con texto blanco = 5.18:1 (AA). Nada del verde de Central. */
  --g:#c2410c; --g-hover:#a8380a; --g-soft:#fde9df; --g-mid:#e8431a; --g-text:#c2410c;
  --side:#1c1917; --side-2:#26211e; --side-3:#2e2925; --side-line:#7a746c; --side-deco:#3a342f; --side-fg:#f4f1ec; --side-mut:#b5aea6;
  --ok:#1f8a4c; --ok-bg:#e3f4ea; --warn:#b7620b; --warn-bg:#fff2e2; --bad:#c2372b; --bad-bg:#fde9e7;
  --info-bg:#faf6f1; --info-line:#ece2d6;
  --neg-j:#2350c4; --neg-j-bg:#e9efff; --neg-j-dark:#6f97ff;
  --neg-c:#ad2257; --neg-c-bg:#fde8f0; --neg-c-dark:#ea6aa3;
  --orange:#f26b21;
  --r:14px; --r-sm:8px;
  --font-text:"Inter","Helvetica Neue",Arial,sans-serif; --font-title:"Plus Jakarta Sans","Inter",Arial,sans-serif;
  --sh:0 1px 2px rgba(28,25,23,.05); --pop:0 10px 28px rgba(28,25,23,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
i{font-style:normal}
body{font-family:var(--font-text);font-size:13.5px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,.title{font-family:var(--font-title);letter-spacing:-.01em}
.ico{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}
.ico.s{width:15px;height:15px}.ico.xs{width:13px;height:13px}.ico.l{width:22px;height:22px}.ico.xl{width:30px;height:30px}

/* ---------- marca del portal (cambiar BRAND en build.py) ---------- */
.mark{display:inline-grid;grid-template-columns:1fr 1fr;gap:3px;width:26px;height:26px;flex:none}
.mark i{border-radius:3px;background:var(--side-fg)}
.mark i:nth-child(4){background:var(--orange);border-radius:50%}
.mark.dark i{background:var(--side)}
.mark.dark i:nth-child(4){background:var(--orange)}
.mark.big{width:44px;height:44px;gap:5px}.mark.big i{border-radius:5px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-title);font-weight:700;font-size:20px;letter-spacing:-.02em}

/* ---------- app con barra lateral ---------- */
.desk{width:1440px}
.app{display:grid;grid-template-columns:208px 1fr;height:900px;overflow:hidden}
.side{background:var(--side);color:var(--side-fg);display:flex;flex-direction:column;padding:14px 10px 12px}
.side .brand{padding:0 8px;height:30px;margin-bottom:18px;font-size:19px}
.side .grp{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--side-mut);padding:14px 12px 6px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:11px;height:37px;padding:0 12px;border-radius:999px;color:var(--side-fg);text-decoration:none;font-size:14px;position:relative}
.nav a .ico{width:17px;height:17px}
.nav a .ext{margin-left:auto;width:13px;height:13px;color:var(--side-mut)}
.nav a.on{background:var(--side-3)}
.nav a.on::before{content:"";position:absolute;left:4px;top:11px;width:3px;height:15px;border-radius:2px;background:var(--orange)}
.nav a img{width:18px;height:18px;border-radius:5px}
.nav a .n{margin-left:auto;font-size:11px;font-weight:600;background:var(--side-2);border:1px solid var(--side-line);border-radius:999px;padding:0 7px;line-height:17px}
.side .grow{flex:1}
.usr{background:var(--side-2);border-radius:12px;padding:8px 10px;display:flex;align-items:center;gap:9px}
.usr .av{background:#e4ded6;color:#1c1917}
.usr b{display:block;font-size:13px;font-weight:600}
.usr small{display:block;font-size:11px;color:var(--side-mut)}
.main{padding:14px 16px 14px 14px;display:flex;flex-direction:column;gap:12px;min-width:0;overflow:hidden}

/* ---------- piezas comunes ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.ph{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 14px 20px;min-height:64px}
.ph h1{font-size:17px;font-weight:600}
.ph p{font-size:12.5px;color:var(--muted);margin-top:4px}
.acts{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;border:1.5px solid var(--g);color:var(--g);background:#fff;font:600 12.5px var(--font-text);white-space:nowrap}
.btn.p{background:var(--g);color:#fff}
.btn.sm{height:30px;padding:0 12px;font-size:12px}
.btn.ghost{border-color:var(--line);color:var(--text)}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.av{width:28px;height:28px;border-radius:50%;background:#ebe5dd;color:#6b645d;display:inline-grid;place-items:center;font-size:11px;font-weight:600;flex:none;position:relative}
.av.c1{background:#e6dcf3;color:#5b3d86}.av.c2{background:#fde3d3;color:#a5410f}.av.c3{background:#f6e3d3;color:#8a4a17}
.av.c4{background:#dbe8f6;color:#284f80}.av.c5{background:#f3dde4;color:#8b2d4d}.av.c6{background:#e4ded6;color:#1c1917}
.av.on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#2fb065;border:2px solid #fff}
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.mut{background:var(--sunk);color:var(--muted)}
.chip.j{background:var(--neg-j-bg);color:var(--neg-j)}
.chip.c{background:var(--neg-c-bg);color:var(--neg-c)}
.chip.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.srch{display:flex;align-items:center;gap:9px;height:38px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);padding:0 8px 0 14px;color:var(--faint);font-size:13px}
.srch .ico{color:var(--text);width:15px;height:15px}
.kbd{margin-left:auto;font:600 11px var(--font-text);color:var(--muted);border:1px solid var(--line);background:#fff;border-radius:6px;padding:2px 6px}
.sel{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;height:34px;padding:0 10px 0 12px;border:1px solid #d6cfc6;border-radius:8px;font-size:13px;background:#fff;color:var(--text)}
.tog{width:32px;height:18px;border-radius:999px;background:#d3cbc1;position:relative;display:inline-block;vertical-align:middle;flex:none}
.tog::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.tog.on{background:var(--g-mid)}
.tog.on::after{left:auto;right:2px}
.tog.j.on{background:var(--neg-j)}.tog.c.on{background:var(--neg-c)}
.tog.dis{opacity:.35}
.cb{width:16px;height:16px;border:1.5px solid #6b645d;border-radius:4px;display:inline-grid;place-items:center;flex:none;color:#fff}
.cb.on{background:var(--g);border-color:var(--g)}
.cb .ico{width:12px;height:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;font-weight:600}
.inp{height:40px;border:1px solid #8a8278;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 12px;font-size:14px;background:#fff}
.inp .ico{color:var(--muted);width:16px;height:16px}
.inp .r{margin-left:auto}
.inp.ro{background:var(--sunk);border-color:var(--line)}
.link{color:var(--g-text);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.mut{color:var(--muted)}
.sec-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sec-h h2{font-size:15.5px;font-weight:600}
.sec-h p{font-size:12px;color:var(--muted);margin-top:3px}

/* ícono de app (tile cuadrado) */
.appi{width:52px;height:52px;border-radius:13px;background:var(--side);display:grid;place-items:center;flex:none;color:var(--side-fg);overflow:hidden}
.appi img{width:100%;height:100%}
.appi .ico{width:24px;height:24px}
.appi.met .ico{color:#9fd8bd}.appi.cont .ico{color:#f5b98f}.appi.drv .ico{color:#c9b8f0}.appi.age .ico{color:#9cc2f0}
.appi.sm{width:24px;height:24px;border-radius:7px}.appi.sm .ico{width:13px;height:13px}
.appi.xs{width:22px;height:22px;border-radius:6px}.appi.xs .ico{width:12px;height:12px}
.appi.off{opacity:.25}

table{width:100%;border-collapse:collapse}
th{font-size:12px;font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--muted);white-space:nowrap}
td{font-size:13px;padding:0 12px;height:56px;border-bottom:1px solid var(--line-2);white-space:nowrap}
tr.off td{color:var(--faint)}
tr.off .av,tr.off .appi,tr.off .chip.j,tr.off .chip.c{opacity:.5}
.appi.anu .ico{color:#f2a3c4}.appi.cur .ico{color:#f0d27a}.appi.fin .ico{color:#8fd6c9}.appi.rep .ico{color:#c7cdf5}
a.ap,a.ma{color:inherit;text-decoration:none;cursor:pointer}
/* catálogo real (18/10): externas con ícono genérico, nunca logo de marca */
.appi.t-mc .ico{color:#ffd166}.appi.t-sc .ico{color:#9fd8bd}.appi.t-ga .ico{color:#c9b8f0}.appi.t-dr .ico{color:#9cc2f0}
.appi.t-es .ico{color:#f0d27a}.appi.t-ho .ico{color:#f5b98f}.appi.t-me .ico{color:#a9c4ff}
.appi.t-mj{background:#004cff}.appi.t-mj .ico{color:#fff}
.appi.t-mch{background:#a3165a}.appi.t-mch .ico{color:#fff}

.brand svg{height:26px;width:auto;display:block}
.side .brand svg{height:28px}
.lft .brand svg{height:36px}
.mt .brand svg{height:24px}