/* ==========================================================================
   ACUERDOS DE PAGO — Lo propio del modulo, bajo .ap. Ver §2.6 y §6.10.
   Archivo 8 de 9. El ORDEN de los 9 importa: Docs/DESIGN-LANGUAGE.md.
   ========================================================================== */

/* §2.2 — D12: toolbar search is OUTLINED, the sole exception to the filled
   input shape; height/radius per D12's table (radius --gh-r-row-1 = 11px,
   NOT --ap-r-control's 10px). */
/* Sobre MudTextField: el control es el que se estira; la CAJA visual va en el
   .mud-input de adentro, que es lo que MudBlazor dibuja. */
.ap .ap-search{ flex: 1; }
.ap .ap-search .mud-input-control-input-container{ flex: 1; }
.ap .ap-search .mud-input.mud-input-outlined{ height: var(--bl-h-field); padding: 0 16px; gap: 12px;
    background: var(--bl-surf-card); border: 1px solid var(--line-input);
    border-radius: var(--gh-r-row-1); transition: border-color .15s ease; }
.ap .ap-search .mud-input-outlined-border{ display: none; }
.ap .ap-search svg{ flex: none; color: var(--text-support); }

/* Barra del modulo: el gap vivia en un style inline que MudStack reemplazo. */
.ap .ap-toolbar{ gap: 16px; }
/* Solo en Saldados: ahi se busca historia. El ancho lo pide el texto
   completo, «Saldados en 2026» mas su boton de limpiar. */
.ap .ap-anio{ flex: none; width: 250px; }
.ap .ap-anio .mud-input.mud-input-outlined{ height: var(--bl-h-field); border-radius: var(--gh-r-row-1);
    background: var(--bl-surf-card); border: 1px solid var(--line-input); padding: 0 12px; gap: 10px; }
.ap .ap-anio .mud-input-outlined-border{ display: none; }
.ap .ap-anio .mud-input-slot{ font-size: 14px; font-weight: 600; color: var(--gh-strong); }
.ap .ap-anio .mud-input-adornment .mud-icon-root{ font-size: 18px; color: var(--gh-label-2); }
/* El buscador cede ancho, pero no hasta volverse ilegible. */
.ap .ap-search{ min-width: 260px; }

/* El contador de la tab: cuanto hay ANTES de entrar. */
.ap .seg__count.mud-chip{ height: 20px; min-height: 0; min-width: 20px; margin: 0 0 0 8px;
    padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
    background: var(--surf-chip-neutral); color: var(--gh-label-1); }
.ap .seg__count--por-cobrar.mud-chip{ background: var(--status-warn-bg); color: var(--status-warn-fg); }
.ap .seg__count--en-confirmacion.mud-chip{ background: var(--status-info-bg); color: var(--status-info-fg); }
/* Dentro de la tarjeta de pagina el toolbar ya no es un bloque suelto: alinea
   con los 32px del titulo y de la grilla. */
.ap .grid-page-card > .ap-toolbar{ padding: 0 32px; }
/* La worklist no trae el aire de arriba que la grilla si tiene en su padding. */
.ap .grid-page-card > .grid-flat__head{ padding-top: 32px; }

/* La tarjeta no traia aire abajo: el ultimo hijo apoyaba su margen contra el
   borde. 12px medidos, no la suma del margen que toque. */
.ap .grid-page-card{ padding-bottom: 12px; }
.ap .grid-page-card > :last-child{ margin-bottom: 0; }

/* Reporte de pago. Todo esto era style inline en el .razor; aca puede usar
   tokens. La especificidad iguala a MudButton, que carga antes. */
.ap .ap-outline-btn.mud-button-root{
    height: var(--ap-h-field); padding: 0 18px; border-radius: var(--gh-r-row-1);
    background-color: var(--ap-report-btn-bg); border: 1px solid var(--ap-report-btn-border);
    color: var(--ap-report-btn-fg); font-size: 13px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; gap: 9px; }
.ap .ap-outline-btn.mud-button-root:hover{ background-color: var(--gh-surf-hover); }
.ap .ap-search input{ flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font: 600 14.5px "Nunito Sans"; color: var(--gh-strong); }
.ap .ap-search input::placeholder{ font-size: 15px; font-weight: 400; color: var(--text-placeholder); }

/* §2.4 — flat worklist (Por cobrar / En confirmación) */
.ap .grid-flat{ display: grid; align-items: center;
    grid-template-columns: minmax(180px, 1.15fr) minmax(160px, 1fr) minmax(180px, 1.15fr)
                           minmax(140px, .95fr) minmax(140px, .95fr) 210px; }
/* 32px y no 26: alinean con el titulo y la grilla dentro de .grid-page-card. */
.ap .grid-flat__head{ padding: 0 32px 14px; border-bottom: 1px solid var(--gh-line-divider);
    font-size: 15px; font-weight: 700; color: var(--gh-head); }
/* Compuesto: .grid-flat y .row--flat van en el MISMO div, asi que el
   descendiente no matcheaba y las filas quedaban sin padding. Ver trampa 8. */
.ap .grid-flat.row--flat{ padding: 15px 32px; border-bottom: 1px solid var(--surf-chip-neutral); }
.ap .grid-flat.row--flat:last-child{ border-bottom: none; }
.ap .grid-flat.row--flat:hover{ background: var(--gh-surf-hover); }

/* Lo que antes eran style inline en cada celda de la worklist. */
.ap .flat__cuota{ gap: 9px; }
.ap .flat__code{ font-family: var(--font-code); }
.ap .flat__sub{ font-size: 12.5px; color: var(--gh-label-2); }
.ap .flat__rel{ font-weight: 600; }
.ap .flat__rel--warn{ color: var(--status-warn-fg); }
.ap .flat__empty{ padding: 24px 32px; color: var(--gh-label-2); }
.ap .grid-flat .btn--flat.mud-button-root{ white-space: nowrap; text-transform: uppercase; }

/* Propuesta 11a — `Por cobrar`: una fila = una cuota, agrupada por urgencia.
   Ocho columnas con vector deliberado, por eso sigue siendo CSS grid. */
.ap .grid-cobrar{ display: grid; align-items: center; column-gap: 16px;
    grid-template-columns: minmax(130px, .85fr) minmax(140px, 1fr) minmax(160px, 1.1fr)
                           minmax(64px, .45fr) minmax(104px, .7fr) minmax(140px, .95fr) 168px 40px; }
/* El head repite el inset de la tarjeta: si no, ningun track coincide. */
.ap .grid-cobrar__head{ padding: 32px var(--ap-pad-tray-inset) 12px; }
.ap .align-mid{ text-align: center; }

/* Encabezado de grupo: punto, titulo, regla y total. */
.ap .cobrar-group{ gap: 10px; padding: 18px 32px 8px; }
.ap .cobrar-group .dot{ width: 7px; height: 7px; border-radius: 999px; flex: none; }
.ap .cobrar-group__t{ font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; white-space: nowrap; }
.ap .cobrar-group__rule{ flex: 1; margin: 0 4px; }
.ap .cobrar-group__total{ font-size: 13px; font-weight: 700; white-space: nowrap; }
.ap .cobrar-group--overdue .dot{ background: var(--bl-chip-warn-dot, var(--status-warn-fg)); }
.ap .cobrar-group--overdue .cobrar-group__t,
.ap .cobrar-group--overdue .cobrar-group__total{ color: var(--status-warn-fg); }
.ap .cobrar-group--soon .dot{ background: var(--status-info-fg); }
.ap .cobrar-group--soon .cobrar-group__t,
.ap .cobrar-group--soon .cobrar-group__total{ color: var(--status-info-fg); }
.ap .cobrar-group--later .dot{ background: var(--text-placeholder); }
.ap .cobrar-group--later .cobrar-group__t,
.ap .cobrar-group--later .cobrar-group__total{ color: var(--gh-label-2); }

/* La fila es una tarjeta, no un renglon de tabla. */
.ap .grid-cobrar.row--cobrar{ margin: 0 var(--ap-tray-gutter) 8px;
    padding: 14px var(--ap-pad-tray);
    background: var(--bl-surf-card); border: 1px solid var(--gh-line-card);
    border-radius: var(--gh-r-row-1); transition: border-color .15s ease; }
.ap .grid-cobrar.row--cobrar:hover{ border-color: var(--gh-line-row-1-hover); }
.ap .grid-cobrar.row--cobrar.is-overdue{ border-color: var(--ap-chip-confirm-dash, var(--gh-line-card)); }
.ap .cobrar__fecha{ font-weight: 600; color: var(--gh-strong); }
.ap .cobrar__rel{ font-size: 11.5px; color: var(--gh-label-2); }
.ap .cobrar__rel--warn{ color: var(--status-warn-fg); font-weight: 700; }
.ap .cobrar__factura{ font-weight: 700; color: var(--gh-strong); }
.ap .cobrar__poliza{ font-size: 11.5px; color: var(--gh-label-2); }
.ap .cobrar__saldo-v{ font-weight: 700; color: var(--gh-strong); }
.ap .cobrar__saldo-v--warn{ color: var(--status-warn-fg); }
.ap .cobrar__conf{ font-size: 11.5px; font-weight: 600; color: var(--ap-chip-confirm-fg); }
/* MudButton fuerza mayusculas y un ancho minimo que la columna no tiene. */
.ap .btn--cobrar.mud-button-root{ height: var(--bl-h-btn-compact); min-width: 0; padding: 0 16px;
    border-radius: 9px; background-color: var(--bl-btn-primary-bg); color: var(--bl-btn-primary-fg);
    font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    white-space: nowrap; box-shadow: none; }
