/* ==========================================================================
   LENGUAJE COMPARTIDO — Primitivos bajo .bl: seg, btn, tray, chip, kpi, micro-label.
   Archivo 7 de 9. El ORDEN de los 9 importa: Docs/DESIGN-LANGUAGE.md.
   ========================================================================== */

/* ==========================================================================
   ACUERDOS DE PAGO — Todo bajo .ap. Ver §2.6 y §6.10.
   Archivo 7 de 9. El ORDEN de los nueve importa: Docs/DESIGN-LANGUAGE.md.
   ========================================================================== */
/* --------------------------------------------------------------------------
   1.2 — typography & geometry utilities (visual-02 §2)
   -------------------------------------------------------------------------- */
/* §2.1 — KPI bar. El gap vivia en un style inline; la escala de Spacing de
   MudStack no da 10px, asi que se declara aca. */
.bl .kpi-row{ gap: 10px; }
.bl .kpi{ display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    background: var(--bl-kpi-bg); border: 1px solid var(--gh-line-card); border-radius: 12px;
    font-size: 12.5px; font-weight: 600; color: var(--gh-label-2); white-space: nowrap; }
.bl .kpi b{ font-size: 20px; font-weight: 700; color: var(--bl-btn-primary-bg); line-height: 1; }
.bl .kpi--warn{ background: var(--bl-kpi-warn-bg); border-color: var(--bl-kpi-warn-line); color: var(--bl-kpi-warn-fg); }
.bl .kpi--warn b{ color: var(--bl-kpi-warn-fg); }
.bl .kpi--info{ background: var(--bl-kpi-info-bg); border-color: var(--bl-kpi-info-line); color: var(--bl-kpi-info-fg); }
.bl .kpi--info b{ color: var(--bl-kpi-info-fg); }
/* Saldados es archivo cerrado: verde, el mismo del chip Pagado. */
.bl .kpi--ok{ background: var(--bl-chip-ok-bg); border-color: var(--ap-chip-ok-line); color: var(--bl-chip-ok-fg); }
.bl .kpi--ok b{ color: var(--bl-chip-ok-fg); }

/* §2.3/§6/D14 — controles segmentados, base = variante A. Sobre MudToggleGroup
   hay que apagar su borde y el de sus items: dibujan una caja que no va. */
.bl .seg{ display: flex; align-items: center; gap: 5px; height: var(--bl-h-field); padding: 0 4px;
    background: var(--bl-seg-track); border-radius: var(--gh-r-row-1); }
.bl .seg.mud-toggle-group{ border: 0; overflow: visible; }
.bl .seg > button.mud-button-outlined,
.bl .seg > button.mud-button-filled{ border: 0; box-shadow: none; min-width: 0; height: auto;
    text-transform: none; letter-spacing: normal; }
