/* ============================================================
   PULSO · components.css · las piezas del sistema
   Todo color, radio y sombra sale de tokens.css (capa semántica).
   Cada pieza copia la CONSTRUCCIÓN de una referencia aprobada; la
   referencia se nombra en el catálogo, al lado de la pieza.
   ============================================================ */

/* ---------- Tipografía ---------- */
.display-hero { font-family: var(--font-display); font-size: var(--t-display); font-weight: 700; line-height: 0.98; letter-spacing: -0.035em; }
.display-hero .dot { color: var(--signal); }
.lead { font-size: 1.1rem; line-height: 1.55; color: var(--text-muted); max-width: 62ch; }
.h1 { font-size: var(--t-h1); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.h2 { font-size: var(--t-h2); font-weight: 600; line-height: 1.25; }
.h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.small { font-size: var(--t-small); color: var(--text-muted); }
.micro { font-size: var(--t-micro); color: var(--text-soft); letter-spacing: 0.02em; }
/* Los rótulos dejaron la letra de máquina en mayúsculas el 7 de septiembre
   (tercera nota de Tomás: «no me gustan las etiquetas rústicas»): letra del
   cuerpo, caja normal, peso medio. El mono queda SOLO para datos (cifras,
   horas, procedencia). */
.label { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--text-muted); font-weight: 600; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.02em; }
.num-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.grad-text { background: var(--grad-line); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Superficie de cristal (la tarjeta de las referencias) ----------
   Fondo apenas más claro que el fondo, borde de 1 px al 7 %, brillo arriba y
   sombra profunda. Todas las tarjetas heredan de aquí. */
.card, .kpi, .area-card, .alerta, .incidente, .nota, .tabla-caja, .informe-bloque, .sidenav, .paso {
  background: var(--surface);
  background-image: linear-gradient(180deg, var(--shine), transparent 38%);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.card { border-radius: var(--r-xl); padding: var(--s-4); }
.glass { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-line); }

/* ---------- Átomos ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 11px 20px; border-radius: var(--r-pill); border: 1px solid transparent;
  font: 600 var(--t-body)/1 var(--font-body); cursor: pointer; text-decoration: none; letter-spacing: -0.005em;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 16px; height: 16px; }
/* Primario: VIOLETA con texto blanco y halo (kpi_031 «Export data», status_011 «Add Projects»). Antes era lima; el CEO lo cambió el 26 de agosto. */
.btn-primary { background: var(--brand-fill); color: var(--brand-contrast); box-shadow: var(--glow-fill); }
.btn-primary:hover { background: var(--brand-fill-strong); color: var(--brand-contrast); transform: translateY(-1px); }
/* Acento: relleno violeta a magenta (kpi_031 «Export data», status_011 «Add Projects»). */
.btn-accent { background: var(--grad-accent); color: var(--accent-contrast); box-shadow: var(--glow-accent); }
.btn-accent:hover { color: var(--accent-contrast); filter: brightness(1.08); transform: translateY(-1px); }
.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--panel); color: var(--text); }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--brand-wash); }
.btn-danger { background: transparent; color: var(--estado-critico-texto); border-color: color-mix(in srgb, var(--estado-critico) 55%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--estado-critico) 14%, transparent); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn--sm { padding: 7px 13px; font-size: var(--t-small); }
/* Circular: los botones redondos de flecha de charts_024 (lima) y los de icono de status_008 (cristal). */
.btn-circle {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .2s;
}
.btn-circle:hover { border-color: var(--brand); color: var(--brand); }
.btn-circle svg { width: 18px; height: 18px; }
.btn-circle--signal { background: var(--brand-fill); color: var(--brand-contrast); border-color: transparent; box-shadow: var(--glow-fill); }
.btn-circle--signal:hover { color: var(--brand-contrast); background: var(--brand-fill-strong); }

/* Píldoras (components_be977: tenue, rellena, contorno y con punto). */
.tag-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.02em;
  background: var(--panel); color: var(--text-muted); border: 1px solid var(--line);
}
.tag-pill--brand { background: var(--brand-wash); color: var(--brand); border-color: transparent; }
.tag-pill--signal { background: var(--brand-fill); color: var(--brand-contrast); border-color: transparent; }
.tag-pill--accent { background: var(--grad-accent); color: var(--accent-contrast); border-color: transparent; }
.tag-pill--muestra { background: transparent; color: var(--text-muted); border: 1px dashed var(--line-strong); }
.tag-pill .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }

.chip-icon {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--brand-wash); color: var(--brand); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.chip-icon svg { width: 16px; height: 16px; }
.chip-icon--signal { background: var(--signal-wash); color: var(--signal); border-color: color-mix(in srgb, var(--signal) 40%, transparent); }

.avatar {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--grad-accent); color: var(--accent-contrast); font: 600 0.9rem var(--font-display); overflow: hidden;
}
.avatar--lg { width: 84px; height: 84px; font-size: 1.6rem; }
.avatar--ring { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent), var(--glow-accent); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.field { display: grid; gap: 6px; }
.field > label { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--text-muted); font-weight: 600; }
.input, .select, .textarea {
  width: 100%; padding: 11px 14px; border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--text); font: 400 var(--t-body) var(--font-body);
}
.input::placeholder { color: var(--text-soft); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: transparent; }
.field-hint { font-size: var(--t-small); color: var(--text-soft); }
/* Buscador en píldora (layout_003, alerts_006, status_008: siempre arriba, con lupa). */
.search { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-soft); min-width: 0; }
.search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 400 var(--t-small) var(--font-body); }
.search input::placeholder { color: var(--text-soft); }
.search input:focus { outline: none; }
.search kbd { font: 500 0.66rem var(--font-mono); padding: 2px 6px; border-radius: var(--r-xs); border: 1px solid var(--line-strong); color: var(--text-soft); }
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--t-small); }
.toggle input { appearance: none; width: 42px; height: 24px; border-radius: var(--r-pill); background: var(--line-strong); position: relative; transition: background .15s; margin: 0; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--r-pill); background: var(--white); transition: transform .15s; box-shadow: var(--sh-1); }
.toggle input:checked { background: var(--brand-fill); box-shadow: var(--glow-fill); }
.toggle input:checked::after { transform: translateX(18px); background: var(--brand-contrast); }
.divider { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }

