/* ==========================================================================
   CREDITOS — Lo propio del modulo, bajo .cre. Handoff: mudblazor/modulo_creditos.
   Archivo 10 de 10. Ultimo a proposito: 09-motion lleva !important y gana igual.
   ========================================================================== */

/* §1 — contadores (guia §1.1). Pildora outlined como OrderCountCard, no el
   bloque navy de InformationCards, que compite con la grilla. */
.cre .cre-counts{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cre .count-card{ display: inline-flex; align-items: baseline; gap: 7px;
    padding: 7px 14px; background: var(--surf-item);
    border: 1px solid var(--gh-line-card); border-radius: 12px; white-space: nowrap; }
.cre .count-card em{ font-style: normal; font-size: 20px; font-weight: 700;
    color: var(--bl-btn-primary-bg); }
.cre .count-card__label{ font-size: 12.5px; font-weight: 600; color: var(--gh-label-2); }
/* Una pildora por moneda, nunca una suma entre monedas (regla dura 8). */
.cre .count-card--money i{ font-style: normal; font-size: 11.5px; font-weight: 700;
    letter-spacing: .04em; color: var(--gh-label-2); }

/* Un chip por moneda en la fila del cliente (defecto 2). El codigo va gris y
   chico, el monto es el dato. */
.cre .cre-money{ gap: 8px; flex-wrap: wrap; }
.cre .cre-money__chip{ display: inline-flex; align-items: baseline; gap: 6px;
    padding: 3px 9px; background: var(--surf-chip-neutral);
    border-radius: 999px; white-space: nowrap; }
.cre .cre-money__chip i{ font-style: normal; font-size: 11px; font-weight: 700;
    letter-spacing: .04em; color: var(--gh-label-2); }
.cre .cre-money__chip b{ font-size: 13.5px; font-weight: 700; color: var(--gh-strong); }

/* §2b — desglose por moneda plegable. Se muestran las de mayor monto; el resto
   se expande. */
.cre .count-card--more,
.cre .cre-money__more{ display: inline-flex; align-items: center; gap: 4px;
    border: 0; cursor: pointer; font: inherit; }
.cre .count-card--more{ font-size: 13px; font-weight: 700; color: var(--gh-body); }
.cre .cre-money__more{ font-size: 12px; font-weight: 700; color: var(--gh-body); }
.cre .count-card--more:hover,
.cre .cre-money__more:hover{ color: var(--gh-strong); }

.cre .cre-cur{ margin: 14px 0 4px; padding: 14px 16px 16px; border-radius: 14px;
    background: var(--gh-tray-1); }
/* Hijo directo de la tarjeta: necesita el mismo inset de 32px que el titulo. */
.cre .grid-page-card > .cre-cur{ margin: 0 32px 18px; }

/* En popover el panel ES la superficie: sin margen, sin fondo propio y con un
   ancho que da para dos columnas sin desbordar pantallas chicas. */
/* `--shadow-md` y no la elevacion 8 de MudBlazor: el panel flota sobre la fila,
   no sobre la pagina entera. */
.cre-cur-pop.mud-popover{ border-radius: 14px; overflow: hidden;
    box-shadow: var(--shadow-md); }
.cre-cur-pop.mud-popover{ background: var(--gh-tray-1); }
.cre-cur-pop .cre-cur{ margin: 0; width: min(720px, 88vw); }
.cre .cre-cur__head{ display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
    flex-wrap: wrap; }
.cre .cre-cur__hint{ font-size: 12.5px; color: var(--gh-label-2); }
/* 340px es el minimo donde «dolar estadounidense» entra completo junto a un
   monto de siete digitos. Con menos, el nombre se trunca. */
.cre .cre-cur__grid{ display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.cre .cre-cur__item{ display: grid; align-items: center; column-gap: 12px;
    grid-template-columns: 42px 1fr auto; width: 100%; text-align: left;
    padding: 11px 14px; border-radius: 11px; cursor: default; font: inherit;
    background: var(--bl-surf-card); border: 1px solid var(--gh-line-card); }
.cre .cre-cur__item:not(:disabled){ cursor: pointer; }
.cre .cre-cur__item:not(:disabled):hover{ border-color: var(--gh-line-row-1-hover); }
.cre .cre-cur__item--on{ border-color: var(--control-on);
    box-shadow: inset 0 0 0 1px var(--control-on); }

.cre .cre-cur__code{ font-style: normal; font-size: 11px; font-weight: 700;
    letter-spacing: .04em; color: var(--text-support); }
.cre .cre-cur__item--on .cre-cur__code{ color: var(--control-on); }
.cre .cre-cur__name{ font-size: 13.5px; color: var(--gh-body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cre .cre-cur__amount{ font-size: 15px; font-weight: 700; color: var(--gh-strong);
    white-space: nowrap; }

/* El «+N» del segmentado vive dentro de la pastilla, no al lado. */
.cre .seg.seg--dialog.cre-cli__seg > button.cre-cli__seg-more{ display: inline-flex;
    flex-direction: row; align-items: center; gap: 4px; min-width: 0;
    padding: 7px 14px; border-radius: 9px; flex: 0 0 auto;
    font-size: 12.5px; font-weight: 700; color: var(--gh-body); background: transparent; }
.cre .cre-cli__seg-more:hover{ color: var(--gh-strong); background: var(--bl-surf-card); }

/* Con estados mezclados, «5 notas» no dice nada: el chip separa lo vivo. Verde
   del token de `Disponible`, porque nombra lo mismo. */
.cre .cre-notes{ gap: 10px; }
.cre .cre-notes__chip{ padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    background: var(--bl-chip-ok-bg); color: var(--bl-chip-ok-fg); }

/* El subrayado ya lo dan las reglas del slider de la app. Sin Color=Primary,
   que rellena la barra de navy. */
.cre .cre-tabs .mud-tabs-tabbar{ background: transparent; }
.cre .cre-tabs .mud-tab{ font-size: 13px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; }

/* Buscador y filtro: DOS cajas outlined del mismo alto, no una rellena y una
   con borde. */
.cre .mud-toolbar .mud-input.mud-input-outlined{ height: 48px;
    background: var(--bl-surf-card); border: 1px solid var(--gh-line-card);
    border-radius: 12px; }
.cre .mud-toolbar .mud-input-outlined-border{ display: none; }
/* MudSelect envuelve el control en un `.mud-select` externo SIN clase propia, y
   MudBlazor le pone `flex-grow:1`: se estiraba y dejaba el hueco muerto. */
.cre .mud-toolbar > .mud-select{ flex: 0 0 auto; width: auto; }

/* Los tres filtros comparten forma. Rango solo en `Consumidos`, estado solo en
   `Todos`. */
.cre .cre-currency{ flex: none; width: 200px; }
.cre .cre-range{ flex: none; width: 210px; }
.cre .cre-status{ flex: none; width: 190px; }
.cre .cre-currency .mud-input-slot,
.cre .cre-range .mud-input-slot,
.cre .cre-status .mud-input-slot{ font-size: 14px; color: var(--gh-body); }

/* §5 — dialogo Nuevo credito (Step 3). */
.cre-new__head h2{ margin: 0; }
.cre-new__sub{ margin: 4px 0 0; font-size: 13.5px; color: var(--gh-label-2); }
.cre-new__note.mud-alert{ margin: 14px 0 18px; border-radius: 11px; }

/* Monto a reembolsar: el dato que el ejecutivo quiere ver. Resaltado con el azul
   de acento (--control-on), con valor para claro y oscuro. */
.cre-new__sub .cre-refund__monto{ color: var(--control-on); font-weight: 700;
    font-variant-numeric: tabular-nums; }

/* Selector de factura al aplicar un crédito: filas clickeables, la elegida se
   resalta con el acento. Mismo lenguaje visual que la tira de resumen. */
.cre-pick{ display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.cre-pick__row{ display: flex; align-items: center; justify-content: space-between;
    gap: 16px; width: 100%; text-align: left; padding: 12px 16px;
    background: var(--gh-tray-1); border: 1px solid transparent; border-radius: 12px;
    cursor: pointer; }
.cre-pick__row:hover{ border-color: var(--gh-line-card); }
.cre-pick__row--on{ border-color: var(--control-on); background: var(--control-on-plate); }
.cre-pick__doc{ font-size: 14px; font-weight: 700; color: var(--gh-strong); }
.cre-pick__sub{ font-size: 12.5px; color: var(--gh-label-2); }
.cre-pick__label{ font-size: 11px; color: var(--gh-label-2); }
.cre-pick__amount b{ font-size: 15px; font-weight: 700; color: var(--gh-strong);
    font-variant-numeric: tabular-nums; }

/* Fila de accion, no zona de arrastre: 56px de alto y jerarquia primaria. */
/* MudButton fuerza mayusculas, centrado y un alto propio: la fila los revierte.
   El layout va en .mud-button-label, que es el que envuelve a los hijos. */
.cre-link.mud-button-root{ width: 100%; min-height: 56px; padding: 8px 16px;
    text-align: left; text-transform: none; letter-spacing: normal;
    background-color: var(--surf-item); border: 1px solid var(--gh-line-card);
    border-radius: 12px; }
.cre-link.mud-button-root:hover{ border-color: var(--gh-line-row-1-hover);
    background-color: var(--surf-item); }
.cre-link .mud-button-label{ display: flex; align-items: center; gap: 14px;
    width: 100%; justify-content: flex-start; }
.cre-link__badge{ display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 40px; height: 40px; border-radius: 11px;
    background: var(--bl-btn-primary-bg); color: var(--bl-btn-primary-fg);
    font-size: 20px; font-weight: 700; line-height: 1; }
.cre-link__text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cre-link__name{ font-size: 15px; font-weight: 700; color: var(--gh-strong); }
.cre-link__desc{ font-size: 12.5px; color: var(--gh-label-2); }
.cre-link__chev{ margin-left: auto; color: var(--gh-label-2); }

/* Vista previa de los campos que la factura habilita. Caja sin cromo de input:
   no se puede escribir ahi y no debe parecer que si. */
.cre-prev{ display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.cre-prev__cell{ padding: 12px 16px; background: var(--surf-chip-neutral);
    border-radius: 11px; min-width: 0; }
.cre-prev__cell--12{ grid-column: span 12; }
.cre-prev__cell--6{ grid-column: span 6; }
.cre-prev__cell--4{ grid-column: span 4; }
.cre-prev__label{ font-size: 13px; color: var(--text-placeholder); }
.cre-prev__dash{ font-size: 14px; color: var(--text-placeholder); }

/* Tira de resumen de la factura vinculada: dato, no formulario. */
/* Spans fijos y no auto-fit: con columnas iguales "Peso Dominicano (DOP)" se
   partia en dos lineas y la tira dejaba de leerse como una fila. */
.cre-strip{ display: grid; align-items: center; gap: 12px 20px; margin-bottom: 18px;
    padding: 14px 18px; background: var(--gh-tray-1); border-radius: 12px;
    grid-template-columns: minmax(0,1.5fr) minmax(0,1.7fr) minmax(0,2.4fr)
                           minmax(0,1fr) minmax(0,1.8fr) auto; }
.cre-strip__cell{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Minusculas: la tira es dato de lectura, no cabecera de tabla. */
.cre-strip__label{ font-size: 12.5px; color: var(--gh-label-2); }
.cre-strip__value{ font-size: 14px; font-weight: 600; color: var(--gh-strong); }
.cre-strip__action{ display: flex; justify-content: flex-end; }
.cre .btn--cre-change.mud-button-root,
.cre-strip .btn--cre-change.mud-button-root{ height: 36px; min-width: 0; padding: 0 16px;
    border-radius: 9px; border: 1px solid var(--gh-line-card);
    background-color: var(--bl-surf-card); color: var(--gh-title);
    font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* Guardar: primario, nunca verde, e inactivo hasta que haya factura y forma valida. */
.btn--cre-save.mud-button-root{ background-color: var(--bl-btn-primary-bg);
    color: var(--bl-btn-primary-fg); }
.btn--cre-save.mud-button-root:hover{ background-color: var(--bl-btn-primary-bg-hover); }

/* §3 — bandeja de notas del cliente (Step 2). Elevacion alternada: la bandeja
   se hunde, la fila es tarjeta, el detalle vuelve a hundirse. */
/* Padding y radio medidos sobre mock-credits-module.html, no derivados. */
/* Escala concentrica: L1 clara, y el detalle L2, mas hundido, oscuro. Estaban al
   reves. Medido en el mock. */
.cre .cre-tray{ padding: 12px; border-radius: 14px; background: var(--gh-tray-1); }
.cre .cre-tray__empty{ padding: 10px 4px; font-size: 13px; color: var(--gh-label-2); }

/* El vector es del handoff: 01-DESIGN-SYSTEM.md .grid-cre-l1. Sin `column-gap`:
   el mock no lo declara y cualquier gap le roba ancho a las columnas. */
.cre .grid-cre-l1{ display: grid; align-items: center;
    grid-template-columns: 40px minmax(112px,.7fr) minmax(180px,1.4fr) minmax(120px,.8fr)
                           minmax(126px,.9fr) minmax(150px,1fr) minmax(126px,.9fr) 44px; }

/* Vista `Consumidos`: DESTINO pide mas ancho que APLICACION y lo saca de la razon.
   Vector `.grid-cre-l1-cons` del handoff. */
.cre .grid-cre-l1--cons{
    grid-template-columns: 40px minmax(112px,.7fr) minmax(180px,1.3fr) minmax(120px,.8fr)
                           minmax(180px,1.2fr) minmax(150px,1fr) minmax(126px,.9fr) 44px; }
/* El head no es tarjeta y la fila si: repite su inset o no alinean. Trampa 8. */
.cre .grid-cre-l1__head{ padding: 4px 14px 12px; }
.cre .grid-cre-l1.row--cre-l1{ padding: 11px 14px; margin-bottom: 8px;
    background: var(--bl-surf-card); border: 1px solid var(--gh-line-card);
    border-radius: 11px; }
.cre .grid-cre-l1.row--cre-l1:last-child{ margin-bottom: 0; }
.cre .cre-reason{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cre .cre-l1__monto{ gap: 6px; }
.cre .cre-l1__code{ font-size: 11px; font-weight: 700; letter-spacing: .04em;
    color: var(--gh-label-2); }
.cre .cre-l1__monto b{ font-size: 15px; font-weight: 700; color: var(--gh-strong); }

/* Regla del handoff: en una nota consumida el monto es historia, no dinero. */
.cre .cre-row--spent .cre-l1__monto b{ color: var(--text-support); }
/* El icon-button trae 48px de fabrica y era el hijo mas alto: estiraba la fila
   a 68px. Medido en DOM. */
.cre .cre-more .mud-icon-button{ width: 32px; height: 32px; padding: 4px;
    color: var(--gh-label-2); }

/* §3b — el menu de acciones: sigla, nombre y para que sirve. */
.cre-acts{ border-radius: 14px; min-width: 268px; padding: 6px 0 8px; }
.cre-acts__head{ padding: 12px 18px 8px; font-size: 11px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--gh-label-2); }
.cre-acts .mud-menu-item{ padding: 9px 18px; }
.cre-acts__rule{ margin: 6px 0; }
.cre-act{ display: flex; align-items: flex-start; gap: 12px; }
.cre-act__badge{ display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 34px; height: 34px; border-radius: 9px;
    background: var(--surf-chip-neutral); font-size: 11.5px; font-weight: 700;
    letter-spacing: .04em; color: var(--gh-label-1); }
.cre-act__text{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cre-act__name{ font-size: 14px; font-weight: 600; color: var(--gh-strong); }
.cre-act__desc{ font-size: 12px; color: var(--gh-label-2); }

/* El unico rojo del menu, y solo si la nota admite anularse. `mud-disabled` es
   la clase real que emite MudMenuItem, no `mud-list-item-disabled`. */
/* `.mud-typography` en la cadena: MudText emite esa clase y su color le
   disputaba el rojo al nombre. */
.cre-acts__danger:not(.mud-disabled) .cre-act__name.mud-typography,
.cre-acts__danger:not(.mud-disabled) .cre-act__name{ color: var(--status-danger-fg); }
.cre-acts__danger:not(.mud-disabled) .cre-act__badge{
    background: var(--status-danger-bg); color: var(--status-danger-fg); }
.cre-acts__danger:not(.mud-disabled) .cre-act__badge .mud-icon-root{
    color: var(--status-danger-fg); }

/* §4 — detalle de la nota. Se hunde otra vez sobre la fila-tarjeta. */
/* La sangria de 40px es la columna del chevron: el detalle arranca donde arranca
   el texto de su nota, no debajo de la flecha. */
.cre .cre-detail{ margin: 0 0 8px 40px; padding: 13px 16px; background: var(--gh-tray-2);
    border-radius: 11px; }
.cre .cre-detail__title{ display: block; margin-bottom: 10px; }
/* Cuatro columnas fijas como el mock: con auto-fit el detalle se estiraba a
   siete y la lectura se perdia a lo ancho. */
.cre .cre-detail__grid{ display: grid; gap: 11px 20px;
    grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cre .cre-detail__grid--wide{ margin-top: 11px; grid-template-columns: 1fr; }
.cre .cre-detail__cell{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cre .cre-detail__label{ font-size: 11px; color: var(--gh-label-2); }
.cre .cre-detail__value{ font-size: 13.5px; font-weight: 600; color: var(--gh-strong); }
/* La regla separa el dato de la accion: sin ella el pie se leia como otra fila. */
.cre .cre-detail__rule{ margin: 13px 0 0; }
.cre .cre-detail__foot{ margin-top: 11px; }
.cre .cre-detail__apps{ font-size: 12px; color: var(--gh-label-2); }
/* Caja blanca sobre la bandeja hundida: el boton tiene que despegarse del fondo. */
.cre .btn--cre-apply.mud-button-root{ height: 40px; min-width: 0; padding: 0 20px;
    border-radius: 11px; border: 1px solid var(--gh-line-card);
    background-color: var(--bl-surf-card); color: var(--gh-title);
    font-size: 12.5px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.cre .btn--cre-apply.mud-button-root:hover{ border-color: var(--gh-line-row-1-hover); }

/* §2 — escala de estado. Los cuatro buckets ya existian como tokens exactos:
   van por alias. Solo los dos puntos eran nuevos. */
.cre .cre-state{ display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
    white-space: nowrap; }
.cre .cre-state__dot{ width: 7px; height: 7px; border-radius: 999px; flex: none; }

/* `d-flex` de MudStack es `display:flex !important` y gana al `inline-flex`. Como
   el chip es hijo directo del grid, se estiraba a toda la columna. */
.cre .grid-cre-l1 > .cre-state,
.cre .grid-cre-cli > .cre-state{ justify-self: start; }

.cre .cre-state--disponible{ background: var(--bl-chip-ok-bg); color: var(--bl-chip-ok-fg); }
.cre .cre-state--disponible .cre-state__dot{ background: var(--bl-chip-ok-dot); }

.cre .cre-state--parcial{ background: var(--status-info-bg); color: var(--status-info-fg); }
.cre .cre-state--parcial .cre-state__dot{ background: var(--status-info-dot); }

.cre .cre-state--consumido{ background: var(--surf-chip-neutral); color: var(--gh-label-2); }
.cre .cre-state--consumido .cre-state__dot{ background: var(--cre-spent-dot); }

/* No estrena color: el rojo es solo de Anulada (regla dura 6) y el azul
   ya es de Aplicado parcial. */
.cre .cre-state--reembolsada{ background: var(--surf-chip-neutral); color: var(--gh-label-2); }
.cre .cre-state--reembolsada .cre-state__dot{ background: var(--cre-spent-dot); }

/* El unico rojo del modulo (regla dura 6). El oscuro sale del token medido
   por el proyecto, no del handoff. */
.cre .cre-state--anulada{ background: var(--status-danger-bg); color: var(--status-danger-fg); }
.cre .cre-state--anulada .cre-state__dot{ background: var(--cre-void-dot); }

/* §5 — utilidades compartidas. Vivian solo bajo `.ap`, asi que en credito no
   aplicaban: Disponible quedaba a la izquierda. */
.cre .align-right{ text-align: right; }
/* 28px es el alto que ya usa `06-grid.css` para el chevron de fila. Sin fijarlo
   trae 48px y manda en el alto. */
.cre .btn--row-icon.mud-icon-button{ width: 28px; height: 28px; padding: 2px;
    margin-inline: auto; color: var(--gh-label-2); }
.cre .btn--row-icon.mud-icon-button:hover{ color: var(--gh-strong); }
.cre .cre-detail__value--ok{ color: var(--bl-chip-ok-fg); }

/* §6 — selector de factura (Step 4). Mismo esqueleto que la bandeja de notas:
   cabecera con subtitulo, grilla de clientes, bandeja hundida por cliente. */
.fac-pick .mud-dialog-title{ padding-bottom: 16px; border-bottom: 1px solid var(--gh-line-card); }
.fac-pick__head{ display: flex; align-items: flex-start; gap: 16px; }
.fac-pick__head h2{ margin: 0; }
.fac-pick__sub{ margin-top: 3px; font-size: 13.5px; color: var(--gh-label-2); }
.fac-pick__close.mud-icon-button{ margin-left: auto; color: var(--gh-label-2); }
.fac-pick__close.mud-icon-button:hover{ color: var(--gh-strong); }
.fac-pick__body.mud-dialog-content{ padding: 20px 24px 0; }

/* El buscador ocupa el ancho del toolbar: dentro del dialogo el default de
   MudDataGrid lo dejaba angosto y descolgado a la izquierda. */
.fac-pick .mud-toolbar{ padding: 0; height: auto; }
.fac-pick .fac-pick__search{ width: 100%; margin: 0 0 6px; }

/* La linea del pie la pone el CONTENEDOR del pager: `PagerContent` se
   renderiza dentro suyo, no al reves. Poner otra en el hijo daba dos. */
.fac-pick .grid-hierarchy > .mud-table-pagination{
    margin-inline: -24px; padding: 0 24px;
    border-top: 1px solid var(--gh-line-card); }
/* Pie de UNA fila: pager a la izquierda, cerrar a la derecha. */
.fac-pick__foot{ display: flex; align-items: center; padding: 6px 0 4px; }
.fac-pick__foot .mud-table-pagination-toolbar{ padding: 0; height: 52px; }

/* §7 — bandeja de facturas del cliente. El vector repite el de grid-cre-l1:
   chevron, cuatro datos, monto a la derecha y la accion. */
.cre .fac-tray{ margin: 2px 0 6px; border-radius: 12px; }
/* Medido contra el dialogo Medium: 840 - 48 de body - 32 de bandeja = 760px.
   El vector anterior pedia 858 y se desbordaba. */
.cre .grid-fac-l2{ display: grid; align-items: center; column-gap: 12px;
    grid-template-columns: 34px minmax(96px,1.1fr) minmax(110px,1.3fr) minmax(80px,.9fr)
                           minmax(62px,.7fr) minmax(104px,1.2fr) 118px; }
/* El head no es tarjeta y la fila si: repite su inset o no alinean. Trampa 8. */
.cre .grid-fac-l2__head{ padding: 0 15px 10px; }
.cre .grid-fac-l2.row--fac-l2{ padding: 9px 14px; margin-bottom: 8px;
    background: var(--bl-surf-card); border: 1px solid var(--gh-line-card);
    border-radius: 11px; }
.cre .grid-fac-l2.row--fac-l2:last-child{ margin-bottom: 0; }
/* Toda celda recorta: una poliza larga (FRANKLINBLOODBORNE123) se comia la
   columna de al lado en vez de quedarse en la suya. */
.cre .grid-fac-l2 > *{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cre .fac-l2__doc{ font-weight: 700; color: var(--gh-strong); }

/* Outlined de base, relleno en la fila abierta: el foco de lectura y su
   accion son el mismo. */
.cre .btn--fac-pick.mud-button-root{ height: 36px; min-width: 0; padding: 0 18px;
    border-radius: 10px; border: 1px solid var(--gh-line-card);
    background-color: var(--bl-surf-card); color: var(--gh-title);
    font-size: 12px; font-weight: 700; letter-spacing: .07em; white-space: nowrap; }
.cre .btn--fac-pick.mud-button-root:hover{ border-color: var(--gh-line-row-1-hover); }
.cre .btn--fac-pick--on.mud-button-root{ border-color: var(--bl-btn-primary-bg);
    background-color: var(--bl-btn-primary-bg); color: var(--bl-btn-primary-fg); }
.cre .btn--fac-pick--on.mud-button-root:hover{ background-color: var(--bl-btn-primary-bg-hover);
    border-color: var(--bl-btn-primary-bg-hover); }

/* El detalle se hunde sobre la fila-tarjeta, como el de la nota. */
.cre .fac-detail{ margin: 0 0 8px; }

/* §8 — ajustes contra el mock. La caja la mata `grid-embedded` en el markup;
   lo que sigue es lo que el opt-out no cubre. */

/* Superficie SOLO en el chevron del cliente. `:not(.mud-table-child-content)`
   es load-bearing: la fila hija tiene una unica celda y tambien es
   `:first-child`. Trampa 8. */
.fac-pick .grid-hierarchy > .mud-table-container .mud-table-body > .mud-table-row
    > .mud-table-cell:not(.mud-table-child-content):first-child .mud-icon-button{
    background-color: var(--gh-tray-1); border-radius: 10px;
    color: var(--gh-label-1); }
.fac-pick .grid-hierarchy > .mud-table-container .mud-table-body > .mud-table-row
    > .mud-table-cell:not(.mud-table-child-content):first-child .mud-icon-button:hover{
    background-color: var(--gh-tray-2); color: var(--gh-strong); }

/* El chevron de la factura es flecha limpia: la fila-tarjeta ya lo enmarca. */
.cre .row--fac-l2 .btn--row-icon.mud-icon-button{ background-color: transparent; }

/* El detalle se corre del borde de la fila, sin llegar a la columna del dato. */
.cre .fac-detail{ margin-left: 24px; }

/* Cerrar comparte peso con el resto del pie: `.dlg-cancel` sola lo deja en
   gris de cuerpo porque este dialogo no es `.dlg-form`. */
.fac-pick__foot .dlg-cancel.mud-button-root{ font-weight: 700; color: var(--gh-title); }

/* Caja, no pildora. El borde va en el `.mud-input`, que envuelve numero Y
   chevron: en el slot la flecha quedaba afuera. */
.fac-pick__foot .mud-table-pagination-select .mud-input{
    min-height: 36px; height: 36px; padding: 0 8px 0 12px;
    border: 1px solid var(--gh-line-card); border-radius: 8px; }
.fac-pick__foot .mud-table-pagination-select .mud-input-slot{ padding: 0; }
.fac-pick__foot .mud-table-pagination-select .mud-input-adornment{ margin: 0; }
.fac-pick__foot .mud-table-pagination-caption{ color: var(--gh-label-2); }

/* La lupa y el texto no se tocan: el adorno respira y el placeholder arranca
   donde arrancan las columnas. */
.fac-pick .fac-pick__search .mud-input-adornment{ margin-right: 10px; }
.fac-pick .fac-pick__search .mud-input-adornment .mud-icon-root{
    font-size: 20px; color: var(--gh-label-2); }

/* Una sola pagina: la navegacion no lleva a ningun lado y ocupa media fila. */
.fac-pick__foot--unica .mud-table-pagination-actions{ display: none; }

/* §9 — cada nivel que baja se hunde MAS. La bandeja estaba mas oscura que su
   detalle, que asi flotaba. */
.cre .fac-tray{ background: var(--gh-tray-1); }
.cre .fac-detail{ background: var(--gh-tray-2); }

/* Placeholder de busqueda mas tenue que el de formulario, a proposito.
   Subir la opacidad es la palanca equivocada: va por color. */
.fac-pick .fac-pick__search .mud-input-root::placeholder{
    color: var(--text-placeholder); opacity: 1; }

/* La ultima fila no cierra con su propia raya: la del pie ya separa, y juntas
   se leian como dos. */
.fac-pick .grid-hierarchy > .mud-table-container .mud-table-body
    > .mud-table-row:last-child > .mud-table-cell{ border-bottom: 0; }

/* §10 — Nuevo credito con factura vinculada (Step 5). */
.cre-new__head{ display: flex; align-items: flex-start; gap: 16px; }
.cre-new__close.mud-icon-button{ margin-left: auto; color: var(--gh-label-2); }
.cre-new__close.mud-icon-button:hover{ color: var(--gh-strong); }
.cre-new__nota{ font-size: 13px; color: var(--gh-label-2); }

/* Dos columnas iguales de verdad: los MudItem xs=5 sumaban 10 de 12 y la fila
   del monto no cerraba contra las de arriba. */
.cre-fila{ display: grid; gap: 0 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cre-campo{ margin-bottom: 14px; }

/* §11 — el dinero y su tope, lado a lado. */
.cre-monto{ display: grid; align-items: center; gap: 12px 24px; margin-bottom: 16px;
    padding: 16px 18px; background: var(--gh-tray-1); border-radius: 12px;
    grid-template-columns: minmax(260px, 5fr) 7fr; }
/* El chip ocupa la derecha del campo: el valor no puede llegar hasta ahi. */
.dlg-form .cre-monto__campo input{ padding-right: 132px; }
/* Blanco sobre el panel: `--field-fill` es el MISMO valor que `--gh-tray-1`, asi
   que el campo desaparecia dentro de su propia caja. */
.dlg-form .cre-monto__campo .mud-input.mud-input-filled,
.dlg-form .cre-monto__campo .mud-input.mud-input-filled:hover{
    background: var(--bl-surf-card); }
/* Ambar y no rojo: el rojo del modulo esta reservado para anular (regla dura 6). */
.dlg-form .fld-chip-wrap--excede .fld .mud-input.mud-input-filled{
    background: var(--status-warn-bg);
    box-shadow: inset 0 0 0 1.5px var(--status-warn-dot); }

.cre-monto__tope{ min-width: 0; }
.cre-monto__label{ font-size: 13.5px; font-weight: 600; color: var(--gh-strong); }
.cre-monto__queda{ font-size: 13px; color: var(--gh-label-2); }
.cre-monto__queda b{ color: var(--gh-strong); }
.cre-monto__bar.mud-progress-linear{ height: 16px; margin: 12px 0 10px; }
/* MudBlazor pinta el bar con `.mud-progress-linear-color-default:not(...) .bar`,
   que es (0,3,0): con dos clases la regla propia pierde y sale gris. */
.cre-monto__bar.mud-progress-linear:not(.mud-progress-linear-buffer) .mud-progress-linear-bar{
    background-color: var(--bl-btn-primary-bg); }
.cre-monto__bar.mud-progress-linear--excede:not(.mud-progress-linear-buffer) .mud-progress-linear-bar,
.cre-monto__bar--excede.mud-progress-linear:not(.mud-progress-linear-buffer) .mud-progress-linear-bar{
    background-color: var(--status-warn-dot); }
/* El carril es el mismo pseudo-elemento, y tambien viene con su (0,2,0). */
.cre-monto__bar.mud-progress-linear::before{ background-color: var(--gh-tray-2); }
.cre-monto__nota{ font-size: 12.5px; line-height: 1.45; color: var(--gh-label-2); }
.cre-monto__alerta.mud-alert{ margin-bottom: 16px; border-radius: 11px; }

/* §12 — opciones con su consecuencia: nadie sabia la diferencia entre
   Reembolso y Ajuste. */
.cre-opt{ gap: 3px; min-width: 0; }
.cre-opt__name{ font-size: 15px; font-weight: 600; color: var(--gh-strong); }
.cre-opt__desc{ font-size: 13px; line-height: 1.4; color: var(--gh-label-2);
    white-space: normal; }

/* §13 — las opciones son una lista de eleccion: circulo, nombre y consecuencia.
   MudSelect no dibuja radios, asi que el circulo va por pseudo-elemento. */
.cre-opts.mud-popover{ border-radius: 14px; padding: 6px 0; }
/* El inset va en la lista: el item ya mide el 100%, y el margen horizontal lo
   empujaba fuera por la derecha. */
.cre-opts .mud-list{ padding-inline: 8px; }
.cre-opts .mud-list-item{ display: flex; align-items: flex-start; gap: 14px;
    margin: 1px 0; padding: 12px 14px; border-radius: 10px; }
.cre-opts .mud-list-item::before{ content: ""; flex: none; width: 20px; height: 20px;
    margin-top: 2px; border: 2px solid var(--line-input); border-radius: 999px; }
.cre-opts .mud-list-item:hover{ background: var(--gh-surf-hover); }

/* La activa se marca con superficie propia y texto primario, no con el azul de
   sistema sobre blanco. `--control-on-plate` existia sin un solo uso. */
/* `!important` obligado: `mud-primary-hover` de MudBlazor ya trae uno, con un
   azul al 6% que se lee como nada. Medido en DOM. */
.cre-opts .mud-list-item.mud-selected-item{
    background-color: var(--control-on-plate) !important; }
/* Anillo con punto. El gradiente dibuja el centro sin depender de que el
   blanco de la superficie resuelva: `transparent` deja ver el fondo real. */
.cre-opts .mud-list-item.mud-selected-item::before{
    border-color: var(--bl-btn-primary-bg);
    background: radial-gradient(circle,
        var(--bl-btn-primary-bg) 0 4.5px, transparent 4.5px); }
.cre-opts .mud-selected-item .cre-opt__name{ color: var(--bl-btn-primary-bg); }

/* El desplegable nace del campo: mismo ancho y pegado, sin salto lateral.
   El ancho lo fija RelativeWidth; aca va la union visual. */
.cre-opts.mud-popover{ margin-top: 2px; box-shadow: var(--shadow-lg); }
/* Botones mas chicos: el vector del L2 le dio 118px y el texto no debe cortarse. */
.cre .btn--fac-pick.mud-button-root{ padding: 0 12px; font-size: 11.5px; }

/* §14 — Credito del cliente (Step 6). Una tabla, no una por moneda. */
.cre-cli__head{ display: flex; align-items: flex-start; gap: 16px; }
.cre-cli__head h2{ margin: 1px 0 0; line-height: 1.15; }
.cre-cli__sub{ margin-top: 2px; font-size: 13.5px; color: var(--gh-label-2); }
.cre-cli__close.mud-icon-button{ margin-left: auto; color: var(--gh-label-2); }
.cre-cli__close.mud-icon-button:hover{ color: var(--gh-strong); }

/* La barra: el segmentado FILTRA, y al lado dice que se esta viendo. */
/* `align-items: flex-start` y `wrap`: un cliente puede tener cinco o seis monedas
   y el segmentado tiene que crecer hacia abajo sin desbordar la fila. */
.cre-cli__bar{ display: flex; align-items: flex-start; gap: 22px; margin-bottom: 18px;
    flex-wrap: wrap; }
/* El segmentado crece con las monedas y envuelve; el tope del 62% comprimia los
   botones por debajo de su monto y los numeros se pisaban. */
/* `.bl .seg.seg--dialog` fija `height:44px` y gana por especificidad: los botones
   de dos lineas se salian del contenedor. Hay que igualarle el peso. */
.cre .seg.seg--dialog.cre-cli__seg{ flex: 0 1 auto; max-width: 100%; height: auto;
    padding: 5px; gap: 6px; flex-wrap: wrap; align-items: stretch; border-radius: 12px; }
/* `.bl .seg.seg--dialog > button` del lenguaje pone `flex:1; padding:0` y gana por
   especificidad: hay que igualarle el peso o el monto nunca recibe su ancho. */
.cre .seg.seg--dialog.cre-cli__seg > button{ display: flex; flex-direction: column;
    align-items: flex-start; gap: 1px; height: auto; min-width: 92px;
    padding: 7px 16px; border-radius: 9px; flex: 0 0 auto; }
.cre .cre-cli__seg-amount{ white-space: nowrap; }
/* Con muchas monedas la barra envuelve: Exportar tiene que seguir a la derecha
   de la linea en la que caiga, no irse al margen izquierdo. */
.cre .btn--cre-export{ margin-left: auto; }
/* La activa va oscura y las otras apagadas. Sin esa jerarquia, cuatro montos
   largos se leen como un solo numero. Medido en el mock. */
.cre-cli__seg-code{ font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-support); }
.cre .cre-cli__seg > button.seg__on .cre-cli__seg-code{ color: var(--control-on); }
.cre-cli__seg-amount{ font-size: 18px; font-weight: 700; color: var(--gh-label-2); }
.cre .cre-cli__seg > button.seg__on .cre-cli__seg-amount{ color: var(--gh-strong); }
.cre-cli__legend{ min-width: 0; }
.cre-cli__legend-t{ font-size: 13.5px; color: var(--gh-body); }
.cre-cli__legend-d{ font-size: 13px; color: var(--gh-label-2); }
.cre-cli__legend-d b{ color: var(--gh-strong); }

.cre .cre-cli__panel{ padding: 0; }
.cre .cre-cli__tray{ margin-top: 12px; padding: 12px; border-radius: 14px; }
/* La regla bajo los tabs cruza de lado a lado, como en el mock. */
/* `.cre-cli` SIN `.cre` delante: van en el mismo elemento (`bl cre cre-cli`), asi
   que el descendiente no matcheaba nunca. */
.cre-cli .mud-tabs-tabbar{ border-bottom: 1px solid var(--gh-line-card); }

/* Mismo esqueleto que la bandeja de notas, con las columnas del Step 6. */
/* Vector `.grid-cli` del handoff. El que habia estaba derivado a mano y ninguna
   de las cinco columnas coincidia. */
.cre .grid-cre-cli{ display: grid; align-items: center;
    grid-template-columns: minmax(200px,1.6fr) minmax(120px,.9fr) minmax(150px,1fr)
                           minmax(140px,1fr) minmax(130px,.9fr) 44px; }
.cre .grid-cre-cli > *{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cre .grid-cre-cli__head{ padding: 4px 14px 12px; }
.cre .grid-cre-cli.row--cre-cli{ padding: 9px 14px; margin-bottom: 7px;
    background: var(--bl-surf-card); border: 1px solid var(--gh-line-card);
    border-radius: 11px; }
.cre .grid-cre-cli.row--cre-cli:last-of-type{ margin-bottom: 0; }

/* El pie no es tarjeta: cierra la tabla y repite el inset de la fila. */
.cre .grid-cre-cli.cre-cli__foot{ grid-template-columns: 1fr minmax(110px,auto) 44px;
    padding: 12px 14px 2px; }
.cre-cli__foot-t{ font-size: 13.5px; font-weight: 600; color: var(--gh-body); }

/* Paginacion en espanol, propia: MudDataGridPager pedia un grid que aca no hay. */
/* `justify-content: flex-start` explicito y el select sin crecer: si no, el rango
   se iba al otro extremo de la fila. */
.cre-cli__pager{ display: flex; align-items: center; justify-content: flex-start;
    gap: 10px; padding: 10px 2px 0; }
/* El select del pager no necesita el alto de un campo de formulario. */
.cre .cre-cli__pager > .mud-select .mud-input.mud-input-outlined{ height: 34px; min-height: 34px; }
.cre-cli__pager-t{ font-size: 13px; color: var(--gh-label-2); white-space: nowrap; }
/* Al hijo `.mud-select`, no a la clase propia: `Class` no aterriza en la raiz
   del MudSelect. Crecia a 737px y empujaba el rango. */
.cre .cre-cli__pager > .mud-select{ flex: 0 0 84px; width: 84px; min-width: 0; }

/* La cabecera vive en el contenido, asi que se pone el aire que daba el titulo. */
.cre-cli__head{ margin-bottom: 18px; }
/* Medido sobre el mock: 18px de radio (Card/dialog del handoff) y contenido a
   23/29, no a los 24 de MudBlazor. */
.cre.cre-cli.mud-dialog{ border-radius: 18px; }
/* La cabecera va en el contenido, asi que el title de MudDialog queda vacio y
   solo aporta 32px muertos arriba. */
.cre.cre-cli > .mud-dialog-title{ display: none; }
.cre-cli__body.mud-dialog-content{ padding: 23px 29px 0; }

/* Exportar: caja blanca sobre la barra, mismo peso que Cambiar del formulario. */
.cre .btn--cre-export.mud-button-root{ flex: none; height: 40px; min-width: 0;
    padding: 0 20px; border-radius: 10px; border: 1px solid var(--gh-line-card);
    background-color: var(--bl-surf-card); color: var(--gh-title);
    font-size: 12.5px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.cre .btn--cre-export.mud-button-root:hover{ border-color: var(--gh-line-row-1-hover); }

/* §15 — escala tipografica. Los <h2> no declaraban tamano en ningun css del
   repo y heredaban el del tema. */
/* `--gh-title` y sin tracking negativo: medido sobre el mock. */
.cre-cli__head h2{ font-size: 24px; font-weight: 700; letter-spacing: normal;
    color: var(--gh-title); }
.cre-new__head h2,
.fac-pick__head h2{ font-size: 21px; font-weight: 700; letter-spacing: -0.01em;
    line-height: 1.2; color: var(--gh-strong); }

/* Se apunta al `.mud-typography` del hijo, no al contenedor: heredar no alcanza
   contra una declaracion directa. */
.cre .grid-cre-cli > .mud-typography,
.cre .grid-cre-l1 > .mud-typography,
.cre .grid-fac-l2 > .mud-typography{ font-size: 14px; line-height: 1.35; }

/* El texto del chip tambien es un MudText y volvia a 1rem dentro del chip. */
.cre .cre-state .mud-typography{ font-size: inherit; line-height: 1.3; }
.cre .cre-act__badge .mud-typography{ font-size: inherit; }

/* Micro-labels por nivel, como ya hace `.ap`: el L1 va 11.5 y el L2 10.5. */
.cre .grid-cre-cli__head .micro-label{ font-size: 11.5px; letter-spacing: .09em;
    color: var(--gh-label-1); }