/* El Legado · componentes del panel: héroe, embudo, dinero, líneas, audiencia, tablas, clientes, avisos y panel derecho. */

/* ---------- Ícono de tarjeta ----------
   Círculo blanco con aro y un ícono de 20 (de trazo, o una marca con su color): ancla cada tarjeta (va dentro del <h2>). */
.card-icon {
  flex: none; display: inline-grid; place-items: center; width: var(--control-height); height: var(--control-height);
  border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text);
}
.card-head h2:has(> .card-icon) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-3); }
/* Con meta debajo del título, el ícono abarca los dos renglones; sin meta, se centra con el título. */
.card-head h2:has(> .muted) > .card-icon { grid-row: span 2; }

/* ---------- Héroe: inversión del periodo ----------
   La cifra más importante de la cuenta, grande y sola; el fondo lleva la atmósfera de la marca. */
.hero { background: var(--atmosphere), var(--surface); }
.hero .card-head { margin-bottom: var(--space-4); }
.hero-figure { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.hero-main { display: grid; gap: var(--space-2); }
.hero-value {
  font-size: var(--text-5xl); font-weight: 500; letter-spacing: var(--tracking-tighter); line-height: 1;
  font-variant-numeric: lining-nums proportional-nums;
}
.hero-change { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: var(--text-xs); }
.hero-stats { display: flex; gap: var(--space-2); margin: 0; }
.hero-stats div { display: grid; gap: 2px; min-width: 120px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.hero-stats dt { font-size: var(--text-xs); color: var(--text-2); }
.hero-stats dd { margin: 0; font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-tight); white-space: nowrap; }
.chart-box-hero { height: 220px; margin-top: var(--space-5); }

/* Leyenda propia en el encabezado: un punto o un trazo por serie, texto chico. */
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--text-2); }
.chart-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend-key { flex: none; display: inline-block; }
.legend-bar { width: 8px; height: 12px; border-radius: var(--radius-pill); background: var(--ink); }
.legend-line { width: 14px; height: 2px; border-radius: var(--radius-pill); background: var(--data-5); }
.legend-dash { width: 14px; height: 0; border-top: 2px dashed var(--text-3); }

/* ---------- Mosaicos de indicadores (embudo) ----------
   Un mosaico gris por etapa, sin bordes de color: la pastilla y el texto dicen cómo va.
   Subgrid: cada fila (etapa, cifra, qué es, cambio, costo) queda a la misma altura en todos. */
.funnel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: var(--space-3); row-gap: var(--space-3); }
.kpi {
  display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--space-1); align-content: start;
  padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); min-width: 0;
}
.kpi-stage { grid-row: 1; display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: 500; color: var(--text-2); }
.kpi-value {
  grid-row: 2; margin-top: var(--space-3);
  font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-tighter); line-height: var(--leading-tight);
  font-variant-numeric: lining-nums proportional-nums;
}
.kpi-title { grid-row: 3; font-size: var(--text-sm); font-weight: 400; color: var(--text-2); line-height: var(--leading-snug); }
.kpi-trend { grid-row: 4; margin-top: var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.kpi-detail { grid-row: 5; font-size: var(--text-xs); color: var(--text-2); }
.kpi-change { font-size: var(--text-xs); color: var(--text-2); }
.kpi-change strong { color: var(--text); }
/* El veredicto en texto (nunca solo color): la pastilla de al lado lleva el tono. */
.status-label { font-size: var(--text-xs); font-weight: 500; color: var(--text-2); white-space: nowrap; }

/* Pastilla del cambio vs periodo anterior (fondo 100, texto 800). La usan indicadores y tablas. */
.cambio {
  display: inline-flex; gap: 2px; padding: 2px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--fill); color: var(--text-chip);
}
.cambio-mejor { background: var(--good-100); color: var(--good-800); }
.cambio-similar { background: var(--watch-100); color: var(--watch-800); }
.cambio-peor { background: var(--bad-100); color: var(--bad-800); }
.no-change { color: var(--text-3); }