/* Barra de preguntar: la portada que pidió Tomás. Cristal flotante con el
   botón lima y el halo violeta al enfocar (status_011 «Ask Aivora»). */
.ask {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; max-width: 760px;
  padding: 8px 8px 8px 18px; border-radius: var(--r-frame);
  background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-line); box-shadow: var(--sh-3);
  transition: box-shadow .2s, border-color .2s;
}
.ask:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: var(--sh-3), var(--glow-accent); }
.ask > svg { color: var(--brand); flex: 0 0 auto; }
.ask input { flex: 1; border: 0; background: transparent; color: var(--text); font: 400 1.05rem var(--font-body); min-width: 0; }
.ask input::placeholder { color: var(--text-soft); }
.ask input:focus { outline: none; }
.ask .btn { flex: 0 0 auto; }

/* ---------- El estado: forma + palabra + color, siempre juntos ----------
   Píldora tenue con la palabra en el tinte del estado (components_be977,
   status_008). La forma es la que dibuja Pulso en el servidor. */
.estado {
  --estado: var(--estado-noverificable); --estado-texto: var(--estado-noverificable-texto);
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: var(--r-pill);
  font-size: var(--t-micro); font-weight: 600; color: var(--estado-texto); letter-spacing: 0.02em; white-space: nowrap;
  background: color-mix(in srgb, var(--estado) 14%, transparent); border: 1px solid color-mix(in srgb, var(--estado) 32%, transparent);
}
.estado svg { width: 12px; height: 12px; color: var(--estado); flex: 0 0 auto; }
.estado--optimo { --estado: var(--estado-optimo); --estado-texto: var(--estado-optimo-texto); }
.estado--operativo { --estado: var(--estado-operativo); --estado-texto: var(--estado-operativo-texto); }
.estado--atencion { --estado: var(--estado-atencion); --estado-texto: var(--estado-atencion-texto); }
.estado--degradado { --estado: var(--estado-degradado); --estado-texto: var(--estado-degradado-texto); }
.estado--critico { --estado: var(--estado-critico); --estado-texto: var(--estado-critico-texto); }
.estado--noverificable { --estado: var(--estado-noverificable); --estado-texto: var(--estado-noverificable-texto); }
.estado--desactualizado { --estado: var(--estado-desactualizado); --estado-texto: var(--estado-desactualizado-texto); }
.estado--fueradealcance { --estado: var(--estado-fueradealcance); --estado-texto: var(--estado-fueradealcance-texto); opacity: .85; }
.estado--lg { font-size: var(--t-small); padding: 6px 14px 6px 11px; }
.estado--lg svg { width: 14px; height: 14px; }
/* Variante rellena para tablas y cabeceras (status_008 «Active» en lima). */
.estado--relleno { background: var(--estado); color: var(--white); border-color: transparent; }
.estado--relleno svg { color: currentColor; }
.estado--relleno.estado--optimo, .estado--relleno.estado--atencion { color: var(--ink-900); }

