/* ============================================================
   COMPONENTS.CSS — capa canónica del rediseño (AUDIT-CSS-P3/P4, 06/07/2026).
   Construye las decisiones cerradas con Fran sobre los tokens de atlas-tokens.css:
     · escala tipográfica  → clases .t-*
     · filtro único        → .fb-*  (una fila a --ctrl-h; secundarios en panel "Más filtros")
     · tarjeta KPI única    → .kc-*  + rejilla canónica .kgrid (móvil 2 · tablet 3 · escritorio N por módulo)
   Cargar DESPUÉS de atlas-tokens.css y ANTES de las hojas por módulo (para que un módulo
   pueda AFINAR, no al revés). Nombres de clase de prefijo propio, 0 colisión con los 7
   patrones de filtro (.ctrlbar/.mat-*/.tk-ctrl/.seg/.fbar/.toolbar/.quickbar) ni con las
   ~12 familias de KPI (verificado por grep). ADITIVO: sin consumidor aún salvo el piloto.
   El toggle del panel usa el estado .is-open (convención viva del repo); el wiring JS
   vive en el módulo que lo adopta (mínimo y genérico), no aquí.
   ============================================================ */

/* ── 1. TIPOGRAFÍA — 5 tamaños · 4 pesos (line-heights de la decisión cerrada) ── */
.t-kpi   { font-family:var(--font-num);  font-size:var(--fs-kpi);   font-weight:var(--fw-med);  line-height:1.1;  font-variant-numeric:tabular-nums; }
.t-title { font-family:var(--font-sans); font-size:var(--fs-title); font-weight:var(--fw-bold); line-height:1.2; }
.t-sec   { font-family:var(--font-sans); font-size:var(--fs-sec);   font-weight:var(--fw-semi); line-height:1.25; }
.t-body  { font-family:var(--font-sans); font-size:var(--fs-body);  font-weight:var(--fw-reg);  line-height:1.45; }
.t-num   { font-family:var(--font-num);  font-size:var(--fs-body);  font-weight:var(--fw-reg);  line-height:1.45; font-variant-numeric:tabular-nums; }  /* cifra de tabla: mismo 14px, mono */
.t-label { font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); line-height:1.3; text-transform:uppercase; letter-spacing:.06em; }

/* ── 2. FILTRO ÚNICO — .fb-* ─────────────────────────────────────────────
   .fb-wrap  contenedor (barra + panel apilados)
   .fb-bar   fila básica: SIEMPRE tiempo (seg + año + fechas) + 1-2 primarios; nowrap
   .fb-more  botón que despliega .fb-panel (filtros secundarios en rejilla)
   Todos los controles a --ctrl-h (34px), mismo borde y radio. */
.fb-wrap { margin-bottom:var(--s-5); }
.fb-bar {
  display:flex; align-items:center; gap:var(--s-2); flex-wrap:nowrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:var(--s-2) var(--s-3); overflow-x:auto;
}
.fb-group { display:inline-flex; align-items:center; gap:var(--s-1); flex-shrink:0; }
.fb-lbl   { font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); line-height:1; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); }
.fb-spacer { margin-left:auto; }

/* control uniforme (select / input / botón) */
.fb-ctrl {
  height:var(--ctrl-h); box-sizing:border-box; display:inline-flex; align-items:center; gap:6px;
  padding:0 var(--s-3); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); font-family:var(--font-sans); font-size:var(--fs-body);
  color:var(--text); cursor:pointer; white-space:nowrap; flex-shrink:0;
}
.fb-ctrl:hover { border-color:var(--border-strong); }
select.fb-ctrl {
  appearance:none; -webkit-appearance:none; padding-right:26px;
  background-image:var(--select-arrow); background-repeat:no-repeat;
  background-position:right 10px center;
}
input.fb-ctrl { cursor:text; }
input.fb-ctrl[type="date"] { font-family:var(--font-num); }
select[multiple].fb-ctrl { height:auto; padding-top:4px; padding-bottom:4px; background-image:none; }  /* multiselección: la altura la fija size=N, no --ctrl-h */

/* segmentado de tiempo (Día / MTD / YTD) */
.fb-seg { display:inline-flex; height:var(--ctrl-h); box-sizing:border-box; padding:2px; gap:2px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); flex-shrink:0; }
.fb-seg__btn { border:0; background:transparent; padding:0 var(--s-3); border-radius:calc(var(--radius-sm) - 3px); font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); color:var(--text-2); cursor:pointer; display:inline-flex; align-items:center; }
.fb-seg__btn.is-active { background:var(--surface); color:var(--accent-strong); box-shadow:var(--shadow-card); }

