/* ==========================================================================
   C3Tool · Cloud Cost Control — hoja de estilos única
   Marca: T&M Consulting, "Manual de marca 2024" (tokens tomados de ~/code/tmpage/styles/site.css).
   · Azul corporativo #1C75BC (banda/hover #1868A7) y sus tonos 80/60/40/20/10 %.
   · Gris oscuro #3C393C / #4D4D4D para títulos y texto; grises neutros para la interfaz.
   · Secundarios pastel (lavanda, menta, verde, arena, salmón) solo como acento puntual (<10 %).
   · Semáforo: #16A34A ok · #EAB308 aviso · #DC2626 error.
   · Montserrat (títulos, antetítulos, etiquetas) + Calibri/Carlito (texto) + monoespaciada para IDs y comandos.
   Look técnico: esquinas de 3–6 px, filetes de 1 px, sin degradados ni sombras pesadas.
   ========================================================================== */

/* ---- Fuentes autoalojadas (OFL; licencias en /static/fonts/OFL-*.txt) ---- */
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations'),
  url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Carlito';src:url('../fonts/carlito-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Carlito';src:url('../fonts/carlito-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Carlito';src:url('../fonts/carlito-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Tokens ---- */
:root{
  /* Marca T&M (Manual 2024) */
  --tm-blue:#1c75bc; --tm-blue-600:#1868a7;
  --tm-blue-80:#4991c9; --tm-blue-60:#77acd7; --tm-blue-40:#a4c8e4; --tm-blue-20:#d2e3f1; --tm-blue-10:#e8f1f8;
  --tm-dark:#3c393c; --tm-dark-700:#4d4d4d; --tm-dark-900:#2e2c2e;
  --tm-gray-70:#5e5e5e; --tm-gray-60:#949494; --tm-gray-40:#b8b8b8; --tm-gray-20:#dcdcdc; --tm-gray-10:#f3f3f3;
  --tm-lavender:#9ba7cb; --tm-mint:#b3e5d8; --tm-green:#c2e098; --tm-sand:#e4d6ac; --tm-salmon:#fbcbc6;
  --tm-ok:#16a34a; --tm-warn:#eab308; --tm-error:#dc2626;

  /* Superficies y texto (los nombres se conservan: las plantillas usan var(--good), var(--ink-3)…) */
  --bg:#f3f3f3; --surface:#ffffff; --surface-2:#f3f3f3; --surface-3:#ebebeb;
  --title:#3c393c; --ink:#3c393c; --ink-2:#5e5e5e; --ink-3:#686868;
  --line:#dcdcdc; --line-2:#b8b8b8; --field:#949494;
  /* Azul: --accent para rellenos/trazos, --accent-2 para texto azul (≥4.5:1) */
  --accent:var(--tm-blue); --accent-hover:var(--tm-blue-600); --accent-2:#1868a7; --accent-soft:var(--tm-blue-10);
  --accent-tint:var(--tm-blue-20); --link:#1868a7; --eyebrow:#1868a7;
  /* Semáforo: color base (relleno) · tinta (texto) · fondo suave */
  --good:var(--tm-ok);   --good-ink:#146c37; --good-soft:#e6f4ea;
  --warn:var(--tm-warn); --warn-ink:#8a5a00; --warn-soft:#fbf3d5;
  --crit:var(--tm-error); --crit-ink:#b91c1c; --crit-soft:#fcebeb;
  /* Acentos pastel (<10 %): lavanda y arena para estados secundarios */
  --violet:#7d89b0; --lav-ink:#4a5580; --lav-soft:#eceef6;
  --sand-ink:#6b5714; --sand-soft:#f5efdd;
  /* Serie categórica de gráficas (mismo orden que charts.CATEGORICAL) */
  --cat-1:#1c75bc; --cat-2:#4d4d4d; --cat-3:#a4c8e4; --cat-4:#949494;
  --cat-5:#e4d6ac; --cat-6:#9ba7cb; --cat-7:#b3e5d8; --cat-8:#fbcbc6; --cat-other:#dcdcdc;
  /* Código / terminal */
  --code-bg:#2e2c2e; --code-ink:#ececec; --code-muted:#b8b8b8;

  --r-sm:3px; --r:4px; --r-lg:6px;
  --shadow:0 1px 2px rgb(60 57 60 / .05);
  --shadow-pop:0 2px 4px rgb(60 57 60 / .06),0 12px 28px -14px rgb(60 57 60 / .28);
  --ring:0 0 0 3px rgb(28 117 188 / .28);

  --display:'Montserrat','Segoe UI',system-ui,-apple-system,sans-serif;
  --sans:Calibri,'Carlito','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1c1b1c; --surface:#262426; --surface-2:#2f2d2f; --surface-3:#171617;
  --title:#f3f3f3; --ink:#ececec; --ink-2:#c4c4c4; --ink-3:#a3a3a3;
  --line:#3a383a; --line-2:#4f4d4f; --field:#6f6d6f;
  --accent:var(--tm-blue-80); --accent-hover:var(--tm-blue-60); --accent-2:#a4c8e4; --accent-soft:#1d3347;
  --accent-tint:#24425c; --link:#77acd7; --eyebrow:#77acd7;
  --good-ink:#5cc98a; --good-soft:#1b3325;
  --warn-ink:#eab308; --warn-soft:#3a3117;
  --crit-ink:#f87171; --crit-soft:#3d2223;
  --violet:#9ba7cb; --lav-ink:#aeb8d8; --lav-soft:#2e3142;
  --sand-ink:#e4d6ac; --sand-soft:#353020;
  --cat-1:#4991c9; --cat-2:#dcdcdc; --cat-3:#1868a7; --cat-4:#7a787a; --cat-other:#4f4d4f;
  --code-bg:#171617; --code-ink:#e8e8e8; --code-muted:#a3a3a3;
  --shadow:0 1px 2px rgb(0 0 0 / .35);
  --shadow-pop:0 2px 4px rgb(0 0 0 / .3),0 12px 28px -14px rgb(0 0 0 / .6);
  --ring:0 0 0 3px rgb(119 172 215 / .35);
}}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
h1,h2,h3,h4{font-family:var(--display);color:var(--title);font-weight:600;letter-spacing:-.005em}
b,strong{font-weight:700}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
img{max-width:100%}
code,kbd,samp,pre{font-family:var(--mono)}
:not(pre)>code{font-size:.86em;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 4px;color:var(--ink);overflow-wrap:anywhere}
::selection{background:var(--accent-tint)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.num,.mono{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.9em}
.muted{color:var(--ink-3)}

/* ---- Sidebar ---- */
.side{background:var(--surface);border-right:1px solid var(--line);padding:18px 12px 14px;
  display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow-y:auto;min-width:0}
.brand{display:flex;align-items:center;gap:10px;padding:2px 6px 16px;border-bottom:1px solid var(--line);color:inherit}
a.brand:hover{text-decoration:none}
.brand .logo,.auth-brand .logo{width:32px;height:32px;border-radius:var(--r);background:var(--tm-blue);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--display);letter-spacing:.02em}
.brand b{display:block;font:700 15px/1.2 var(--display);color:var(--title);letter-spacing:-.005em}
.brand small{display:block;font-size:12px;color:var(--ink-3);margin-top:1px}
.side nav{display:flex;flex-direction:column;gap:1px}
.side nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r);position:relative;
  color:var(--ink-2);font-size:14.5px;line-height:1.3;transition:background-color .12s,color .12s}