/* ---------- Moléculas ---------- */
/* Tarjeta de cifra con mini gráfica dentro (layout_003, alerts_007, charts_026, data-viz_15c5). */
.kpi { position: relative; display: grid; gap: 8px; align-content: start; padding: var(--s-4); border-radius: var(--r-xl); overflow: hidden; min-width: 0; }
.kpi__label { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi__label .btn-circle { width: 28px; height: 28px; }
.kpi__label .btn-circle svg { width: 13px; height: 13px; }
.kpi__num { font-family: var(--font-display); font-size: var(--t-kpi); font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi__num small { font-size: 0.42em; font-weight: 500; color: var(--text-muted); margin-left: 5px; letter-spacing: 0; }
.kpi__foot { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.kpi__ref { font-size: var(--t-small); color: var(--text-muted); }
.kpi__spark { width: 100%; height: 56px; margin-top: 4px; }
.kpi__spark path.linea { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--serie-1) 70%, transparent)); }
.kpi__spark path.area { fill: url(#g-area-accent); }
.kpi__spark.spark--signal path.linea { stroke: var(--signal); filter: none; }
.kpi__spark.spark--signal path.area { fill: url(#g-area-signal); }
.kpi__spark rect { fill: var(--serie-1); opacity: .35; }
.kpi__spark rect.hoy { fill: var(--signal); opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--signal) 70%, transparent)); }
/* La destacada: toda la tarjeta en el relleno de acción con texto blanco (la construcción de alerts_006 «Total Alerts», con el color de la casa). */
/* La destacada SIN relleno fuerte (4 de septiembre, segunda nota de Tomás): velo violeta, no bloque. */
.kpi--destacada { background: var(--brand-wash); background-image: none; border-color: color-mix(in srgb, var(--brand) 35%, transparent); color: var(--text); box-shadow: var(--sh-2); }
.kpi--destacada .kpi__label, .kpi--destacada .kpi__num small, .kpi--destacada .kpi__ref, .kpi--destacada .procedencia, .kpi--destacada .procedencia b { color: var(--text-muted); }
.kpi--destacada .kpi__num { color: var(--brand); }
.kpi--destacada .kpi__spark path.linea { stroke: var(--serie-1); filter: none; }
.kpi--destacada .kpi__spark path.area { fill: url(#g-area-accent); }
.kpi--muestra { border-style: dashed; border-color: var(--line-strong); }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-micro); font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; }
.delta svg { width: 10px; height: 10px; }
.delta--mejora { background: color-mix(in srgb, var(--estado-optimo) 14%, transparent); color: var(--mejora-texto); }
.delta--empeora { background: color-mix(in srgb, var(--estado-critico) 14%, transparent); color: var(--empeora-texto); }
.delta--neutra { background: var(--panel); color: var(--text-muted); }
/* La palabra del juicio, para quien no distingue el verde del rojo (Tomás). */
.delta b { font-weight: 700; font-size: 0.68rem; letter-spacing: 0.01em; opacity: .9; }

.procedencia { font-size: var(--t-micro); line-height: 1.45; color: var(--text-muted); }
.procedencia b { color: var(--text); font-weight: 600; }
.procedencia--media b { color: var(--estado-desactualizado-texto); }
.procedencia--ninguna { font-style: italic; }

.cobertura { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-micro); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cobertura__barra { width: 64px; height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.cobertura__lleno { display: block; height: 100%; background: var(--grad-line); border-radius: var(--r-pill); }
.cobertura--baja .cobertura__lleno { background: var(--estado-noverificable); }

.metrica { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--line); }
.metrica:last-child { border-bottom: 0; }
.metrica__nombre { font-size: var(--t-small); color: var(--text-muted); }
.metrica__valor { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }

.base-nota { padding: 8px 12px; border-radius: var(--r-sm); border: 1px dashed var(--line-strong); font-size: var(--t-micro); color: var(--text-muted); line-height: 1.45; }
.base-nota--fuera { border-color: var(--estado-atencion); color: var(--text); }

/* Tarjeta de área: el halo del estado arriba a la derecha (status_011, reports_033). */
.area-card {
  --estado: var(--estado-noverificable);
  display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-xl); position: relative; overflow: hidden; min-width: 0;
}
.area-card::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--estado) 26%, transparent), transparent); pointer-events: none; }
.area-card > * { position: relative; }
.area-card--optimo { --estado: var(--estado-optimo); } .area-card--operativo { --estado: var(--estado-operativo); }
.area-card--atencion { --estado: var(--estado-atencion); } .area-card--degradado { --estado: var(--estado-degradado); }
.area-card--critico { --estado: var(--estado-critico); } .area-card--noverificable { --estado: var(--estado-noverificable); }
.area-card--desactualizado { --estado: var(--estado-desactualizado); } .area-card--fueradealcance { --estado: var(--estado-fueradealcance); opacity: .72; }
.area-card--sin-confianza { text-decoration: line-through; text-decoration-color: var(--estado-critico); }
.area-card__cabeza { display: flex; align-items: flex-start; gap: var(--s-3); }
.area-card__titulos { flex: 1; min-width: 0; }
.area-card__motivo { font-size: var(--t-small); line-height: 1.5; color: var(--text); }
.area-card__ejes { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.area-card__accion { font-size: var(--t-micro); color: var(--text-soft); font-weight: 500; }

/* Alerta con sus cuatro partes; la línea de tiempo de incidentes (alerts_006). */
.alerta {
  --estado: var(--estado-atencion);
  display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-xl); position: relative; overflow: hidden; min-width: 0;
}
.alerta::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, color-mix(in srgb, var(--estado) 16%, transparent), transparent); pointer-events: none; }
.alerta > * { position: relative; }
.alerta--critico { --estado: var(--estado-critico); } .alerta--degradado { --estado: var(--estado-degradado); } .alerta--atencion { --estado: var(--estado-atencion); }
.alerta__cabeza { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.alerta__titulo { font-size: var(--t-h3); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alerta__partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3); margin: 0; }
.alerta__partes dt { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--text-muted); font-weight: 600; margin-bottom: 3px; }
.alerta__partes dd { margin: 0; font-size: var(--t-small); line-height: 1.5; }
.alerta__acciones { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

.incidente { display: grid; gap: 6px; padding: 12px 16px; border-radius: var(--r-lg); }
.incidente__meta { font-size: var(--t-micro); color: var(--text-muted); line-height: 1.5; }
.incidente--silenciado { opacity: .6; }

.linea-tiempo { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-2); position: relative; padding-top: 10px; }
.linea-tiempo::before { content: ""; position: absolute; left: 12px; right: 12px; top: 46px; height: 1px; background: var(--line-strong); }
.lt__nodo { display: grid; gap: 8px; justify-items: start; position: relative; min-width: 0; }
.lt__pill { --estado: var(--estado-noverificable); --estado-texto: var(--text); font-size: var(--t-micro); font-weight: 600; padding: 5px 10px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--estado) 18%, transparent); color: var(--estado-texto); border: 1px solid color-mix(in srgb, var(--estado) 40%, transparent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt__pill--critico { --estado: var(--estado-critico); --estado-texto: var(--estado-critico-texto); }
.lt__pill--atencion { --estado: var(--estado-atencion); --estado-texto: var(--estado-atencion-texto); }
.lt__pill--optimo { --estado: var(--estado-optimo); --estado-texto: var(--estado-optimo-texto); }
.lt__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--surface), var(--glow-signal); margin-left: 8px; }
.lt__punto--critico { background: var(--estado-critico); box-shadow: 0 0 0 4px var(--surface), 0 0 14px color-mix(in srgb, var(--estado-critico) 60%, transparent); }
.lt__hora { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--text-soft); }