.ap .btn--cobrar.mud-button-root:hover{ background-color: var(--bl-btn-primary-bg-hover); box-shadow: none; }
/* Reemplaza a los menus de desborde. El margen auto lo centra dentro del flex
   de MudTooltip, en celda de grid o de tabla. */
.ap .btn--row-icon.mud-icon-button{ margin-inline: auto; color: var(--gh-label-2); }
.ap .btn--row-icon.mud-icon-button:hover{ color: var(--gh-strong); }

/* La cola plegada: lo que vence despues del corte no compite por atencion. */
/* Sin borde propio: su padding absorbe ese 1px. */
.ap .cobrar-fold{ gap: 10px; margin: 10px var(--ap-tray-gutter) 4px;
    padding: 12px calc(var(--ap-pad-tray) + 1px);
    background: var(--gh-tray-1); border-radius: var(--gh-r-row-1); }
.ap .cobrar-fold__t{ font-size: 13px; color: var(--gh-body); }
.ap .cobrar-fold__t b{ font-weight: 700; color: var(--gh-strong); }
.ap .cobrar-fold__total{ font-size: 13px; font-weight: 700; color: var(--gh-strong); white-space: nowrap; }
.ap .cobrar-fold__btn.mud-button-root{ min-width: 0; padding: 0 8px; color: var(--gh-label-1);
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Propuesta 11b — `En confirmación`: una fila = un recibo. */
/* `Que falta` toma mas ancho: eso corre el borde derecho de `Monto` a la
   izquierda y los chips dejan de romperse contra el monto. */
.ap .grid-confirmar{ display: grid; align-items: center; column-gap: 16px;
    grid-template-columns: minmax(150px, 1fr) minmax(120px, .85fr) minmax(190px, 1.3fr)
                           minmax(96px, .7fr) minmax(110px, .8fr) minmax(170px, 1.15fr) 150px 40px; }
.ap .grid-confirmar__head{ padding: 32px var(--ap-pad-tray-inset) 12px; }
.ap .grid-confirmar.row--confirmar{ margin: 0 var(--ap-tray-gutter) 8px;
    padding: 14px var(--ap-pad-tray);
    background: var(--bl-surf-card); border: 1px solid var(--gh-line-card);
    border-radius: var(--gh-r-row-1); transition: border-color .15s ease; }
.ap .grid-confirmar.row--confirmar:hover{ border-color: var(--gh-line-row-1-hover); }
.ap .confirmar__recibo{ font-family: var(--font-code); font-weight: 700; color: var(--gh-strong); }
.ap .confirmar__ref{ font-size: 11.5px; font-weight: 600; color: var(--ap-chip-confirm-fg); }
.ap .confirmar__meta{ font-size: 11.5px; color: var(--gh-label-2); }
/* Azul y no verde: el dinero esta cobrado pero todavia no cuenta. */
.ap .confirmar__monto{ font-weight: 700; color: var(--ap-chip-confirm-fg); }
.ap .confirmar__falta{ gap: 6px; }
/* Aca el ambar mide TIEMPO, no deuda: es la unica bandeja donde significa eso. */
.ap .chip--falta.mud-chip{ height: auto; min-height: 0; margin: 0; padding: 4px 10px;
    background: var(--status-warn-bg); border-radius: 999px;
    font-size: 11.5px; font-weight: 700; color: var(--status-warn-fg); }
.ap .confirmar__nota.mud-alert{ margin: 14px 32px 4px; border-radius: var(--gh-r-row-1); }

/* Propuesta 11c — `Saldados`: una fila = un acuerdo. Archivo, no trabajo. */
/* 20px de gap como en L2 y por lo mismo: con 16, TOTAL COBRADO y ULTIMO
   RECIBO se leian como un bloque. */
.ap .grid-saldados{ display: grid; align-items: center; column-gap: 20px;
    grid-template-columns: 28px minmax(110px, .8fr) minmax(150px, 1.1fr) minmax(150px, 1.1fr)
                           minmax(64px, .45fr) minmax(150px, 1fr) minmax(150px, 1fr) 150px; }
.ap .grid-saldados__head{ padding: 32px var(--ap-pad-tray-inset) 12px; }
.ap .grid-saldados.row--saldado{ margin: 0 var(--ap-tray-gutter) 8px;
    padding: 14px var(--ap-pad-tray);
    background: var(--bl-surf-card); border: 1px solid var(--gh-line-card);
    border-radius: var(--gh-r-row-1); }
.ap .saldado__check{ font-size: 20px; color: var(--bl-chip-ok-fg); }
.ap .saldado__fecha{ font-weight: 600; color: var(--gh-strong); }
/* El total cobrado es el unico acento fuerte: lo demas es historia en gris. */
.ap .saldado__total{ font-weight: 700; color: var(--bl-chip-ok-fg); }
.ap .saldado__recibo{ font-family: var(--font-code); font-weight: 600; color: var(--gh-strong); }
.ap .btn--saldado.mud-button-root{ height: var(--bl-h-btn-compact); min-width: 0; padding: 0 14px;
    border-radius: 9px; border: 1px solid var(--ap-report-btn-border); background-color: transparent;
    color: var(--ap-report-btn-fg); font-size: 12px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; white-space: nowrap; }
.ap .btn--saldado.mud-button-root:hover{ background-color: var(--gh-surf-hover); }

/* §2.5 — L0 / L1 / L2 trees */
.ap .grid-l0{ display: grid; align-items: center;
    grid-template-columns: 44px minmax(220px, 1.5fr) minmax(150px, 1fr) minmax(90px, .5fr) minmax(300px, 1.4fr) minmax(140px, .8fr); }
.ap .grid-l1{ display: grid; align-items: center;
    grid-template-columns: 40px minmax(120px, .85fr) minmax(140px, 1fr) minmax(104px, .6fr) minmax(190px, 1.2fr) minmax(130px, .9fr) minmax(140px, .9fr) 44px; }
/* Seis columnas, no siete: los 158px de acciones son cobertura. El column-gap
   es obligatorio: MONTO derecha y COBERTURA izquierda se tocan. */
.ap .grid-l2{ display: grid; align-items: center; column-gap: 20px;
    grid-template-columns: 74px minmax(140px, 1fr) minmax(110px, .85fr) minmax(240px, 1.6fr) minmax(110px, .85fr) minmax(160px, 1fr); }
.ap .grid-l0 > .row--l0{ padding: var(--gh-pad-row-0); }
.ap .grid-l0__head{ padding: 0 26px 14px; }
/* 15px: la fila suma su borde de 1px a los 14 de padding. */
.ap .grid-l1__head{ padding: 4px 15px 12px; }
.ap .grid-l2__head{ padding: 0 15px 10px; }
.ap .grid-l1__head .micro-label{ font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--gh-label-1); }
.ap .grid-l2__head .micro-label{ font-size: 10.5px; font-weight: 700; letter-spacing: .10em;
    text-transform: uppercase; color: var(--gh-label-2); }