.side nav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.side nav a.active{background:var(--accent-soft);color:var(--accent-2);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
.side nav .ni{font-size:13px;width:16px;text-align:center;color:var(--ink-3);flex-shrink:0}
.side nav a.active .ni{color:var(--accent)}
.nav-sep{font:700 10px/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:16px 0 6px;padding-left:10px}
.nav-sep.first{margin-top:0}
.nav-badge{margin-left:auto;background:var(--crit);color:#fff;font:700 10.5px/1.5 var(--mono);
  border-radius:var(--r-sm);padding:0 6px;font-variant-numeric:tabular-nums}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.side-foot small{font-size:12px;color:var(--ink-3)}
.user-chip{display:flex;align-items:center;gap:10px;min-width:0}
.user-av{width:30px;height:30px;border-radius:var(--r);background:var(--tm-dark-700);color:#fff;
  display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--display);flex-shrink:0;text-transform:uppercase}
.user-info{min-width:0}
.user-info b{display:block;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-info small{display:block;font-size:12px;color:var(--ink-3)}
.side-link{font-size:13px;color:var(--ink-2);display:inline-block}
.tenant-chip{font:600 11.5px/1.3 var(--mono);color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);padding:6px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant-chip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:1px;background:var(--accent);
  margin-right:7px;vertical-align:1px}
/* Respaldo "Un producto de T&M Consulting": logo oscuro sobre claro, claro sobre oscuro (via <picture>) */
.endorse{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 6px 0;color:var(--ink-3)}
.endorse span{font:600 9.5px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase}
.endorse img{display:block;height:26px;width:auto}

/* ---- Main / encabezado de página ---- */
.main{padding:26px 36px 64px;max-width:1240px;min-width:0;width:100%;overflow-wrap:break-word}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;
  margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.page-head>div:first-child{min-width:0}