/* Pasos del alta: el asistente horizontal de onboarding_042. */
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); position: relative; }
.stepper::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 34px; height: 2px; background: var(--line-strong); }
.stepper__paso { display: grid; justify-items: center; gap: 8px; text-align: center; position: relative; min-width: 0; }
.stepper__estado { font-size: var(--t-micro); font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--panel); color: var(--text-muted); border: 1px solid var(--line); }
.stepper__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--surface); border: 2px solid var(--line-strong); color: var(--text-muted); font: 600 0.85rem var(--font-display); }
.stepper__num svg { width: 16px; height: 16px; }
.stepper__titulo { font-size: var(--t-small); font-weight: 600; }
.stepper__sub { font-size: var(--t-micro); color: var(--text-soft); }
.stepper__paso--hecho .stepper__num { background: var(--estado-optimo); border-color: var(--estado-optimo); color: var(--ink-900); }
.stepper__paso--hecho .stepper__estado { background: color-mix(in srgb, var(--estado-optimo) 16%, transparent); color: var(--estado-optimo-texto); border-color: transparent; }
.stepper__paso--actual .stepper__num { border-color: var(--signal); color: var(--text); box-shadow: var(--glow-signal); }
.stepper__paso--actual .stepper__estado { background: var(--brand-fill); color: var(--brand-contrast); border-color: transparent; }
.stepper__paso--bloqueado .stepper__num { background: var(--estado-critico); border-color: var(--estado-critico); color: var(--white); }
.stepper__paso--bloqueado .stepper__estado { background: color-mix(in srgb, var(--estado-critico) 16%, transparent); color: var(--estado-critico-texto); border-color: transparent; }
@media (max-width: 640px) { .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stepper::before { display: none; } }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.paso { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: 12px 14px; border-radius: var(--r-lg); }
.paso__num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-contrast); font: 600 0.85rem var(--font-display); }
.paso--hecho .paso__num { background: var(--estado-optimo); color: var(--ink-900); }
.paso--bloqueado .paso__num { background: var(--estado-critico); }
.paso--pendiente .paso__num { background: var(--panel); color: var(--text-muted); }
.paso__titulo { font-weight: 600; }
.paso__puerta { font-size: var(--t-micro); color: var(--text-muted); line-height: 1.45; }

/* Tabla densa: filas oscuras con hairline y píldora por fila (tables_030, status_008). */
.tabla-caja { border-radius: var(--r-xl); overflow: auto; max-width: 100%; min-width: 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.tabla th, .tabla td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.tabla thead th { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--text-muted); font-weight: 600; background: var(--panel); position: sticky; top: 0; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--brand-wash); }
.tabla .cifra { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabla .quien { display: flex; align-items: center; gap: 10px; }
.tabla .quien .avatar { width: 28px; height: 28px; font-size: 0.7rem; flex: 0 0 auto; }

.nota { padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); display: grid; gap: 4px; }
.nota__titulo { font-weight: 600; }
.nota__texto { font-size: var(--t-small); color: var(--text-muted); line-height: 1.5; }
.nota--aviso { border-color: color-mix(in srgb, var(--estado-atencion) 50%, transparent); background-image: linear-gradient(90deg, color-mix(in srgb, var(--estado-atencion) 12%, transparent), transparent 60%); }
.nota--critico { border-color: color-mix(in srgb, var(--estado-critico) 50%, transparent); background-image: linear-gradient(90deg, color-mix(in srgb, var(--estado-critico) 12%, transparent), transparent 60%); }
.nota--muestra { border-style: dashed; border-color: var(--line-strong); }
.nota--acento { border-color: transparent; background: var(--grad-accent); background-image: var(--grad-accent); color: var(--accent-contrast); box-shadow: var(--glow-accent); }
.nota--acento .nota__titulo { color: var(--accent-contrast); }
.nota--acento .nota__texto { color: var(--accent-contrast); opacity: .85; }

/* Gráficas: línea con halo y degradado debajo, barras redondeadas con la de
   hoy en lima, rejilla punteada (charts_024, data-viz_7b45, layout_003, colors_cec680). */
