/* SIcorp · componentes base v0.1 (referencia de estilo para el CTO). Solo usa tokens. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: 1.2; font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 600; }
h4 { font-size: var(--fs-h4); margin: 0; font-weight: 600; }
p { margin: 0; }
a { color: var(--brand-text); text-decoration: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-h);
  padding: 0 16px; border-radius: var(--r-sm); font: 600 var(--fs-sm)/1 var(--font-ui); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease); }
.btn-lg { height: var(--control-h-lg); padding: 0 22px; font-size: var(--fs-body); }
.btn-sm { height: var(--control-h-sm); padding: 0 12px; font-size: 13px; }
.btn-primary { background: var(--brand); color: var(--brand-contrast); box-shadow: var(--sh-brand); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-success { background: var(--success-600); color: #fff; }
.btn-danger-ghost { background: var(--surface); color: var(--error-600); border-color: var(--border); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Chips y estados */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--n-700); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-success { background: var(--success-50); color: var(--success-600); }
.chip-warning { background: var(--warning-50); color: var(--warning-700); }
.chip-error { background: var(--error-50); color: var(--error-600); }
.chip-brand { background: var(--brand-soft); color: var(--brand-text); }

/* Tarjetas */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.card-pad { padding: var(--sp-6); }

/* Avatares de agente: iniciales sobre tinte; el color va por rol, no por cliente */
.ag { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
  font: 700 12px/1 var(--font-display); letter-spacing: .02em; }
.ag-a  { background: var(--brand); color: var(--brand-contrast); }           /* Asistente = color de marca */
.ag-1 { background: #E3DDFF; color: #3A22B8; }  .ag-2 { background: #DDF7F0; color: #0B6253; }
.ag-3 { background: #FFE9D6; color: #8A3B00; }  .ag-4 { background: #DCEBFF; color: #134A9E; }
.ag-5 { background: #FCE1EC; color: #9B1648; }  .ag-6 { background: #E9ECF2; color: #343B4D; }
.ag-7 { background: #FFF1C2; color: #6E4E00; }  .ag-8 { background: #E2F5D8; color: #2F6512; }

/* Campos */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: var(--fs-sm); font-weight: 600; }
.input { height: var(--control-h); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 12px;
  font: 400 var(--fs-sm) var(--font-ui); background: var(--surface); color: var(--text); display: flex; align-items: center; }

/* Iconos (SVG en línea, trazo 1.75) */
.ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }


/* ---- Banners de consumo de IA (80 % · 100 % · tope) · v0.2 ----
   Textos: ../copy-app.md, secciones B y C. Sin mayúsculas ni exclamaciones; cifras en <span class="mono">.
   .banner-80   informativo, se puede cerrar (vuelve en la siguiente sesión). role="status".
   .banner-100  mismo color, más presencia (barra lateral y fijo arriba 7 días o hasta cerrar). role="status".
   .banner-tope pausa del equipo: fondo claro, borde e icono --error-600, SIN botón de cerrar. role="alert".
   Icono de warning en --warning-700: el --warning-500 sobre --warning-50 da 1,9:1 (no llega al 3:1 de WCAG 1.4.11);
   el 500 se usa solo como barra lateral decorativa del 100 %. */
.banner { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: 1px solid; border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.45; }
.banner > .ico { width: 20px; height: 20px; margin-top: 1px; }
.banner-body { flex: 1; min-width: 0; }
.banner-body b { font-weight: 600; color: var(--n-900); }
.banner-body .mono { font-weight: 600; white-space: nowrap; }
.banner-acts { display: flex; align-items: center; gap: var(--sp-4); flex: none; align-self: center; }
.banner-acts a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; color: inherit; white-space: nowrap; }
.banner-close { width: 32px; height: 32px; margin: -4px -6px -4px 0; display: grid; place-items: center; flex: none;
  border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; cursor: pointer; }
.banner-close:hover { background: rgba(138, 90, 0, .08); }
.banner-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.banner-close .ico { width: 18px; height: 18px; }

.banner-80, .banner-100 { background: var(--warning-50); color: var(--warning-700); border-color: #F2D894; }
.banner-100 { border-left: 4px solid var(--warning-500); padding-left: calc(var(--sp-4) - 3px); }
.banner-tope { background: var(--surface); color: var(--n-700); border-color: var(--error-600);
  border-left-width: 4px; padding-left: calc(var(--sp-4) - 3px); box-shadow: var(--sh-1); }
.banner-tope > .ico { color: var(--error-600); }

/* Fijo arriba del área de trabajo (100 % y tope) */
.banner-sticky { position: sticky; top: 0; z-index: 20; border-radius: 0; border-width: 0 0 1px;
  padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.banner-sticky.banner-100, .banner-sticky.banner-tope { border-left-width: 4px; }

/* Móvil: las acciones bajan debajo del texto; táctil 44 px */
@media (max-width: 640px) {
  .banner { flex-wrap: wrap; position: relative; }
  .banner:has(.banner-close) .banner-body { padding-right: 32px; }
  .banner-acts { order: 3; flex-basis: 100%; padding-left: 32px; align-self: auto; }
  .banner-acts .btn { height: 44px; flex: 1; }
  .banner-close { position: absolute; top: 0; right: 0; width: 44px; height: 44px; margin: 0; }
}