/* ============================================================
   SAND Design Tokens — Layer 1: Primitives (Brand Policy 2026)
   ============================================================ */
:root{
  --sand-orange:#FFA71A; --sand-black:#1A1A1A; --sand-navy:#102540; --sand-blue:#004F96;
  --gray-900:#111827; --gray-700:#374151; --gray-500:#6B7280; --gray-300:#D1D5DB;
  --gray-200:#E5E7EB; --gray-100:#F3F4F6; --gray-50:#F9FAFB;
  --bg-warm:#FAF9F7; --bg-dark:#0F1923;

  /* Data palette — CVD-safe, use in order */
  --data-1:#FFA71A; --data-2:#2C5F8A; --data-3:#6B8F9E; --data-4:#5C6B7A; --data-5:#6B6B6B; --data-6:#9E8A78;

  /* Functional status (extensión: no definida en Brand Policy 2026, ver notas) */
  --status-ok:#1E7A4B;   --status-ok-bg:#E7F4ED;
  --status-warn:#8A5300; --status-warn-bg:#FDF3E2;   /* v8 · 5.8:1 sobre su fondo (antes 3.9:1) */
  --status-bad:#A62B1F;  --status-bad-bg:#FBEBE9;
  --status-info:#004F96; --status-info-bg:#E8F0F8;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem;
}
/* Layer 2 — Semantic */
:root{
  --color-background:var(--gray-50);
  --color-surface:#fff;
  --color-surface-warm:var(--bg-warm);
  --color-foreground:var(--gray-900);
  --color-foreground-muted:var(--gray-500);
  --color-primary:var(--sand-orange);
  --color-primary-hover:#E5960F;
  --color-secondary:var(--sand-blue);
  --color-secondary-hover:#2C5F8A;
  --color-corporate:var(--sand-navy);
  --color-border:var(--gray-200);
  --font-display:'Aptos Display','Aptos','Calibri','Segoe UI',sans-serif;
  --font-body:'Aptos','Calibri','Segoe UI','Inter',system-ui,sans-serif;
  --font-mono:'Cascadia Mono','Consolas',ui-monospace,monospace;
  --text-h1:2.5rem; --text-h2:1.625rem; --text-body:1rem; --text-caption:.625rem;
}
/* Layer 3 — Components */
:root{
  --btn-bg:var(--color-primary); --btn-bg-hover:var(--color-primary-hover);
  --btn-text:var(--sand-black); --btn-radius:4px;
  --card-bg:var(--color-surface); --card-border:var(--color-border);
  --card-radius:8px; --card-padding:var(--space-6);
  --header-h:56px; --subheader-h:44px; --sidebar-w:236px;
  --shadow-1:0 1px 2px rgba(16,37,64,.06),0 1px 3px rgba(16,37,64,.10);
  --shadow-2:0 4px 12px rgba(16,37,64,.10),0 2px 4px rgba(16,37,64,.06);
  --shadow-3:0 12px 32px rgba(16,37,64,.18);
}

*{box-sizing:border-box}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
html,body{height:100%}
body{
  margin:0; font-family:var(--font-body); font-size:14px; line-height:1.5;
  color:var(--color-foreground); background:var(--color-background);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; font-weight:700; letter-spacing:-.01em}