/* Adopción del segmentado repo-estándar .seg dentro de la barra canónica: muchos módulos ya tienen
   el JS ligado a .seg__btn (querySelectorAll) → NO se renombra; la barra le da el aspecto canónico
   por especificidad (.fb-bar .seg = 0,2,0 gana a la .seg de la hoja de módulo). P5. */
.fb-bar .seg { display:inline-flex; height:var(--ctrl-h); box-sizing:border-box; padding:2px; gap:2px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); flex-shrink:0; margin:0; }
.fb-bar .seg__btn { border:0; background:transparent; padding:0 var(--s-3); border-radius:calc(var(--radius-sm) - 3px); font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); color:var(--text-2); cursor:pointer; display:inline-flex; align-items:center; transition:background .14s var(--ease), color .14s var(--ease); }
.fb-bar .seg__btn:hover { color:var(--text); }
.fb-bar .seg__btn.is-active { background:var(--surface); color:var(--accent-strong); box-shadow:var(--shadow-card); }
.fb-bar .seg__btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* botón "Más filtros" */
.fb-more { border:1px solid var(--border); }
.fb-more[aria-expanded="true"] { background:var(--accent-weak); border-color:var(--accent); color:var(--accent-strong); }
.fb-more .fb-more__caret { transition:transform .14s var(--ease); font-size:10px; }
.fb-more[aria-expanded="true"] .fb-more__caret { transform:rotate(180deg); }

/* panel de filtros secundarios (rejilla) */
.fb-panel {
  display:none; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:var(--s-3); margin-top:var(--s-2); padding:var(--s-3);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-card);
}
.fb-panel.is-open { display:grid; }
.fb-field { display:flex; flex-direction:column; gap:var(--s-1); }
.fb-field > .fb-ctrl, .fb-field > select.fb-ctrl { width:100%; }

.fb-ctrl, .fb-seg__btn, .fb-more { transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease); }
.fb-ctrl:focus-visible, .fb-seg__btn:focus-visible, .fb-more:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) {
  .fb-ctrl, .fb-seg__btn, .fb-more, .fb-more__caret { transition:none; }
}

/* ── 3. TARJETA KPI única + REJILLA canónica ─────────────────────────────
   Rejilla: columnas FIJAS por breakpoint (móvil 2 · tablet 3 · escritorio 5), tarjetas 1fr.
   Card: etiqueta 12/600 mayúsculas atenuada · cifra 30/500 DM Mono · sub 12/400 atenuada. */
/* Columnas de ESCRITORIO declarables por módulo (--kgrid-cols, def 5). Móvil=2 y tablet=3 son
   fijos en todos. Cada módulo elige N con la regla P4.1: filas equilibradas (evitar huérfanas
   tipo 5+3) y, a 1366, el valor mono de 30px MÁS ancho del módulo debe caber en UNA línea; si no,
   bajar un paso de columnas (NUNCA reducir la fuente). Tasaciones (8 KPIs) → .kgrid--4 (4+4). */
.kgrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--kpi-gap); --kgrid-cols:5; }
@media (min-width:768px)  { .kgrid { grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1200px) { .kgrid { grid-template-columns:repeat(var(--kgrid-cols), 1fr); } }
.kgrid--3 { --kgrid-cols:3; }
.kgrid--4 { --kgrid-cols:4; }
.kgrid--5 { --kgrid-cols:5; }

.kc-card {
  display:flex; flex-direction:column; gap:var(--kpi-inner-gap);
  background:var(--surface); border:var(--card-border); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:var(--kpi-pad);
}
.kc-label { font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); line-height:1.3; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }
.kc-val   { font-family:var(--font-num);  font-size:var(--fs-kpi);   font-weight:var(--fw-med);  line-height:1.1; color:var(--text); font-variant-numeric:tabular-nums; }
.kc-sub   { font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-reg);  line-height:1.3; color:var(--text-3); }