.bl .seg > button{ padding: 9px 14px; border: 0; border-radius: 8px; background: transparent;
    font-size: 13px; font-weight: 600; color: var(--bl-seg-inactive-fg); cursor: pointer;
    white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.bl .seg > button:hover{ background: var(--bl-seg-track-hover); }
.bl .seg > button.seg__on{ background: var(--bl-seg-active-bg); font-weight: 700; color: var(--bl-seg-active-fg); }
.bl .seg > button:disabled{ cursor: default; opacity: .55; }

/* variant B — in-dialog (Distribución de la prima / Alcance / Formato) */
.bl .seg__label{ display: block; font-size: 10.5px; font-weight: 600; color: var(--gh-label-2);
    line-height: 1.2; padding-left: 2px; margin-bottom: 5px; }
.bl .seg.seg--dialog{ height: 44px; border-radius: var(--bl-r-control); }
.bl .seg.seg--dialog > button{ flex: 1; height: 36px; border-radius: 7px; padding: 0;
    display: flex; align-items: center; justify-content: center; font-size: 13.5px; }

/* variant C — Tipo de aplicación (fill inverts, active pill fills) */
.bl .seg.seg--fill{ background: var(--bl-seg-track-fill); }
.bl .seg.seg--fill > button:hover{ background: var(--bl-seg-track-fill-hover); }
.bl .seg.seg--fill > button.seg__on{ background: var(--bl-seg-active-fill-bg); color: var(--bl-seg-active-fill-fg); }

/* micro-label shrink rule (visual-02 §1.1): 11.5/700/.09em at L1, 10.5/700/.10em
   at L2, muted --gh-label-1 (L1) -> muted-2 --gh-label-2 (L2). */
.bl .micro-label{ font-size: 10.5px; font-weight: 700; letter-spacing: .10em;
    text-transform: uppercase; color: var(--gh-label-2); }

/* §2.6 — trays (reuse the app's own gh-tray-* chain, D9: no duplicate names) */
.bl .tray{ padding: var(--gh-pad-tray); }
.bl .tray--l1{ margin: 0 20px 20px 46px; background: var(--gh-tray-1);
    border: 1px solid var(--gh-line-tray-1); border-radius: var(--gh-r-tray-1); }
.bl .tray--l2{ margin-left: var(--gh-indent); background: var(--gh-tray-2);
    border: 1px solid var(--gh-line-tray-2); border-radius: var(--gh-r-tray-2); }

/* Dentro de una bandeja el relleno invierte, como una tarjeta real. El rol es
   --gh-row-2: da los dos valores que ya pintaba. Ver §12. */
.bl .tray .mud-input.mud-input-filled{ background: var(--gh-row-2); }
.bl .tray .mud-input.mud-input-filled:hover{ background: var(--gh-surf-hover); }
/* Clavado a proposito: el alfa compone sobre la bandeja, no sobre el campo. Ver §12. */
.app-dark .bl .tray .mud-input.mud-input-filled:hover{ background: #26314599; }

/* --------------------------------------------------------------------------
   1.3 — shared components (visual-02 §3)
   -------------------------------------------------------------------------- */
/* §3.1 — status chip (5 variants + 2 size profiles) */
.bl .status-chip{ display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
    border-radius: var(--r-chip, 999px); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.bl .status-chip .dot{ width: 7px; height: 7px; border-radius: 999px; flex: none; }
/* Sobre MudChip: impone alto minimo y mete el contenido en un wrapper, asi que
   el gap del punto no llega solo. */
.bl .status-chip.mud-chip{ height: auto; min-height: 0; margin: 0; }
.bl .status-chip.mud-chip .mud-chip-content{ display: inline-flex; align-items: center; gap: 7px; }
.bl .status-chip.mud-chip .chip__glyph{ font-size: 15px; }
.bl .status-chip--neutral{ background: var(--surf-chip-neutral); color: var(--gh-label-2); }
.bl .status-chip--neutral .dot{ background: var(--text-placeholder); }
.bl .status-chip--info{ background: var(--status-info-bg); color: var(--status-info-fg); }
.bl .status-chip--info .dot{ background: var(--status-info-dot); }
.bl .status-chip--warn{ background: var(--status-warn-bg); color: var(--status-warn-fg); }
.bl .status-chip--warn .dot{ background: var(--bl-chip-warn-dot); }
.bl .status-chip--ok{ background: var(--bl-chip-ok-bg); color: var(--bl-chip-ok-fg); }
.bl .status-chip--ok .dot{ background: var(--bl-chip-ok-dot); }
.bl .status-chip--danger{ background: var(--status-danger-bg); color: var(--status-danger-fg); }
.bl .status-chip--danger .dot{ background: var(--status-danger-dot); }

/* dialog summary-strip size profile */
.bl .status-chip--sm{ padding: 4px 11px; }

/* flat-view size profile */
.bl .status-chip--xs{ padding: 4px 10px; gap: 6px; font-size: 12.5px; font-weight: 700; }
.bl .status-chip--xs .dot{ width: 6px; height: 6px; }
.bl .tray-body{ overflow: hidden; transition: height .2s ease; }

/* Utilidad de area de contacto de 32px para controles icon-only mas chicos. */
.bl .hit-32{ display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; min-height: 32px; cursor: pointer; }
.bl .hit-32:focus-visible{ outline: 2px solid var(--bl-btn-primary-bg); outline-offset: 2px; border-radius: 8px; }
.bl .btn--flat{ height: var(--bl-h-btn-compact); padding: 0 14px; border-radius: 9px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    white-space: nowrap; cursor: pointer; border: 0; display: inline-flex; align-items: center; }
.bl .btn--flat.btn--filled{ background: var(--bl-btn-primary-bg); color: var(--bl-btn-primary-fg); }
.bl .btn--flat.btn--filled:hover{ background: var(--bl-btn-primary-bg-hover); }
.bl .btn--flat.btn--outlined{ background: transparent; color: var(--bl-btn-primary-bg);
    border: 1px solid var(--gh-line-card); }
.bl .btn--flat.btn--outlined:hover{ background: var(--gh-surf-hover); }

/* Color solo cuando agrega informacion. El rojo no toca nunca un monto. Ver §6.10. */
.bl .amt--empty{ color: var(--gh-empty); }
.bl .amt--normal{ color: var(--gh-strong); }
.bl .amt--info{ color: var(--status-info-fg); }
.bl .amt--warn{ color: var(--status-warn-fg); }
.bl .amt--ok{ color: var(--bl-chip-ok-fg); }

/* dialog header: title + subtitle, close button reuses .icon-btn--close */
.bl .dlg-head{ display: flex; align-items: flex-start; gap: 16px; padding: 24px 28px 18px; }
.bl .dlg-head__t{ flex: 1; display: flex; flex-direction: column; gap: 5px; }
.bl .dlg-head__title{ font-size: 24px; font-weight: 700; color: var(--gh-strong); letter-spacing: -0.01em; }
.bl .dlg-head__sub{ font-size: 13.5px; color: var(--gh-body); }
.bl .col-stack{ display: flex; flex-direction: column; gap: 7px; }