/* Cabecera de la bandeja L2: titulo, totales y la UNICA accion del plan. */
.ap .l2-tray__head{ display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; padding: 2px 14px 12px; }
.ap .l2-tray__titles{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap .l2-tray__totals{ font-size: 12.5px; color: var(--gh-body); }
.ap .l2-tray__totals b{ font-weight: 700; color: var(--gh-strong); }
.ap .l2-tray__cta{ flex: none; }

/* La cobertura ocupa el ancho que gastaba la columna de acciones. */
.ap .l2-cov{ display: flex; flex-direction: column; gap: 5px; min-width: 0; }

/* El chip es la accion: el boton no dibuja caja propia, solo la lleva. */
.ap .l2-estado-link{ display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0;
    background: none; font: inherit; color: inherit; cursor: pointer; }
/* MudButton fuerza mayusculas y una altura minima; el chip no las lleva. */
.ap .l2-estado-link.mud-button-root{ text-transform: none; letter-spacing: normal;
    min-width: 0; height: auto; }
.ap .l2-estado-link.mud-button-root:hover{ background-color: transparent; }
.ap .l2-estado-link__chev{ font-size: 15px; color: var(--gh-label-2); line-height: 1; }
.ap .l2-estado-link:hover .l2-estado-link__chev{ color: var(--gh-strong); }
.ap .l2-estado-link:focus-visible{ outline: 2px solid var(--bl-btn-primary-bg); outline-offset: 3px; border-radius: 999px; }
.ap .align-right{ text-align: right; }
/* `align-center` no centra texto: es la clase que MudStack emite por
   AlignItems.Center. Nadie la usaba para texto. */
.ap .rows{ display: flex; flex-direction: column; gap: calc(var(--gh-gap-rows) + var(--gh-gap-group-extra)); }
.ap .row-unit{ display: flex; flex-direction: column; gap: var(--gh-gap-rows); }

/* §2.7 — rows + hover (D20: --surf-row-1/-2 resolve to the app's own
   --gh-row-1/-2, which already carry the correct light AND dark values) */
.ap .row--l1{ padding: 13px 14px; background: var(--gh-row-1); border: 1px solid var(--gh-line-row-1);
    border-radius: var(--gh-r-row-1); box-shadow: var(--gh-row-shadow); cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease; }
.ap .row--l2{ padding: 12px 14px; background: var(--gh-row-2); border: 1px solid var(--gh-line-row-2);
    border-radius: var(--gh-r-row-2); transition: border-color .15s ease; }
.ap .row--l1:hover{ border-color: var(--gh-line-row-1-hover); }
.ap .row--l2:hover{ border-color: var(--gh-line-row-2-hover); }

/* §2.8 — plan progress bar */
.ap .plan-progress{ display: flex; flex-direction: column; gap: 6px; padding-right: 22px; }
.ap .plan-progress__label{ display: flex; align-items: baseline; gap: 6px; }
.ap .plan-progress__label b{ font-size: 14px; font-weight: 600; color: var(--gh-strong); }
.ap .plan-progress__label span{ font-size: 13px; color: var(--gh-label-2); }
/* MudProgressLinear vestida. Su altura viene de una regla (0,3,0), asi que hay
   que igualarla: (0,2,0) pierde aunque cargue despues. */
.ap .plan-bar.mud-progress-linear{ height: 5px; border-radius: 999px;
    background: var(--ap-plan-track); overflow: hidden; }
/* El relleno lo pinta una regla (0,4,0) de MudBlazor; hay que igualarla.
   Los tres segmentos viven abajo, compartidos con .covbar. */
.ap .plan-progress__conf{ font-size: 11.5px; font-weight: 600; white-space: nowrap;
    color: var(--ap-chip-confirm-fg); }

/* §2.9 — dashed "En confirmación" chip (carries a clock glyph, not a dot —
   mock wins over §5.1's "no icon inside the chip" rule, appendix #8) */
.ap .chip--pending-confirm{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    background: var(--ap-chip-confirm-bg); border: 1px dashed var(--ap-chip-confirm-dash);
    border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ap-chip-confirm-fg);
    white-space: nowrap; }
.ap .chip--pending-confirm svg{ flex: none; }
.ap .chip--pending-confirm--sm{ padding: 4px 10px; font-size: 11.5px; }
.ap .chip--pending-confirm--lg{ padding: 5px 12px; gap: 7px; font-size: 13px; font-weight: 600; }

/* §2.10 — the whole input block, incl. tray fill inversion and .fld--ro */
.ap .mud-input.mud-input-filled{ background: var(--fld-bg); border-radius: var(--bl-r-control);
    height: var(--bl-h-field); transition: background-color .15s ease; }
.ap .mud-input.mud-input-filled:hover{ background: var(--fld-bg-hover); }
.ap .mud-input-filled::before, .ap .mud-input-filled::after{ display: none; }
.ap .mud-input-label{ font-size: 10.5px; font-weight: 600; color: var(--gh-label-2); line-height: 1.2; }

/* The `*` is written into each Label so it stays uncolored; drop MudBlazor's
   own `::after` marker, which would render a second one. */
.ap .mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after{ content: none; }
.ap .mud-input-slot{ font-size: 14.5px; font-weight: 600; color: var(--gh-strong); line-height: 1.3; }
/* Token, no hex: el literal servia los dos temas y en dark daba 2.95:1, bajo el piso de 3:1. */
.ap .mud-input-adornment .mud-icon-root{ font-size: 16px; color: var(--gh-label-2); }

/* Descripción — the one multi-line exception to the 48px height (B9) */
.ap .fld--area .mud-input.mud-input-filled{ min-height: 102px; height: auto; padding: 9px 14px; }
.ap .fld--area .mud-input-slot{ line-height: 1.4; }

/* read-only / calculated field — mock wins on colour and weight (§3.4) */
.ap .fld--ro .mud-input.mud-input-filled{ background: transparent; border-radius: 0; height: var(--bl-h-field);
    padding: 0 2px; border-bottom: 1px dashed var(--line-input); }
.ap .fld--ro .mud-input-label{ color: var(--text-support); }
.ap .fld--ro .mud-input-slot{ font-size: 16px; font-weight: 700; color: var(--gh-strong); }
.ap .fld--ro .mud-input-adornment{ display: none; }

/* dashed upload field (Comprobante). Es un button real: alcanzable por teclado,
   y sin caja propia para que se siga viendo como un campo. */
.ap button.fld--upload{ width: 100%; font: inherit; text-align: left; color: inherit; }
.ap button.fld--upload:focus-visible{ outline: 2px solid var(--bl-btn-primary-bg); outline-offset: 2px; }
.ap .fld--upload{ display: flex; align-items: center; gap: 10px; height: var(--bl-h-field);
    padding: 0 12px 0 14px; background: var(--ap-upload-bg); border: 1px dashed var(--ap-upload-dash);
    border-radius: var(--bl-r-control); cursor: pointer; transition: border-color .15s ease; }
.ap .fld--upload:hover{ border-color: var(--ap-upload-fg); }
.ap .fld--upload .fld--upload__label{ font-size: 10.5px; font-weight: 600; color: var(--gh-label-1); line-height: 1.2; }
.ap .fld--upload .fld--upload__value{ font-size: 13.5px; font-weight: 600; color: var(--ap-upload-fg); line-height: 1.3; }
.ap .fld--upload svg{ flex: none; color: var(--ap-upload-fg); }

/* §2.11 — amber out-of-validity warning */
.ap .fld--warn .mud-input.mud-input-filled{ box-shadow: inset 0 0 0 1.5px var(--bl-chip-warn-dot); }
.ap .fld--warn .mud-input-label{ color: var(--bl-kpi-warn-fg); }
.ap .fld--warn .mud-input-adornment .mud-icon-root{ color: var(--bl-kpi-warn-fg); }
.ap .fld__warn-msg{ display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--bl-kpi-warn-fg); }
.ap .fld__helper{ font-size: 12px; color: var(--gh-label-2); }

/* §2.12 — installment plan table (grid-cuotas) */
.ap .grid-cuotas{ display: grid; align-items: center;
    grid-template-columns: 44px 74px minmax(140px, 1fr) minmax(130px, .9fr)
                           minmax(130px, .9fr) minmax(130px, .9fr) minmax(160px, 1fr); }
.ap .grid-cuotas__wrap{ border: 1px solid var(--gh-line-row-1); border-radius: 12px; overflow: hidden; }
.ap .grid-cuotas__head{ padding: 12px 16px; background: var(--gh-surf-hover); border-bottom: 1px solid var(--gh-line-divider); }

/* compound (.grid-cuotas.row--cuota van en el MISMO div) — el descendiente
   `.grid-cuotas .row--cuota` nunca matcheaba: filas sin padding ni selección. */
.ap .grid-cuotas.row--cuota{ padding: 13px 16px; border-bottom: 1px solid var(--surf-chip-neutral); cursor: pointer; }
.ap .grid-cuotas.row--cuota:last-child{ border-bottom: none; }
.ap .grid-cuotas.row--cuota:hover{ background: var(--gh-surf-hover); }
.ap .grid-cuotas.row--cuota.is-selected{ background: var(--ap-row-selected); }
.ap .grid-cuotas.row--cuota.is-selected:hover{ background: var(--ap-row-selected); }
.ap .cuota-check{ width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--ap-checkbox-off);
    display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ap .cuota-check.is-on, .ap .cuota-check.is-indeterminate{ border: 0; background: var(--ap-checkbox-on); }
.ap .cuota-check svg{ stroke: var(--ap-checkbox-ink); }
/* Como MudCheckBox la caja la dibuja el icono, no el borde. Quotas.razor
   sigue usando la version cruda de arriba. */
.ap .cuota-check.mud-checkbox{ border: 0; background: none; border-radius: 0; margin: 0; }
.ap .cuota-check.mud-checkbox > .mud-icon-button{ padding: 0; }
.ap .cuota-check.mud-checkbox svg{ stroke: none; }
.ap .cuota-check.mud-checkbox.mud-disabled{ opacity: .45; }
.ap .check-cell{ display: flex; align-items: center; }

/* §2.13 — dialog overrides (mock wins: shadow, actions padding, button chrome) */
.mud-dialog.ap-dialog{ border-radius: 18px; border: 1px solid var(--gh-line-card); overflow: hidden;
    background: var(--bl-surf-card);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 30px 60px -34px rgba(16, 24, 40, .5); }
.app-dark .mud-dialog.ap-dialog{ box-shadow: none; }
.ap-dialog .mud-dialog-content{ padding: 0; max-height: calc(88vh - 150px); overflow: auto; }
.ap-dialog .mud-dialog-actions{ border-top: 1px solid var(--gh-line-divider); background: var(--bl-dialog-actions-bg);
    padding: 16px 28px; justify-content: flex-end; gap: 10px; }
.ap-dialog .mud-dialog-actions--apply{ padding: 18px 28px; }
.ap .mud-button-filled-primary{ background: var(--bl-btn-primary-bg); color: var(--bl-btn-primary-fg);
    height: var(--bl-h-btn-dialog); border-radius: var(--bl-r-control); letter-spacing: .06em;
    font-size: 13px; font-weight: 700; text-transform: uppercase; padding: 0 24px;
    transition: background-color .15s ease; }