.grafica { display: block; width: 100%; height: auto; overflow: visible; }
.grafica .eje { stroke: var(--line-strong); stroke-width: 1; }
.grafica .rejilla { stroke: var(--line); stroke-dasharray: 2 5; }
.grafica .etiqueta { fill: var(--text-muted); font: 500 10px var(--font-mono); }
.grafica .serie-1 { stroke: url(#g-linea-accent); fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--serie-1) 65%, transparent)); }
.grafica .area-1 { fill: url(#g-area-accent); }
.grafica .barra { fill: var(--serie-1); opacity: .38; }
.grafica .barra--destacada { fill: var(--signal); opacity: 1; }
.grafica .barra-1 { fill: var(--serie-1); } .grafica .barra-2 { fill: var(--serie-2); } .grafica .barra-3 { fill: var(--serie-3); }
.grafica .umbral { stroke: var(--estado-atencion); stroke-dasharray: 5 4; stroke-width: 1.5; }
.grafica .punto { fill: var(--signal); stroke: var(--surface); stroke-width: 3; }
.grafica .globo { fill: var(--surface); stroke: var(--line-strong); }
.grafica .globo-texto { fill: var(--text); font: 600 11px var(--font-display); }
/* Lo que pidió la app al aplicar el sistema (27 de agosto): la cifra al final de
   cada barra, la barra teñida con el estado de su campaña (en vez del acento),
   y el marco con título para una gráfica dibujada en el servidor. */
.grafica .valor { fill: var(--text); font: 600 11px var(--font-display); font-variant-numeric: tabular-nums; }
.grafica .barra--optimo { fill: var(--estado-optimo); opacity: 1; } .grafica .barra--operativo { fill: var(--estado-operativo); opacity: 1; }
.grafica .barra--atencion { fill: var(--estado-atencion); opacity: 1; } .grafica .barra--degradado { fill: var(--estado-degradado); opacity: 1; }
.grafica .barra--critico { fill: var(--estado-critico); opacity: 1; } .grafica .barra--desactualizado { fill: var(--estado-desactualizado); opacity: .9; }
.grafica .barra--noverificable, .grafica .barra--fueradealcance { fill: var(--estado-noverificable); opacity: .5; }
.grafica-figura { margin: 0; display: grid; gap: var(--s-2); min-width: 0; }
.grafica-figura__titulo { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.grafica-figura__vacia { font-size: var(--t-small); color: var(--text-soft); }
.graficas { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* ---- Lo que pidió la app al pasar de «piel» a «informe de alto nivel» (27 de agosto).
   Las composiciones de layout_003, kpi_031, alerts_006 y reports_033: una fila de
   cifras compactas, un visual protagonista al lado de uno secundario, y la prosa
   explicativa PLEGADA, nunca a la vista. ---- */
.rejilla-2 { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.rejilla-2--igual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rejilla-3 { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.rejilla-4 { display: grid; gap: var(--s-3); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1100px) { .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rejilla-2, .rejilla-2--igual, .rejilla-3, .rejilla-4 { grid-template-columns: minmax(0, 1fr); } }
/* La tarjeta de cifra compacta de la fila de arriba (kpi_031, tables_030): menos
   relleno y la cifra un punto más pequeña, para que quepan cuatro o cinco en una fila. */
.kpi--compacta { padding: var(--s-3) var(--s-4); gap: 4px; }
.kpi--compacta .kpi__num { font-size: calc(var(--t-kpi) * 0.78); }
.kpi--compacta .kpi__spark { height: 40px; }
/* La cabecera de una tarjeta con visual: título a la izquierda, control o estado a la derecha. */
.card__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.card__cabeza h3, .card__cabeza h4 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.card__cabeza .small { margin-top: 2px; }
.card--apilada { display: grid; gap: var(--s-3); align-content: start; }
/* El anillo por partes (reports_031, layout_003): cada segmento con el color de su serie. */
.donut .valor.seg-1 { stroke: var(--serie-1); filter: none; } .donut .valor.seg-2 { stroke: var(--serie-2); filter: none; } .donut .valor.seg-3 { stroke: var(--serie-3); filter: none; }
.donut .valor.seg-4 { stroke: var(--serie-4); filter: none; } .donut .valor.seg-5 { stroke: var(--serie-5); filter: none; } .donut .valor.seg-6 { stroke: var(--serie-6); filter: none; }
.donut .valor.seg-resto { stroke: var(--panel); filter: none; }
.donut--grande svg { width: 168px; height: 168px; }
.donut--grande .donut__centro b { font-size: 2rem; }
/* La explicación plegada: lo que antes eran párrafos a la vista. Cerrada por
   defecto; el resumen en mono como los rótulos; al abrir, prosa pequeña. */
.explica { border-top: 1px solid var(--line); padding-top: var(--s-2); }
.explica summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--text-soft); font-weight: 600; }
.explica summary::-webkit-details-marker { display: none; }
.explica summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: var(--r-xs); border: 1px solid var(--line-strong); font-size: 11px; }
.explica[open] summary::before { content: "−"; }
.explica summary:hover { color: var(--text); }
.explica > *:not(summary) { margin-top: var(--s-2); font-size: var(--t-small); line-height: 1.6; color: var(--text-muted); max-width: 78ch; }
.explica strong { color: var(--text); font-weight: 600; }
.explica ul, .explica ol { padding-left: 1.2rem; }
/* La procedencia de una cifra dicha en un solo renglón mono (data-viz_7b45). */
.origen { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-mono); font-size: var(--t-micro); color: var(--text-soft); letter-spacing: 0.02em; }
.origen b { color: var(--text-muted); font-weight: 500; }
/* El conmutador de cliente desplegado (layout_003, status_011): la lista de
   clientes, el alta y quién tiene acceso cuelgan del nombre de la barra. */
.conmutador { position: relative; }
.conmutador > summary { list-style: none; }
.conmutador > summary::-webkit-details-marker { display: none; }
.conmutador[open] > summary { border-color: var(--brand); }
.conmutador__menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 280px; display: grid; gap: 2px; padding: var(--s-2); border-radius: var(--r-lg); background: var(--surface); background-image: linear-gradient(180deg, var(--shine), transparent 40%); border: 1px solid var(--glass-line); box-shadow: var(--sh-3); }
.conmutador__menu .label { padding: 6px 10px 2px; }
.conmutador__menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); color: var(--text); font-size: var(--t-small); font-weight: 500; }
.conmutador__menu a:hover { background: var(--panel); text-decoration: none; }
.conmutador__menu a svg { width: 16px; height: 16px; color: var(--text-muted); }
.conmutador__menu a .avatar { width: 26px; height: 26px; font-size: 0.65rem; }
.conmutador__menu .small { padding: 6px 10px; }
.conmutador__sep { display: block; height: 1px; background: var(--line); margin: 6px 4px; }
/* El menú que cuelga del lado derecho de la barra (avatar, periodo): se abre
   pegado a su borde derecho para no salirse de la pantalla. */
.conmutador--derecha .conmutador__menu { left: auto; right: 0; }
/* Un botón dentro del menú desplegado se viste igual que sus enlaces. */
.conmutador__menu form { display: contents; }
.conmutador__menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text); font: 500 var(--t-small) var(--font-body); text-align: left; cursor: pointer; }
.conmutador__menu button:hover { background: var(--panel); }
.conmutador__menu button svg { width: 16px; height: 16px; color: var(--text-muted); }
.conmutador__menu .is-active { background: var(--brand-wash); color: var(--brand); }
/* La marca sin el circulito: «Pulso.» en grande, como pidió Tomás (31 de agosto). */
/* Con doble clase para ganarle a `.sidenav a`, que pinta los enlaces del menú
   pequeños y apagados: la marca es un enlace pero no es una entrada más. */
.sidenav a.sidenav__marca--texto, .sidenav__marca--texto { font-size: 1.7rem; padding: 8px 8px 16px; letter-spacing: -0.03em; color: var(--text); font-weight: 800; }
.sidenav a.sidenav__marca--texto:hover { background: transparent; color: var(--text); }
/* Un grupo del menú que se pliega y se despliega, y recuerda cómo quedó:
   el rótulo en mono con su flecha, y las entradas debajo. */
.sidenav details.sidenav__pliegue { display: grid; gap: 2px; }
.sidenav__pliegue > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--text-soft); font-weight: 600; padding: 10px 12px 3px; }
.sidenav__pliegue > summary::-webkit-details-marker { display: none; }
.sidenav__pliegue > summary:hover { color: var(--text); }
.sidenav__pliegue > summary svg { width: 11px; height: 11px; transition: transform 0.15s ease; }
.sidenav__pliegue[open] > summary svg { transform: rotate(180deg); }
.donut { display: grid; place-items: center; position: relative; }
.donut svg { width: 128px; height: 128px; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.donut .pista { stroke: var(--panel); }
.donut .valor { stroke: url(#g-linea-accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--serie-1) 60%, transparent)); }
.donut .valor--signal { stroke: var(--signal); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--signal) 60%, transparent)); }
.donut__centro { position: absolute; display: grid; justify-items: center; }
.donut__centro b { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.03em; }
.donut__centro span { font-size: var(--t-micro); color: var(--text-muted); }
.leyenda { display: flex; gap: var(--s-3); flex-wrap: wrap; font-size: var(--t-micro); color: var(--text-muted); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: var(--r-xs); display: inline-block; }