.bar { height: 6px; background: var(--fill); border-radius: var(--radius-pill); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--data-5); border-radius: var(--radius-pill); }
.bar-thin { height: 4px; }

/* ---------- General: en qué se va el dinero, líneas y campañas ---------- */
.type-tag { display: inline-flex; align-items: center; gap: var(--space-1); vertical-align: middle; color: var(--text-2); margin-left: var(--space-1); letter-spacing: 0.05em; }
.bar.type-whatsapp span, .split-bar .type-whatsapp, .swatch.type-whatsapp { background: var(--type-whatsapp); }
.bar.type-formularios span, .split-bar .type-formularios, .swatch.type-formularios { background: var(--type-formularios); }
.bar.type-mensajes span, .split-bar .type-mensajes, .swatch.type-mensajes { background: var(--type-mensajes); }
.bar.type-trafico span, .split-bar .type-trafico, .swatch.type-trafico { background: var(--type-trafico); }
.bar.type-video span, .split-bar .type-video, .swatch.type-video { background: var(--type-video); }
.bar.type-visitas_perfil span, .split-bar .type-visitas_perfil, .swatch.type-visitas_perfil { background: var(--type-visitas_perfil); }
.bar.type-seguidores span, .split-bar .type-seguidores, .swatch.type-seguidores { background: var(--type-seguidores); }
.bar.type-alcance span, .split-bar .type-alcance, .swatch.type-alcance { background: var(--type-alcance); }
.bar.type-otros span, .split-bar .type-otros, .swatch.type-otros { background: var(--type-otros); }

/* Reparto en una barra de cápsulas separadas; cada etapa debajo con su resultado y su costo. */
.split-bar { display: flex; gap: var(--space-1); height: 12px; }
.split-bar > span { min-width: var(--space-1); border-radius: var(--radius-pill); }
.money-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.money-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) 96px; gap: var(--space-3);
  align-items: center; padding: var(--space-4) 0;
}
.money-row + .money-row { border-top: 1px solid var(--line-soft); }
.money-name { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.money-name strong { font-weight: 500; }
.money-name small, .money-result small { display: block; font-size: var(--text-xs); color: var(--text-2); }
.swatch { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.money-result { color: var(--text-2); font-size: var(--text-xs); }
.money-result strong { color: var(--text); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-tight); }
.money-cost { font-size: var(--text-xs); color: var(--text-2); text-align: right; }
.money-change { text-align: right; }
.money-cost strong { color: var(--text); font-size: var(--text-sm); font-weight: 500; }

/* Por línea: un mosaico por línea de negocio con su barra de reparto y cuatro cifras. */
.bar-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.bar-row-head strong { font-weight: 500; }
.bar-row-head small { color: var(--text-2); font-size: var(--text-xs); }
.line-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.line-block { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.line-block .bar { background: var(--surface); }
.line-block .bar span { background: var(--ink); }
.line-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); align-items: end; margin: 0; }
.line-stats dt { font-size: var(--text-xs); color: var(--text-2); }
.line-stats dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

.campaign-table th[scope="row"] .bar { margin-top: var(--space-2); max-width: 240px; }
/* La unidad va debajo de la cifra: la tabla cabe en la columna sin esconder el cambio. */
.campaign-table td small { display: block; font-size: var(--text-xs); }