/* ── Variante KPI de MARCA (.kc-card--brand): misma familia .kc-card (fondo/borde/radio/sombra y
   vocabulario tipográfico) pero HORIZONTAL, con slot de logo. El color de marca vive SOLO en el logo
   (--kc-brand-color, lo fija el consumidor); el resto es Atlas. Para cuota por marca (Matriculaciones
   SEAT/CUPRA/SKODA…). Aprobada por Fran (P7.1). Requiere las dos clases: class="kc-card kc-card--brand". ── */
.kc-card--brand { flex-direction:row; align-items:center; gap:var(--s-4); }
.kc-brand__logo  { width:46px; height:46px; flex-shrink:0; border-radius:12px; display:grid; place-items:center; font-family:var(--font-num); font-weight:var(--fw-semi); font-size:13px; letter-spacing:.02em; color:#fff; background:var(--kc-brand-color, var(--accent)); }
.kc-brand__body  { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.kc-brand__name  { font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); line-height:1.3; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); }
.kc-brand__share { font-family:var(--font-num); font-size:var(--fs-kpi); font-weight:var(--fw-med); line-height:1.1; color:var(--text); font-variant-numeric:tabular-nums; }
.kc-brand__share small { font-size:var(--fs-label); font-weight:var(--fw-reg); color:var(--text-3); }
.kc-brand__foot  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-reg); color:var(--text-3); }
.kc-brand__count { font-family:var(--font-num); color:var(--text-3); }

/* ── Variante TARJETA DE ENTIDAD (.kc-card--entity): variante COMPUESTA de .kc-card (misma familia:
   fondo/borde/radio/sombra + escala tipográfica) para "una entidad con cabecera+CTA, cifra grande (hero),
   badges de estado, bloque de límite (3 estados) y grid de sub-KPIs". Endeudamiento por entidad
   (polizas.js) y cualquier vista futura del mismo patrón. Aprobada por Fran (P10.2). Requiere las dos
   clases: class="kc-card kc-card--entity". Estados/colores por tokens semánticos (--pos/--neg/--warn). ── */
.kc-card--entity { gap:var(--s-3); }
.kc-card--entity:hover { border-color:var(--accent); box-shadow:var(--shadow-pop); }
/* cabecera: nombre + pill de tipo (debajo, izq) · CTA (arriba, dcha) */
.kc-ent__head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3); }
.kc-ent__id   { display:flex; flex-direction:column; gap:4px; min-width:0; align-items:flex-start; }
.kc-ent__name { font-family:var(--font-sans); font-size:var(--fs-sec); font-weight:var(--fw-bold); letter-spacing:-.01em; line-height:1.2; color:var(--text); }
.kc-ent__pill { font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); letter-spacing:.03em; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); padding:2px 9px; border-radius:var(--radius-pill); }
.kc-ent__meta { font-family:var(--font-sans); font-size:var(--fs-label); color:var(--text-3); }
.kc-ent__cta  { font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); color:var(--accent-strong); white-space:nowrap; flex-shrink:0; background:none; border:0; cursor:pointer; transition:transform .15s var(--ease); }
.kc-card--entity:hover .kc-ent__cta { transform:translateX(3px); }
/* hero: eyebrow + cifra 30px mono accent-strong */
.kc-ent__hero  { display:flex; flex-direction:column; gap:4px; }
.kc-ent__hero-k{ font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.kc-ent__val   { font-family:var(--font-num); font-size:var(--fs-kpi); font-weight:var(--fw-med); letter-spacing:-.01em; line-height:1; color:var(--accent-strong); white-space:nowrap; font-variant-numeric:tabular-nums; }
/* badges de estado (chips con dot semántico): vivo (verde, siempre) · vencido (rojo, si >0) · sinvto (ámbar, si >0) */
.kc-ent__badges { display:flex; flex-wrap:wrap; gap:7px; }
.kc-ent__badge  { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); padding:3px 10px; border-radius:var(--radius-pill); background:var(--surface-2); color:var(--text-2); }
.kc-ent__badge .kc-ent__dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; }
.kc-ent__badge b { font-family:var(--font-num); font-weight:var(--fw-semi); }
.kc-ent__badge--vivo    { background:var(--pos-bg); color:var(--pos); }
.kc-ent__badge--vencido { background:var(--neg-bg); color:var(--neg); }
.kc-ent__badge--sinvto  { background:var(--warn-bg); color:var(--warn); }
/* bloque de límite: 3 estados (informado con barra / dashed no-informado / na) */
.kc-ent__limit { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:13px 15px; display:flex; flex-direction:column; gap:9px; }
.kc-ent__limit--none, .kc-ent__limit--na { border-style:dashed; }
.kc-ent__limit--over { background:var(--neg-bg); border-color:color-mix(in srgb, var(--neg) 26%, transparent); }
.kc-ent__limit-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.kc-ent__limit-k  { font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.kc-ent__limit-tag{ font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-bold); padding:2px 9px; border-radius:var(--radius-pill); }
.kc-ent__limit-tag--ok   { color:var(--accent-strong); background:var(--accent-weak); }
.kc-ent__limit-tag--over { color:#fff; background:var(--neg); }
.kc-ent__limit-tag--none { color:var(--text-3); background:var(--surface); border:1px solid var(--border); }
.kc-ent__limit-bar { height:9px; border-radius:9px; background:var(--surface); border:1px solid var(--border); overflow:hidden; }
.kc-ent__limit-bar i { display:block; height:100%; border-radius:9px; background:var(--accent); transition:width .6s var(--ease); }
.kc-ent__limit-bar i.is-over { background:var(--neg); }
.kc-ent__limit-row { display:flex; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; font-family:var(--font-sans); font-size:var(--fs-label); color:var(--text-2); }
.kc-ent__limit-row b  { font-family:var(--font-num); font-weight:var(--fw-semi); color:var(--text); white-space:nowrap; }
.kc-ent__limit-rk { font-family:var(--font-sans); font-size:var(--fs-label); letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); display:block; margin-bottom:1px; }
.kc-ent__limit-note { font-family:var(--font-sans); font-size:var(--fs-label); color:var(--text-3); line-height:1.5; }
/* grid de sub-KPIs (rejilla de 3 huecos; hoy 2 usados) */
.kc-ent__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin:0; }
.kc-ent__stat  { background:var(--surface); padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.kc-ent__stat-k{ font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); }
.kc-ent__stat-v{ font-family:var(--font-num); font-size:var(--fs-body); font-weight:var(--fw-med); color:var(--text); font-variant-numeric:tabular-nums; }