/* ---------- Organismos ---------- */
/* Barra superior: marca, conmutador, buscador en píldora y controles redondos
   (layout_003, alerts_006, status_008). En cristal. */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: 10px 12px 10px 20px; border-radius: var(--r-frame);
  background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-line); box-shadow: var(--sh-2);
}
.topbar__marca { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 1.15rem; }
.topbar__marca .dot { color: var(--signal); }
.topbar__selector { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-2); font-size: var(--t-small); cursor: pointer; }
.topbar__selector svg { width: 12px; height: 12px; }
.topbar__hueco { flex: 1; }
.topbar .search { flex: 1 1 200px; max-width: 360px; }

/* Menú lateral: columna oscura, buscador, grupos en mono, activo en píldora
   violeta con halo, y la tarjeta de «pregunta a Pulso» abajo (layout_003,
   layout_027, layout_3fb1, status_011 «Ask Aivora»). */
.sidenav { display: grid; gap: 4px; padding: var(--s-3); border-radius: var(--r-xl); align-content: start; }
.sidenav__marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; }
.sidenav__marca .dot { color: var(--signal); }
.sidenav__marca .avatar { width: 30px; height: 30px; font-size: 0.75rem; border-radius: var(--r-sm); }
.sidenav .search { margin-bottom: 8px; }
.sidenav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); color: var(--text-muted); font-size: var(--t-small); font-weight: 500; }
.sidenav a:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.sidenav a.is-active { background: var(--brand-wash); color: var(--brand); font-weight: 600; }
.sidenav a svg { width: 16px; height: 16px; }
.sidenav a .cuenta { margin-left: auto; font: 600 0.66rem var(--font-mono); padding: 2px 7px; border-radius: var(--r-pill); background: var(--brand-fill); color: var(--brand-contrast); }
.sidenav__grupo { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--text-soft); font-weight: 600; padding: 12px 12px 4px; }
.sidenav__promo { margin-top: var(--s-3); padding: var(--s-3); border-radius: var(--r-lg); background: var(--grad-accent); color: var(--accent-contrast); display: grid; gap: 6px; box-shadow: var(--glow-accent); }
.sidenav__promo b { font-family: var(--font-display); font-size: 0.95rem; }
.sidenav__promo span { font-size: var(--t-micro); opacity: .85; line-height: 1.4; }
.sidenav__promo .btn { justify-self: start; margin-top: 4px; }
/* El pie del menú en la app: el botón de salir, separado por una línea fina. */
.sidenav__pie { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line); display: grid; }
.sidenav__pie .btn { width: 100%; }

.seccion-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.seccion-cabeza p { color: var(--text-muted); font-size: var(--t-small); line-height: 1.55; max-width: 60ch; }
.seccion-cabeza__controles { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

.cliente-ficha { display: grid; justify-items: center; gap: var(--s-3); text-align: center; padding: var(--s-6) var(--s-4) var(--s-4); position: relative; }
.cliente-ficha__halo { position: absolute; top: 0; left: 50%; transform: translate(-50%, -20%); width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, var(--bg-glow-1), transparent); pointer-events: none; }
.cliente-ficha > * { position: relative; }
.cliente-ficha > .cliente-ficha__halo { position: absolute; } /* va detrás de la regla anterior a propósito: misma especificidad, gana la última */
.cliente-ficha__nombre { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.03em; }
.cliente-ficha__areas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.area-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-pill); border: 1px solid var(--glass-line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: var(--t-small); font-weight: 500; cursor: pointer; color: var(--text); font-family: inherit; }
.area-chip:hover { border-color: var(--brand); color: var(--brand); }
.area-chip.is-active { background: var(--brand-wash); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.area-chip svg { width: 12px; height: 12px; }

.informe-bloque { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-xl); }
.informe-bloque__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.informe-bloque__lista { margin: 0; padding-left: 1.1rem; font-size: var(--t-small); line-height: 1.6; color: var(--text-muted); }

/* Correo con la marca (para los informes que pidió Tomás): cabecera oscura con
   el degradado de acento y el punto lima (reports_033). */
.correo { max-width: 600px; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-2); }
.correo__cabeza { padding: var(--s-4) var(--s-5); background: var(--ink-900); background-image: radial-gradient(60% 120% at 0% 0%, rgba(110, 91, 255, .5), transparent), radial-gradient(50% 100% at 100% 100%, rgba(200, 75, 220, .35), transparent); color: var(--ink-50); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.correo__cabeza .dot { color: var(--lime-400); }
.correo__cuerpo { padding: var(--s-5); display: grid; gap: var(--s-3); }
.correo__pie { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); font-size: var(--t-micro); color: var(--text-soft); }

/* ============================================================
   Segunda tanda de piezas (26 de agosto, «necesito más componentes»)
   ============================================================ */