/* ---------- Audiencia ---------- */
.audience-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
/* La columna del nombre se queda con el espacio libre y su barra lo llena: la tabla se lee como gráfica. */
.audience-table th[scope="row"] { width: 45%; }
.audience-table th[scope="row"] .bar { margin-top: var(--space-2); }
.audience-table td small { font-size: var(--text-xs); }
.audience-split-title { font-size: var(--text-xs); font-weight: 500; color: var(--text-2); margin-bottom: var(--space-2); }
.audience-split .facts dt { display: flex; align-items: center; gap: var(--space-2); }
.split-bar .segment-1, .swatch.segment-1 { background: var(--data-1); }
.split-bar .segment-2, .swatch.segment-2 { background: var(--data-5); }
.split-bar .segment-3, .swatch.segment-3 { background: var(--data-8); }
.when-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-6); }
.fact-change { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.chart-box { position: relative; height: 220px; }
.chart-box-wide { height: 256px; }

.facts { margin: var(--space-4) 0 0; display: grid; }
.facts div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
.facts div + div { border-top: 1px solid var(--line-soft); }
.facts dt { color: var(--text-2); }
.facts dd { margin: 0; font-weight: 500; }
/* En mosaicos (Tu gasto): etiqueta chica arriba y la cifra debajo. */
.facts-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.facts-tiles div { display: grid; align-content: start; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); }
.facts-tiles div + div { border-top: 0; }
.facts-tiles dt { font-size: var(--text-xs); line-height: var(--leading-snug); }
.facts-tiles dd { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
.facts-tiles dd .muted { font-size: var(--text-xs); letter-spacing: 0; }
.facts-tiles .fact-change .cambio { letter-spacing: 0; }

/* ---------- Nuevo León (panel de General) ----------
   El mapa a la izquierda y las cifras a la derecha; debajo, la lista de zonas con el mismo número que su flecha.
   El estado en gris, los vecinos solo con su línea y las zonas en la banda del rango con el contorno en tinta. */
.nl-cuerpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.nl-mapa { position: relative; margin: 0; }
.nl-mapa svg { display: block; width: 100%; height: auto; }
.nl-vecino { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.nl-estado { fill: var(--fill); stroke: var(--line-hover); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nl-estado.es-segmentado { fill: url(#nl-rayado); }
.nl-rayado-fondo { fill: var(--fill); }
.nl-rayado-linea { stroke: var(--line-strong); stroke-width: 3; }
.nl-zona-borde { fill: none; stroke: var(--ink); stroke-width: 3; vector-effect: non-scaling-stroke; }
.nl-zona-area { fill: var(--range); }
/* Flecha: círculo en tinta con el número y una punta que toca el centro de la zona. */
.nl-flecha {
  position: absolute; display: grid; justify-items: center; transform: translate(-50%, -100%); pointer-events: none;
}
.nl-flecha span, .nl-marca {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); font-size: var(--text-xs); font-weight: 600; line-height: 1;
}
.nl-flecha span { box-shadow: 0 0 0 2px var(--surface), var(--shadow-2); }
.nl-flecha::after {
  content: ''; width: 0; height: 0; margin-top: -1px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--ink);
}
.nl-cifras { display: grid; gap: var(--space-4); align-content: center; min-width: 0; }
.nl-total, .nl-fuera { display: grid; gap: 2px; }
.nl-total strong { font-size: var(--text-2xl); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
.nl-total .muted, .nl-fuera .muted { font-size: var(--text-xs); }
.nl-fuera { padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
.nl-fuera strong { font-size: var(--text-base); font-weight: 500; }
.nl-fuera strong small { font-weight: 400; }
.nl-lista { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.nl-lista li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.nl-lista-texto { display: grid; gap: 2px; min-width: 0; }
.nl-lista-fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.nl-lista-fila strong { font-weight: 500; }
.nl-lista-fila .muted { flex: none; font-size: var(--text-xs); }
.nl-lista-detalle { color: var(--text-2); font-size: var(--text-xs); }
/* «Todo Nuevo León»: el mismo rayado con que se pinta el estado. */
.nl-marca-entero { background: var(--hatch), var(--fill); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* Lo que se segmenta pero no cabe en el mapa (todo México, otro estado): un aro. */
.nl-marca-fuera { background: none; box-shadow: inset 0 0 0 2px var(--line-hover); }
.card-nl .footnote { margin-top: var(--space-4); }

/* ---------- Estados vacíos dentro de una tarjeta ---------- */
.card-empty { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-2) 0; }
.card-empty p { color: var(--text-2); }

/* ---------- Tabla ----------
   Sin líneas verticales ni cebra: encabezado chico y gris en minúsculas, filas con aire y divisores tenues. */
/* relative: los textos para lectores de pantalla (absolute) quedan dentro del scroll y no estiran la página. */
.table-wrap { position: relative; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: var(--space-3) var(--space-2); text-align: left; border-bottom: 1px solid var(--line-soft); }
.data-table tbody th { min-width: 200px; font-weight: 500; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table thead th {
  padding-top: 0; color: var(--text-2); font-size: var(--text-xs); font-weight: 500;
  border-bottom-color: var(--line); vertical-align: bottom;
}
.data-table thead th.num { white-space: normal; min-width: 72px; }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table td strong { font-weight: 500; }
.row-campaign { background: var(--surface-2); }
.row-campaign th { font-weight: 600; }
.row-adset th { font-weight: 500; padding-left: var(--space-5); }
.adset-cell { display: flex; align-items: center; gap: var(--space-2); }
.row-ad th { font-weight: 400; padding-left: var(--space-7); }
.row-ad td { color: var(--text-2); }
.ad-cell { display: flex; align-items: center; gap: var(--space-3); }
/* Nombre del anuncio arriba y su campaña y tipo debajo, siempre en dos renglones. */
.ad-origin { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.ad-origin > small { color: var(--text-2); font-size: var(--text-xs); }
.ad-cell img, .thumb-empty { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; background: var(--fill); flex-shrink: 0; box-shadow: var(--ring-image); }
/* Activo: punto lleno. No activo: aro vacío (se distingue sin depender del color). */
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); flex-shrink: 0; }
.status-dot.is-on { background: var(--good-500); box-shadow: none; }
.wa-number { display: flex; align-items: center; gap: var(--space-1); font-weight: 400; color: var(--text-2); font-size: var(--text-xs); }

/* ---------- Clientes (personas que llegaron por un anuncio) ---------- */
/* Resumen de Clientes: un mosaico por cifra, con su cambio y el contexto debajo. */
.strip-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.strip-stats li { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4); min-width: 0; border-radius: var(--radius-md); background: var(--surface-2); }
.strip-figure { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.strip-figure strong { font-size: var(--text-2xl); font-weight: 500; letter-spacing: var(--tracking-tight); white-space: nowrap; }
.strip-label { color: var(--text-2); font-size: var(--text-xs); }
.people-head { align-items: center; }
.search { display: flex; gap: var(--space-2); align-items: center; }
.search input[type="search"] { width: 240px; }
.search input[type="search"], .search .btn, .search select { height: var(--control-height); }
.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: calc(-1 * var(--space-1)) 0 var(--space-3); }
.inline-note { font-size: var(--text-xs); color: var(--text-2); background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); max-width: var(--measure); }

.chip { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-pill); padding: 2px var(--space-2); white-space: nowrap; }
.chip-return { background: var(--fill); color: var(--text-chip); }
.chip-filter { background: var(--ink); color: var(--on-ink); text-decoration: none; padding: var(--space-1) var(--space-3); }
.chip-filter .icon { color: var(--on-ink-2); }
.chip-filter:hover .icon { color: var(--on-ink); }

/* Cada celda es una pila: el dato arriba y el detalle gris abajo; todas parten de la misma línea. */
.people-table tbody th, .people-table td { vertical-align: top; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.people-table tbody th { min-width: 200px; font-weight: 400; }
.people-table .col-anuncio { min-width: 200px; }
.cell-stack { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.cell-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--text-2); font-size: var(--text-xs); }
.person strong { font-weight: 500; }
.people-table .ad-cell { align-items: flex-start; }
.people-table .ad-cell img, .people-table .thumb-empty { width: 40px; height: 40px; border-radius: var(--radius-sm); }
.people-table .stage { margin-top: 1px; }
.nowrap { white-space: nowrap; }

.stage { display: inline-block; font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-pill); padding: 2px var(--space-3); background: var(--fill); color: var(--text-chip); white-space: nowrap; }
.stage-ganada { background: var(--good-100); color: var(--good-800); }
.stage-perdida { background: var(--bad-100); color: var(--bad-800); }

.row-actions { text-align: right; white-space: nowrap; }
.row-actions > * + * { margin-left: var(--space-2); }
.people-table .row-actions { padding-top: calc(var(--space-3) - var(--space-1)); padding-left: var(--space-2); }
.people-table .row-actions .btn { height: var(--control-height-row); vertical-align: middle; }
.icon-link {
  display: inline-grid; place-items: center; width: var(--control-height-row); height: var(--control-height-row); vertical-align: middle;
  border: 1px solid var(--line); border-radius: 50%; color: var(--good-700);
  transition: background-color var(--duration-fast) var(--ease);
}
.icon-link:hover { background: var(--good-50); }
.btn-ghost { border-color: var(--line); vertical-align: middle; }

.count-button {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-pill); padding: 2px var(--space-3);
  font: 600 var(--text-xs) / 1.5 var(--font-body); color: var(--text); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.count-button:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.count-button span { color: var(--text-3); }
.count-button:hover span { color: var(--on-ink-2); }

.pager { display: flex; justify-content: center; align-items: center; gap: var(--space-3); margin-top: var(--space-4); font-size: var(--text-xs); }

/* Estado vacío: ícono, explicación y qué hacer. */
.empty-state { text-align: center; padding: var(--space-7) var(--space-4); display: grid; gap: var(--space-2); justify-items: center; }
.empty-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--fill); color: var(--text-2); display: grid; place-items: center; margin-bottom: var(--space-2); }
.empty-state h3 { font-size: var(--text-xl); font-weight: 500; letter-spacing: var(--tracking-tight); }
.empty-state p { color: var(--text-2); max-width: 46ch; }
.empty-state .btn { margin-top: var(--space-3); }