.ap .mud-button-filled-primary:hover{ background: var(--bl-btn-primary-bg-hover); }
.ap .mud-button-text{ color: var(--gh-body); height: var(--bl-h-btn-dialog); border-radius: var(--bl-r-control);
    font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 0 18px; }
.ap .mud-button-text:hover{ background: var(--surf-chip-neutral); }
.ap-dialog .mud-table-head .mud-table-cell,
.ap-dialog .grid-cuotas__head,
.ap-dialog .grid-recibos__head,
.ap-dialog .grid-l2__head{ background: var(--ap-dialog-head); }

/* §3.2 — INICIAL chip (filled, colored — mock wins over "outlined, never
   colored") and the DOP/USD currency pill (outlined + light fill, compound) */
.ap .chip--inicial{ display: inline-flex; align-items: center; padding: 2px 7px; background: var(--status-info-bg);
    border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--status-info-fg); white-space: nowrap; }
.ap .currency-pill{ display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px;
    background: var(--ap-surf-item); border: 1px solid var(--gh-line-card); border-radius: 999px; white-space: nowrap; }
.ap .currency-pill__code{ font-size: 11px; font-weight: 700; color: var(--gh-label-2); }
.ap .currency-pill__value{ font-size: 14px; font-weight: 600; color: var(--gh-strong); }
.ap .currency-group{ display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* plan-panel status pills, no dot */
.ap .chip--plan-empty{ padding: 3px 10px; background: var(--status-info-bg); border-radius: 999px;
    font-size: 11.5px; font-weight: 700; color: var(--status-info-fg); white-space: nowrap; }
.ap .chip--plan-draft{ padding: 3px 10px; background: var(--status-warn-bg); border-radius: 999px;
    font-size: 11.5px; font-weight: 700; color: var(--status-warn-fg); white-space: nowrap; }
.ap .chip--selection{ padding: 3px 10px; background: var(--bl-surf-card); border-radius: 999px;
    font-size: 11.5px; font-weight: 700; color: var(--bl-btn-primary-bg); white-space: nowrap; }

/* premium-dialog "Sin registrar" chip — same info family, WITH a dot (B9) */
.ap .chip--unregistered{ display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px;
    background: var(--status-info-bg); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--status-info-fg); }
.ap .chip--unregistered .dot{ width: 7px; height: 7px; border-radius: 999px; background: var(--status-info-dot); }

/* L2 overdue pill trailing the due date */
.ap .pill--overdue{ padding: 2px 8px; background: var(--status-warn-bg); border-radius: 999px;
    font-size: 11.5px; font-weight: 700; color: var(--status-warn-fg); white-space: nowrap; }

/* §3.3/§3.4 — .fld / .fld--ro base (MudTextField Variant.Filled wrapper) */
.ap .fld .mud-input.mud-input-filled{ border-radius: var(--bl-r-control); background: var(--fld-bg); }
.ap .fld .mud-input.mud-input-filled:hover{ background: var(--fld-bg-hover); }
.ap .fld.mud-input-error .mud-input.mud-input-filled{ box-shadow: inset 0 0 0 1px var(--status-danger-fg); }
.ap .fld .mud-input-helper-text.mud-input-error{ color: var(--status-danger-fg); font-size: 11.5px; }
.ap .fld--money .mud-input-numeric-spin{ display: none; }

/* §3.5 — section header */
.ap .sec{ display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; }
.ap .sec:first-child{ margin-top: 0; }
.ap .sec__t{ font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
    color: var(--gh-label-2); white-space: nowrap; }
.ap .sec__l{ flex: 1; height: 1px; background: var(--gh-line-divider); }
.ap .sec__aside{ font-size: 12.5px; color: var(--gh-body); white-space: nowrap; }

/* §3.6 — icon-only action button (mock's own rest/hover colours win) */
.ap .icon-btn{ display: flex; align-items: center; justify-content: center;
    width: var(--ap-h-btn-icon); height: var(--ap-h-btn-icon); border-radius: 8px;
    color: var(--gh-label-2); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.ap .icon-btn:hover{ background: var(--surf-chip-neutral); }
.ap .icon-btn--danger:hover{ background: var(--status-danger-bg); color: var(--status-danger-fg); }
.app-dark .ap .icon-btn{ color: var(--gh-label-1); }
.app-dark .ap .icon-btn:hover{ background: var(--gh-row-1); }

/* dialog close (34x34/radius 9) */
.ap .icon-btn--close{ width: 34px; height: 34px; border-radius: 9px; }

/* --------------------------------------------------------------------------
   1.4 — D14: three segmented-control variants, variant assignment
   (`.seg` = A, `.seg.seg--dialog` = B, `.seg.seg--dialog.seg--fill` = C).
   No fourth variant may be introduced. See block above for the rules.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   1.5 — interaction states (visual-02 §4/§6)
   -------------------------------------------------------------------------- */
.ap .row--l0:hover, .ap .grid-flat.row--flat:hover{ background: var(--gh-surf-hover); }
.ap [role="button"], .ap button{ transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ap :focus-visible{ outline: 2px solid var(--bl-btn-primary-bg); outline-offset: 2px; }

/* chevrons: L0 in a 28x28 plate, L1 bare at 15px — path swap, not rotation,
   would be a static-mock artifact; this module rotates per §6. */
.ap .chevron-plate{ width: 28px; height: 28px; border-radius: 8px; background: var(--surf-chip-neutral);
    display: flex; align-items: center; justify-content: center; }
.ap .chevron-plate svg, .ap .chevron--l1{ color: var(--gh-icon-chevron); transition: transform .18s ease; }
.ap .chevron-plate svg{ width: 16px; height: 16px; }
.ap .chevron--l1{ width: 15px; height: 15px; }
.ap .chevron--collapsed{ transform: rotate(-90deg); }
.ap .chevron--expanded{ transform: rotate(0deg); }

/* --------------------------------------------------------------------------
   1.6 — global overrides (visual-02 §5 / §8, all five rules verbatim)
   -------------------------------------------------------------------------- */
.ap .mud-table-cell.detail-cell{ padding: 0 !important; border: none !important; background: transparent !important; }
.ap .mud-table-row.mud-table-row-details,
.ap .mud-table-row.mud-table-row-details:hover{ background: transparent !important; }
.ap .ord-row.is-open .mud-table-cell{ border-bottom: none !important; }
.ap .ord-table .mud-table-head .mud-table-cell{ text-transform: none !important;
    font-weight: 700; font-size: 15px; color: var(--gh-head); }
.ap .fld--money .mud-input-numeric-spin{ display: none; }

/* --------------------------------------------------------------------------
   1.14 — S3b/S4: L1/L2 trailing controls, D19/D21/D22, amount-coloring
   matrix (design/09-states-and-amounts.png). B2/D19: the L2 `···` is a
   different control from the L1 `···` and must not share a class.
   -------------------------------------------------------------------------- */
/* El `···` del L1 se fue: era un menu de un solo item. Ver .btn--row-icon. */

/* L2 `···` — 32x32/radius 8, inside the 158px action cell, after the primary
   action (B2/D19). Never holds a payment action (guardrail, B2). */
.ap .l0-filter{ color: var(--icon-filter); }

/* D22 — button height ladder. L2 row action 32/radius 8, flat-worklist +
   RECALCULAR/VACIAR PLAN/banner ADJUNTAR 36/radius 9. Toolbar (48) and
   dialog footer (44) already exist as --ap-h-field/--ap-h-btn-dialog. */
.ap .btn--l2{ height: var(--ap-h-btn-icon); padding: 0 14px; border-radius: 8px;
    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; }
.ap .btn--l2.btn--filled{ background: var(--bl-btn-primary-bg); color: var(--bl-btn-primary-fg); }
.ap .btn--l2.btn--filled:hover{ background: var(--bl-btn-primary-bg-hover); }
.ap .btn--l2.btn--outlined{ background: transparent; color: var(--bl-btn-primary-bg);
    border: 1px solid var(--gh-line-card); }
.ap .btn--l2.btn--outlined:hover{ background: var(--gh-surf-hover); }

/* L2 action cell layout: primary action + `···`, gap 6, flush right */

/* Registro de primas — dialogo + panel de plan inline. */
.mud-dialog.ap-dialog.dlg-quotas{ width: 1000px !important; max-width: 1000px !important; }

/* read-only summary strip — CONTRATANTE/DOCUMENTO/PÓLIZA/VIGENCIA/ESTADO */
.ap .strip{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 32px;
    padding: 14px 28px 18px; border-bottom: 1px solid var(--gh-line-divider); }
.ap .strip__item{ display: flex; flex-direction: column; gap: 3px; }
.ap .strip__label{ font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gh-label-1); }
.ap .strip__value{ font-size: 15px; font-weight: 600; color: var(--gh-strong); }

/* generic 12-column grid + span utilities, used by every dialog section */
.ap .grid-12{ display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--ap-grid-gutter); }
.ap .col-2{ grid-column: span 2; }
.ap .col-3{ grid-column: span 3; }
.ap .col-4{ grid-column: span 4; }
.ap .col-5{ grid-column: span 5; }
.ap .col-6{ grid-column: span 6; }
.ap .col-12{ grid-column: span 12; }