/* Control segmentado y pestañas (data-viz_15c5 «Week · Month · Max», status_008). */
.segmentado { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line); }
.segmentado button { font: 600 var(--t-small) var(--font-body); padding: 7px 14px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.segmentado button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.segmentado--signal button.is-active { background: var(--brand-fill); color: var(--brand-contrast); }
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { padding: 10px 14px; font-size: var(--t-small); font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.is-active { color: var(--text); border-bottom-color: var(--signal); }
.tabs a .cuenta { margin-left: 6px; font: 600 0.66rem var(--font-mono); padding: 1px 6px; border-radius: var(--r-pill); background: var(--panel); color: var(--text-muted); }

/* Migas y paginación (layout_3fb1 «Overview / Dashboard», tables_030). */
.migas { display: flex; align-items: center; gap: 8px; font-size: var(--t-small); color: var(--text-soft); flex-wrap: wrap; }
.migas a { color: var(--text-muted); }
.migas b { color: var(--text); font-weight: 600; }
.migas svg { width: 12px; height: 12px; transform: rotate(-90deg); }
.paginacion { display: inline-flex; align-items: center; gap: 4px; }
.paginacion a, .paginacion span { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--r-md); font: 500 var(--t-small) var(--font-mono); color: var(--text-muted); border: 1px solid transparent; }
.paginacion a:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.paginacion a.is-active { background: var(--brand-fill); color: var(--brand-contrast); font-weight: 600; }
.paginacion a svg { width: 14px; height: 14px; }

/* Grupo de avatares y chip de fecha (status_011, alerts_006 «Today, Feb 12»). */
.avatares { display: inline-flex; align-items: center; }
.avatares .avatar { width: 32px; height: 32px; font-size: 0.7rem; box-shadow: 0 0 0 2px var(--surface); margin-left: -8px; }
.avatares .avatar:first-child { margin-left: 0; }
.avatares .avatar--mas { background: var(--panel); color: var(--text-muted); }
.fecha-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-2); font-size: var(--t-small); font-weight: 500; }
.fecha-chip svg { width: 14px; height: 14px; color: var(--text-muted); }

/* Progreso con rótulo y barra apilada (status_011, components_8fc4, layout_003 «Events breakdown»). */
.progreso { display: grid; gap: 8px; }
.progreso__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); font-size: var(--t-small); }
.progreso__cabeza b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.progreso__barra { height: 8px; border-radius: var(--r-pill); background: var(--panel); overflow: hidden; }
.progreso__lleno { display: block; height: 100%; border-radius: var(--r-pill); background: var(--grad-line); }
.progreso--signal .progreso__lleno { background: var(--signal); box-shadow: var(--glow-signal); }
.progreso--estado .progreso__lleno { background: var(--estado, var(--estado-noverificable)); }
.progreso__marca { position: relative; overflow: visible; }
.progreso__marca::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--objetivo, 66%); width: 2px; background: var(--estado-atencion); border-radius: var(--r-xs); }
.apilada { display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden; gap: 2px; }
.apilada span { display: block; height: 100%; }
.apilada span:nth-child(1) { background: var(--serie-1); } .apilada span:nth-child(2) { background: var(--serie-2); } .apilada span:nth-child(3) { background: var(--serie-3); }
.apilada span:nth-child(4) { background: var(--serie-4); } .apilada span:nth-child(5) { background: var(--serie-5); } .apilada span:nth-child(6) { background: var(--serie-6); }

/* Ranking numerado con barra de peso (reports_033 «Top Events», layout_027 «Top Products»). */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ranking li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 10px 12px; border-radius: var(--r-md); }
.ranking li:hover { background: var(--panel); }
.ranking__pos { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--panel); font: 600 0.72rem var(--font-mono); color: var(--text-muted); }
.ranking li:first-child .ranking__pos { background: var(--brand-fill); color: var(--brand-contrast); }
.ranking li:nth-child(2) .ranking__pos { background: var(--grad-accent); color: var(--accent-contrast); }
.ranking__nombre { display: grid; gap: 4px; min-width: 0; }
.ranking__nombre b { font-size: var(--t-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking__peso { height: 4px; border-radius: var(--r-pill); background: var(--panel); overflow: hidden; }
.ranking__peso i { display: block; height: 100%; background: var(--grad-line); }
.ranking__valor { font-family: var(--font-mono); font-size: var(--t-small); font-variant-numeric: tabular-nums; }

/* Actividad reciente (layout_003 «Recent Account Activity», reports_008). */
.actividad { list-style: none; margin: 0; padding: 0; display: grid; }
.actividad li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.actividad li:last-child { border-bottom: 0; }
.actividad__que { font-size: var(--t-small); line-height: 1.45; }
.actividad__que b { font-weight: 600; }
.actividad__meta { font-size: var(--t-micro); color: var(--text-soft); margin-top: 2px; }
.actividad__cuando { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--text-soft); white-space: nowrap; }

/* Calendario de lecturas (tables_030 «Calendar Booking», data-viz_db41 «Your Training Days»). */
.calendario { display: grid; gap: 10px; }
.calendario__cabeza { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: var(--t-small); }
.calendario__cabeza .btn-circle { width: 30px; height: 30px; }
.calendario__cabeza .btn-circle svg { width: 12px; height: 12px; transform: rotate(90deg); }
.calendario__cabeza .btn-circle + .btn-circle svg { transform: rotate(-90deg); }
.calendario__rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendario__dia-nombre { font: 600 0.66rem var(--font-body); letter-spacing: 0.02em; color: var(--text-soft); text-align: center; padding-bottom: 4px; }
.calendario__dia { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-sm); font: 500 var(--t-small) var(--font-body); font-variant-numeric: tabular-nums; color: var(--text-muted); position: relative; }
.calendario__dia--fuera { opacity: .3; }
.calendario__dia--ok { background: color-mix(in srgb, var(--estado-optimo) 16%, transparent); color: var(--estado-optimo-texto); }
.calendario__dia--fallo { background: color-mix(in srgb, var(--estado-critico) 18%, transparent); color: var(--estado-critico-texto); }
.calendario__dia--vacio { background: var(--panel); }
.calendario__dia--hoy { background: var(--brand-wash); color: var(--brand); font-weight: 700; outline: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); }