.priority-info { background: var(--fill); color: var(--text-chip); }
.modal-subtitle { margin-top: var(--space-1); color: var(--text-2); }

/* ---------- Chats identificados: avisos de medición y cobertura ---------- */
.unmeasured { font-size: var(--text-xs); color: var(--text-2); white-space: nowrap; }

/* Avisos bajo el encabezado, fuera de las tarjetas: una franja redondeada que flota, uno a la vez y con ×. */
.avisos { display: grid; gap: var(--space-2); margin: calc(-1 * var(--space-1)) 0 var(--space-5); }
.aviso {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius: var(--radius-lg);
  font-size: var(--text-sm); box-shadow: var(--shadow-2);
}
.aviso > details, .aviso-row { flex: 1; min-width: 0; }
.aviso summary, .aviso-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-height: var(--control-height-row); }
.aviso summary { cursor: pointer; list-style: none; border-radius: var(--radius-sm); }
.aviso summary:focus:not(:focus-visible) { outline: none; }
.aviso summary::-webkit-details-marker { display: none; }
.aviso-icon {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600; line-height: 1;
}
.aviso-title { font-weight: 500; }
.aviso-link { font-size: var(--text-xs); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
/* Ocupa todo el ancho de la franja (excepción a --measure: el aviso es corto y la franja, ancha). */
.aviso details p { font-size: var(--text-xs); line-height: 1.6; margin: var(--space-1) 0 var(--space-2) calc(24px + var(--space-3)); }
/* Un aviso a la vez: "‹ 1/2 ›" y la × a la derecha, en círculos. */
.avisos[hidden], .aviso[hidden], .aviso-pager[hidden] { display: none; }
.aviso-controls { flex: none; display: flex; align-items: center; gap: var(--space-1); }
.aviso-pager { display: flex; align-items: center; font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.aviso-pager span { min-width: 3ch; text-align: center; }
.aviso-pager button, .aviso-close {
  flex: none; display: grid; place-items: center; width: var(--control-height-row); height: var(--control-height-row);
  border: 0; border-radius: 50%; background: none; color: inherit; font-size: var(--text-lg); line-height: 1; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease);
}

/* Medición: tinta de la marca, el aviso más visible de la página. */
.aviso-info { background: var(--ink); color: var(--on-ink); }
.aviso-info .aviso-icon { background: var(--ink-soft); color: var(--on-ink); }
.aviso-info .aviso-link, .aviso-info details p { color: var(--on-ink-2); }
.aviso-info summary:hover .aviso-link { color: var(--on-ink); }
.aviso-info .aviso-pager button:hover, .aviso-info .aviso-close:hover { background: var(--ink-soft); }

/* Cobertura: ámbar de "revisar". */
.aviso-watch { background: var(--watch-100); color: var(--watch-800); }
.aviso-watch .aviso-icon { background: var(--watch-500); color: var(--on-ink); }
.aviso-watch .aviso-pager button:hover, .aviso-watch .aviso-close:hover { background: var(--watch-50); }

.chip-button { border: 0; cursor: pointer; font-family: var(--font-body); }
.chip-button:hover { background: var(--ink); color: var(--on-ink); }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline-item {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); position: relative;
}
.timeline-item:last-child { border-bottom: 0; }
.timeline-num { width: 32px; height: 32px; border-radius: 50%; background: var(--fill); color: var(--text-chip); display: grid; place-items: center; font-weight: 600; font-size: var(--text-xs); }
.timeline-item:first-child .timeline-num { background: var(--ink); color: var(--on-ink); }
.timeline-item time { font-size: var(--text-xs); color: var(--text-2); white-space: nowrap; }