a{color:var(--color-secondary)}
button{font-family:inherit; font-size:inherit}
:focus-visible{outline:2px solid var(--color-secondary); outline-offset:2px; border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================ HEADER ============================ */
.hdr{
  height:var(--header-h); background:var(--color-corporate); color:#fff;
  display:flex; align-items:center; gap:var(--space-4); padding:0 var(--space-4);
  position:sticky; top:0; z-index:60;
}
.hdr__logo{height:26px; width:auto; display:block}
.hdr__divider{width:1px;height:24px;background:rgba(255,255,255,.22)}
.hdr__app{font-family:var(--font-display); font-size:15px; font-weight:700; white-space:nowrap}
.hdr__app small{display:block; font-family:var(--font-body); font-weight:400; font-size:11px; color:rgba(255,255,255,.72); letter-spacing:.02em}
.hdr__spacer{flex:1}

/* Azure-style tenant switcher */
.tenant{position:relative}
.tenant__btn{
  display:flex; align-items:center; gap:10px; height:36px; padding:0 10px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.20);
  color:#fff; border-radius:var(--btn-radius); cursor:pointer; max-width:320px;
}
.tenant__btn:hover{background:rgba(255,255,255,.16)}
.tenant__btn[aria-expanded="true"]{background:rgba(255,255,255,.18); border-color:var(--color-primary)}
.tenant__avatar{
  width:22px;height:22px;border-radius:3px;flex:0 0 auto;display:grid;place-items:center;
  font-size:10px;font-weight:700;color:var(--sand-black);background:var(--color-primary);
  font-family:var(--font-display); letter-spacing:.02em;
}
.tenant__meta{text-align:left; overflow:hidden}
.tenant__name{display:block;font-size:13px;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant__role{display:block;font-size:10.5px;color:rgba(255,255,255,.70);line-height:1.15;white-space:nowrap}
.tenant__chev{opacity:.8;flex:0 0 auto}
.tenant__panel{
  position:absolute; right:0; top:calc(100% + 8px); width:400px; background:var(--color-surface);
  color:var(--color-foreground); border:1px solid var(--color-border); border-radius:var(--card-radius);
  box-shadow:var(--shadow-3); overflow:hidden; z-index:80;
}
.tenant__panel-hd{padding:var(--space-4) var(--space-4) var(--space-3);border-bottom:1px solid var(--color-border)}
.tenant__panel-hd h3{font-size:14px}
.tenant__panel-hd p{margin:2px 0 0;font-size:12px;color:var(--color-foreground-muted)}
.tenant__search{width:100%;margin-top:10px}
.tenant__list{max-height:340px;overflow:auto;padding:var(--space-2)}
.tenant__item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;
  background:none;border:0;border-radius:6px;cursor:pointer;color:inherit
}
.tenant__item:hover{background:var(--gray-100)}
.tenant__item[aria-current="true"]{background:var(--status-info-bg);box-shadow:inset 3px 0 0 var(--color-primary)}
.tenant__item .tenant__avatar{background:var(--color-corporate);color:#fff}
.tenant__item[aria-current="true"] .tenant__avatar{background:var(--color-primary);color:var(--sand-black)}
.tenant__item-name{font-weight:600;font-size:13px}
.tenant__item-sub{font-size:11.5px;color:var(--color-foreground-muted)}
.tenant__panel-ft{padding:10px var(--space-4);border-top:1px solid var(--color-border);background:var(--color-surface-warm);font-size:11.5px;color:var(--color-foreground-muted);display:flex;justify-content:space-between;align-items:center;gap:8px}

.iconbtn{
  width:36px;height:36px;display:grid;place-items:center;background:transparent;border:1px solid transparent;
  border-radius:var(--btn-radius);color:#fff;cursor:pointer;position:relative
}
.iconbtn:hover{background:rgba(255,255,255,.14)}
/* v6 · #24: conmutador «ver como cliente» activo */
.iconbtn--on{background:var(--sand-orange);color:var(--sand-navy)}
.iconbtn--on:hover{background:var(--sand-orange);filter:brightness(1.06)}
.iconbtn__dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--color-primary);border:1.5px solid var(--color-corporate)}
.user{display:flex;align-items:center;gap:8px;background:transparent;border:0;color:#fff;cursor:pointer;padding:4px 6px;border-radius:var(--btn-radius)}
.user:hover{background:rgba(255,255,255,.14)}
.user__av{width:28px;height:28px;border-radius:50%;background:var(--color-primary);color:var(--sand-black);display:grid;place-items:center;font-weight:700;font-size:11.5px;font-family:var(--font-display)}
.user__meta{text-align:right;line-height:1.2}
.user__name{display:block;font-size:12.5px;font-weight:600}
.user__mail{display:block;font-size:10.5px;color:rgba(255,255,255,.7)}

/* ============================ LAYOUT ============================ */
.shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:calc(100vh - var(--header-h))}
/* v7: sin min-width:0 el contenido más ancho (una cabecera de plantilla, una tabla larga)
   impedía que la columna principal encogiera y desplazaba la página entera a la derecha */