.eyebrow{font:700 10.5px/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow);margin:0 0 6px}
h1{font-size:23px;line-height:1.25;margin:0;font-weight:600}
.page-head .sub{margin:8px 0 0;color:var(--ink-2);font-size:14.5px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.head-meta{font-size:13.5px;color:var(--ink-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.head-meta b{color:var(--ink);font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.back{font-size:13.5px;color:var(--ink-2);display:inline-block;margin-bottom:12px}

/* ---- Mensajes flash ---- */
.flash{padding:10px 14px;border-radius:var(--r);font-size:14px;margin-bottom:16px;border:1px solid var(--line);
  border-left:3px solid var(--accent);background:var(--accent-soft);color:var(--ink)}
.flash-ok{background:var(--good-soft);border-color:var(--good-soft);border-left-color:var(--good)}
.flash-err,.flash-error{background:var(--crit-soft);border-color:var(--crit-soft);border-left-color:var(--crit)}
.flash-warn{background:var(--warn-soft);border-color:var(--warn-soft);border-left-color:var(--warn)}

/* ---- KPIs ---- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px 12px;
  position:relative;overflow:hidden;min-width:0}
.kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:transparent}
.kpi.accent::before{background:var(--accent)} .kpi.good::before{background:var(--good)}
.kpi.warn::before{background:var(--warn)} .kpi.crit::before{background:var(--crit)}
.kpi-lbl{font:600 10.5px/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px}
.kpi-val{font:600 24px/1.15 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--title);
  overflow-wrap:anywhere}
.kpi-val small{font:400 13.5px var(--sans);color:var(--ink-3);margin-left:2px;letter-spacing:0}
.kpi-note{font-size:13px;color:var(--ink-3);margin:5px 0 0}
.kpi.accent .kpi-val{color:var(--accent-2)} .kpi.good .kpi-val{color:var(--good-ink)}
.kpi.warn .kpi-val{color:var(--warn-ink)} .kpi.crit .kpi-val{color:var(--crit-ink)}

/* ---- Tarjetas ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:18px 20px;margin-bottom:16px;min-width:0}
.card h2{font-size:15px;line-height:1.35;margin:0 0 2px;font-weight:600}
.card h3{font:700 10.5px/1.3 var(--display);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2)}
.card .cap{font-size:13.5px;color:var(--ink-3);margin:2px 0 14px}
.two-col{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.two-col>*{min-width:0}

/* ---- Gráficas SVG (charts.py) ---- */
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.chart-svg .grid{stroke:var(--line);stroke-width:1}
.chart-svg .axis{fill:var(--ink-3);font-size:10px;font-family:var(--mono)}
.chart-svg .area{fill:var(--accent);opacity:.1}
.chart-svg .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-svg .dash{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:4 3}
.chart-svg .dot{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.chart-svg .dot-partial{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.5}
.chart-svg .pt-lbl{fill:var(--ink);font-size:10.5px;font-weight:600;font-family:var(--mono)}
.chart-svg .bar{fill:var(--cat-1)} .chart-svg .bar-cost{fill:var(--cat-2)}
.chart-svg .bar-zero{fill:var(--line-2)}
.chart-svg rect:hover,.spark rect:hover{opacity:.8}

/* ---- Barras horizontales ---- */
.bars{display:flex;flex-direction:column;gap:11px}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px}
.bar-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-amt{font-size:12.5px;font-weight:600;font-family:var(--mono);font-variant-numeric:tabular-nums}
.track{grid-column:1/3;height:6px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.fill{height:100%;background:var(--accent);border-radius:2px}

/* ---- Lista por servicio ---- */
.svc-list{display:flex;flex-direction:column}
.svc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line)}
.svc-row:last-child{border-bottom:none}
.swatch{width:10px;height:10px;border-radius:2px;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .1)}
.svc-name{font-size:14px;min-width:0;overflow-wrap:anywhere}
.svc-name small{color:var(--ink-3);margin-left:4px;font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
.svc-val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}

/* ---- Filtros / segmentados ---- */
.filters{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:2px;gap:2px;max-width:100%}
.seg a{font-size:13.5px;color:var(--ink-2);padding:5px 12px;border-radius:var(--r-sm);white-space:nowrap}
.seg a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.seg a.on{background:var(--accent);color:#fff;font-weight:700}
.seg a em{font-style:normal;font:500 11px var(--mono);color:var(--ink-3);margin-left:4px;font-variant-numeric:tabular-nums}
.seg a.on em{color:rgb(255 255 255 / .85)}

/* ---- Controles de formulario (estilo común) ---- */
select,textarea,
input:not([type]),input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=password],input[type=search],input[type=url],input[type=date],input[type=time]{
  font-family:var(--sans);font-size:14px;line-height:1.3;padding:7px 10px;min-height:34px;
  border:1px solid var(--field);border-radius:var(--r);background:var(--surface);color:var(--ink);max-width:100%}
select{padding-right:28px}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
::placeholder{color:var(--ink-3);opacity:1}

/* ---- Tablas ---- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);max-width:100%}
table.findings{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);min-width:680px}
table.findings th{text-align:left;font:600 10.5px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  padding:9px 12px;border-bottom:1px solid var(--line-2);background:var(--surface-2);white-space:nowrap}
table.findings td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.findings tr:last-child td{border-bottom:none}
table.findings tbody tr{cursor:pointer;transition:background-color .1s}
table.findings tbody tr:hover{background:var(--accent-soft)}
table.findings .r{text-align:right}
table.findings .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px;white-space:nowrap}
table.findings .save{color:var(--good-ink)}
table.findings.static tbody tr{cursor:default}
table.findings.static tbody tr:hover{background:transparent}
table.findings th.c,table.findings td.c{text-align:center}
.tbl-wrap.flat{box-shadow:none}
.dim{color:var(--ink-2)} .dim small{display:block;color:var(--ink-3);font-size:12.5px}
.empty{text-align:center;color:var(--ink-3);padding:28px}

/* ---- Insignias: severidad y estado ---- */
.sev,.st,.vd,.uc-badge,.contract,.chan,.akind,.rmode,.mtype,.notif-chip,.verified,.you,.src-cache,.src-gen{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;line-height:1.5;
  padding:0 7px;border-radius:var(--r-sm);white-space:nowrap;vertical-align:middle}
.sev::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.sev-high{background:var(--crit-soft);color:var(--crit-ink)}
.sev-high::before{background:var(--crit)}
.sev-medium{background:var(--warn-soft);color:var(--warn-ink)}
.sev-medium::before{background:var(--warn)}
.sev-low{background:var(--surface-2);color:var(--ink-2)}
.sev-low::before{background:var(--ink-3)}
.st{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.st-asignado{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-tint)}
.st-en_progreso{background:var(--warn-soft);color:var(--warn-ink);border-color:transparent}
.st-remediado{background:var(--lav-soft);color:var(--lav-ink);border-color:transparent}
.st-verificado,.st-cerrado{background:var(--good-soft);color:var(--good-ink);border-color:transparent}
.st-descartado{background:transparent;color:var(--ink-3);border-color:var(--line-2)}
.st-nuevo{background:var(--surface);color:var(--accent-2);border-color:var(--accent-tint)}
.st-pospuesto{background:var(--sand-soft);color:var(--sand-ink);border-color:transparent}

/* ---- Detalle de finding ---- */
.save-box{text-align:right}
.save-big{font:600 24px/1.15 var(--display);color:var(--good-ink);font-variant-numeric:tabular-nums}
.save-big small{font:400 13px var(--sans);color:var(--ink-3);margin-left:2px}
.save-sub{font-size:13px;color:var(--ink-3);margin-top:2px}
.strategy{font-size:14.5px;color:var(--ink-2);margin:0}
ol.steps{margin:0;padding-left:22px;font-size:14.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:5px}
ol.steps li::marker{font:600 12px var(--mono);color:var(--accent-2)}
pre.cmd{background:var(--code-bg);border:1px solid var(--code-bg);border-radius:var(--r);padding:12px 14px;overflow-x:auto;margin:0;max-width:100%}
pre.cmd code{font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--code-ink);background:none;border:0;padding:0}
.pb-meta{display:flex;gap:24px;margin-top:16px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.pb-meta .lbl{display:block;font:700 10px/1.3 var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-bottom:3px}
.ai-note{font-size:13px;color:var(--ink-3);margin:16px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ai-btn{font-size:12.5px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-3);
  border-radius:var(--r);padding:5px 11px;cursor:not-allowed}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.timeline li{font-size:14px;color:var(--ink-2);padding-left:12px;border-left:2px solid var(--line-2)}
.timeline small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px;font-family:var(--mono)}
.tl-kind{font:600 10.5px/1.5 var(--mono);background:var(--surface-2);border:1px solid var(--line);padding:0 5px;
  border-radius:var(--r-sm);color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.col-side .card{padding:16px 16px}
.col-side select{width:100%}
.col-side .btn{width:100%;margin-top:9px}
.hint{font-size:13px;color:var(--ink-3);margin:9px 0 0}
.facts{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.facts>div{display:flex;justify-content:space-between;gap:10px;align-items:center;min-width:0}
.facts span{color:var(--ink-3);flex-shrink:0}
.facts code{font-size:11.5px}

/* ---- Botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:600 12.5px/1.25 var(--display);letter-spacing:.01em;text-align:center;text-decoration:none;
  min-height:34px;padding:7px 14px;border-radius:var(--r);border:1px solid var(--field);
  background:var(--surface);color:var(--ink);cursor:pointer;width:auto;margin:0;
  transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3);text-decoration:none}
.btn.primary{background:var(--tm-blue);border-color:var(--tm-blue);color:#fff}
.btn.primary:hover{background:var(--tm-blue-600);border-color:var(--tm-blue-600)}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--field)}
.btn.sm{font-size:11.5px;min-height:29px;padding:5px 11px}
.btn.full{width:100%;display:flex}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--surface)}
.btn.primary:disabled:hover{background:var(--tm-blue)}
.link-danger{background:none;border:none;color:var(--crit-ink);font-size:13.5px;cursor:pointer;font-family:var(--sans);padding:0}
.link-danger:hover{text-decoration:underline}

/* ---- Wizard de instalación ---- */
.demo-pill{display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:var(--warn-ink);background:var(--warn-soft);
  border-radius:var(--r-sm);padding:1px 9px;margin-right:8px}
.reset-link{font-size:13px;color:var(--ink-2)}
.stepper{list-style:none;display:flex;gap:8px;margin:0 0 20px;padding:0;flex-wrap:wrap}
.wstep{flex:1;min-width:140px;display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
/* cuadros numerados de la marca ("01", "02"…) */
.wstep-mk{width:26px;height:26px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  font:700 12px/1 var(--display);flex-shrink:0;font-variant-numeric:tabular-nums;
  background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line-2)}
.wstep-lbl{min-width:0}
.wstep-lbl b{display:block;font:600 12.5px/1.3 var(--display);color:var(--title)}
.wstep-lbl small{display:block;font-size:12px;color:var(--ink-3)}
.wstep.cur{border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.wstep.cur .wstep-mk{background:var(--accent);color:#fff;border-color:var(--accent)}
.wstep.done .wstep-mk{background:var(--good);color:#fff;border-color:var(--good)}
.wstep.todo{opacity:.7}
.wizard-card{max-width:780px}
.callout-box{border:1px solid var(--accent-tint);border-left:3px solid var(--accent);border-radius:var(--r);
  padding:11px 15px;font-size:14px;line-height:1.55;margin:14px 0 18px;background:var(--accent-soft);color:var(--ink)}
.callout-box.good{border-color:var(--good-soft);border-left-color:var(--good);background:var(--good-soft)}
.callout-box.err{border-color:var(--crit-soft);border-left-color:var(--crit);background:var(--crit-soft)}
.callout-box.info{border-left-color:var(--accent);background:var(--accent-soft)}
.wform{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font:600 12px/1.3 var(--display);color:var(--ink-2)}
.field label .opt{font:400 12.5px var(--sans);color:var(--ink-3)}
.field input,.field select{width:100%;min-height:36px}
.field .fh{font-size:12.5px;color:var(--ink-3)}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.grid-2>*{min-width:0}
.toggle{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);cursor:pointer}
.toggle input{width:16px;height:16px}
.wform-actions{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.wform-actions.between{justify-content:space-between}
.checks{display:flex;flex-direction:column;gap:7px;margin:4px 0}
.chk{display:flex;align-items:center;gap:10px;font-size:14px}
.chk .ci,.role .ci{width:18px;height:18px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.chk.pass .ci{background:var(--good)} .chk.fail .ci{background:var(--crit)} .chk.wait .ci{background:var(--ink-3)}

/* suscripciones + roles */
.subs{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.sub-card{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;background:var(--surface)}
.sub-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.sub-head b{font-size:14.5px}
.sub-head small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;font-family:var(--mono);overflow-wrap:anywhere}
.contract{font:700 10.5px/1.6 var(--mono);background:var(--surface-2);color:var(--ink-2);text-transform:uppercase}
.contract.c-ea{background:var(--lav-soft);color:var(--lav-ink)}
.contract.c-csp{background:var(--accent-soft);color:var(--accent-2)}
.role-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px 14px}
.role{display:flex;align-items:center;gap:9px;font-size:13.5px;min-width:0}
.role .ci{width:17px;height:17px;font-size:10px}
.role.ok .ci{background:var(--good)} .role.bad .ci{background:var(--crit)}
.role.warnrole .ci{background:var(--warn);color:var(--tm-dark)}
.role em{font-style:normal;color:var(--ink-3);font-size:11.5px}
.role.bad .rn{color:var(--crit-ink)}
.fixcmd{grid-column:1/3;overflow-x:auto;background:var(--code-bg);border-radius:var(--r);padding:7px 10px}
.fixcmd code{font-family:var(--mono);font-size:11.5px;color:var(--code-ink);white-space:nowrap;background:none;border:0;padding:0}
.warn-list{display:flex;flex-direction:column;gap:6px;margin:8px 0 16px}
.warn-item{font-size:13px;color:var(--warn-ink);background:var(--warn-soft);border-left:3px solid var(--warn);
  border-radius:var(--r);padding:7px 12px}

/* alcance */
.scope-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.scope-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r);
  padding:11px 14px;cursor:pointer;background:var(--surface)}
.scope-item:hover{border-color:var(--line-2)}
.scope-item input{width:17px;height:17px}
.scope-info{flex:1;min-width:0}
.scope-info b{font-size:14.5px} .scope-info small{display:block;font-size:12px;color:var(--ink-3);font-family:var(--mono);overflow-wrap:anywhere}

/* listo */
.done-wrap{max-width:580px;margin:40px auto;text-align:center}
.done-badge{width:56px;height:56px;border-radius:var(--r-lg);background:var(--good);color:#fff;font-size:28px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.done-sub{color:var(--ink-2);font-size:15px;margin-top:8px}
.done-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:26px 0;text-align:left}
.done-fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
.done-fact span{display:block;font:700 10px/1.3 var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-bottom:5px}
.done-fact code{font-size:12px;word-break:break-all}
.done-fact b{font-size:15px}
.done-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---- Acceso (login / solicitud) ---- */
body.auth-body{display:block;min-height:100vh;background:var(--bg)}
.auth-shell{min-height:100vh;min-height:100dvh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 16px;background:var(--bg)}
.auth-shell>*{width:100%;max-width:420px}
.auth-brand{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.auth-product{display:flex;align-items:center;gap:10px;min-width:0}
.auth-brand b{display:block;font:700 16px/1.2 var(--display);color:var(--title)}
.auth-brand small{display:block;font-size:12.5px;color:var(--ink-3)}
/* logo T&M con área de protección (alto/2) */
.auth-brand img,.auth-tm{display:block;height:36px;width:auto;flex-shrink:0}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:28px 28px 24px;max-width:420px;width:100%}
.auth-card .auth-brand{padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.auth-card.center{text-align:center}
.auth-card h1{font-size:20px;margin:0 0 6px}
.auth-sub{font-size:14px;color:var(--ink-2);margin:0 0 20px}
.auth-card .wform{gap:14px;margin-top:0}
.auth-card .btn{width:100%;min-height:38px}
.auth-card .btn-microsoft+.wform,.auth-card .auth-note+.wform{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.auth-alt{font-size:13.5px;color:var(--ink-2);margin:18px 0 0;text-align:center}
.auth-hint{font-size:12.5px;color:var(--ink-3);margin:16px 0 0;text-align:center;border-top:1px solid var(--line);padding-top:12px}
.auth-note{font-size:13px;line-height:1.5;color:var(--ink-3);margin:12px 0 0}
.auth-foot{font-size:12px;color:var(--ink-3);text-align:center;margin:18px 0 0;letter-spacing:.01em}
.code-input{font-family:var(--mono)!important;font-size:20px!important;letter-spacing:.4em;text-align:center}
.done-badge.sm{width:48px;height:48px;font-size:24px;margin:0 auto 14px}
/* Botón "Iniciar sesión con Microsoft" — lineamientos de marca de Microsoft (tema claro / oscuro) */
.btn-microsoft{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:41px;padding:0 12px;
  background:#fff;border:1px solid #8c8c8c;border-radius:0;color:#5e5e5e;
  font:600 15px/1 'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;text-decoration:none;cursor:pointer;
  transition:background-color .12s}
.btn-microsoft:hover{background:#f3f3f3;text-decoration:none}
.btn-microsoft:active{background:#e6e6e6}
.btn-microsoft svg{width:21px;height:21px;flex-shrink:0}
@media (prefers-color-scheme:dark){
  .btn-microsoft{background:#2f2f2f;border-color:#2f2f2f;color:#fff}
  .btn-microsoft:hover{background:#3a3a3a}
}

/* ---- Administración de usuarios ---- */
.user-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.user-form input{flex:1;min-width:140px}
.inline-form{display:inline}
.inline-form select{font-size:13.5px;min-height:30px;padding:4px 26px 4px 8px}
.you{background:var(--accent-soft);color:var(--accent-2);margin-left:5px;font-size:11px}

/* solicitudes */
.req-list{display:flex;flex-direction:column;gap:10px}
.req-card{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;flex-wrap:wrap}
.req-card.approved{opacity:.72} .req-card.rejected{opacity:.6}
.req-main{min-width:0}
.req-id b{font-size:15px}
.verified{color:var(--good-ink);background:var(--good-soft);margin-left:8px;font-size:11px}
.req-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2);margin-top:5px}
.req-meta .dimmer{color:var(--ink-3)}
.req-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}

/* notificaciones */
.chan{font:700 10.5px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.chan-email{background:var(--accent-soft);color:var(--accent-2)}
.chan-sms,.chan-whatsapp{background:var(--good-soft);color:var(--good-ink)}

/* ---- ETL / ingesta ---- */
.etl-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.jobs{display:flex;flex-direction:column;gap:12px}
.job{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--surface);min-width:0}
.job-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.job-name{min-width:0}
.job-name b{font-size:14.5px} .job-name small{color:var(--ink-3);margin-left:7px;font-size:12px;font-family:var(--mono)}
.job-bar{height:6px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.job-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s}
.job-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3);margin-top:8px;font-family:var(--mono)}
.job-meta .thr{color:var(--warn-ink)} .job-meta .ckpt{color:var(--accent-2)}
.etl-log{list-style:none;margin:0;padding:6px 10px;display:flex;flex-direction:column;gap:0;
  max-height:340px;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.ev{display:flex;gap:10px;align-items:baseline;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--line);min-width:0}
.ev:last-child{border-bottom:none}
.ev-kind{font:700 10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.04em;
  padding:0 6px;border-radius:var(--r-sm);flex-shrink:0;background:var(--surface-2);color:var(--ink-3);min-width:64px;text-align:center}
.ev-block .ev-kind{background:var(--accent-soft);color:var(--accent-2)}
.ev-throttle .ev-kind{background:var(--warn-soft);color:var(--warn-ink)}
.ev-done .ev-kind{background:var(--good-soft);color:var(--good-ink)}
.ev-start .ev-kind{background:var(--surface-2);color:var(--ink-2)}
.ev-error .ev-kind{background:var(--crit-soft);color:var(--crit-ink)}
.ev-msg{color:var(--ink-2);font-family:var(--mono);font-size:11.5px;min-width:0;overflow-wrap:anywhere}
.ev-throttle .ev-msg{color:var(--warn-ink)}

/* ---- IA / enriquecimiento ---- */
.mode-opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;margin-bottom:10px;cursor:pointer;background:var(--surface)}
.mode-opt:hover{border-color:var(--line-2)}
.mode-opt.sel{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);background:var(--accent-soft)}
.mode-opt input{margin-top:3px;width:16px;height:16px;flex-shrink:0}
.mode-opt b{font-size:14.5px;display:block}
.mode-opt small{font-size:13px;color:var(--ink-2);display:block;margin-top:3px;line-height:1.45}
.byo-fields{display:flex;flex-direction:column;gap:12px;margin:6px 0 14px}
.quota-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.quota-form input{width:96px;font-family:var(--mono);font-size:13px}
.quota-bar{height:8px;background:var(--surface-2);border-radius:2px;overflow:hidden;margin-top:14px}
.quota-fill{height:100%;background:var(--accent);border-radius:2px}
.src-cache{color:var(--good-ink);background:var(--good-soft);font-size:11.5px}
.src-gen{color:var(--warn-ink);background:var(--warn-soft);font-size:11.5px}
.ai-block{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.ai-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ai-head b{font-size:14.5px}
.tier-tag{font:700 10px/1.5 var(--mono);background:var(--lav-soft);color:var(--lav-ink);padding:0 5px;border-radius:var(--r-sm);vertical-align:middle}
.ai-badge{font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.ai-text{font-size:14px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--tm-lavender);
  border-radius:var(--r);padding:12px 15px;white-space:pre-wrap;line-height:1.6;overflow-wrap:anywhere}
.ai-foot{font-size:12.5px;color:var(--ink-3);margin:9px 0 0}
.ai-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ai-hint{font-size:12.5px;color:var(--ink-3)}

/* ---- Gobernanza de etiquetas ---- */
.sec-divider{font:700 10.5px/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin:26px 0 14px;display:flex;align-items:center;gap:12px}
.sec-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.recs{display:flex;flex-direction:column;gap:10px}
.rec-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 18px;position:relative;overflow:hidden;min-width:0}
.rec-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.rec-card.sev-border-high::before{background:var(--crit)}
.rec-card.sev-border-medium::before{background:var(--warn)}
.rec-card.sev-border-low::before{background:var(--ink-3)}
.rec-body h3{font-size:14.5px;margin:7px 0 5px;font-weight:600}
.rec-body p{font-size:14px;color:var(--ink-2);margin:0 0 10px}
pre.cmd.sm{padding:8px 12px}
pre.cmd.sm code{font-size:11.5px}
.tag-miss{font:600 11px/1.6 var(--mono);background:var(--crit-soft);color:var(--crit-ink);
  padding:0 6px;border-radius:var(--r-sm);margin-right:4px;display:inline-block;margin-bottom:2px}
code.fix{font-size:11px;color:var(--ink-3);white-space:nowrap}
.tag-policy{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.tagchk{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:var(--r);
  padding:6px 11px;cursor:pointer;font-size:13.5px;background:var(--surface)}
.tagchk.on{border-color:var(--accent);background:var(--accent-soft)}
.tagchk input{width:15px;height:15px}
.tagchk code{font-family:var(--mono);font-size:12px;background:none;border:0;padding:0}

/* ---- Reportes ---- */
.report-preview{padding:0;overflow:hidden}
.rep-band{background:var(--tm-blue-600);color:#fff;padding:15px 22px}
.rep-band b{font:600 15px/1.3 var(--display)} .rep-band small{display:block;font-size:13px;opacity:.9;margin-top:2px}
.rep-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.rep-kpis>div{background:var(--surface);padding:13px 18px;min-width:0}
.rep-kpis span{font:600 10px/1.3 var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);display:block;margin-bottom:6px}
.rep-kpis b{font:600 19px/1.2 var(--display);font-variant-numeric:tabular-nums;color:var(--title)}
.rep-kpis b.pos{color:var(--good-ink)}
.report-preview .two-col{padding:0 22px}
.rep-h{font:700 10.5px/1.3 var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2);
  margin:20px 0 8px;padding:0 22px}
.report-preview .two-col .rep-h{padding:0}
.rep-list{display:flex;flex-direction:column}
.rep-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.rep-row:last-child{border-bottom:none}
.rep-row small{color:var(--ink-3)} .rep-row b{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.rep-row b.pos{color:var(--good-ink)}
.rep-gov{display:flex;gap:28px;padding:0 22px 20px;flex-wrap:wrap}
.rep-gov>div span{font-size:12px;color:var(--ink-3);display:block}
.rep-gov>div b{font:600 16px/1.3 var(--display);font-variant-numeric:tabular-nums}
.digest-prev{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink);white-space:pre-wrap;line-height:1.55;max-height:320px;overflow:auto;margin:0}

/* ---- Etiquetas virtuales / asignación ---- */
.dim-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.dim-tabs a{font:600 12.5px/1.3 var(--display);padding:7px 13px;border-radius:var(--r);border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2)}
.dim-tabs a:hover{border-color:var(--field);color:var(--ink);text-decoration:none}
.dim-tabs a.on{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.mini-form,.rule-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.rule-form{margin-bottom:14px}
.mini-form input,.mini-form select,.rule-form select,.rule-form input{font-size:13.5px}
.mini-form .grow,.rule-form .grow{flex:1;min-width:120px}
.arrow{color:var(--ink-3);font-weight:700}
.map-list{display:flex;flex-direction:column;gap:2px}
.map-row{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:6px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.map-row:last-child{border-bottom:none}
.map-row code{font-size:11.5px}
.map-row b{color:var(--accent-2)}
.mtype{font:700 10px/1.6 var(--mono);text-transform:uppercase;background:var(--surface-2);color:var(--ink-3);letter-spacing:.04em}
.none{font-size:13px;color:var(--ink-3);margin:4px 0 0}
.rule-list{display:flex;flex-direction:column;gap:6px}
.rule-item{display:flex;align-items:center;gap:10px;font-size:14px;padding:8px 12px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.rmode{font-size:11px}
.rmode-manual{background:var(--accent-soft);color:var(--accent-2)}
.rmode-equal{background:var(--good-soft);color:var(--good-ink)}
.rmode-proportional{background:var(--warn-soft);color:var(--warn-ink)}
.rsplit{color:var(--ink-2);font-family:var(--mono);font-size:11.5px}

/* origen de datos del dashboard */
.src-badge{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink-3)}
.src-badge.on{background:var(--good-soft);border-color:transparent;color:var(--good-ink)}

/* ---- Alertas / presupuestos ---- */
.alert-stack{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.alert-card{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--surface);flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;position:relative;overflow:hidden}
.alert-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.alert-card.sev-border-high::before{background:var(--crit)}
.alert-card.sev-border-medium::before{background:var(--warn)}
.alert-card.sev-border-low::before{background:var(--ink-3)}
.alert-body{min-width:0;flex:1}
.alert-top{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.alert-body h3{font-size:14.5px;margin:0 0 4px;font-weight:600}
.alert-body p{font-size:14px;color:var(--ink-2);margin:0}
.akind{font:700 10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.akind-budget{background:var(--accent-soft);color:var(--accent-2)}
.akind-anomaly{background:var(--warn-soft);color:var(--warn-ink)}
.notif-chip{color:var(--good-ink);background:var(--good-soft);font-size:11px}
.budget-list{display:flex;flex-direction:column;gap:14px}
.budget-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.budget-top b{font-size:14.5px} .budget-top small{color:var(--ink-3);font-size:12px;margin-left:5px}
.budget-nums{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.budget-nums b{color:var(--ink)} .budget-nums b.near{color:var(--warn-ink)} .budget-nums b.over{color:var(--crit-ink)}
.budget-bar{height:8px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.budget-fill{height:100%;background:var(--good);border-radius:2px}
.budget-fill.near{background:var(--warn)} .budget-fill.over{background:var(--crit)}
.budget-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);margin-top:6px;font-family:var(--mono)}
.chan-row{display:flex;gap:16px;font-size:13.5px;color:var(--ink-2);flex-wrap:wrap}
.chan-row label{display:flex;align-items:center;gap:6px;cursor:pointer}

/* ---- Uso real de recursos (/usage) ---- */
.vd{background:var(--surface-2);color:var(--ink-2)}
.vd-orphan,.vd-error{background:var(--crit-soft);color:var(--crit-ink)}
.vd-idle{background:var(--warn-soft);color:var(--warn-ink)}
.vd-stopped{background:var(--lav-soft);color:var(--lav-ink)}
.vd-low{background:var(--accent-soft);color:var(--accent-2)}
.vd-active{background:var(--good-soft);color:var(--good-ink)}
.vd-tune{background:var(--sand-soft);color:var(--sand-ink)}
.cf{font-size:12px;font-weight:700;color:var(--ink-3)}
.cf-high{color:var(--good-ink)} .cf-medium{color:var(--warn-ink)} .cf-low{color:var(--crit-ink)}
.ck{display:inline-flex;width:20px;height:20px;border-radius:var(--r-sm);align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.ck.ok{background:var(--good)} .ck.bad{background:var(--crit)} .ck.na{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.mono-s{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);font-weight:400;word-break:normal;overflow-wrap:anywhere}
.err-s{display:block;font-size:12px;color:var(--crit-ink);margin-top:3px}
.fix-s{display:block;margin-top:3px}
.fix-s code{font-size:11px;color:var(--ink-2);white-space:nowrap}
.unit{display:block;font-family:var(--sans);font-size:11px;font-weight:400;color:var(--ink-3);letter-spacing:0}
td .rn{font-size:14px;color:var(--ink)}
.mt{font-family:var(--mono);font-size:11.5px;background:var(--surface-2);border:1px solid var(--line);padding:0 5px;border-radius:var(--r-sm)}
.spark{width:92px;height:26px;display:block}
.spark-line{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round}
.spark-area{fill:var(--accent);opacity:.12}
.spark-zero{stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:3 3}
.spark-bar{fill:var(--accent)} .spark-bar0{fill:var(--line-2)}
.crit{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:7px}
.crit b{color:var(--ink)}
.split-bar{display:flex;gap:2px;height:14px;border-radius:2px;overflow:hidden;background:var(--surface-2);margin:6px 0 10px}
.split-seg{height:100%}
.seg-read{background:var(--cat-1)} .seg-write{background:var(--cat-2)} .seg-list{background:var(--cat-3)}
.seg-delete{background:var(--crit)} .seg-other{background:var(--cat-4)}
.split-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.rid{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);word-break:break-all;margin-top:6px}
.rise{color:var(--crit-ink);font-size:10px;font-weight:700;margin-left:2px;cursor:help}
.uc-badge{background:var(--surface-2);color:var(--ink-2);margin-left:6px;font-size:11.5px}
.uc-b-confirmado{background:var(--good-soft);color:var(--good-ink)}
.uc-b-refutado{background:var(--crit-soft);color:var(--crit-ink)}
.uc-b-obsoleto,.uc-b-ya_aplicado{background:var(--warn-soft);color:var(--warn-ink)}
.uc-b-otro_motivo{background:var(--accent-soft);color:var(--accent-2)}
.usage-check{border-left:3px solid var(--line-2)}
.usage-check.uc-confirmado{border-left-color:var(--good)} .usage-check.uc-refutado{border-left-color:var(--crit)}
.usage-check.uc-obsoleto,.usage-check.uc-ya_aplicado{border-left-color:var(--warn)}
.usage-check.uc-otro_motivo{border-left-color:var(--accent)}
td .vd{white-space:nowrap} td:has(>.vd){white-space:nowrap}
table.findings.static td small.err-s,table.findings.static td small.fix-s{white-space:normal;word-break:break-word;max-width:340px}
table.findings.static td small.fix-s code{white-space:normal;word-break:break-all}
table.findings.static td:first-child{min-width:200px}
.changes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--ink-2)}

/* ---- Responsivo ---- */
@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rep-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  body{grid-template-columns:minmax(0,1fr)}
  /* la barra lateral pasa a encabezado: marca + usuario arriba, navegación en una franja desplazable */
  .side{position:sticky;top:0;z-index:20;height:auto;overflow:visible;flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:8px 12px;padding:10px 16px 0;border-right:none;border-bottom:1px solid var(--line)}
  .brand{border-bottom:none;padding:0;flex:1;min-width:0}
  .brand small{display:none}
  .side nav{order:3;flex:0 0 100%;flex-direction:row;overflow-x:auto;gap:2px;margin:0 -16px;padding:0 16px 8px;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .side nav a{white-space:nowrap;padding:6px 10px;font-size:14px}
  .side nav a.active{box-shadow:inset 0 -2px 0 var(--accent)}
  .nav-sep{display:none}
  .side-foot{margin:0;padding:0;border-top:none;flex-direction:row;align-items:center;gap:10px}
  .user-info,.tenant-chip,.endorse{display:none}
  .user-av{width:28px;height:28px;font-size:12px}
  .side-foot .btn.full{width:auto;margin:0}
  .main{padding:18px 16px 48px}
  .two-col{grid-template-columns:minmax(0,1fr)}
  .page-head{align-items:flex-start}
  .save-box{text-align:left}
}
@media (max-width:560px){
  body{font-size:15px}
  .kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .kpi{padding:11px 12px}
  .kpi-val{font-size:20px}
  .grid-2,.role-grid,.done-grid{grid-template-columns:minmax(0,1fr)}
  .fixcmd{grid-column:1}
  .stepper{flex-direction:column}
  .wstep{min-width:0}
  .card{padding:15px 14px}
  h1{font-size:20px}
  .user-form input,.mini-form input,.rule-form input{min-width:0!important;flex:1 1 100%}
  .user-form select,.mini-form select,.rule-form select{flex:1 1 auto}
  .rep-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .report-preview .two-col{padding:0 14px}
  .rep-h{padding:0 14px}
  .rep-gov{padding:0 14px 16px}
  .auth-card{padding:22px 18px 20px}
  /* el SVG se escala al ancho: sube el cuerpo del texto para que siga legible (~7–8 px reales) */
  .chart-svg .axis,.chart-svg .pt-lbl{font-size:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}