/* text (non-icon) adornments on a plain `.fld` — "RD$" / "%" prefixes+suffixes.
   Token, no hex: sobre el campo blanco daba 3.38:1 y ahora da 4.71:1. */
.ap .fld .mud-input-adornment{ font-size: 12.5px; font-weight: 700; color: var(--gh-label-1); }

/* dialog section body padding (mock's `sec-02` wraps each section at 20-28-0/26) */
.ap .ap-sec-block{ padding: 26px 28px 0; }
.ap .ap-sec-block:first-of-type{ padding-top: 20px; }

/* inside a dialog block the 26px lives on the block, not the header */
.ap .ap-sec-block .sec{ margin: 0 0 14px; }
.ap .ap-sec-block--last{ padding-bottom: 26px; }

/* plan panel — reuses the app's own tray-1 tokens (D9 reuse-over-duplicate) */
.ap .plan-panel{ margin-top: 26px; padding: 16px; background: var(--gh-tray-1);
    border: 1px solid var(--gh-line-tray-1); border-radius: var(--gh-r-tray-1); }
.ap .plan-panel__head{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ap .plan-panel__foot{ display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--gh-line-tray-1); }
.ap .plan-panel__helper{ flex: 1; font-size: 13px; color: var(--gh-body); }

/* Cuota inicial checkbox — reuses .cuota-check's exact 20x20/radius6 shape */
.ap .plan-check{ display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.ap .plan-check__label{ font-size: 14.5px; font-weight: 600; color: var(--gh-strong); }

/* four summary cards (Cuotas / Cuota inicial / Cuotas 2 a N / Suma del plan) */
.ap .plan-cards{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.ap .plan-card{ display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
    background: var(--bl-surf-card); border: 1px solid var(--gh-line-card); border-radius: 11px; }
.ap .plan-card__t{ font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gh-label-1); }
.ap .plan-card__v{ display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700;
    line-height: 23px; white-space: nowrap; color: var(--gh-strong); }
.ap .plan-card--ok{ background: var(--bl-chip-ok-bg); border-color: var(--ap-chip-ok-line); }
.ap .plan-card--ok .plan-card__t, .ap .plan-card--ok .plan-card__v{ color: var(--bl-chip-ok-fg); }
.ap .plan-card--danger{ background: var(--status-danger-bg); border-color: var(--ap-danger-line); }
.ap .plan-card--danger .plan-card__t, .ap .plan-card--danger .plan-card__v{ color: var(--status-danger-fg); }
.ap .plan-card__v svg{ flex: none; }

/* generated-plan table — CUOTA/VENCIMIENTO/MONTO/ACUMULADO */
.ap .grid-plan{ display: grid; align-items: center;
    grid-template-columns: 90px 269fr 242fr 269fr; }
.ap .grid-plan__wrap{ background: var(--bl-surf-card); border: 1px solid var(--gh-line-card); border-radius: 11px; overflow: hidden; }
.ap .grid-plan.grid-plan__head{ padding: 12px 18px; border-bottom: 1px solid var(--gh-line-divider); }
.ap .grid-plan.row--plan{ padding: 13px 18px; border-bottom: 1px solid var(--surf-chip-neutral); }
.ap .grid-plan.row--plan:last-child{ border-bottom: none; }
.ap .grid-plan.row--plan:hover{ background: var(--gh-surf-hover); }
.ap .grid-plan__cuota{ display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--gh-strong); }
.ap .grid-plan__due{ font-size: 15px; color: var(--gh-body); }
.ap .grid-plan__amt{ font-size: 15px; font-weight: 600; color: var(--gh-strong); text-align: right; }
.ap .grid-plan__acum{ font-size: 14.5px; color: var(--gh-label-2); text-align: right; }

/* Spinner de guardado: hereda el texto del botón primario, no el default. */
.ap .mud-button-filled-primary .mud-progress-circular{ color: var(--bl-btn-primary-fg); }
.ap .mud-button-filled-primary .mud-progress-circular circle{ stroke: var(--bl-btn-primary-fg); }

/* Campos string en mayúsculas: la vista aquí, el payload se normaliza al guardar. */
.ap .fld--upper .mud-input-slot{ text-transform: uppercase; }

/* Recalcular: fondo casi blanco sobre el tray lavanda, medido del mock. */
.ap .plan-panel .btn--flat.btn--outlined{ background: var(--ap-surf-item); }
.app-dark .ap .plan-panel .btn--flat.btn--outlined{ background: transparent; }

/* Vaciar plan — destructive TEXT action, never a filled/outlined button */
.ap .btn--flat.btn--danger{ background: transparent; color: var(--status-danger-fg); border: 0; }
.ap .btn--flat.btn--danger:hover{ background: var(--status-danger-bg); }
.ap .plan-confirm{ display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gh-strong); }

/* Aplicar pago — dialogo de pago unico. */
.mud-dialog.ap-dialog.dlg-apply{ width: 1140px !important; max-width: 1140px !important; }

/* PAGADO renders green as DATA in the summary strip (B4: permitted exception) */
.ap .strip__value--ok{ color: var(--bl-chip-ok-fg); }

/* CUOTAS · {n} / RECIBOS · {n} tabs — underline variant, no MudTabs chrome */
.ap .ap-tabs{ display: flex; align-items: center; gap: 28px; padding: 0 28px;
    border-bottom: 1px solid var(--gh-line-divider); }
/* MudToggleGroup pone las pestañas: la barra le quita el marco y el minimo. */
.ap .ap-tabs.mud-toggle-group{ border: 0; border-radius: 0; overflow: visible;
    border-bottom: 1px solid var(--gh-line-divider); background: transparent; }
.ap .ap-tabs > button{ position: relative; padding: 14px 2px 13px; border: 0; background: transparent;
    min-width: 0; border-radius: 0; box-shadow: none;
    font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--gh-label-2); cursor: pointer; }
.ap .ap-tabs > button:hover{ background: transparent; color: var(--gh-strong); }
.ap .ap-tabs > button.is-active{ color: var(--gh-strong); background: transparent; }
.ap .ap-tabs > button.is-active::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; background: var(--ap-tab-underline); border-radius: 2px 2px 0 0; }

/* confirmation banner (D13/PNG 08) — reuses the info-family literals already
   named for the KPI bar, just at the banner's own geometry */
.ap .banner--confirm{ display: flex; align-items: center; gap: 14px; margin: 18px 28px 0;
    padding: 14px 18px; background: var(--bl-kpi-info-bg); border: 1px solid var(--bl-kpi-info-line);
    border-radius: 12px; }
.ap .banner--confirm svg{ flex: none; color: var(--bl-kpi-info-fg); }
.ap .banner--confirm__title{ font-size: 14px; font-weight: 700; color: var(--bl-kpi-info-fg); }
.ap .banner--confirm__sub{ font-size: 13px; color: var(--gh-body); }
.ap .banner--confirm__spacer{ flex: 1; }

/* PAGO A APLICAR panel head chip + live remainder footer rule */
.ap .apply-foot{ display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gh-line-tray-1); flex-wrap: wrap; }
.ap .apply-foot__rule{ display: flex; align-items: flex-start; gap: 8px; font-size: 13px;
    color: var(--gh-body); max-width: 620px; }
.ap .apply-foot__rule svg{ flex: none; margin-top: 1px; color: var(--gh-body); }
.ap .apply-foot__rule b{ font-weight: 700; color: var(--ap-chip-confirm-fg); }
.ap .apply-foot__remainder{ font-size: 13.5px; color: var(--gh-body); white-space: nowrap; }
.ap .apply-foot__remainder b{ font-weight: 700; color: var(--gh-strong); }

/* Recibos tab — N° DE RECIBO/FECHA/MONTO/MÉTODO/ESTADO, ESTADO left-aligned
   (deliberate asymmetry vs every other grid, spec-addendum B3) */
.ap .grid-recibos{ display: grid; align-items: center; column-gap: 16px;
    grid-template-columns: minmax(160px, 1.1fr) minmax(100px, .6fr) minmax(110px, .7fr)
                           minmax(110px, .7fr) minmax(140px, .85fr) 44px; }
.ap .grid-recibos__head{ padding: 12px 20px; border-bottom: 1px solid var(--gh-line-divider); }
/* Compuesto y no descendiente: van en el MISMO div, asi que la fila quedaba
   sin padding contra un head de 20px. Trampa 8. */
.ap .grid-recibos.row--recibo{ padding: 14px 20px; border-bottom: 1px solid var(--surf-chip-neutral); }
.ap .grid-recibos.row--recibo:last-child{ border-bottom: none; }
.ap .grid-recibos.row--recibo:hover{ background: var(--gh-surf-hover); }
.ap .recibo-num{ font-family: var(--font-code, ui-monospace, monospace); font-weight: 700; color: var(--gh-strong); }

/* Empty tab — no oversized grey block (defect #16): a single muted line */
.ap .tab-empty{ padding: 26px 28px; color: var(--gh-label-2); font-size: 13.5px; }

/* --------------------------------------------------------------------------
   1.17 — S9: `Reporte de pago` (Bundle C, PNG 04). 560px width; reuses
   .dlg-head/.fld/.seg--dialog/.seg__label/.col-stack/.dlg-sec — no duplicate
   literals introduced here.
   -------------------------------------------------------------------------- */