/* v9 · fusionado con la regla que estaba mas abajo: ancho y padding en un solo sitio */
.main{min-width:0;padding:var(--space-6);max-width:1560px;width:100%}
.side{
  background:var(--color-surface);border-right:1px solid var(--color-border);
  padding:var(--space-3) var(--space-2);position:sticky;top:var(--header-h);
  height:calc(100vh - var(--header-h));overflow:auto
}
.side__group{margin-bottom:var(--space-4)}
.side__label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-foreground-muted);padding:0 10px 6px;font-weight:600}
.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--gray-700);text-decoration:none;font-size:13.5px;font-weight:500;cursor:pointer;border:0;background:none;width:100%;text-align:left}
.nav:hover{background:var(--gray-100);color:var(--color-foreground)}
.nav[aria-current="page"]{background:var(--status-info-bg);color:var(--color-corporate);font-weight:600;box-shadow:inset 3px 0 0 var(--color-primary)}
.nav svg{flex:0 0 auto;opacity:.85}
.nav__badge{margin-left:auto;font-size:11px;font-weight:700;background:var(--status-bad-bg);color:var(--status-bad);border-radius:10px;padding:1px 7px}

/* ============================ PRIMITIVES ============================ */
.page-hd{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}
.page-hd h1{font-size:26px}
.page-hd p{margin:4px 0 0;color:var(--color-foreground-muted);font-size:13.5px}
.page-hd__actions{margin-left:auto;display:flex;gap:var(--space-2);flex-wrap:wrap}
.crumb{font-size:12px;color:var(--color-foreground-muted);margin-bottom:6px}
.crumb a{color:var(--color-secondary);text-decoration:none}
.crumb a:hover{text-decoration:underline}

.btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;height:34px;padding:0 14px;border-radius:var(--btn-radius);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-foreground);font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--gray-100)}
.btn--primary{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-text)}
.btn--primary:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover)}
.btn--danger{background:#b42318;border-color:#b42318;color:#fff}
.btn--danger:hover{background:#8f1c13;border-color:#8f1c13}
.btn--ghost{background:transparent;border-color:transparent;color:var(--color-secondary)}
.btn--ghost:hover{background:var(--status-info-bg)}
.btn--sm{height:28px;padding:0 10px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

input[type=text],input[type=email],input[type=search],input[type=date],input[type=number],select,textarea{
  height:34px;padding:0 10px;border:1px solid var(--gray-300);border-radius:var(--btn-radius);
  background:#fff;font-family:inherit;font-size:13px;color:var(--color-foreground);width:100%
}
textarea{height:auto;padding:8px 10px;resize:vertical;line-height:1.5}
label.fld{display:block;font-size:12px;font-weight:600;color:var(--gray-700);margin-bottom:4px}

.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);box-shadow:var(--shadow-1)}
.card__hd{padding:var(--space-4) var(--card-padding);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.card__hd h2{font-size:15px}
.card__hd .sub{font-size:12px;color:var(--color-foreground-muted)}
.card__hd .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.card__bd{padding:var(--card-padding)}
/* v7: una tabla ancha desplaza dentro de su tarjeta; nunca empuja la página entera */
.card__bd--tight{padding:0;overflow-x:auto}

.grid{display:grid;gap:var(--space-4)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--dash{grid-template-columns:2fr 1fr;align-items:start}
@media(max-width:1280px){.grid--4{grid-template-columns:repeat(2,1fr)}.grid--dash{grid-template-columns:1fr}}
@media(max-width:900px){.grid--3,.grid--2{grid-template-columns:1fr}.shell{grid-template-columns:1fr}.side{display:none}}

/* KPI cards */
.kpi{padding:var(--space-4) var(--space-6);position:relative;overflow:hidden}
.kpi__bar{position:absolute;left:0;top:0;bottom:0;width:4px}
.kpi__label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-foreground-muted);font-weight:600}
.kpi__value{font-family:var(--font-display);font-size:38px;font-weight:700;line-height:1.05;margin-top:6px;letter-spacing:-.02em}
.kpi__foot{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--color-foreground-muted);flex-wrap:wrap}
.kpi__spark{margin-top:10px}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:11px;white-space:nowrap;border:1px solid transparent}
.pill--ok{background:var(--status-ok-bg);color:var(--status-ok);border-color:#BFE3CE}
.pill--warn{background:var(--status-warn-bg);color:var(--status-warn);border-color:#F2DDB6}
.pill--bad{background:var(--status-bad-bg);color:var(--status-bad);border-color:#F2C9C4}
.pill--info{background:var(--status-info-bg);color:var(--status-info);border-color:#C7DBF0}
.pill--mute{background:var(--gray-100);color:var(--gray-700);border-color:var(--gray-200)}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}

.layer{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.layer__chip{width:10px;height:10px;border-radius:2px}

table{width:100%;border-collapse:collapse}
th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-foreground-muted);text-align:left;font-weight:700;padding:10px var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-surface-warm);white-space:nowrap}
td{padding:10px var(--space-4);border-bottom:1px solid var(--gray-100);font-size:13px;vertical-align:middle}
tbody tr:hover{background:var(--gray-50)}
tbody tr.clickable{cursor:pointer}
.t-right{text-align:right}
.mono{font-family:var(--font-mono);font-size:12px}
.muted{color:var(--color-foreground-muted)}
.trunc{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.toolbar{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-4)}
.toolbar .grow{flex:1;min-width:220px}
.toolbar select,.toolbar input{width:auto;min-width:150px}
/* v7: la casilla de una barra de filtros no debe heredar el ancho mínimo de los selects */
.toolbar .opt{align-items:center;padding:6px 10px}
.toolbar .opt input[type="checkbox"]{min-width:0;width:16px;height:16px;margin:0}
.toolbar .opt span{white-space:nowrap}
.pager{display:inline-flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap}
.pager__count{font-size:12px;color:var(--color-foreground-muted);font-variant-numeric:tabular-nums}
.pager__btn{width:30px;padding:0;justify-content:center;font-size:20px;line-height:1}
.project-stack{display:grid;gap:0}
.project-row{min-height:48px;padding:5px 0;border-bottom:1px solid var(--gray-100);align-content:center}
.project-row:last-child{border-bottom:0}
.icon-only{width:30px;padding:0;justify-content:center}

.bar{height:6px;background:var(--gray-200);border-radius:3px;overflow:hidden;min-width:64px}
.bar>i{display:block;height:100%;border-radius:3px}

.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:10px;padding:11px var(--card-padding);border-bottom:1px solid var(--gray-100)}
.feed li:last-child{border-bottom:0}
.feed__ic{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;flex:0 0 auto}
.feed__txt{display:block;font-size:13px;line-height:1.45}
.feed__time{display:block;font-size:11.5px;color:var(--color-foreground-muted);margin-top:2px}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--color-border);margin-bottom:var(--space-4);overflow:auto}
.tab{padding:9px 14px;border:0;background:none;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--color-foreground-muted);border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--color-foreground)}
.tab[aria-selected="true"]{color:var(--color-corporate);border-bottom-color:var(--color-primary)}

.kv{display:grid;grid-template-columns:170px 1fr;gap:8px var(--space-4);font-size:13px}
.kv dt{color:var(--color-foreground-muted);font-weight:600}
.kv dd{margin:0;overflow-wrap:anywhere}