/* Racha: los 30 días por estado, una barra por día (kpi_031 «Sleep stages», data-viz_7b45). */
.racha { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; align-items: end; height: 64px; }
.racha span { --estado: var(--estado-noverificable); display: block; border-radius: var(--r-xs) var(--r-xs) 2px 2px; background: var(--estado); min-height: 6px; opacity: .85; }
.racha span:hover { opacity: 1; }
.racha .r-optimo { --estado: var(--estado-optimo); } .racha .r-operativo { --estado: var(--estado-operativo); } .racha .r-atencion { --estado: var(--estado-atencion); }
.racha .r-degradado { --estado: var(--estado-degradado); } .racha .r-critico { --estado: var(--estado-critico); } .racha .r-noverificable { --estado: var(--estado-noverificable); opacity: .4; }
.racha .r-hoy { outline: 2px solid var(--text-muted); outline-offset: 1px; opacity: 1; }
.racha__pie { display: flex; justify-content: space-between; font: 500 var(--t-micro) var(--font-mono); color: var(--text-soft); margin-top: 6px; }

/* Medidor semicircular (layout_027 «80 %», kpi_030 «Load score», layout_003 «Account Health»). */
.medidor { display: grid; justify-items: center; position: relative; }
.medidor svg { width: 200px; max-width: 100%; height: auto; overflow: visible; }
.medidor .pista { fill: none; stroke: var(--panel); stroke-width: 14; stroke-linecap: round; }
.medidor .valor { fill: none; stroke: url(#g-linea-accent); stroke-width: 14; stroke-linecap: round; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--serie-1) 60%, transparent)); }
.medidor .aguja { fill: var(--signal); stroke: var(--surface); stroke-width: 2; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--signal) 80%, transparent)); }
.medidor__centro { position: absolute; bottom: 4px; display: grid; justify-items: center; }
.medidor__centro b { font-family: var(--font-display); font-size: 2rem; letter-spacing: -0.03em; line-height: 1; }
.medidor__centro span { font-size: var(--t-micro); color: var(--text-muted); }
.medidor__tramos { display: flex; justify-content: space-between; width: 200px; max-width: 100%; font: 500 0.62rem var(--font-mono); color: var(--text-soft); }

/* Respuesta de Pulso: la burbuja del asistente con la cifra, su procedencia y sus fuentes
   (layout_2941 panel del asistente, layout_003 «AI Insights», status_011). */
.pregunta { justify-self: end; max-width: 80%; padding: 10px 16px; border-radius: var(--r-xl) var(--r-xl) var(--r-xs) var(--r-xl); background: var(--panel); font-size: var(--t-small); }
.respuesta { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-xs) var(--r-xl) var(--r-xl) var(--r-xl); background: var(--surface); background-image: linear-gradient(180deg, var(--shine), transparent 38%); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--sh-2), var(--glow-accent); max-width: 720px; min-width: 0; }
.respuesta__quien { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.01em; font-weight: 600; color: var(--brand); }
.respuesta__quien svg { width: 14px; height: 14px; }
.respuesta__cifra { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.respuesta__cifra .kpi__num { font-size: 2.2rem; }
.respuesta__texto { font-size: var(--t-small); line-height: 1.55; }
.respuesta__fuentes { display: flex; flex-wrap: wrap; gap: 6px; }
.respuesta__fuentes .tag-pill svg { width: 11px; height: 11px; }
.respuesta__acciones { display: flex; gap: var(--s-2); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--s-3); }
.conversacion { display: grid; gap: var(--s-3); min-width: 0; }

/* Vacío, esqueleto y aviso flotante. */
.vacio { display: grid; justify-items: center; gap: 10px; text-align: center; padding: var(--s-6) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-xl); color: var(--text-muted); }
.vacio .chip-icon { width: 48px; height: 48px; border-radius: var(--r-lg); }
.vacio .chip-icon svg { width: 22px; height: 22px; }
.vacio b { color: var(--text); font-family: var(--font-display); font-size: 1.05rem; }
.vacio p { font-size: var(--t-small); max-width: 36ch; }
.esqueleto { display: grid; gap: 10px; }
.esqueleto span { display: block; height: 12px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--panel) 0%, var(--line-strong) 50%, var(--panel) 100%); background-size: 200% 100%; animation: esqueleto 1.4s linear infinite; }
.esqueleto span.alta { height: 36px; width: 55%; border-radius: var(--r-sm); }
@keyframes esqueleto { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.toast { display: inline-flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: var(--r-lg); background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-line); box-shadow: var(--sh-3); font-size: var(--t-small); max-width: 420px; }
.toast .estado { flex: 0 0 auto; }
.toast b { font-weight: 600; }
.toast .btn-circle { width: 30px; height: 30px; margin-left: auto; flex: 0 0 auto; }
.toast .btn-circle svg { width: 13px; height: 13px; }

/* Ventana modal (onboarding_042 tarjetas, components_d2ce «Risk level»). */
.modal { width: 100%; max-width: 520px; border-radius: var(--r-xl); background: var(--surface); background-image: linear-gradient(180deg, var(--shine), transparent 38%); border: 1px solid var(--line-strong); box-shadow: var(--sh-3); overflow: hidden; }
.modal__cabeza { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.modal__cabeza h4 { flex: 1; }
.modal__cuerpo { padding: var(--s-4); display: grid; gap: var(--s-3); font-size: var(--t-small); color: var(--text-muted); line-height: 1.55; }
.modal__pie { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); background: var(--surface-2); }

/* Pantalla de acceso (kpi_031 marco con halo, layout_3fb1 «Welcome back»). */
.acceso { display: grid; place-items: center; padding: var(--s-6) var(--s-4); min-height: 420px; }
.acceso__caja { width: 100%; max-width: 400px; display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-hero); background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--glass-line); box-shadow: var(--sh-3); }
.acceso__marca { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.03em; }
.acceso__marca .dot { color: var(--signal); }
.acceso__caja h4 { font-size: 1.3rem; }
.acceso__caja .btn { width: 100%; }

/* Los rotulos de una fila de cifras reservan dos lineas: con etiquetas de una
   y de dos lineas, las cifras quedan a la misma altura (segunda nota de Tomas). */
.rejilla-3 > .kpi .kpi__label, .rejilla-4 > .kpi .kpi__label { min-height: 2.1em; align-items: flex-start; }