/* ---------- Pestañas en píldora (modal de persona y campana) ----------
   Pista gris y la activa en tinta (tinta = dónde estás), con su número en una cápsula. */
.pill-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: var(--space-1); background: var(--fill); border-radius: var(--radius-pill); }
.pill-tabs [role="tab"] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height-compact); padding: 0 var(--space-4);
  background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  font: inherit; font-weight: 500; color: var(--text-2); white-space: nowrap;
  transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.pill-tabs [role="tab"]:hover { color: var(--text); }
.pill-tabs [role="tab"][aria-selected="true"] { color: var(--on-ink); background: var(--ink); box-shadow: var(--shadow-ink); }
.pill-tabs [role="tab"][aria-selected="true"] .marca { color: inherit; }
.tab-count {
  font-size: var(--text-xs); font-weight: 600; background: var(--surface); color: var(--text-chip);
  border-radius: var(--radius-pill); padding: 0 var(--space-2);
}
.pill-tabs [role="tab"][aria-selected="true"] .tab-count { background: var(--ink-soft); color: var(--on-ink); }

/* ---------- Notificaciones (la campana del encabezado) ----------
   Botón de ícono con el número de nuevas; el panel flota debajo (elevación 3). Cada notificación: marca en círculo
   ("!" alto, punto medio: forma además de color), título, resumen completo (sin cortar) y un punto azul si es nueva. */
