/* ============ v2: login, entornos, flujo, asistentes ============ */
[hidden]{display:none!important}
/* la columna lateral pinta hasta el final de la página, no solo hasta el viewport */
.shell{background-image:linear-gradient(to right,#fff 0,#fff calc(var(--sidebar-w) - 1px),var(--color-border) calc(var(--sidebar-w) - 1px),var(--color-border) var(--sidebar-w),transparent var(--sidebar-w))}
.side{background:transparent!important;border-right:0!important}
@media(max-width:900px){.shell{background-image:none}}
.login{
  min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr;background:var(--color-corporate);
}
@media(max-width:960px){.login{grid-template-columns:1fr}.login__aside{display:none}}
.login__aside{
  padding:var(--space-12);color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(1200px 600px at 15% 10%, rgba(255,167,26,.16), transparent 60%), var(--color-corporate);
}
.login__aside img{align-self:flex-start;width:auto;max-width:170px}
.login__aside h1{font-size:34px;line-height:1.15;max-width:15ch;margin-top:var(--space-8)}
.login__aside p{color:rgba(255,255,255,.78);max-width:46ch;font-size:14.5px}
.login__points{list-style:none;padding:0;margin:var(--space-8) 0 0;display:grid;gap:12px}
.login__points li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:rgba(255,255,255,.88)}
.login__points b{color:var(--color-primary)}
.login__panel{background:var(--color-surface);display:grid;place-items:center;padding:var(--space-8)}
.login__box{width:100%;max-width:380px}
.login__box h2{font-size:22px;margin-bottom:4px}
.login__box>p{color:var(--color-foreground-muted);font-size:13.5px;margin:0 0 var(--space-6)}
.login__field{margin-bottom:var(--space-4)}
.login__sep{display:flex;align-items:center;gap:12px;margin:var(--space-6) 0;color:var(--color-foreground-muted);font-size:12px}
.login__sep::before,.login__sep::after{content:"";flex:1;height:1px;background:var(--color-border)}
.btn--block{width:100%;justify-content:center;height:40px}
.btn--sso{background:#fff;border-color:var(--gray-300)}
.login__legal{font-size:11.5px;color:var(--color-foreground-muted);margin-top:var(--space-6);text-align:center}

.picker{min-height:100vh;background:var(--color-background);padding:var(--space-12) var(--space-6)}
.picker__in{max-width:920px;margin:0 auto}
.picker__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin-top:var(--space-6)}
@media(max-width:760px){.picker__grid{grid-template-columns:1fr}}
.picker__card{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--card-radius);background:#fff;cursor:pointer;box-shadow:var(--shadow-1)}
.picker__card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-2)}
.picker__av{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;background:var(--color-corporate);color:#fff;font-family:var(--font-display);font-weight:700;font-size:14px;flex:0 0 auto}

/* Selector de entorno */
.envsw{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);border-radius:var(--btn-radius);padding:2px;height:36px}
.envsw button{
  height:28px;padding:0 11px;border:0;background:transparent;color:rgba(255,255,255,.78);
  border-radius:3px;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.03em
}
.envsw button:hover{background:rgba(255,255,255,.12);color:#fff}
.envsw button[aria-pressed="true"]{background:var(--color-primary);color:var(--sand-black)}
.envsw button[disabled]{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.env-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:1px 6px;border-radius:3px;border:1px solid}
.env-DEV{background:#EEF2F7;color:#3F5A73;border-color:#CFDBE7}
.env-TST{background:#F3F0E8;color:#7A5E1F;border-color:#E4DAC3}
.env-PRO{background:#E7F4ED;color:#1E7A4B;border-color:#BFE3CE}
.env-off{background:var(--gray-100);color:var(--gray-500);border-color:var(--gray-200);text-decoration:line-through}

/* Dominios */
.dom{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:11px;border:1px solid}
.dom--datos{background:#FFF6E8;color:#8A5A00;border-color:#F3DFBB}
.dom--analitica{background:#EDF3F6;color:#2C5F8A;border-color:#CBDDE7}
/* Origen/Source: mismo tono (--data-6) que "Origen analítico" en ANA_TYPES, para que se
   entienda como el mismo concepto de "origen" — nunca una capa (Bronze/Silver/Gold usan
   layer__chip con LAYERS.hex, nunca esta clase). */
.dom--source{background:#F2EEE9;color:#6B5A46;border-color:#DFD3C4}

/* Flujo de capas: el nodo de Source se distingue con borde discontinuo, para que
   nunca se confunda visualmente con una capa aunque comparta la misma forma de tarjeta. */
.flow__node--source{border-left-style:dashed;cursor:default}
.flow__node--source:hover{border-color:var(--color-border);box-shadow:var(--shadow-1)}

/* Flujo de capas */
.flow{position:relative;overflow:auto;padding:var(--space-4) 0}
.flow__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);position:relative;z-index:2}
.flow__col h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-foreground-muted);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.flow__node{
  display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--color-border);border-left:3px solid var(--gray-300);
  border-radius:6px;padding:9px 11px;margin-bottom:10px;cursor:pointer;box-shadow:var(--shadow-1);position:relative
}
.flow__node:hover{border-color:var(--color-secondary);box-shadow:var(--shadow-2)}
.flow__node.dim{opacity:.28}
.flow__node.hl{border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(255,167,26,.35)}
.flow__name{font-size:12.5px;font-weight:600;line-height:1.25;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flow__meta{font-size:10.5px;color:var(--color-foreground-muted);display:flex;gap:6px;align-items:center;margin-top:3px}
.flow__svg{position:absolute;inset:0;pointer-events:none;z-index:1}

/* Asistente / pasos */
.steps{display:flex;gap:6px;margin-bottom:var(--space-6)}
.step{flex:1;padding:8px 10px;border-radius:var(--btn-radius);background:var(--gray-100);font-size:12px;font-weight:600;color:var(--gray-500);border-bottom:3px solid var(--gray-200)}
.step[aria-current="true"]{background:var(--status-info-bg);color:var(--color-corporate);border-bottom-color:var(--color-primary)}
.step b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;opacity:.75}
@media(max-width:700px){.steps{display:grid;grid-template-columns:1fr;margin-bottom:var(--space-4)}.step{padding:7px 10px}.step:not([aria-current="true"]){display:none}}

.optgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:640px){.optgrid{grid-template-columns:1fr}}
.opt{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border:1px solid var(--color-border);border-radius:6px;cursor:pointer;background:#fff;font-size:12.5px}
.opt:hover{border-color:var(--color-secondary)}
.opt input{margin:2px 0 0;accent-color:var(--sand-blue)}
.opt.on{border-color:var(--color-primary);background:#FFFBF3}
.opt>span>b:first-child{display:block;font-size:13px}
.opt span{color:var(--color-foreground-muted);font-size:11.5px}

.grid--kpi{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.matrix td.cellq{text-align:center;font-weight:700;min-width:92px}
.cellbar{height:5px;border-radius:3px;background:var(--gray-200);overflow:hidden;margin-top:4px}
.cellbar>i{display:block;height:100%}

.hint{font-size:11.5px;color:var(--color-foreground-muted);margin-top:5px}
.chiplist{display:flex;gap:6px;flex-wrap:wrap}
.tplcard{display:flex;gap:12px;align-items:flex-start;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--card-radius);background:#fff}
.tplcard__ic{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;background:var(--status-info-bg);color:var(--color-secondary);flex:0 0 auto}
.tplcard h3{font-size:13.5px}
/* v7: la lista de columnas esperadas parte línea en vez de ensanchar la tarjeta */
.tplcard>div{min-width:0}
.tplcard .mono{overflow-wrap:anywhere}
.tplcard p{margin:2px 0 10px;font-size:12px;color:var(--color-foreground-muted)}