.mud-dialog.ap-dialog.dlg-report{ width: 560px !important; max-width: 560px !important; }

/* Summary line — "Incluye {n} acuerdos · {n} cuotas · {montos} pendientes" */
.ap .report-summary{ padding: 14px 16px; background: var(--ap-surf-item); border-radius: 10px;
    font-size: 13.5px; color: var(--gh-body); }

/* Metricas de campo, medidas contra el mock. Los selectores espejan la cadena
   completa de MudBlazor por especificidad. Ver §6.10. */
.ap .fld .mud-input.mud-input-filled,
.ap .mud-input.mud-input-filled{ background: #EFF2F7; padding: 0 14px; }
.ap .fld .mud-input.mud-input-filled:hover,
.ap .mud-input.mud-input-filled:hover{ background: #E7ECF4; }

/* El label NUNCA flota: Mud lo flota a y=17 y lo encoge a 0.75; el mock no hace ninguna. Ver §6.10. */
.ap .mud-input-control .mud-input-label.mud-input-label-filled,
.ap .mud-input-control .mud-input-label.mud-input-label-filled.mud-input-label-margin-dense,
.ap .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled,
.ap .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled.mud-input-label-margin-dense,
.ap .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled,
.ap .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled.mud-input-label-margin-dense,
.ap .mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled{
    transform: translate(14px, 8px) scale(1);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 12.6px;
    color: var(--gh-label-1);
    max-width: calc(100% - 28px);
}
.ap .mud-input.mud-input-filled > .mud-input-slot,
.ap .mud-input.mud-input-filled > input.mud-input-slot{
    padding: 21px 0 0;
    height: 48px;
    box-sizing: border-box;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 18.85px;
    color: var(--gh-strong);
}

/* The textarea grows, so it gets top padding without a fixed height —
   a fixed height plus padding on a border-box textarea clips its text. */
.ap .fld--area .mud-input.mud-input-filled > .mud-input-slot,
.ap .fld--area .mud-input.mud-input-filled > textarea.mud-input-slot{ height: auto; padding: 21px 0 9px; }

/* Read-only/derived: transparent with a dashed rule. Declared after `.fld`
   above so it wins on source order at equal specificity. */
.ap .fld.fld--ro .mud-input.mud-input-filled{ background: transparent; padding: 0 2px; }
.ap .fld.fld--ro .mud-input.mud-input-filled:hover{ background: transparent; }

/* MudBlazor's dense control adds 4px top+bottom; the 20px grid gutter owns spacing. */
.ap .mud-input-control.mud-input-control-margin-dense{ margin: 0; }

/* --- Ajustes medidos contra el mock (ronda 3, feedback anotado del usuario) --- */
/* MudBlazor's own title padding double-indented the head; .dlg-head owns 28px. */
.ap .mud-dialog-title{ padding: 0; margin: 0; }

/* Mud declara el pseudo con dos puntos simples y cadena :hover; hay que igualarla. */
.ap .mud-input.mud-input-filled.mud-input-underline:before,
.ap .mud-input.mud-input-filled.mud-input-underline:after,
.ap .mud-input.mud-input-filled.mud-input-underline:hover:before,
.ap .mud-input.mud-input-filled.mud-input-underline.mud-disabled:before{ content: none; display: none; border-bottom: 0; }

/* Description area: text hugs the label instead of centering in the tall box. */
.ap .fld--area .mud-input.mud-input-filled{ align-items: flex-start; }
.ap .fld--area .mud-input.mud-input-filled > .mud-input-slot,
.ap .fld--area .mud-input.mud-input-filled > textarea.mud-input-slot{ padding: 26px 0 10px; height: auto; }

/* Todo ancla al inicio para que un error en un hermano no desplace las cajas. Ver §6.10. */
.ap .grid-12 .col-stack{ position: relative; align-self: start; }
.ap .grid-12 .col-stack .seg__label{ position: absolute; bottom: calc(100% + 6px); left: 2px; white-space: nowrap; }

/* Los campos del plan panel invierten a blanco como .tray, que nunca tuvo la
   clase. El rol es --gh-row-2. Ver §12. */
.ap .plan-panel .mud-input.mud-input-filled{ background: var(--gh-row-2); }
.ap .plan-panel .mud-input.mud-input-filled:hover{ background: #F6F9FC; }

/* % de la prima: the number hugs its suffix instead of pushing it to the far edge. */
.ap .fld--pct input.mud-input-slot{ flex: 0 0 auto; width: 7ch; }

/* --- Ronda 2 de QA visual del Registro de primas --- */
/* La segunda linea punteada era el border del .fld--ro GLOBAL (app.css:4172,
   compartido por 4 dialogos legacy); dentro de .ap la linea vive en el input. */
.ap .fld--ro{ padding: 0; border-bottom: 0; }

/* Adornos de ICONO (chevron, calendario) — offset medido de la ronda 2. */
.ap .mud-input.mud-input-filled > .mud-input-adornment-end,
.ap .mud-input.mud-input-filled > .mud-input-adornment-start,
.ap .mud-input.mud-input-filled > .mud-input-adornment-start.mud-input-root-filled-shrink{
    align-self: flex-start;
    margin-top: 23px;
}

/* El adorno ocupa la misma banda de 27px que el input, asi comparte baseline. Ver §6.10. */
.ap .mud-input.mud-input-filled > .mud-input-adornment-start.mud-text,
.ap .mud-input.mud-input-filled > .mud-input-adornment-end.mud-text{
    align-self: flex-start; height: 27px; align-items: center;
    /* 22 y no 21: medido, el centro del adorno quedaba 1px sobre el del input. */
    margin-top: 22px;
}
.ap .mud-input-adornment .mud-input-adornment-text{
    font-size: 12.5px; font-weight: 700; line-height: 18.85px;
}

/* Descripcion: el texto arranca ~12px bajo el label y la caja baja de altura. */
.ap .fld--area .mud-input.mud-input-filled{ min-height: 88px; }
.ap .fld--area .mud-input.mud-input-filled > .mud-input-slot,
.ap .fld--area .mud-input.mud-input-filled > textarea.mud-input-slot,
.ap .fld--area .mud-input.mud-input-filled > textarea.mud-input-slot.mud-input-root-filled.mud-input-root-margin-dense{
    padding: 33px 0 10px; height: auto;
}

/* Selects: chevron-down al borde derecho, centrado vertical. */
.ap .mud-select .mud-input-adornment{ margin-left: auto; align-self: center; }
.ap .mud-select .mud-input-adornment .mud-icon-root{ font-size: 20px; color: var(--gh-label-2); }

/* Mud le mete al slot div su propio padding 23/12. Ver §6.10. */
.ap .mud-select .mud-input.mud-input-filled > div.mud-input-slot.mud-input-root.mud-input-root-filled{
    padding: 21px 0 0;
}

/* --- Ronda 3 de QA visual del Registro de primas --- */
/* Aire entre el hairline de FINANCIAMIENTO y el label flotante del toggle
   (el mock separa esta fila 34px del header, no los 14 estandar). */
.ap .grid-12:has(.col-stack .seg){ margin-top: 20px; }

/* Prima total: el valor se corre a 14px, la misma guia del label pinned. */
.ap .fld.fld--ro .mud-input.mud-input-filled{ padding: 0 14px; }

/* Descripcion: el texto sube, mas pegado al label. */
.ap .fld--area .mud-input.mud-input-filled > .mud-input-slot,
.ap .fld--area .mud-input.mud-input-filled > textarea.mud-input-slot,
.ap .fld--area .mud-input.mud-input-filled > textarea.mud-input-slot.mud-input-root-filled.mud-input-root-margin-dense{
    padding-top: 26px;
}

/* Los bloques nuevos fijaron literales claros al final y pisaban los tokens de .app-dark. */
.app-dark .mud-dialog.ap-dialog{ background: #131926; }
.app-dark .ap .mud-input.mud-input-filled,
.app-dark .ap .fld .mud-input.mud-input-filled{ background: #1B2434; }
.app-dark .ap .mud-input.mud-input-filled:hover,
.app-dark .ap .fld .mud-input.mud-input-filled:hover{ background: #202A3C; }
.app-dark .ap .plan-panel .mud-input.mud-input-filled:hover{ background: rgba(38, 49, 69, .6); }
.app-dark .ap .fld.fld--ro .mud-input.mud-input-filled,
.app-dark .ap .fld.fld--ro .mud-input.mud-input-filled:hover{ background: transparent; }
.app-dark .ap .mud-input-control .mud-input-label.mud-input-label-filled,
.app-dark .ap .mud-input-control .mud-input-label.mud-input-label-filled.mud-input-label-margin-dense,
.app-dark .ap .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled,
.app-dark .ap .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled{ color: #8496AE; }
.app-dark .ap .mud-input.mud-input-filled > .mud-input-slot,
.app-dark .ap .mud-input.mud-input-filled > input.mud-input-slot{ color: #F2F6FC; }
.app-dark .ap .mud-select .mud-input-adornment .mud-icon-root{ color: var(--gh-label-1); }
.app-dark .ap .mud-input-adornment,
.app-dark .ap .fld .mud-input-adornment{ color: var(--gh-label-1); }

/* 08.1 Recibos por cuota — grupos con barra de cobertura, filas-card y bandeja inline. */
.ap .recibos-bar{ display: flex; align-items: center; gap: 14px; padding: 16px 28px 0; }
.ap .recibos-bar__hint{ font-size: 12.5px; color: var(--gh-label-2); }

/* Cada segmento mide su propio texto: con flex:1 los dos quedaban del mismo ancho. Ver §6.10. */
.ap .recibos-bar .seg--dialog > button{ flex: none; padding: 0 14px; }
.ap .chip--por-confirmar{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 14px;
    background: var(--ap-chip-confirm-bg); border: 1px solid var(--ap-chip-confirm-dash); border-radius: 999px;
    font-size: 12.5px; font-weight: 600; color: var(--ap-chip-confirm-fg); cursor: pointer; white-space: nowrap; }
.ap .chip--por-confirmar:hover{ background: transparent; }
.ap .chip--por-confirmar svg{ flex: none; opacity: .8; }
.ap .cuota-group{ margin: 16px 28px 0; padding: 14px 16px 8px; background: var(--gh-tray-1);
    border: 1px solid var(--gh-line-tray-1); border-radius: 14px; }
.ap .cuota-group:last-of-type{ margin-bottom: 24px; }

/* Grilla 2x2: cada celda se centra en SU fila, no cada columna contra el bloque. Ver §6.10. */
.ap .cuota-group__head{ display: grid; align-items: center; margin-bottom: 12px;
    grid-template-columns: 184px minmax(0, 1fr) 104px; column-gap: 16px; row-gap: 2px; }
.ap .cuota-group__title{ grid-area: 1 / 1; font-size: 14.5px; font-weight: 700;
    color: var(--gh-strong); white-space: nowrap; }
.ap .cuota-group__due{ grid-area: 2 / 1; font-size: 11.5px; color: var(--gh-label-2); white-space: nowrap; }
.ap .cuota-group__head .covbar{ grid-area: 1 / 2; }
.ap .cuota-group__head .covbar__caption{ grid-area: 2 / 2; }
.ap .cuota-group__head > .status-chip{ grid-column: 3; grid-row: 1 / span 2; justify-content: center; }
/* Sobre MudProgressLinear con Buffer: tres barras —puntitos, valor y buffer—.
   Los puntitos no van; el valor es lo confirmado y el buffer lo que espera. */
.ap .covbar.mud-progress-linear{ height: 7px; border-radius: 999px;
    background-color: var(--ap-plan-track); overflow: hidden; }
/* Las dos barras del modulo hablan el mismo idioma: solido lo confirmado,
   rayado lo que espera confirmacion, track lo que falta. */
.ap .covbar.mud-progress-linear .mud-progress-linear-bar:first-child,
.ap .plan-bar.mud-progress-linear .mud-progress-linear-bar:first-child{ background-image: none; }
.ap .covbar.mud-progress-linear .mud-progress-linear-bar:nth-child(2),
.ap .plan-bar.mud-progress-linear .mud-progress-linear-bar:nth-child(2){ background-color: var(--ap-plan-fill); }
.ap .covbar.mud-progress-linear .mud-progress-linear-bar:last-child::before,
.ap .plan-bar.mud-progress-linear .mud-progress-linear-bar:last-child::before{
    background: repeating-linear-gradient(115deg, var(--ap-plan-fill) 0 3px, transparent 3px 7px); }

.ap .covbar__caption{ font-size: 12px; color: var(--gh-body); }
.ap .covbar__caption b{ font-weight: 700; color: var(--gh-strong); }
.ap .covbar__caption .is-confirm{ font-weight: 600; color: var(--ap-chip-confirm-fg); }
.ap .grid-recibos2{ display: grid; align-items: center; column-gap: 16px;
    grid-template-columns: minmax(175px, 1.25fr) minmax(105px, .72fr) minmax(105px, .72fr)
                           minmax(115px, .8fr) minmax(140px, .92fr) minmax(150px, auto); }

/* 17px y no 16: la fila es una card con borde de 1px, su contenido arranca en 16+1. Ver §6.10. */
.ap .grid-recibos2__head{ padding: 0 17px 8px; }

/* el letter-spacing deja un hueco fantasma tras la última letra: alineada a la derecha,
   APLICADO quedaba corrida respecto a sus montos */
.ap .grid-recibos2__head .micro-label.align-right{ margin-right: -.10em; }
.ap .grid-recibos2.recibo-row{ background: var(--bl-surf-card); border: 1px solid var(--gh-line-card);
    border-radius: 11px; padding: 11px 16px; margin-bottom: 9px; transition: border-color .15s ease; }

/* la fila pendiente se marca sola; abierta, se ata visualmente a su bandeja */
.ap .grid-recibos2.recibo-row.is-pending{ border-color: var(--ap-chip-confirm-dash); }

/* La bandeja va DESPUES en el DOM: sin z-index pinta encima y se come el borde. Ver §6.10. */
.ap .grid-recibos2.recibo-row.is-open{ position: relative; z-index: 1;
    border-color: var(--bl-btn-primary-bg); border-width: 1.5px;
    padding: 10.5px 15.5px; margin-bottom: 0; }
.ap .recibo-cell{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap .recibo-cell__sub{ font-size: 11.5px; color: var(--gh-label-2); }
.ap .recibo-cell__sub.is-confirm{ color: var(--ap-chip-confirm-fg); font-weight: 600; }
.ap .recibo-row__actions{ display: flex; justify-content: flex-end; align-items: center; }
.ap .recibo-row__actions .btn--l2{ justify-content: center; }
.ap .btn--l2:disabled, .ap .btn--flat:disabled{ opacity: .45; cursor: default; }
.ap .btn--flat.btn--ghost{ background: transparent; color: var(--gh-body); border: 0; }
.ap .btn--flat.btn--ghost:hover{ background: var(--surf-chip-neutral); }

/* -12px y no -2px: hay que subirla mas que el radio de 11px. Ver §6.10. */
.ap .confirm-panel{ margin: -12px 0 9px; padding: 26px 16px 16px; background: var(--ap-dialog-head);
    border: 1px solid var(--gh-line-tray-1); border-top: 0;
    border-radius: 0 0 12px 12px; }
.ap .confirm-panel__actions{ display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; height: 48px; }

/* inputs blancos con borde sobre el panel gris, como el mock */
.ap .confirm-panel .mud-input.mud-input-filled,
.ap .confirm-panel .fld .mud-input.mud-input-filled{ background: var(--gh-row-1);
    box-shadow: inset 0 0 0 1px var(--gh-line-card); }
.ap .confirm-panel .mud-input.mud-input-filled:hover,
.ap .confirm-panel .fld .mud-input.mud-input-filled:hover{ background: #FBFCFE; }
.app-dark .ap .confirm-panel .mud-input.mud-input-filled,
.app-dark .ap .confirm-panel .fld .mud-input.mud-input-filled{
    box-shadow: inset 0 0 0 1px var(--line-input); }
.ap .confirm-panel__head{ display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ap .confirm-panel__meta{ font-size: 12.5px; color: var(--gh-body); }
.ap .confirm-panel__rule{ font-size: 12.5px; color: var(--gh-label-2); }
.ap .confirm-panel__rule b{ font-weight: 700; color: var(--bl-chip-ok-fg); }

/* el Comprobante es dashed también dentro de la bandeja (fld--upload lo trae) */
.ap .confirm-panel .fld--upload{ background: var(--bl-surf-card); }
.ap .confirm-panel__warn{ display: flex; align-items: center; gap: 8px; margin-top: 12px;
    padding: 10px 14px; background: var(--status-warn-bg); border-radius: 9px;
    font-size: 12.5px; font-weight: 600; color: var(--status-warn-fg); }
.ap .confirm-panel__warn svg{ flex: none; }
.app-dark .ap .grid-recibos2.recibo-row{ background: #1B2434; }
.app-dark .ap .confirm-panel{ background: #202A3C; }

/* ── El diálogo Aplicar pago sobre MudBlazor ─────────────────────────────────
   El componente pone la conducta; aca se apaga su cromo. */

/* lo que antes viajaba como style inline */
.ap .grid-cuotas__wrap--cuotas{ margin: 18px 28px 0; }
.ap .grid-cuotas__wrap--recibos{ margin: 18px 28px 24px; }
.ap .plan-panel--dialog{ margin: 20px 28px; }
.ap .grid-12--top{ align-items: start; }

/* MudGrid con Spacing 5 = el mismo gutter de 20px: padding izquierda/arriba con
   margen negativo da el hueco que daba `gap`. .grid-12 queda para Quotas.razor. */
.ap .ap-grid--top{ align-items: start; }
.ap .ap-grid .col-stack{ position: relative; align-self: start; }
/* El label flota contra la caja de PADDING del MudItem: sin descontar el
   gutter queda 20px arriba y 20px a la izquierda. */
.ap .ap-grid .col-stack .seg__label{ position: absolute;
    bottom: calc(100% - var(--ap-grid-gutter) + 6px);
    left: calc(var(--ap-grid-gutter) + 2px); white-space: nowrap; }
/* El aire para el seg__label flotante: MudGrid ya arranca en -20px, asi que 0
   es el +20px que pedia la regla de .grid-12. */
.ap .ap-grid:has(.col-stack .seg){ margin-top: 0; }
.ap .sec__t--flush{ margin: 0; }
.ap .tab-empty--flush{ padding-bottom: 0; }
.ap .fld__warn-msg--danger{ color: var(--status-danger-fg); }

/* MudButton viste tres botones del módulo: fuera mayúsculas, ancho mínimo y
   centrado; el tamaño y el color siguen siendo los de .btn--l2 / .fld--upload. */
.ap button.fld--upload,
.ap .chip--por-confirmar.mud-button-root,
.ap .btn--l2.mud-button-root,
.ap .btn--flat.mud-button-root{ text-transform: none; letter-spacing: normal; min-width: 0; }
.ap button.fld--upload{ justify-content: flex-start; padding: 0 12px 0 14px; }
.ap .fld--upload__t{ flex: 1; min-width: 0; text-align: left; }
.ap .btn--l2.mud-button-root{ letter-spacing: .05em; text-transform: uppercase; }

/* los iconos de MudBlazor miden por font-size; el diseño los pidió más chicos */
.ap .fld--upload .mud-icon-root{ font-size: 17px; margin: 0; }
.ap .btn--l2 .mud-icon-root{ font-size: 13px; margin: 0 7px 0 0; }
.ap .chip--por-confirmar .mud-icon-root{ font-size: 13px; margin: 0; }
.ap .apply-foot__rule .mud-icon-root{ font-size: 15px; margin-top: 1px; }
.ap .confirm-panel__warn .mud-icon-root{ font-size: 14px; }
.ap .icon-btn .mud-icon-root{ font-size: 17px; }
.ap .icon-btn--close .mud-icon-root{ font-size: 19px; }

/* MudIconButton trae su propio padding y su fondo de hover */
.ap .icon-btn.mud-icon-button{ padding: 0; background-color: transparent; }
.ap .icon-btn.mud-icon-button:hover{ background-color: var(--surf-chip-neutral); }
.app-dark .ap .icon-btn.mud-icon-button:hover{ background-color: var(--gh-row-1); }
.ap .icon-btn.mud-icon-button.mud-disabled{ opacity: .4; }

/* --------------------------------------------------------------------------
   08.2 — Bandeja de acuerdos (lámina 01). Primitivos que la lámina usa y el
   módulo no tenía. Tokens traducidos a los reales de 01-tokens.css.
   -------------------------------------------------------------------------- */
/* El segmentado alinea con los 32px del título y de la grilla. */
.ap .lifecycle-seg{ padding: 4px 32px 16px; }

/* Prefijo de moneda: chico y en gris, el monto es el dato. */
.ap .cur{ font-size: 11.5px; font-weight: 700; color: var(--gh-label-2); margin-right: 4px; }

/* Nombre del cliente en la fila L0. */
.ap .cell-primary{ font-size: 16px; font-weight: 600; color: var(--gh-strong); }

/* Chip de atributo: contorno, nunca color (# de facturas). */
.ap .attr-chip{ display: inline-block; padding: 3px 9px; border: 1px solid var(--line-input);
    border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--gh-label-2); white-space: nowrap; }

/* Cabecera de la bandeja L1: etiqueta, regla y saldo al firmar. */
.ap .tray__head{ display: flex; align-items: center; gap: 12px; padding: 2px 2px 10px; }
.ap .tray__head .micro-label{ white-space: nowrap; }
.ap .tray__rule{ flex: 1; height: 1px; background: var(--gh-line-tray-1); }
.ap .micro-label--l2{ font-size: 10.5px; letter-spacing: .10em; color: var(--gh-label-2); }

/* Rebanada 3: barra de acción del acuerdo bajo las facturas, alineada a la derecha. */
.ap .tray__foot{ display: flex; justify-content: flex-end; padding: 10px 2px 2px; }

/* Fila L1: una factura consolidada. Card sobre la bandeja, cuatro columnas. */
.ap .row-l1{ display: grid; align-items: center; gap: 12px;
    grid-template-columns: 1.4fr 1fr .9fr auto;
    background: var(--gh-row-1); border: 1px solid var(--gh-line-row-1);
    border-radius: var(--gh-r-row-1); padding: 13px 14px; box-shadow: var(--gh-row-shadow);
    transition: border-color .15s ease; }
.ap .row-l1 + .row-l1{ margin-top: 8px; }
.ap .row-l1:hover{ border-color: var(--gh-line-row-1-hover); }
.ap .row-l1__d{ font-size: 15.5px; color: var(--gh-body); }
.ap .row-l1__v{ font-size: 15.5px; font-weight: 600; color: var(--gh-strong); font-variant-numeric: tabular-nums; }
.ap .stack{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap .code{ font-family: var(--font-code); font-size: 13.5px; font-weight: 600;
    letter-spacing: .02em; color: var(--gh-strong); }

/* --------------------------------------------------------------------------
   Rebanada 2 (lámina 02): crear acuerdo. Diálogo de 760px, selector de
   facturas y plan calculado inline. Estructura del mock adaptada a MudBlazor.
   -------------------------------------------------------------------------- */
.mud-dialog.ap-dialog.dlg-new-agreement{ width: 760px !important; max-width: 760px !important; }

/* Rebanada 3 (lámina 03): aprobar/rechazar. Ancho holgado para el botón de la acción primaria. */
.mud-dialog.ap-dialog.dlg-approve-agreement{ width: 600px !important; max-width: 600px !important; }
.ap .impact-note ul{ margin: 6px 0 0 18px; padding: 0; }
.ap .impact-note li + li{ margin-top: 3px; }

/* Rebanada 5 (lámina 06): anular es irreversible. Plato rojo sobre tokens existentes. */
.ap .impact-note--danger{ background: var(--danger-plate); color: var(--danger-ink); border: 1px solid var(--ap-danger-line); }

/* Meta de una fila: póliza, ramo y vencimiento en una línea discreta. */
.ap .file-row__m{ font-size: 12px; color: var(--gh-label-2); }

/* Rebanada 6 (lámina 07): expediente. Panel de versiones y su fila. */
.ap .file-upload-panel{ display: flex; flex-direction: column; }
.ap .file-row{ display: grid; align-items: center; gap: 14px; grid-template-columns: auto 1fr auto;
    background: var(--gh-row-1); border: 1px solid var(--gh-line-row-1); border-radius: var(--gh-r-row-1);
    padding: 13px 14px; box-shadow: var(--gh-row-shadow); }
.ap .file-row + .file-row{ margin-top: 8px; }
.ap .file-row__ico{ display: flex; color: var(--gh-label-2); }
.ap .file-row__n{ font-size: 15px; font-weight: 600; color: var(--gh-strong); }

/* Diálogo del expediente: angosto, las filas son una lista simple. */
.mud-dialog.ap-dialog.dlg-expediente{ width: 560px !important; max-width: 560px !important; }

/* Selector de facturas: al marcar la 1ª se fija aseguradora y moneda; las
   filas de otra aseguradora u otra moneda quedan deshabilitadas. */
.ap .pick{ display: flex; flex-direction: column; gap: 8px; }
.ap .pick__r{ display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 14px;
    background: var(--gh-row-1); border: 1px solid var(--gh-line-row-1); border-radius: var(--gh-r-row-1);
    padding: 12px 14px; box-shadow: var(--gh-row-shadow); cursor: pointer; transition: border-color .15s ease; }
.ap .pick__r:hover{ border-color: var(--gh-line-row-1-hover); }
.ap .pick__r.is-on{ border-color: var(--bl-btn-primary-bg); }
.ap .pick__r.is-disabled{ opacity: .45; cursor: not-allowed; }
.ap .box{ width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ap-checkbox-off);
    display: flex; align-items: center; justify-content: center; background: transparent; }
.ap .pick__r.is-on .box{ background: var(--ap-checkbox-on); border-color: var(--ap-checkbox-on); }
.ap .box svg{ width: 11px; height: 11px; color: var(--ap-checkbox-ink); display: none; }
.ap .pick__r.is-on .box svg{ display: block; }

/* Plan calculado dentro del mismo diálogo (regla dura 4): nunca un 2º modal. */
.ap .panel{ background: var(--gh-tray-1); border: 1px solid var(--gh-line-tray-1);
    border-radius: var(--gh-r-tray-1); padding: var(--gh-pad-tray); }
.ap .panel__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 4px 10px; }
.ap .panel__total{ font-size: 15px; font-weight: 700; color: var(--gh-strong); font-variant-numeric: tabular-nums; }
.ap .panel__total .cur{ font-size: 11.5px; font-weight: 700; color: var(--gh-label-2); margin-right: 3px; }
.ap .plan__r{ display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px;
    background: var(--gh-row-1); border: 1px solid var(--gh-line-row-2); border-radius: var(--gh-r-row-2);
    padding: 11px 14px; font-size: 14.5px; }
.ap .plan__r + .plan__r{ margin-top: 6px; }
.ap .plan__n{ font-family: var(--font-code); font-size: 12.5px; font-weight: 600; color: var(--gh-label-2); text-align: center; }
.ap .plan__r.is-initial{ border-color: var(--gh-line-row-1-hover); }
.ap .plan__amt{ font-variant-numeric: tabular-nums; font-weight: 600; color: var(--gh-strong); }
.ap .plan__amt .cur{ font-size: 11.5px; font-weight: 700; color: var(--gh-label-2); margin-right: 4px; }