.campana { position: relative; }
.campana-boton { position: relative; }
.campana-cuenta {
  position: absolute; top: -4px; right: -4px; display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 var(--space-1); border-radius: var(--radius-pill);
  background: var(--bad-700); color: var(--on-ink); font-size: var(--text-xs); font-weight: 600; line-height: 1;
  /* Borde invisible del color del pozo: separa el número de la campana. */
  box-shadow: 0 0 0 2px var(--well);
}
.campana-cuenta[hidden] { display: none; }
.campana-panel {
  position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: var(--z-menu);
  width: min(400px, calc(100vw - 2 * var(--space-4))); max-height: min(70vh, 560px); overflow-y: auto;
  padding: var(--space-4) var(--space-3) var(--space-3); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-3), 0 0 0 1px var(--line);
}
.campana-panel[hidden] { display: none; }
.campana-panel:not([hidden]) { animation: campana-in var(--duration) var(--ease); }
@keyframes campana-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Dos pestañas a todo el ancho del panel: pendientes y el historial de resueltas. */
.notif-tabs { display: flex; margin-bottom: var(--space-3); }
.notif-tabs [role="tab"] { flex: 1; }
.notif-caption { margin: 0 var(--space-2) var(--space-2); font-size: var(--text-xs); color: var(--text-2); }
.notif-aviso {
  display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: var(--good-50); color: var(--good-800); font-size: var(--text-xs); font-weight: 500;
}
.campana-panel .form-error { margin: 0 0 var(--space-3); }
.notif-vacio { padding: var(--space-2); font-size: var(--text-xs); color: var(--text-2); max-width: 40ch; }