/* ── Variante KPI CON ICONO (.kc-card--icon): misma familia .kc-card (fondo/borde/radio/sombra +
   escala tipográfica: cifra --fs-kpi 30 / etiqueta --fs-label 12) con SLOT DE CHIP (cuadro 26px a la
   IZQUIERDA de la etiqueta, en la misma fila) y SEMÁFORO OPCIONAL para porcentajes: modificadores
   .is-ok/.is-warn/.is-bad → borde IZQUIERDO 3px + cifra en color, por tokens --pos/--warn/--neg (las
   cards neutras —importes/horas— van sin semáforo). Para tiras KPI con icono decorativo (Taller
   Mec/Carr). Aprobada por Fran (P11.2). Requiere las dos clases: class="kc-card kc-card--icon".
   Contrato de DOM: __top contiene __chip (primero) + __label; luego __val; opcional __foot > __sub. ── */
.kc-card--icon { gap:9px; position:relative; overflow:hidden; }
.kc-ico__top   { display:flex; align-items:center; gap:var(--s-2); }
.kc-ico__chip  { width:26px; height:26px; flex-shrink:0; border-radius:7px; display:grid; place-items:center; font-size:13px; background:var(--accent-weak); color:var(--accent-strong); }
.kc-ico__label { font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); line-height:1.3; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }
.kc-ico__val   { font-family:var(--font-num); font-size:var(--fs-kpi); font-weight:var(--fw-med); line-height:1.1; color:var(--text); font-variant-numeric:tabular-nums; }
.kc-ico__val small { font-size:var(--fs-body); font-weight:var(--fw-reg); color:var(--text-3); }
.kc-ico__foot  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--font-sans); font-size:var(--fs-label); }
.kc-ico__sub   { font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-reg); color:var(--text-3); }
.kc-card--icon.is-pending .kc-ico__val { font-size:var(--fs-body); font-weight:var(--fw-med); color:var(--text-3); }
.kc-card--icon.is-ok   { border-left:3px solid var(--pos); }
.kc-card--icon.is-warn { border-left:3px solid var(--warn); }
.kc-card--icon.is-bad  { border-left:3px solid var(--neg); }
.kc-card--icon.is-ok   .kc-ico__val { color:var(--pos); }
.kc-card--icon.is-warn .kc-ico__val { color:var(--warn); }
.kc-card--icon.is-bad  .kc-ico__val { color:var(--neg); }