.comment{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--gray-100)}
.comment__av{width:30px;height:30px;border-radius:50%;background:var(--color-corporate);color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:0 0 auto}
.comment__hd{font-size:12.5px;margin-bottom:2px}
.comment__hd b{font-weight:700}
.comment__body{font-size:13px;white-space:pre-wrap}
.mention{color:var(--color-secondary);font-weight:600;background:var(--status-info-bg);border-radius:3px;padding:0 3px}

.banner{display:flex;gap:10px;align-items:flex-start;padding:11px var(--space-4);border-radius:var(--btn-radius);font-size:13px;margin-bottom:var(--space-4);border:1px solid}
.banner--info{background:var(--status-info-bg);border-color:#C7DBF0;color:#0B3B6B}
.banner--warn{background:var(--status-warn-bg);border-color:#F2DDB6;color:#7A4A00}
.banner--bad{background:var(--status-bad-bg);border-color:#F1C6C0;color:var(--status-bad)}
.nav__badge--warn{background:var(--status-warn-bg);color:var(--status-warn)}
.nav__badge--mute{background:var(--gray-100,#eef2f5);color:var(--color-foreground-muted)}
.evi-paste{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:4px 9px;border:1px dashed var(--color-border);border-radius:6px;font-size:12px;color:var(--color-foreground-muted);cursor:text}
.evi-paste:focus,.evi-paste.is-active{outline:2px solid var(--color-primary);outline-offset:1px;color:var(--color-foreground)}
.banner--ok{background:var(--status-ok-bg);border-color:#BFE3C9;color:#14532D}

.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--color-corporate);color:#fff;padding:10px 16px;border-radius:6px;box-shadow:var(--shadow-3);font-size:13px;display:flex;align-items:center;gap:10px;animation:tin .18s ease-out}
.toast b{color:var(--color-primary)}
/* v6 · #17: aviso de error, para que un fallo de importación nunca pase inadvertido */
.toast--bad{background:var(--status-bad)}
.toast--bad b{color:#FFD9A0}
.toast span{line-height:1.45}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.modal-bg{position:fixed;inset:0;background:rgba(16,37,64,.45);z-index:150;display:grid;place-items:center;padding:var(--space-6)}
.modal{background:#fff;border-radius:var(--card-radius);box-shadow:var(--shadow-3);width:100%;max-width:720px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.modal__hd{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border);display:flex;align-items:center}
.modal__hd h2{font-size:16px}
.modal__bd{padding:var(--space-6);overflow:auto}
.modal__ft{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;gap:var(--space-2);background:var(--color-surface-warm)}

.drop{border:2px dashed var(--gray-300);border-radius:var(--card-radius);padding:var(--space-8);text-align:center;background:var(--color-surface-warm)}
.drop.over{border-color:var(--color-primary);background:#FFF8EC}

.legend{display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:12px;align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px;color:var(--gray-700);font-weight:600}
.legend i{width:14px;height:3px;border-radius:2px;display:block}

.empty{padding:var(--space-12);text-align:center;color:var(--color-foreground-muted)}
.empty h3{font-size:15px;color:var(--color-foreground);margin-bottom:6px}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:var(--space-4);align-items:start;max-width:100%}
.split>*{min-width:0}
.split--tests{grid-template-columns:minmax(0,1fr)}
@media(max-width:1100px){.split{grid-template-columns:1fr}}

.report{background:#fff;padding:var(--space-8);font-size:13px}
.report h1{font-size:22px;margin-bottom:2px}
.report h2{font-size:15px;margin:var(--space-6) 0 var(--space-2);padding-bottom:4px;border-bottom:2px solid var(--color-primary)}
.report__meta{font-size:12px;color:var(--color-foreground-muted)}

.ftr{padding:var(--space-6);text-align:center;font-size:11.5px;color:var(--color-foreground-muted)}
.ftr b{color:var(--color-secondary)}   /* v8 · naranja 1.9:1 sobre claro: se usa azul SAND (8.2:1) */

@media print{
  .hdr,.side,.page-hd__actions,.tabs,.no-print{display:none!important}
  .shell{grid-template-columns:1fr}
  .main{padding:0}
  .card{border:0;box-shadow:none}
}