/* Pendiente: la notificación (abre su detalle) y, a la derecha, la palomita para marcarla como resuelta. */
.notif { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-1); }
.notif-resolver {
  display: grid; place-items: center; width: var(--control-height-row); height: var(--control-height-row); padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text-2); cursor: pointer;
  transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.notif-resolver:hover, .notif-resolver[aria-expanded="true"] { color: var(--good-700); border-color: var(--good-500); background: var(--good-50); }
/* Cómo se resolvió: debajo de la notificación, alineado con su texto. */
.notif-form {
  grid-column: 1 / -1; display: grid; gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-2) calc(32px + var(--space-3) + var(--space-2)); padding: var(--space-3);
  border-radius: var(--radius-md); background: var(--surface-2);
}
.notif-form[hidden] { display: none; }
.notif-form label { font-size: var(--text-xs); font-weight: 500; color: var(--text-2); }
.notif-form textarea { width: 100%; min-height: 72px; resize: vertical; }
.notif-form [aria-invalid="true"] { border-color: var(--bad-500); background: var(--bad-50); }
.notif-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-1); }
.field-error { margin: 0; color: var(--bad-800); font-size: var(--text-xs); }

/* Resueltas: palomita, título, cómo se resolvió (tal como se escribió) y cuándo y quién, con "Reabrir". */
.notif-historial { list-style: none; margin: 0; padding: 0; display: grid; }
.notif-resuelta { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-2); }
.notif-resuelta + .notif-resuelta { border-top: 1px solid var(--line-soft); }
.notif-check { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--good-100); color: var(--good-700); }
.notif-check .icon, .all-clear-icon .icon { stroke-width: 2.5; }
.notif-resuelta-texto { display: grid; gap: var(--space-2); min-width: 0; }
.notif-resuelta-texto strong { font-weight: 500; line-height: var(--leading-snug); }
.notif-como { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); white-space: pre-line; overflow-wrap: anywhere; }
.notif-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font-size: var(--text-xs); color: var(--text-2); }
.notif-meta form { display: inline; }
.notif-meta .link-button { color: var(--text); }
.campana-cargando { display: grid; gap: var(--space-2); padding: var(--space-2); }
.campana-error { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-2); color: var(--text-2); }
.notif-body .all-clear { padding: var(--space-2); }

.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.alert-item {
  width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) 8px; gap: var(--space-3); align-items: center;
  padding: var(--space-2); border: 0; border-radius: var(--radius-md); background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease);
}
.alert-item:hover { background: var(--surface-2); }
/* Nueva: fondo azul muy claro y un punto (se distingue también sin color: el punto solo está en las nuevas). */
.alert-item.is-new { background: var(--blue-50); }
.alert-item.is-new:hover { background: var(--blue-100); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; }
.alert-item.is-new .notif-dot { background: var(--blue-500); }
.alert-mark { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); align-self: start; }
.alert-mark::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.alert-alto .alert-mark { background: var(--bad-100); }
.alert-alto .alert-mark::before { content: '!'; width: auto; height: auto; background: none; color: var(--bad-700); font-size: var(--text-sm); font-weight: 600; line-height: 1; }
.alert-medio .alert-mark { background: var(--watch-100); }
.alert-medio .alert-mark::before { background: var(--watch-500); }
.alert-text { display: grid; gap: 2px; min-width: 0; }
.alert-text strong { font-weight: 500; line-height: var(--leading-snug); }
.alert-text span { font-size: var(--text-xs); color: var(--text-2); overflow-wrap: anywhere; }
.all-clear { display: flex; gap: var(--space-3); align-items: center; color: var(--text-2); }
.all-clear-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--good-100); color: var(--good-700); display: grid; place-items: center; flex-shrink: 0; }
.all-clear strong { display: block; color: var(--text); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .campana-panel:not([hidden]) { animation: none; }
}