/**
* APL Rebuilt UI - configuración visual unificada.
*
* Reglas de uso:
* 1. Las vistas reconstruidas consumen estos tokens; no definen colores ni tamaños de fuente locales.
* 2. El peso máximo permitido es bold (700). No se admiten valores superiores.
* 3. Los cambios globales de identidad visual deben hacerse solamente en este archivo.
* 4. Toda vista reconstruida es compacta por defecto: el espacio solo se usa si aporta información, contexto o una acción.
* 5. Todo badge o estado compacto usa --apl-ui-radius-badge; el radio pill se reserva para formas circulares.
* 6. Los filtros alinean campos y acciones por su base; sus botones usan el tamaño normal del botón Consultar.
* 7. Los enlaces públicos presentan el logo corporativo intacto dentro de .apl-public-company-avatar; nunca reemplazan el archivo original.
* 8. Todo icono enmarcado o circular usa .apl-icon-frame; no se crean marcos locales en las vistas.
* 9. Todo inmueble usa AplUiProperty/APLProperty: TIPO BLOQUE-CÓDIGO por defecto; solo CÓDIGO en tablas con columnas Tipo y Bloque visibles e independientes.
* 10. Estados independientes como Envío y Lectura ocupan columnas separadas y usan .apl-status; no se concatenan en una celda ambigua.
*/
:root {
/* Familia, escala tipográfica y alturas de línea */
--apl-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
--apl-ui-font-family-mono: Consolas, "Liberation Mono", monospace;
--apl-ui-font-size-base: 12px;
--apl-ui-font-size-micro: 9px;
--apl-ui-font-size-caption: 10px;
--apl-ui-font-size-detail: 11px;
--apl-ui-font-size-control: var(--apl-ui-font-size-base);
--apl-ui-font-size-body-sm: var(--apl-ui-font-size-base);
--apl-ui-font-size-label: var(--apl-ui-font-size-base);
--apl-ui-font-size-label-lg: 13px;
--apl-ui-font-size-subtitle: 13px;
--apl-ui-font-size-body: var(--apl-ui-font-size-base);
--apl-ui-font-size-heading-sm: 14px;
--apl-ui-font-size-title: 15px;
--apl-ui-font-size-title-lg: 16px;
--apl-ui-font-size-icon-lg: 17px;
--apl-ui-font-size-heading-lg: 19px;
--apl-ui-font-size-icon-xl: 20px;
--apl-ui-font-size-display: 22px;
--apl-ui-font-size-close: 28px;
--apl-ui-line-tight: 1.25;
--apl-ui-line-normal: 1.4;
--apl-ui-line-relaxed: 1.45;
--apl-ui-line-icon: 1;
/* Pesos: 700 es el límite absoluto del sistema */
--apl-ui-font-weight-regular: 400;
--apl-ui-font-weight-medium: 500;
--apl-ui-font-weight-semibold: 600;
--apl-ui-font-weight-bold: 700;
--apl-ui-font-weight-max: var(--apl-ui-font-weight-bold);
/* Superficies */
--apl-ui-color-canvas: #f4f2ed;
--apl-ui-color-page: #f7f9f8;
--apl-ui-color-surface: #ffffff;
--apl-ui-color-surface-subtle: #fafcfb;
--apl-ui-color-surface-soft: #f7f8f6;
--apl-ui-color-surface-muted: #f1f4f3;
--apl-ui-color-surface-strong: #e8ece9;
--apl-ui-color-surface-hover: #f2faf7;
--apl-ui-color-viewer-canvas: #f8faf9;
--apl-ui-color-viewer-stage: #27302d;
--apl-ui-color-transparent: transparent;
/* Bordes */
--apl-ui-color-border: #d8ded9;
--apl-ui-color-border-soft: #e1e7e4;
--apl-ui-color-border-muted: #dfe6e3;
--apl-ui-color-border-strong: #ccd7d2;
--apl-ui-color-row-divider: #edf0ed;
/* Texto */
--apl-ui-color-text: #111b21;
--apl-ui-color-text-strong: #25332f;
--apl-ui-color-text-body: #34433e;
--apl-ui-color-text-muted: #64716c;
--apl-ui-color-text-subtle: #81908a;
--apl-ui-color-text-faint: #8a9691;
--apl-ui-color-text-disabled: #c0c0c0;
--apl-ui-color-on-solid: #ffffff;
/* Marca principal */
--apl-ui-color-brand: #008069;
--apl-ui-color-brand-dark: #075e54;
--apl-ui-color-brand-soft: #d9fdd3;
--apl-ui-color-brand-surface: #eaf7f3;
--apl-ui-color-brand-border: #b9dfd4;
--apl-ui-color-brand-border-strong: #9bd8c8;
/* Acento corporativo amarillo */
--apl-ui-color-accent: #f4dc68;
--apl-ui-color-accent-hover: #edce4e;
--apl-ui-color-accent-dark: #514307;
--apl-ui-color-accent-strong: #9a7b00;
--apl-ui-color-accent-soft: #fff5ca;
--apl-ui-color-accent-border: #d6b938;
--apl-ui-color-accent-border-soft: #ead98f;
/* Identidad configurable de certificados */
--apl-ui-certificate-primary: #133859;
--apl-ui-certificate-accent: #c6912d;
--apl-ui-certificate-accent-dark: #694f19;
--apl-ui-certificate-soft: #f1f3f5;
--apl-ui-certificate-accent-soft: #f9f4ea;
--apl-ui-certificate-line: #cbd3da;
--apl-ui-certificate-accent-line: #eddcbc;
--apl-ui-certificate-ink: #112d46;
/* Estados y canales */
--apl-ui-color-success: #36a96a;
--apl-ui-color-success-hover: #2f955e;
--apl-ui-color-success-dark: #247149;
--apl-ui-color-success-soft: #e4f6ec;
--apl-ui-color-success-border: #bfe4cf;
--apl-ui-color-danger: #b42318;
--apl-ui-color-danger-dark: #913e33;
--apl-ui-color-danger-soft: #fff0ee;
--apl-ui-color-danger-border: #f0c7c2;
--apl-ui-color-warning-dark: #765f0a;
--apl-ui-color-warning-subtle: #fffdf4;
--apl-ui-color-warning-soft: #fff8df;
--apl-ui-color-warning-border: #ead99a;
--apl-ui-color-info-dark: #2e5f86;
--apl-ui-color-info-soft: #e8f3ff;
--apl-ui-color-indigo-dark: #455690;
--apl-ui-color-indigo-soft: #eef2ff;
--apl-ui-color-indigo-border: #cad3f4;
/* Paleta categórica central para calendarios, gráficas y leyendas */
--apl-ui-color-data-1-soft: #eaf7f3;
--apl-ui-color-data-1-border: #80c9ba;
--apl-ui-color-data-1-text: #075e54;
--apl-ui-color-data-2-soft: #e8f3ff;
--apl-ui-color-data-2-border: #9bc4e7;
--apl-ui-color-data-2-text: #245a82;
--apl-ui-color-data-3-soft: #eef2ff;
--apl-ui-color-data-3-border: #aebcf0;
--apl-ui-color-data-3-text: #3f4f89;
--apl-ui-color-data-4-soft: #f4efff;
--apl-ui-color-data-4-border: #c9b6ee;
--apl-ui-color-data-4-text: #5f4387;
--apl-ui-color-data-5-soft: #fceef7;
--apl-ui-color-data-5-border: #e8afd0;
--apl-ui-color-data-5-text: #7f3b65;
--apl-ui-color-data-6-soft: #fff0ee;
--apl-ui-color-data-6-border: #efb8b1;
--apl-ui-color-data-6-text: #8c3f36;
--apl-ui-color-data-7-soft: #fff2e6;
--apl-ui-color-data-7-border: #edbd8f;
--apl-ui-color-data-7-text: #7a4a1f;
--apl-ui-color-data-8-soft: #fff8df;
--apl-ui-color-data-8-border: #dec66e;
--apl-ui-color-data-8-text: #6d590b;
--apl-ui-color-data-9-soft: #e4f6ec;
--apl-ui-color-data-9-border: #96d2ae;
--apl-ui-color-data-9-text: #246b45;
--apl-ui-color-data-10-soft: #e7f7f7;
--apl-ui-color-data-10-border: #93d3d5;
--apl-ui-color-data-10-text: #236469;
--apl-ui-color-data-11-soft: #eef2f4;
--apl-ui-color-data-11-border: #b8c5cb;
--apl-ui-color-data-11-text: #405860;
--apl-ui-color-data-12-soft: #f1f5e4;
--apl-ui-color-data-12-border: #bccb83;
--apl-ui-color-data-12-text: #596624;
/* Grupos de columnas financieras */
--apl-ui-table-context-bg: var(--apl-ui-color-surface-muted);
--apl-ui-table-context-text: var(--apl-ui-color-text-strong);
--apl-ui-table-overdue-bg: var(--apl-ui-color-data-2-soft);
--apl-ui-table-overdue-text: var(--apl-ui-color-data-2-text);
--apl-ui-table-overdue-strong-bg: var(--apl-ui-color-data-3-soft);
--apl-ui-table-overdue-strong-text: var(--apl-ui-color-data-3-text);
--apl-ui-table-notes-bg: var(--apl-ui-color-data-10-soft);
--apl-ui-table-notes-text: var(--apl-ui-color-data-10-text);
--apl-ui-table-current-bg: var(--apl-ui-color-data-1-soft);
--apl-ui-table-current-text: var(--apl-ui-color-data-1-text);
--apl-ui-table-current-notes-bg: var(--apl-ui-color-data-9-soft);
--apl-ui-table-current-notes-text: var(--apl-ui-color-data-9-text);
--apl-ui-table-positive-bg: var(--apl-ui-color-data-9-soft);
--apl-ui-table-positive-text: var(--apl-ui-color-data-9-text);
--apl-ui-table-total-bg: var(--apl-ui-color-data-11-soft);
--apl-ui-table-total-text: var(--apl-ui-color-data-11-text);
--apl-ui-table-group-context-bg: var(--apl-ui-table-context-bg);
--apl-ui-table-group-overdue-bg: var(--apl-ui-table-overdue-bg);
--apl-ui-table-group-overdue-strong-bg: var(--apl-ui-table-overdue-strong-bg);
--apl-ui-table-group-notes-bg: var(--apl-ui-table-notes-bg);
--apl-ui-table-group-current-bg: var(--apl-ui-table-current-bg);
--apl-ui-table-group-current-notes-bg: var(--apl-ui-table-current-notes-bg);
--apl-ui-table-group-total-bg: var(--apl-ui-table-total-bg);
/* Focos, sombras, radios y espacio base */
--apl-ui-focus-brand: rgba(0, 128, 105, 0.10);
--apl-ui-focus-accent: rgba(215, 188, 61, 0.14);
--apl-ui-focus-accent-strong: rgba(215, 188, 61, 0.18);
--apl-ui-focus-success: rgba(50, 145, 91, 0.14);
--apl-ui-focus-success-strong: rgba(50, 145, 91, 0.18);
--apl-ui-table-divider: rgba(77, 91, 101, 0.09);
--apl-ui-table-divider-strong: rgba(77, 91, 101, 0.12);
--apl-ui-shadow-sm: 0 8px 24px rgba(17, 27, 33, 0.07);
--apl-ui-shadow-md: 0 18px 44px rgba(17, 27, 33, 0.12);
--apl-ui-shadow-modal: 0 18px 44px rgba(17, 27, 33, 0.16);
--apl-ui-shadow-lg: 0 24px 68px rgba(12, 22, 27, 0.28);
--apl-ui-shadow-viewer: 0 24px 70px rgba(12, 22, 27, 0.28);
--apl-ui-shadow-floating: 0 12px 34px rgba(10, 20, 24, 0.20);
--apl-ui-shadow-accent-focus: 0 0 0 2px var(--apl-ui-focus-accent);
--apl-ui-radius-badge: 4px;
--apl-ui-radius-sm: 7px;
--apl-ui-radius-md: 8px;
--apl-ui-radius-lg: 10px;
--apl-ui-radius-xl: 12px;
--apl-ui-radius-pill: 999px;
--apl-ui-space-1: 4px;
--apl-ui-space-2: 8px;
--apl-ui-space-3: 12px;
--apl-ui-space-4: 16px;
--apl-ui-menu-icon-gap: 10px;
--apl-ui-public-company-avatar-size: 48px;
--apl-ui-public-menu-height: calc(var(--apl-ui-public-company-avatar-size) + (var(--apl-ui-border-width) * 2));
--apl-ui-public-content-start: calc(var(--apl-ui-public-menu-height) + var(--apl-ui-space-3));
--apl-ui-supplier-invoice-table-min-width: 980px;
--apl-ui-supplier-invoice-entry-min-width: 760px;
--apl-ui-supplier-invoice-form-column-min: 420px;
--apl-ui-supplier-invoice-aside-min: 280px;
--apl-ui-supplier-invoice-hash-max-width: 360px;
--apl-ui-receipts-table-min-width: 820px;
--apl-ui-receipts-toolbar-search-width: 280px;
--apl-ui-receipts-page-size-width: 150px;
--apl-ui-receipts-filter-dialog-width: 760px;
--apl-ui-receipts-batch-dialog-width: 620px;
--apl-ui-receipts-detail-drawer-width: 480px;
--apl-ui-receipts-detail-field-min-width: 180px;
--apl-ui-receipts-viewer-dialog-width: 1080px;
--apl-ui-receipts-viewer-height: 68vh;
--apl-ui-receipts-email-drawer-width: 760px;
--apl-ui-receipts-email-document-height: 100vh;
--apl-ui-receipts-email-frame-height: 100%;
--apl-ui-receipts-email-column-min: 340px;
--apl-ui-receipts-contact-min-width: 260px;
--apl-ui-receipts-confirm-dialog-width: 440px;
--apl-ui-payments-table-min-width: 1080px;
--apl-ui-payments-toolbar-search-width: 320px;
--apl-ui-assignments-toolbar-search-width: 320px;
--apl-ui-payments-page-size-width: 150px;
--apl-ui-payments-detail-drawer-width: 520px;
--apl-ui-payments-detail-field-min-width: 190px;
--apl-ui-payments-proof-dialog-width: 1080px;
--apl-ui-payments-proof-height: 72vh;
--apl-ui-payments-form-column-min-width: 420px;
--apl-ui-payments-form-aside-width: 340px;
--apl-ui-payments-form-field-min-width: 220px;
--apl-ui-payments-confirm-dialog-width: 440px;
--apl-ui-payments-bank-drawer-width: 920px;
--apl-ui-payments-bank-frame-height: 100%;
--apl-ui-operator-field-min-width: 220px;
--apl-ui-operator-detail-min-width: 180px;
--apl-ui-operator-dialog-width: 760px;
--apl-ui-operator-drawer-width: 620px;
--apl-ui-operator-form-width: 320px;
--apl-ui-operator-page-size-width: 88px;
--apl-ui-operator-table-min-width: 1120px;
--apl-ui-operator-summary-min-width: 260px;
--apl-ui-chart-height: 280px;
--apl-ui-chart-grid-min-width: 360px;
--apl-ui-chart-line-width: 2;
--apl-ui-chart-point-radius: 2;
--apl-ui-chart-bar-border-width: 1;
--apl-ui-chart-line-tension: .25;
--apl-ui-chart-legend-marker-width: 12;
--apl-ui-page-size-width: 88px;
--apl-ui-operator-sticky-offset: 8px;
--apl-ui-expenses-table-min-width: 940px;
--apl-ui-expenses-toolbar-search-width: 320px;
--apl-ui-expenses-page-size-width: 150px;
--apl-ui-expenses-filter-dialog-width: 880px;
--apl-ui-expenses-detail-drawer-width: 620px;
--apl-ui-expenses-history-drawer-width: 700px;
--apl-ui-expenses-manager-drawer-width: 980px;
--apl-ui-expenses-receipt-dialog-width: 1180px;
--apl-ui-expenses-manager-frame-height: 100%;
--apl-ui-expenses-form-aside-width: 340px;
--apl-ui-expenses-form-field-min-width: 210px;
--apl-ui-expenses-form-values-width: 760px;
--apl-ui-expenses-form-value-control-width: 300px;
--apl-ui-expenses-detail-field-min-width: 180px;
--apl-ui-expenses-confirm-dialog-width: 480px;
--apl-ui-expenses-order-dialog-width: 680px;
--apl-ui-expenses-order-frame-height: 520px;
--apl-ui-expenses-audit-table-min-width: 760px;
--apl-ui-expenses-audit-change-min-width: 180px;
--apl-ui-expenses-upload-min-height: 120px;
--apl-ui-expenses-textarea-min-height: 152px;
--apl-ui-charges-table-min-width: 900px;
--apl-ui-charges-toolbar-search-width: 320px;
--apl-ui-charges-page-size-width: 88px;
--apl-ui-charges-filter-dialog-width: 860px;
--apl-ui-charges-detail-drawer-width: 540px;
--apl-ui-charges-confirm-dialog-width: 440px;
--apl-ui-charges-form-field-min-width: 220px;
--apl-ui-charges-detail-field-min-width: 180px;
--apl-ui-charges-textarea-min-height: 96px;
--apl-ui-charges-owner-min-height: 52px;
--apl-ui-banks-table-min-width: 720px;
--apl-ui-banks-search-width: 320px;
--apl-ui-banks-field-min-width: 260px;
--apl-ui-banks-delete-dialog-width: 440px;
--apl-ui-coefficients-module-min-width: 190px;
--apl-ui-coefficients-table-min-width: 920px;
--apl-ui-coefficients-toolbar-search-width: 320px;
--apl-ui-coefficients-page-size-width: 150px;
--apl-ui-coefficients-detail-drawer-width: 520px;
--apl-ui-coefficients-detail-field-min-width: 190px;
--apl-ui-coefficients-form-aside-width: 320px;
--apl-ui-coefficients-form-field-min-width: 240px;
--apl-ui-coefficients-confirm-dialog-width: 440px;
--apl-ui-coefficients-audit-change-min-width: 180px;
--apl-ui-prepaid-table-min-width: 680px;
--apl-ui-recharge-table-min-width: 960px;
--apl-ui-recharge-audit-table-min-width: 720px;
--apl-ui-prepaid-page-size-width: 112px;
--apl-ui-company-payer-table-min-width: 1240px;
--apl-ui-company-payer-page-size-width: 112px;
--apl-ui-bi-cube-control-min-width: 220px;
--apl-ui-bi-cube-panel-min-width: 320px;
--apl-ui-bi-cube-result-search-width: 320px;
--apl-ui-bi-cube-dimension-index-size: 28px;
--apl-ui-bi-cube-results-min-height: 180px;
--apl-ui-bi-cube-dialog-width: 640px;
--apl-ui-bi-cube-dropzone-min-height: 88px;
--apl-ui-bi-cube-field-pool-max-height: 148px;
--apl-ui-bi-cube-field-card-min-width: 160px;
--apl-ui-property-portfolio-card-min-width: 280px;
--apl-ui-property-portfolio-table-min-width: 1040px;
--apl-ui-property-portfolio-amount-column-width: 34%;
--apl-ui-property-portfolio-followup-button-width: calc(var(--apl-ui-control-height-sm) + var(--apl-ui-space-2));
--apl-ui-property-portfolio-drawer-width: 620px;
--apl-ui-property-portfolio-form-dialog-width: 1080px;
--apl-ui-property-portfolio-export-dialog-width: 620px;
--apl-ui-property-portfolio-export-scope-min-width: 160px;
--apl-ui-property-portfolio-ledger-cell-padding-block: calc(var(--apl-ui-space-1) / 2);
--apl-ui-property-consult-size: calc(var(--apl-ui-control-height-sm) - var(--apl-ui-space-3));
--apl-ui-property-consult-icon-size: var(--apl-ui-font-size-micro);
--apl-ui-bi-cube-table-cell-padding-block: var(--apl-ui-space-1);
/* Centro administrativo de Aplicamos */
--apl-ui-admin-filter-min-width: 180px;
--apl-ui-admin-overview-card-min-width: 360px;
--apl-ui-admin-table-card-min-width: 460px;
--apl-ui-admin-table-min-width: 720px;
--apl-ui-admin-drawer-width: 620px;
--apl-ui-admin-loading-min-height: 160px;
--apl-ui-admin-bar-label-width: 96px;
--apl-ui-admin-bar-track-height: 8px;
--apl-ui-admin-panel-min-width: 260px;
--apl-ui-admin-search-width: 320px;
--apl-ui-admin-detail-field-min-width: 180px;
--apl-ui-admin-chart-height: 176px;
--apl-ui-admin-chart-column-width: 84px;
--apl-ui-admin-month-column-width: 64px;
/* Monitor operativo de Administración */
--apl-ui-ops-module-min-width: 300px;
--apl-ui-ops-drawer-width: 1600px;
--apl-ui-ops-table-min-width: 860px;
--apl-ui-ops-mail-errors-table-min-width: 1740px;
--apl-ui-ops-table-cell-max-width: 240px;
--apl-ui-ops-id-column-width: 96px;
--apl-ui-ops-search-width: 460px;
--apl-ui-ops-loading-min-height: 148px;
--apl-ui-ops-preview-min-height: 76px;
--apl-ui-ops-preview-label-width: 128px;
--apl-ui-ops-cadence-width: 180px;
--apl-ui-recharge-audit-search-width: 320px;
--apl-ui-recharge-delete-dialog-width: 480px;
--apl-ui-modules-table-min-width: 760px;
--apl-ui-modules-page-size-width: 112px;
--apl-ui-modules-copy-width: 52ch;
--apl-ui-modules-form-aside-width: 280px;
--apl-ui-modules-form-field-min-width: 240px;
--apl-ui-modules-description-min-height: 96px;
--apl-ui-modules-delete-dialog-width: 480px;
--apl-ui-modules-audit-change-min-width: 220px;
--apl-ui-tariffs-table-min-width: 820px;
--apl-ui-tariffs-page-size-width: 112px;
--apl-ui-tariffs-copy-width: 52ch;
--apl-ui-tariffs-form-aside-width: 280px;
--apl-ui-tariffs-form-field-min-width: 240px;
--apl-ui-tariffs-confirm-dialog-width: 520px;
--apl-ui-retroactives-table-min-width: 920px;
--apl-ui-retroactives-page-size-width: 112px;
--apl-ui-retroactives-notes-width: 34ch;
--apl-ui-retroactives-form-aside-width: 300px;
--apl-ui-retroactives-form-field-min-width: 220px;
--apl-ui-retroactives-notes-min-height: 92px;
--apl-ui-retroactives-copy-dialog-width: 520px;
--apl-ui-retroactives-delete-dialog-width: 480px;
--apl-ui-retroactives-audit-change-min-width: 220px;
/* Resoluciones de numeración DIAN */
--apl-ui-dian-table-min-width: 1180px;
--apl-ui-dian-sync-table-min-width: 980px;
--apl-ui-dian-sync-drawer-width: 1040px;
--apl-ui-dian-form-section-min-width: 420px;
--apl-ui-dian-form-primary-min-width: 680px;
--apl-ui-dian-form-aside-width: 280px;
--apl-ui-dian-secret-button-width: 38px;
--apl-ui-dian-technical-key-width: 34ch;
--apl-ui-dian-audit-change-min-width: 180px;
/* Trazabilidad integral del flujo de facturacion */
--apl-ui-trace-drawer-width: 760px;
--apl-ui-trace-marker-size: 24px;
--apl-ui-trace-rail-width: 2px;
--apl-ui-trace-duration-min-width: 190px;
--apl-ui-trace-summary-min-width: 150px;
--apl-ui-trace-step-min-width: 132px;
--apl-ui-trace-identity-min-width: 220px;
--apl-ui-trace-state-min-width: 180px;
--apl-ui-trace-elapsed-min-width: 156px;
--apl-ui-trace-line-width: calc(var(--apl-ui-border-width) * 2);
--apl-ui-trace-process-node-min-width: 156px;
--apl-ui-trace-process-track-min-width: 780px;
--apl-ui-trace-process-marker-size: 48px;
--apl-ui-trace-process-stage-icon-size: 36px;
--apl-ui-trace-process-number-size: 22px;
--apl-ui-trace-process-time-min-height: 22px;
--apl-ui-trace-process-connector-top: 90px;
--apl-ui-trace-progress-score-size: 60px;
}
/* Adaptación central del espacio reconstruido de inventario. */
@media (max-width: 860px) {
.apl-asset-form__workspace,
.apl-assets-import__workspace { grid-template-columns: minmax(var(--apl-ui-space-0),1fr); }
.apl-asset-form__aside { grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--apl-ui-assets-form-aside-width)),1fr)); }
}
@media (max-width: 620px) {
.apl-assets__advanced-fields,
.apl-asset-form__fields,
.apl-maintenance-form__fields { grid-template-columns: minmax(var(--apl-ui-space-0),1fr); }
.apl-asset-form__field-wide,
.apl-maintenance-form__field-wide { grid-column: auto; }
.apl-assets-detail__hero { align-items: start; grid-template-columns: auto minmax(var(--apl-ui-space-0),1fr); }
.apl-assets-detail__hero > .apl-status { grid-column: 2; }
.apl-assets-catalog__item,
.apl-assets-maintenance__item { align-items: start; grid-template-columns: auto minmax(var(--apl-ui-space-0),1fr) auto; }
.apl-assets-catalog__item > .apl-status,
.apl-assets-maintenance__signals { grid-column: 2; justify-self: start; }
.apl-maintenance-form__reminder { align-items: stretch; grid-template-columns: minmax(var(--apl-ui-space-0),1fr) auto; }
.apl-maintenance-form__reminder .apl-field:nth-child(2) { grid-column: 1; }
.apl-maintenance-form__reminder .apl-btn { grid-column: 2; grid-row: 1 / 3; }
}
/* Centro reconstruido de certificados de pagos de expensas */
.apl-certificates__shell { overflow: hidden; }
.apl-certificates__panels {
background: var(--apl-ui-color-page);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-3);
}
.apl-certificates__panel {
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-3);
min-width: var(--apl-ui-space-0);
}
.apl-certificates__individual-layout {
align-items: start;
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr) minmax(var(--apl-ui-tab-navigation-min-width), var(--apl-ui-library-form-aside));
min-width: var(--apl-ui-space-0);
}
.apl-certificates__form,
.apl-certificates__guide,
.apl-certificates__template-form,
.apl-certificates__preview { min-width: var(--apl-ui-space-0); }
.apl-certificates__guide,
.apl-certificates__preview {
position: sticky;
top: var(--shell-content-gap);
}
.apl-certificates__selection-summary {
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
margin: var(--apl-ui-space-0);
}
.apl-certificates__checklist {
display: grid;
gap: var(--apl-ui-space-2);
list-style: none;
margin: var(--apl-ui-space-3) var(--apl-ui-space-0) var(--apl-ui-space-0);
padding: var(--apl-ui-space-0);
}
.apl-certificates__checklist li {
align-items: flex-start;
color: var(--apl-ui-color-text-muted);
display: flex;
gap: var(--apl-ui-space-2);
}
.apl-certificates__checklist li i {
color: var(--apl-ui-color-text-subtle);
margin-top: var(--apl-ui-space-1);
}
.apl-certificates__checklist li.is-done { color: var(--apl-ui-color-success-dark); }
.apl-certificates__checklist li.is-done i { color: var(--apl-ui-color-success); }
.apl-certificates__checklist li.is-warning { color: var(--apl-ui-color-warning-dark); }
.apl-certificates__checklist li.is-warning i { color: var(--apl-ui-color-accent-strong); }
.apl-certificates__actions {
flex-wrap: wrap;
justify-content: flex-end;
}
.apl-certificates__batch-toolbar {
align-items: flex-end;
justify-content: flex-start;
margin-bottom: var(--apl-ui-space-3);
}
.apl-certificates__batch-toolbar .apl-field {
min-width: var(--apl-ui-tab-navigation-min-width);
}
.apl-certificates__batch-empty {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) dashed var(--apl-ui-color-border-strong);
border-radius: var(--apl-ui-radius-lg);
display: flex;
gap: var(--apl-ui-space-3);
justify-content: center;
min-height: calc(var(--apl-ui-control-height-lg) * 3);
padding: var(--apl-ui-space-4);
text-align: left;
}
.apl-certificates__batch-empty strong,
.apl-certificates__batch-empty span { display: block; }
.apl-certificates__batch-empty strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-certificates__batch-empty span {
color: var(--apl-ui-color-text-subtle);
margin-top: var(--apl-ui-space-1);
}
.apl-certificates__metrics {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(4,minmax(var(--apl-ui-space-0),1fr));
margin-bottom: var(--apl-ui-space-3);
}
.apl-certificates__metric {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
padding: var(--apl-ui-space-3);
}
.apl-certificates__metric span,
.apl-certificates__metric strong,
.apl-certificates__metric small { display: block; }
.apl-certificates__metric span,
.apl-certificates__metric small {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
}
.apl-certificates__metric strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-heading-lg);
font-weight: var(--apl-ui-font-weight-bold);
margin: var(--apl-ui-space-1) var(--apl-ui-space-0);
}
.apl-certificates__batch-table { margin-bottom: var(--apl-ui-space-3); }
.apl-certificates__batch-table td > strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-certificates__template-layout {
align-items: start;
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: minmax(var(--apl-ui-space-0),1.15fr) minmax(var(--apl-ui-tab-navigation-min-width),.85fr);
min-width: var(--apl-ui-space-0);
}
.apl-certificates__marker-panel,
.apl-certificates__identity {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
margin: var(--apl-ui-space-3) var(--apl-ui-space-0);
padding: var(--apl-ui-space-3);
}
.apl-certificates__marker-head,
.apl-certificates__color-label {
align-items: flex-start;
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
margin-bottom: var(--apl-ui-space-2);
}
.apl-certificates__marker-head strong,
.apl-certificates__marker-head small,
.apl-certificates__identity-copy strong,
.apl-certificates__identity-copy span { display: block; }
.apl-certificates__marker-head strong,
.apl-certificates__identity-copy strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-certificates__marker-head small,
.apl-certificates__identity-copy span {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-certificates__markers {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(3,minmax(var(--apl-ui-space-0),1fr));
}
.apl-rebuilt .apl-certificates__marker {
align-items: center;
appearance: none;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
cursor: pointer;
display: grid;
gap: var(--apl-ui-space-1);
grid-template-columns: auto minmax(var(--apl-ui-space-0),1fr);
min-height: var(--apl-ui-control-height-lg);
padding: var(--apl-ui-space-2);
text-align: left;
}
.apl-certificates__marker i {
color: var(--apl-ui-color-brand);
grid-row: span 2;
}
.apl-certificates__marker span {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-certificates__marker small {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apl-rebuilt .apl-certificates__marker:hover,
.apl-rebuilt .apl-certificates__marker:focus {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border-strong);
}
.apl-certificates__identity {
align-items: center;
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: var(--apl-ui-peace-logo-size) minmax(var(--apl-ui-space-0),1fr);
}
.apl-certificates__identity-logo,
.apl-certificate-document__logo {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-md);
display: flex;
height: var(--apl-ui-peace-logo-size);
justify-content: center;
overflow: hidden;
padding: var(--apl-ui-space-1);
}
.apl-certificates__identity-logo img,
.apl-certificate-document__logo img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.apl-certificates__color-grid {
display: grid;
gap: var(--apl-ui-space-3);
grid-column: 1 / -1;
grid-template-columns: repeat(2,minmax(var(--apl-ui-space-0),1fr));
width: 100%;
}
.apl-certificates__color-label {
align-items: center;
margin-bottom: var(--apl-ui-space-1);
}
.apl-certificates__color-label label { margin: var(--apl-ui-space-0); }
.apl-certificates__color-control {
align-items: center;
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: var(--apl-ui-peace-color-picker-size) minmax(var(--apl-ui-space-0),1fr) auto;
}
.apl-certificates__color-picker {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-md);
cursor: pointer;
height: var(--apl-ui-peace-color-picker-size);
padding: var(--apl-ui-space-1);
width: var(--apl-ui-peace-color-picker-size);
}
.apl-certificates__color-picker::-webkit-color-swatch-wrapper { padding: var(--apl-ui-space-0); }
.apl-certificates__color-picker::-webkit-color-swatch,
.apl-certificates__color-picker::-moz-color-swatch {
border: var(--apl-ui-space-0);
border-radius: var(--apl-ui-radius-sm);
}
.apl-certificates__color-code {
min-width: var(--apl-ui-space-0);
text-transform: uppercase;
}
.apl-certificate-document {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-certificate-line);
border-radius: var(--apl-ui-radius-lg);
box-shadow: var(--apl-ui-shadow-sm);
color: var(--apl-ui-certificate-ink);
overflow: hidden;
}
.apl-certificate-document__header {
align-items: center;
background: var(--apl-ui-certificate-primary);
color: var(--apl-ui-color-on-solid);
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: var(--apl-ui-peace-logo-size) minmax(var(--apl-ui-space-0),1fr);
padding: var(--apl-ui-space-4);
}
.apl-certificate-document__header strong,
.apl-certificate-document__header span { display: block; }
.apl-certificate-document__header strong { font-weight: var(--apl-ui-font-weight-bold); }
.apl-certificate-document__header span {
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
opacity: var(--apl-ui-opacity-muted);
}
.apl-certificate-document__accent {
background: var(--apl-ui-certificate-accent);
height: var(--apl-ui-space-1);
}
.apl-certificate-document__content { padding: var(--apl-ui-space-4); }
.apl-certificate-document__eyebrow {
color: var(--apl-ui-certificate-accent-dark);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
letter-spacing: var(--apl-ui-letter-spacing-label);
margin: var(--apl-ui-space-0) var(--apl-ui-space-0) var(--apl-ui-space-2);
}
.apl-certificate-document h3 {
color: var(--apl-ui-certificate-primary);
font-size: var(--apl-ui-font-size-title);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: var(--apl-ui-space-0) var(--apl-ui-space-0) var(--apl-ui-space-3);
}
.apl-certificate-document__facts {
background: var(--apl-ui-certificate-soft);
border: var(--apl-ui-border-width) solid var(--apl-ui-certificate-line);
border-radius: var(--apl-ui-radius-md);
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(2,minmax(var(--apl-ui-space-0),1fr));
margin: var(--apl-ui-space-3) var(--apl-ui-space-0);
padding: var(--apl-ui-space-3);
}
.apl-certificate-document__facts dt {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
}
.apl-certificate-document__facts dd {
color: var(--apl-ui-certificate-ink);
font-weight: var(--apl-ui-font-weight-semibold);
margin: var(--apl-ui-space-1) var(--apl-ui-space-0) var(--apl-ui-space-0);
}
.apl-certificate-document__content > p {
line-height: var(--apl-ui-line-relaxed);
white-space: pre-line;
}
.apl-certificate-document__payments {
border: var(--apl-ui-border-width) solid var(--apl-ui-certificate-line);
border-radius: var(--apl-ui-radius-md);
margin: var(--apl-ui-space-3) var(--apl-ui-space-0);
overflow: hidden;
}
.apl-certificate-document__payments > div {
align-items: center;
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-certificate-line);
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
padding: var(--apl-ui-space-2);
}
.apl-certificate-document__payments > div:last-child { border-bottom: var(--apl-ui-space-0); }
.apl-certificate-document__payments strong {
color: var(--apl-ui-certificate-ink);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-certificate-document__payments .is-total {
background: var(--apl-ui-color-surface);
border-top: calc(var(--apl-ui-border-width) * 2) solid var(--apl-ui-certificate-accent);
color: var(--apl-ui-certificate-primary);
font-weight: var(--apl-ui-font-weight-bold);
}
.apl-certificate-document__payments .is-total strong { color: var(--apl-ui-certificate-primary); }
.apl-certificate-document__coverage {
background: var(--apl-ui-certificate-accent-soft);
border: var(--apl-ui-border-width) solid var(--apl-ui-certificate-accent-line);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-certificate-accent-dark);
padding: var(--apl-ui-space-2);
}
.apl-certificate-document__signature {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-certificate-primary);
display: flex;
flex-direction: column;
margin-top: var(--apl-ui-space-5);
max-width: var(--apl-ui-library-form-aside);
padding-top: var(--apl-ui-space-2);
}
.apl-certificate-document__signature span { margin-bottom: var(--apl-ui-space-5); }
.apl-certificate-document__signature strong {
color: var(--apl-ui-certificate-ink);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-certificate-document__signature small {
color: var(--apl-ui-color-text-subtle);
margin-top: var(--apl-ui-space-1);
}
.apl-certificate-document > footer {
background: var(--apl-ui-color-surface);
border-top: var(--apl-ui-border-width) solid var(--apl-ui-certificate-line);
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
padding: var(--apl-ui-space-3) var(--apl-ui-space-4);
}
.apl-certificates__audit-toolbar {
align-items: flex-end;
justify-content: flex-start;
margin-bottom: var(--apl-ui-space-3);
}
.apl-certificates__audit-search { flex: 1 1 var(--apl-ui-query-field-min); }
.apl-certificates__dialog-layer { z-index: var(--apl-ui-z-overlay); }
.apl-certificates__dialog { width: var(--apl-ui-community-catalog-drawer-width); }
.apl-certificates__recipients {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(2,minmax(var(--apl-ui-space-0),1fr));
}
.apl-certificates__recipient {
align-items: flex-start;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
display: flex;
gap: var(--apl-ui-space-2);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-2);
}
.apl-certificates__recipient input {
accent-color: var(--apl-ui-color-brand);
margin-top: var(--apl-ui-space-1);
}
.apl-certificates__recipient span { min-width: var(--apl-ui-space-0); }
.apl-certificates__recipient strong,
.apl-certificates__recipient small {
display: block;
overflow-wrap: anywhere;
}
.apl-certificates__recipient strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-certificates__recipient small {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-certificates-dialog-open { overflow: hidden; }
@media (max-width: 1120px) {
.apl-certificates__template-layout { grid-template-columns: minmax(var(--apl-ui-space-0),1fr); }
.apl-certificates__preview { position: static; }
}
@media (max-width: 1024px) {
.apl-certificates__individual-layout { grid-template-columns: minmax(var(--apl-ui-space-0),1fr); }
.apl-certificates__guide { position: static; }
}
@media (max-width: 767px) {
.apl-certificates > .apl-page__hero .apl-page__copy { flex-basis: auto; }
.apl-certificates__panels { padding: var(--apl-ui-space-2); }
.apl-certificates__form-grid > .apl-field,
.apl-certificates__template-form .apl-grid > .apl-field { grid-column: 1 / -1; }
.apl-certificates__metrics { grid-template-columns: repeat(2,minmax(var(--apl-ui-space-0),1fr)); }
.apl-certificates__markers { grid-template-columns: repeat(2,minmax(var(--apl-ui-space-0),1fr)); }
.apl-certificates__color-grid,
.apl-certificates__recipients { grid-template-columns: minmax(var(--apl-ui-space-0),1fr); }
}
@media (max-width: 520px) {
.apl-certificates__metrics,
.apl-certificates__markers { grid-template-columns: minmax(var(--apl-ui-space-0),1fr); }
.apl-certificates__identity { align-items: stretch; }
.apl-certificates__marker-head { align-items: stretch; flex-direction: column; }
.apl-certificates__color-control { grid-template-columns: var(--apl-ui-peace-color-picker-size) minmax(var(--apl-ui-space-0),1fr); }
.apl-certificates__color-control .apl-btn { grid-column: 1 / -1; }
.apl-certificates__actions,
.apl-certificates .apl-dialog__footer { align-items: stretch; flex-direction: column-reverse; }
.apl-certificates__actions .apl-btn,
.apl-certificates .apl-dialog__footer .apl-btn { width: 100%; }
}
/* Monitor canonico de trazabilidad de facturacion */
.apl-trace .apl-context-bar__actions form { margin: var(--apl-ui-space-0); }
.apl-trace-overview { display: grid; grid-template-columns: minmax(var(--apl-ui-space-0),.8fr) minmax(var(--apl-ui-space-0),1.2fr); overflow: hidden; }
.apl-trace-snapshot { border-right: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft); display: grid; grid-template-columns: repeat(4,minmax(var(--apl-ui-space-0),1fr)); }
.apl-trace-snapshot > div { align-content: center; border-right: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft); display: grid; gap: var(--apl-ui-space-1); min-width: var(--apl-ui-space-0); padding: var(--apl-ui-space-3); }
.apl-trace-snapshot > div:last-child { border-right: var(--apl-ui-space-0); }
.apl-trace-snapshot strong { color: var(--apl-ui-color-text-strong); font-size: var(--apl-ui-font-size-title); font-weight: var(--apl-ui-font-weight-bold); }
.apl-trace-snapshot span { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-caption); }
.apl-trace-coverage { min-width: var(--apl-ui-space-0); padding: var(--apl-ui-space-3); }
.apl-trace-coverage__heading { align-items: center; display: flex; gap: var(--apl-ui-space-2); justify-content: space-between; }
.apl-trace-coverage__heading h2 { color: var(--apl-ui-color-text-strong); font-size: var(--apl-ui-font-size-body); font-weight: var(--apl-ui-font-weight-bold); margin: var(--apl-ui-space-0); }
.apl-trace-coverage__heading p { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-caption); margin: var(--apl-ui-space-1) var(--apl-ui-space-0) var(--apl-ui-space-0); }
.apl-trace-coverage__progress { align-items: center; display: grid; gap: var(--apl-ui-space-2); grid-template-columns: minmax(var(--apl-ui-space-0),1fr) auto auto; }
.apl-trace-coverage__progress .apl-progress { width: 100%; }
.apl-trace-coverage__progress strong { color: var(--apl-ui-color-text-strong); font-weight: var(--apl-ui-font-weight-bold); }
.apl-trace-coverage__progress span { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-detail); }
.apl-trace-coverage__sources { display: flex; flex-wrap: wrap; gap: var(--apl-ui-space-1); }
.apl-trace__advanced { border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft); margin-top: var(--apl-ui-space-3); padding-top: var(--apl-ui-space-3); }
.apl-trace__results { overflow: hidden; }
.apl-trace__results-head { align-items: center; border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft); display: flex; gap: var(--apl-ui-space-3); justify-content: space-between; padding: var(--apl-ui-space-3); }
.apl-trace__results-head .apl-card__title,
.apl-trace__results-head .apl-card__subtitle { margin: var(--apl-ui-space-0); }
.apl-trace-sortbar { display: flex; flex-wrap: wrap; gap: var(--apl-ui-space-1); justify-content: flex-end; }
.apl-trace-monitor { display: grid; }
.apl-trace-case { border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider); display: grid; gap: var(--apl-ui-space-2); padding: var(--apl-ui-space-3); }
.apl-trace-case:last-child { border-bottom: var(--apl-ui-space-0); }
.apl-trace-case__header { align-items: center; display: grid; gap: var(--apl-ui-space-3); grid-template-columns: minmax(var(--apl-ui-trace-identity-min-width),1.2fr) minmax(var(--apl-ui-trace-state-min-width),.8fr) minmax(var(--apl-ui-trace-elapsed-min-width),.55fr) auto; }
.apl-trace-case__identity,
.apl-trace-case__state,
.apl-trace-case__elapsed { display: grid; gap: var(--apl-ui-space-1); min-width: var(--apl-ui-space-0); }
.apl-trace-case__identity strong,
.apl-trace-case__state strong,
.apl-trace-case__elapsed strong { color: var(--apl-ui-color-text-strong); font-weight: var(--apl-ui-font-weight-bold); overflow-wrap: anywhere; }
.apl-trace-case__identity > span,
.apl-trace-case__state > span:first-child,
.apl-trace-case__elapsed > span:first-child { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-caption); overflow-wrap: anywhere; }
.apl-trace-case__state .apl-status,
.apl-trace-case__elapsed .apl-status { justify-self: start; }
.apl-process-map { background: var(--apl-ui-color-surface); border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft); border-radius: var(--apl-ui-radius-lg); display: grid; gap: var(--apl-ui-space-3); min-width: var(--apl-ui-space-0); padding: var(--apl-ui-space-3); }
.apl-process-map__heading { align-items: center; color: var(--apl-ui-color-text-muted); display: flex; font-size: var(--apl-ui-font-size-caption); gap: var(--apl-ui-space-3); justify-content: space-between; }
.apl-process-map__heading > div { display: grid; gap: var(--apl-ui-space-1); }
.apl-process-map__heading span { align-items: center; display: inline-flex; gap: var(--apl-ui-space-1); }
.apl-process-map__heading strong { color: var(--apl-ui-color-text-strong); font-size: var(--apl-ui-font-size-body); font-weight: var(--apl-ui-font-weight-bold); }
.apl-process-map__current { justify-items: end; text-align: right; }
.apl-process-map__current span { color: var(--apl-ui-color-brand-dark); font-weight: var(--apl-ui-font-weight-semibold); }
.apl-process-map__current strong { color: var(--apl-ui-color-brand-dark); }
.apl-process-map__scroll-hint { align-items: center; color: var(--apl-ui-color-text-muted); display: none; font-size: var(--apl-ui-font-size-caption); gap: var(--apl-ui-space-1); }
.apl-process-path-scroll { min-width: var(--apl-ui-space-0); overflow-x: auto; overflow-y: hidden; padding: var(--apl-ui-space-1) var(--apl-ui-space-0); scrollbar-width: thin; }
.apl-process-path-scroll:focus { border-radius: var(--apl-ui-radius-md); box-shadow: var(--apl-ui-shadow-accent-focus); outline: none; }
.apl-process-path { display: grid; grid-template-columns: repeat(5,minmax(var(--apl-ui-trace-process-node-min-width),1fr)); list-style: none; margin: var(--apl-ui-space-0); min-width: var(--apl-ui-trace-process-track-min-width); padding: var(--apl-ui-space-0); }
.apl-process-node { display: grid; grid-template-rows: auto minmax(var(--apl-ui-space-0),1fr); min-width: var(--apl-ui-space-0); position: relative; text-align: center; }
.apl-process-node__connector { background: var(--apl-ui-color-brand-border-strong); height: var(--apl-ui-trace-line-width); left: 50%; position: absolute; right: -50%; top: var(--apl-ui-trace-process-connector-top); z-index: 0; }
.apl-process-node:last-child .apl-process-node__connector { display: none; }
.apl-process-node.is-current .apl-process-node__connector,
.apl-process-node.is-pending .apl-process-node__connector,
.apl-process-node.is-optional .apl-process-node__connector,
.apl-process-node.is-not-reached .apl-process-node__connector { background: var(--apl-ui-color-border-strong); }
.apl-process-node.is-unverified .apl-process-node__connector { background: none; border-top: var(--apl-ui-trace-line-width) dashed var(--apl-ui-color-border-strong); }
.apl-process-node__visual { align-items: center; display: grid; gap: var(--apl-ui-space-1); grid-template-rows: var(--apl-ui-trace-process-stage-icon-size) minmax(var(--apl-ui-trace-process-time-min-height),auto) var(--apl-ui-trace-process-marker-size) var(--apl-ui-trace-process-number-size); justify-items: center; position: relative; z-index: 1; }
.apl-process-node__stage-icon.apl-icon-frame { align-items: center; background: var(--apl-ui-color-surface-muted); border-radius: var(--apl-ui-radius-pill); color: var(--apl-ui-color-text-muted); display: inline-flex; flex-basis: var(--apl-ui-trace-process-stage-icon-size); font-size: var(--apl-ui-font-size-icon-lg); height: var(--apl-ui-trace-process-stage-icon-size); justify-content: center; min-width: var(--apl-ui-trace-process-stage-icon-size); width: var(--apl-ui-trace-process-stage-icon-size); }
.apl-process-node__duration { background: var(--apl-ui-color-surface); border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-strong); border-radius: var(--apl-ui-radius-pill); color: var(--apl-ui-color-text-body); display: grid; gap: calc(var(--apl-ui-space-1) / 2); justify-items: center; line-height: var(--apl-ui-line-tight); max-width: calc(100% - var(--apl-ui-space-2)); padding: var(--apl-ui-space-1) var(--apl-ui-space-2); }
.apl-process-node__duration small { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-micro); font-weight: var(--apl-ui-font-weight-regular); }
.apl-process-node__duration strong { font-size: var(--apl-ui-font-size-detail); font-weight: var(--apl-ui-font-weight-semibold); overflow-wrap: anywhere; }
.apl-process-node__marker.apl-icon-frame { align-items: center; background: var(--apl-ui-color-surface); border: calc(var(--apl-ui-border-width) * 2) solid var(--apl-ui-color-border-strong); border-radius: var(--apl-ui-radius-pill); color: var(--apl-ui-color-text-muted); display: inline-flex; flex-basis: var(--apl-ui-trace-process-marker-size); font-size: var(--apl-ui-font-size-title); font-weight: var(--apl-ui-font-weight-bold); height: var(--apl-ui-trace-process-marker-size); justify-content: center; min-width: var(--apl-ui-trace-process-marker-size); position: relative !important; width: var(--apl-ui-trace-process-marker-size); z-index: 1; }
.apl-process-node__number { align-items: center; background: var(--apl-ui-color-surface-strong); border-radius: var(--apl-ui-radius-pill); color: var(--apl-ui-color-text-muted); display: inline-flex; font-size: var(--apl-ui-font-size-caption); font-weight: var(--apl-ui-font-weight-bold); height: var(--apl-ui-trace-process-number-size); justify-content: center; width: var(--apl-ui-trace-process-number-size); }
.apl-process-node.is-complete .apl-process-node__stage-icon,
.apl-process-node.is-complete .apl-process-node__number { background: var(--apl-ui-color-brand-surface); color: var(--apl-ui-color-brand-dark); }
.apl-process-node.is-complete .apl-process-node__marker { background: var(--apl-ui-color-brand-surface); border-color: var(--apl-ui-color-brand); color: var(--apl-ui-color-brand-dark); }
.apl-process-node.is-complete.is-unmeasured .apl-process-node__connector { background: none; border-top: var(--apl-ui-trace-line-width) dashed var(--apl-ui-color-brand-border-strong); }
.apl-process-node.is-complete.is-unmeasured .apl-process-node__marker { border-style: dashed; }
.apl-process-node.is-current .apl-process-node__stage-icon { background: var(--apl-ui-color-brand-surface); color: var(--apl-ui-color-brand-dark); }
.apl-process-node.is-current .apl-process-node__duration { border-color: var(--apl-ui-color-brand-border-strong); color: var(--apl-ui-color-brand-dark); }
.apl-process-node.is-current .apl-process-node__marker { background: var(--apl-ui-color-brand); border-color: var(--apl-ui-color-brand-dark); color: var(--apl-ui-color-on-solid); box-shadow: var(--apl-ui-shadow-focus); }
.apl-process-node.is-current .apl-process-node__number { background: var(--apl-ui-color-brand); color: var(--apl-ui-color-on-solid); }
.apl-process-node.is-optional .apl-process-node__stage-icon,
.apl-process-node.is-skipped .apl-process-node__stage-icon { background: var(--apl-ui-color-warning-soft); color: var(--apl-ui-color-warning-dark); }
.apl-process-node.is-optional .apl-process-node__marker { border-style: dashed; }
.apl-process-node.is-skipped .apl-process-node__marker { background: var(--apl-ui-color-surface-muted); color: var(--apl-ui-color-text-muted); }
.apl-process-node.is-unverified .apl-process-node__marker { background: var(--apl-ui-color-warning-subtle); border-color: var(--apl-ui-color-warning-border); border-style: dashed; color: var(--apl-ui-color-warning-dark); }
.apl-process-node.is-paused .apl-process-node__marker { background: var(--apl-ui-color-warning-soft); border-color: var(--apl-ui-color-warning-border); color: var(--apl-ui-color-warning-dark); }
.apl-process-node.is-blocked .apl-process-node__marker { background: var(--apl-ui-color-danger-soft); border-color: var(--apl-ui-color-danger-border); color: var(--apl-ui-color-danger-dark); }
.apl-process-node__card { align-content: start; display: grid; gap: var(--apl-ui-space-1); justify-items: center; min-width: var(--apl-ui-space-0); padding: var(--apl-ui-space-1) var(--apl-ui-space-2); position: relative; z-index: 1; }
.apl-process-node__card > strong { color: var(--apl-ui-color-text-strong); font-size: var(--apl-ui-font-size-heading-sm); font-weight: var(--apl-ui-font-weight-bold); line-height: var(--apl-ui-line-tight); overflow-wrap: anywhere; }
.apl-process-node__status { background: var(--apl-ui-color-surface-muted); border-radius: var(--apl-ui-radius-badge); color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-caption); font-weight: var(--apl-ui-font-weight-semibold); padding: var(--apl-ui-space-1) var(--apl-ui-space-2); }
.apl-process-node.is-complete .apl-process-node__status { background: var(--apl-ui-color-success-soft); color: var(--apl-ui-color-success-dark); }
.apl-process-node.is-current .apl-process-node__status { background: var(--apl-ui-color-brand-surface); color: var(--apl-ui-color-brand-dark); }
.apl-process-node.is-optional .apl-process-node__status { background: var(--apl-ui-color-warning-soft); color: var(--apl-ui-color-warning-dark); }
.apl-process-node__description { color: var(--apl-ui-color-text-body); font-size: var(--apl-ui-font-size-detail); }
.apl-process-node__range { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-micro); line-height: var(--apl-ui-line-normal); overflow-wrap: anywhere; }
.apl-process-node__times { display: grid; gap: var(--apl-ui-space-1); grid-template-columns: repeat(2,minmax(var(--apl-ui-space-0),1fr)); margin: var(--apl-ui-space-1) var(--apl-ui-space-0) var(--apl-ui-space-0); width: 100%; }
.apl-process-node__times > div { background: var(--apl-ui-color-surface-subtle); border-radius: var(--apl-ui-radius-sm); min-width: var(--apl-ui-space-0); padding: var(--apl-ui-space-1); }
.apl-process-node__times dt { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-micro); font-weight: var(--apl-ui-font-weight-semibold); }
.apl-process-node__times dd { color: var(--apl-ui-color-text-body); font-size: var(--apl-ui-font-size-micro); line-height: var(--apl-ui-line-normal); margin: calc(var(--apl-ui-space-1) / 2) var(--apl-ui-space-0) var(--apl-ui-space-0); overflow-wrap: anywhere; }
.apl-process-node__activity { align-items: center; background: var(--apl-ui-color-warning-subtle); border: var(--apl-ui-border-width) solid var(--apl-ui-color-warning-border); border-radius: var(--apl-ui-radius-badge); color: var(--apl-ui-color-warning-dark); display: inline-flex; font-size: var(--apl-ui-font-size-micro); gap: var(--apl-ui-space-1); padding: var(--apl-ui-space-1) var(--apl-ui-space-2); }
.apl-process-node__pause { align-items: center; background: var(--apl-ui-color-warning-soft); border: var(--apl-ui-border-width) solid var(--apl-ui-color-warning-border); border-radius: var(--apl-ui-radius-badge); color: var(--apl-ui-color-warning-dark); display: inline-flex; font-size: var(--apl-ui-font-size-micro); gap: var(--apl-ui-space-1); padding: var(--apl-ui-space-1) var(--apl-ui-space-2); }
.apl-process-node__pause strong { font-weight: var(--apl-ui-font-weight-bold); }
.apl-process-node__block { align-items: center; background: var(--apl-ui-color-danger-soft); border: var(--apl-ui-border-width) solid var(--apl-ui-color-danger-border); border-radius: var(--apl-ui-radius-badge); color: var(--apl-ui-color-danger-dark); display: inline-flex; font-size: var(--apl-ui-font-size-micro); gap: var(--apl-ui-space-1); padding: var(--apl-ui-space-1) var(--apl-ui-space-2); }
.apl-process-progress { align-items: center; background: var(--apl-ui-color-surface-subtle); border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft); border-radius: var(--apl-ui-radius-lg); display: grid; gap: var(--apl-ui-space-3); grid-template-columns: var(--apl-ui-trace-progress-score-size) minmax(var(--apl-ui-space-0),1fr) auto; padding: var(--apl-ui-space-2) var(--apl-ui-space-3); }
.apl-process-progress__score { align-content: center; border: calc(var(--apl-ui-border-width) * 3) solid var(--apl-ui-color-brand); border-radius: var(--apl-ui-radius-pill); display: grid; height: var(--apl-ui-trace-progress-score-size); justify-items: center; width: var(--apl-ui-trace-progress-score-size); }
.apl-process-progress__score strong { color: var(--apl-ui-color-brand-dark); font-size: var(--apl-ui-font-size-title); font-weight: var(--apl-ui-font-weight-bold); line-height: var(--apl-ui-line-tight); }
.apl-process-progress__score span { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-micro); }
.apl-process-progress__body { display: grid; gap: var(--apl-ui-space-1); min-width: var(--apl-ui-space-0); }
.apl-process-progress__body > strong { color: var(--apl-ui-color-text-strong); font-size: var(--apl-ui-font-size-body); font-weight: var(--apl-ui-font-weight-bold); }
.apl-process-progress__body > span { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-detail); }
.apl-process-progress__body .apl-progress { width: 100%; }
.apl-process-progress__legend { display: flex; flex-wrap: wrap; gap: var(--apl-ui-space-3); justify-content: flex-end; }
.apl-process-progress__legend span { align-items: center; color: var(--apl-ui-color-text-muted); display: inline-flex; font-size: var(--apl-ui-font-size-caption); gap: var(--apl-ui-space-1); white-space: nowrap; }
.apl-process-progress__legend .is-complete i { color: var(--apl-ui-color-success); }
.apl-process-progress__legend .is-current i { color: var(--apl-ui-color-brand); }
.apl-process-progress__legend .is-pending i { color: var(--apl-ui-color-border-strong); }
.apl-trace-case__footer { align-items: center; border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft); color: var(--apl-ui-color-text-muted); display: flex; flex-wrap: wrap; font-size: var(--apl-ui-font-size-caption); gap: var(--apl-ui-space-2) var(--apl-ui-space-4); padding-top: var(--apl-ui-space-2); }
.apl-trace-case__footer > span { align-items: center; display: inline-flex; gap: var(--apl-ui-space-1); }
.apl-dialog-layer--drawer > .apl-dialog--drawer.apl-trace-drawer { width: min(100%, var(--apl-ui-trace-drawer-width)); }
.apl-trace-drawer .apl-dialog__body { overflow-y: auto; }
.apl-trace-detail { display: grid; gap: var(--apl-ui-space-3); }
.apl-trace-detail__context { margin: var(--apl-ui-space-0); }
.apl-trace-detail__summary { display: grid; gap: var(--apl-ui-space-2); grid-template-columns: repeat(4,minmax(var(--apl-ui-trace-summary-min-width),1fr)); }
.apl-trace-detail__summary > div { background: var(--apl-ui-color-surface-subtle); border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft); border-radius: var(--apl-ui-radius-md); padding: var(--apl-ui-space-2); }
.apl-trace-detail__summary span,
.apl-trace-detail__summary strong { display: block; }
.apl-trace-detail__summary span { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-caption); }
.apl-trace-detail__summary strong { color: var(--apl-ui-color-text-strong); font-weight: var(--apl-ui-font-weight-bold); margin-top: var(--apl-ui-space-1); }
.apl-timeline { list-style: none; margin: var(--apl-ui-space-0); padding: var(--apl-ui-space-0); }
.apl-timeline__event { display: grid; grid-template-columns: var(--apl-ui-trace-marker-size) minmax(var(--apl-ui-space-0),1fr); }
.apl-timeline__rail { display: flex; justify-content: center; position: relative; }
.apl-timeline__rail::after { background: var(--apl-ui-color-border-strong); bottom: var(--apl-ui-space-0); content: ""; position: absolute; top: var(--apl-ui-trace-marker-size); width: var(--apl-ui-trace-rail-width); }
.apl-timeline__event:last-child .apl-timeline__rail::after { display: none; }
.apl-timeline__marker { align-items: center; background: var(--apl-ui-color-brand-surface); border: var(--apl-ui-border-width) solid var(--apl-ui-color-brand-border); border-radius: var(--apl-ui-radius-pill); color: var(--apl-ui-color-brand-dark); display: inline-flex; height: var(--apl-ui-trace-marker-size); justify-content: center; position: relative; width: var(--apl-ui-trace-marker-size); z-index: 1; }
.apl-timeline__marker i { font-size: var(--apl-ui-font-size-micro); }
.apl-timeline__content { border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider); margin-left: var(--apl-ui-space-2); padding: var(--apl-ui-space-0) var(--apl-ui-space-0) var(--apl-ui-space-4); }
.apl-timeline__event + .apl-timeline__event .apl-timeline__content { padding-top: var(--apl-ui-space-3); }
.apl-timeline__content > header { align-items: flex-start; display: flex; gap: var(--apl-ui-space-2); justify-content: space-between; }
.apl-timeline__content > header > div { align-items: center; display: flex; flex-wrap: wrap; gap: var(--apl-ui-space-2); }
.apl-timeline__content > header strong { color: var(--apl-ui-color-text-strong); font-weight: var(--apl-ui-font-weight-bold); }
.apl-timeline__content time { color: var(--apl-ui-color-text-muted); flex: 0 0 auto; font-size: var(--apl-ui-font-size-detail); }
.apl-timeline__content > p { color: var(--apl-ui-color-text-body); margin: var(--apl-ui-space-2) var(--apl-ui-space-0); }
.apl-timeline__meta { display: grid; gap: var(--apl-ui-space-2); grid-template-columns: repeat(4,minmax(var(--apl-ui-space-0),1fr)); margin: var(--apl-ui-space-0); }
.apl-timeline__meta div { min-width: var(--apl-ui-space-0); }
.apl-timeline__meta dt { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-caption); }
.apl-timeline__meta dd { color: var(--apl-ui-color-text-body); margin: var(--apl-ui-space-1) var(--apl-ui-space-0) var(--apl-ui-space-0); overflow-wrap: anywhere; }
.apl-trace-duration-grid { display: grid; gap: var(--apl-ui-space-2); grid-template-columns: repeat(auto-fit,minmax(var(--apl-ui-trace-duration-min-width),1fr)); }
.apl-trace-duration { background: var(--apl-ui-color-surface-subtle); border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft); border-radius: var(--apl-ui-radius-md); padding: var(--apl-ui-space-3); }
.apl-trace-duration > div { align-items: center; display: flex; gap: var(--apl-ui-space-2); justify-content: space-between; }
.apl-trace-duration strong { color: var(--apl-ui-color-text-strong); font-weight: var(--apl-ui-font-weight-bold); }
.apl-trace-duration p { color: var(--apl-ui-color-brand-dark); font-size: var(--apl-ui-font-size-title); font-weight: var(--apl-ui-font-weight-bold); margin: var(--apl-ui-space-2) var(--apl-ui-space-0); }
.apl-trace-duration > span,
.apl-trace-duration > small { color: var(--apl-ui-color-text-muted); display: block; font-size: var(--apl-ui-font-size-detail); }
.apl-trace-duration > small { color: var(--apl-ui-color-text-subtle); margin-top: var(--apl-ui-space-1); }
.apl-trace-references { border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft); margin-top: var(--apl-ui-space-3); padding-top: var(--apl-ui-space-3); }
.apl-trace-references h4 { color: var(--apl-ui-color-text-strong); font-size: var(--apl-ui-font-size-heading-sm); font-weight: var(--apl-ui-font-weight-bold); margin: var(--apl-ui-space-0) var(--apl-ui-space-0) var(--apl-ui-space-2); }
.apl-trace-references .apl-badge { margin: var(--apl-ui-space-0) var(--apl-ui-space-1) var(--apl-ui-space-1) var(--apl-ui-space-0); overflow-wrap: anywhere; white-space: normal; }
.apl-trace #apl-trace-results.is-loading { opacity: var(--apl-ui-opacity-disabled); pointer-events: none; }
@media (max-width: 900px) {
.apl-trace-overview { grid-template-columns: minmax(var(--apl-ui-space-0),1fr); }
.apl-trace-snapshot { border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft); border-right: var(--apl-ui-space-0); }
.apl-trace-case__header { grid-template-columns: minmax(var(--apl-ui-space-0),1fr) minmax(var(--apl-ui-space-0),1fr) auto; }
.apl-trace-case__elapsed { grid-column: 1 / 3; }
.apl-trace-case__header > .apl-btn { grid-column: 3; grid-row: 1 / 3; }
.apl-process-map__scroll-hint { display: inline-flex; }
.apl-process-progress { grid-template-columns: var(--apl-ui-trace-progress-score-size) minmax(var(--apl-ui-space-0),1fr); }
.apl-process-progress__legend { grid-column: 1 / -1; justify-content: flex-start; }
.apl-trace-detail__summary { grid-template-columns: repeat(2,minmax(var(--apl-ui-space-0),1fr)); }
.apl-timeline__meta { grid-template-columns: repeat(2,minmax(var(--apl-ui-space-0),1fr)); }
}
@media (max-width: 520px) {
.apl-trace-snapshot { grid-template-columns: repeat(2,minmax(var(--apl-ui-space-0),1fr)); }
.apl-trace-snapshot > div:nth-child(2) { border-right: var(--apl-ui-space-0); }
.apl-trace-snapshot > div:nth-child(-n+2) { border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft); }
.apl-trace-coverage__heading,
.apl-trace__results-head,
.apl-process-map__heading { align-items: flex-start; flex-direction: column; }
.apl-trace-coverage__progress { grid-template-columns: minmax(var(--apl-ui-space-0),1fr) auto; }
.apl-trace-coverage__progress span { grid-column: 1 / -1; }
.apl-trace-sortbar { justify-content: stretch; width: 100%; }
.apl-trace-sortbar .apl-btn { flex: 1 1 auto; }
.apl-trace-case__header { align-items: stretch; grid-template-columns: minmax(var(--apl-ui-space-0),1fr); }
.apl-trace-case__elapsed,
.apl-trace-case__header > .apl-btn { grid-column: auto; grid-row: auto; }
.apl-trace-case__header > .apl-btn { width: 100%; }
.apl-process-map { padding: var(--apl-ui-space-2); }
.apl-process-map__current { justify-items: start; text-align: left; }
.apl-process-progress { grid-template-columns: minmax(var(--apl-ui-space-0),1fr); }
.apl-process-progress__score { justify-self: start; }
.apl-process-progress__legend { grid-column: auto; }
.apl-trace-case__footer { align-items: flex-start; flex-direction: column; }
.apl-trace-detail__summary,
.apl-timeline__meta { grid-template-columns: minmax(var(--apl-ui-space-0),1fr); }
.apl-timeline__content > header { flex-direction: column; }
}
/*
* Base tipográfica compartida por el menú y todas las superficies reconstruidas.
* Los tamaños inferiores a 12px quedan reservados para microtextos, leyendas y contadores.
*/
.tech-topbar,
.tech-sidebar,
.apl-footer,
#apl-tcn-search,
#apl-tcn-results,
.apl-tcn-invoice-viewer,
.apl-tcn-send-modal__header,
.apl-send,
.apl-db-super {
font-family: var(--apl-ui-font-family);
font-size: var(--apl-ui-font-size-base);
}
.tech-topbar button,
.tech-topbar input,
.tech-topbar select,
.tech-sidebar button,
.tech-sidebar input,
.tech-sidebar select,
.apl-footer button,
.apl-footer input,
.apl-footer select {
font-family: inherit;
}
/* APL drawer form pattern */
body.apl-drawer-document{background:var(--apl-ui-color-page)!important;color:var(--apl-ui-color-text-body);margin:0!important;min-height:0!important;padding:0!important}
body.apl-drawer-document #main-container.container{margin:0!important;max-width:none!important;min-width:0!important;padding:0!important;width:100%!important}
.apl-drawer-form{color:var(--apl-ui-color-text-body);font:var(--apl-ui-font-weight-regular) var(--apl-ui-font-size-body)/var(--apl-ui-line-normal) var(--apl-ui-font-family);padding:12px}
.apl-drawer-form,.apl-drawer-form *{box-sizing:border-box}.apl-drawer-form form{margin:0}.apl-drawer-form__intro{align-items:flex-start;background:var(--apl-ui-color-brand-surface);border:1px solid var(--apl-ui-color-brand-border);border-radius:var(--apl-ui-radius-lg);color:var(--apl-ui-color-text-muted);display:flex;gap:8px;margin-bottom:9px;padding:9px 10px}.apl-drawer-form__intro>i{color:var(--apl-ui-color-brand-dark);margin-top:2px}.apl-drawer-form__intro strong{color:var(--apl-ui-color-text-strong);display:block;font-weight:var(--apl-ui-font-weight-semibold);margin-bottom:1px}
.apl-drawer-form__section{background:var(--apl-ui-color-surface);border:1px solid var(--apl-ui-color-border-muted);border-radius:var(--apl-ui-radius-lg);margin-bottom:9px;overflow:hidden}.apl-drawer-form__section-head{align-items:center;background:var(--apl-ui-color-surface-subtle);border-bottom:1px solid var(--apl-ui-color-row-divider);display:grid;gap:8px;grid-template-columns:30px minmax(0,1fr);min-height:46px;padding:7px 9px}.apl-drawer-form__section-icon{align-items:center;background:var(--apl-ui-color-surface);border:1px solid var(--apl-ui-color-border);border-radius:var(--apl-ui-radius-md);color:var(--apl-ui-color-accent-dark);display:flex;height:30px;justify-content:center;width:30px}.apl-drawer-form__section-copy strong,.apl-drawer-form__section-copy small{display:block}.apl-drawer-form__section-copy strong{color:var(--apl-ui-color-text-strong);font-weight:var(--apl-ui-font-weight-semibold)}.apl-drawer-form__section-copy small{color:var(--apl-ui-color-text-subtle);font-size:var(--apl-ui-font-size-caption);margin-top:1px}
.apl-drawer-form__body{padding:10px}.apl-drawer-form__grid{display:grid;gap:9px;grid-template-columns:repeat(2,minmax(0,1fr))}.apl-drawer-form__grid--single{grid-template-columns:1fr}.apl-drawer-form__field{min-width:0}.apl-drawer-form__field--wide{grid-column:1/-1}.apl-drawer-form__field>label{color:var(--apl-ui-color-text-muted);display:block;font-size:var(--apl-ui-font-size-detail);font-weight:var(--apl-ui-font-weight-semibold);margin:0 0 4px}.apl-drawer-form__field>small{color:var(--apl-ui-color-text-subtle);display:block;font-size:var(--apl-ui-font-size-caption);margin-top:3px}.apl-drawer-form .form-control,.apl-drawer-form select,.apl-drawer-form textarea{background:var(--apl-ui-color-surface-subtle)!important;border:1px solid var(--apl-ui-color-border)!important;border-radius:var(--apl-ui-radius-md)!important;box-shadow:none!important;color:var(--apl-ui-color-text-body)!important;font-family:var(--apl-ui-font-family)!important;font-size:var(--apl-ui-font-size-body)!important;width:100%!important}.apl-drawer-form .form-control,.apl-drawer-form select{height:34px!important;padding:6px 9px!important}.apl-drawer-form textarea.form-control{min-height:88px;padding:8px 9px!important;resize:vertical}.apl-drawer-form .form-control:focus,.apl-drawer-form select:focus,.apl-drawer-form textarea:focus{background:var(--apl-ui-color-surface)!important;border-color:var(--apl-ui-color-brand)!important;box-shadow:0 0 0 3px var(--apl-ui-focus-brand)!important;outline:0}.apl-drawer-form .form-control[readonly]{background:var(--apl-ui-color-surface-muted)!important;cursor:pointer}.apl-drawer-form .input-group{display:flex;width:100%}.apl-drawer-form .input-group .form-control{border-radius:var(--apl-ui-radius-md) 0 0 var(--apl-ui-radius-md)!important}.apl-drawer-form .input-group-addon{align-items:center;background:var(--apl-ui-color-surface-muted);border:1px solid var(--apl-ui-color-border);border-left:0;color:var(--apl-ui-color-text-muted);display:flex;justify-content:center;min-width:34px;padding:0}.apl-drawer-form .input-group-addon:last-child{border-radius:0 var(--apl-ui-radius-md) var(--apl-ui-radius-md) 0}.apl-drawer-form .bootstrap-select,.apl-drawer-form .btn-group{max-width:none!important;width:100%!important}.apl-drawer-form .bootstrap-select>.btn,.apl-drawer-form .multiselect{background:var(--apl-ui-color-surface-subtle)!important;border:1px solid var(--apl-ui-color-border)!important;border-radius:var(--apl-ui-radius-md)!important;color:var(--apl-ui-color-text-body)!important;font:inherit!important;height:34px!important;padding:6px 9px!important;width:100%!important}.apl-drawer-form .dropdown-menu{max-width:100%;min-width:100%}
.apl-drawer-form__toggle{align-items:flex-start;background:var(--apl-ui-color-surface-subtle);border:1px solid var(--apl-ui-color-border-muted);border-radius:var(--apl-ui-radius-md);cursor:pointer;display:flex;gap:8px;padding:8px 9px}.apl-drawer-form__toggle input{accent-color:var(--apl-ui-color-accent-border);margin:2px 0 0}.apl-drawer-form__toggle strong,.apl-drawer-form__toggle small{display:block}.apl-drawer-form__toggle strong{color:var(--apl-ui-color-text-strong);font-weight:var(--apl-ui-font-weight-semibold)}.apl-drawer-form__toggle small{color:var(--apl-ui-color-text-subtle);font-size:var(--apl-ui-font-size-caption);margin-top:1px}
/* Rebuilt toggle pattern: keep title and helper stacked before and after Janox enhancement. */
.apl-toggle {
align-items: flex-start;
background: var(--apl-ui-color-surface-subtle);
border: 1px solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
cursor: pointer;
display: flex;
gap: 8px;
padding: 8px 9px;
}
.apl-toggle > input {
accent-color: var(--apl-ui-color-accent-border);
margin: 2px 0 0;
}
body.janox-template .apl-toggle.janox-toggle-control,
body.janox-template .apl-drawer-form__toggle.janox-toggle-control,
body.janox-template .opv2-check-control.janox-toggle-control {
align-items: center;
display: flex;
}
body.janox-template .apl-toggle > .janox-toggle-label,
body.janox-template .apl-drawer-form__toggle > .janox-toggle-label,
body.janox-template .opv2-check-control > .janox-toggle-label {
display: block !important;
flex: 1 1 auto;
min-width: 0;
}
.apl-toggle__copy,
.apl-toggle > span:not(.janox-toggle-ui):not(.janox-toggle-label),
.apl-drawer-form__toggle > span:not(.janox-toggle-ui):not(.janox-toggle-label),
.opv2-check-control > span:not(.janox-toggle-ui):not(.janox-toggle-label),
body.janox-template .apl-toggle > .janox-toggle-label > span,
body.janox-template .apl-drawer-form__toggle > .janox-toggle-label > span,
body.janox-template .opv2-check-control > .janox-toggle-label > span {
align-items: flex-start;
display: flex !important;
flex-direction: column !important;
gap: 2px;
min-width: 0;
}
.apl-toggle__copy > strong,
.apl-toggle__copy > small,
body.janox-template .apl-toggle > .janox-toggle-label > span > strong,
body.janox-template .apl-toggle > .janox-toggle-label > span > small,
body.janox-template .apl-drawer-form__toggle > .janox-toggle-label > span > strong,
body.janox-template .apl-drawer-form__toggle > .janox-toggle-label > span > small,
body.janox-template .opv2-check-control > .janox-toggle-label > span > strong,
body.janox-template .opv2-check-control > .janox-toggle-label > span > small {
display: block !important;
line-height: var(--apl-ui-line-normal);
margin: 0 !important;
position: static !important;
width: 100%;
}
.apl-drawer-form__reminders{display:grid;gap:7px}.apl-drawer-form__reminder{align-items:end;background:var(--apl-ui-color-surface-subtle);border:1px solid var(--apl-ui-color-border-muted);border-radius:var(--apl-ui-radius-md);display:grid;gap:7px;grid-template-columns:minmax(120px,.8fr) minmax(160px,1.2fr) 32px;padding:8px}.apl-drawer-form__reminder .apl-drawer-form__field>label{font-size:var(--apl-ui-font-size-caption)}.apl-drawer-form__icon-btn{align-items:center;background:var(--apl-ui-color-surface);border:1px solid var(--apl-ui-color-border);border-radius:var(--apl-ui-radius-md);color:var(--apl-ui-color-text-muted);display:inline-flex;height:32px;justify-content:center;padding:0;width:32px}.apl-drawer-form__icon-btn:hover{background:var(--apl-ui-color-danger-soft);border-color:var(--apl-ui-color-danger-border);color:var(--apl-ui-color-danger-dark)}.apl-drawer-form__inline-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.apl-drawer-form__btn{align-items:center;background:var(--apl-ui-color-surface);border:1px solid var(--apl-ui-color-border);border-radius:var(--apl-ui-radius-md);color:var(--apl-ui-color-text-body);display:inline-flex;font:inherit;font-weight:var(--apl-ui-font-weight-semibold);gap:6px;justify-content:center;min-height:32px;padding:5px 10px}.apl-drawer-form__btn:hover{background:var(--apl-ui-color-surface-muted);color:var(--apl-ui-color-text-strong)}.apl-drawer-form__btn--primary{background:var(--apl-ui-color-accent);border-color:var(--apl-ui-color-accent-border);color:var(--apl-ui-color-accent-dark)}.apl-drawer-form__btn--primary:hover{background:var(--apl-ui-color-accent-hover);color:var(--apl-ui-color-accent-dark)}.apl-drawer-form__btn--success{background:var(--apl-ui-color-success);border-color:var(--apl-ui-color-success-dark);color:var(--apl-ui-color-on-solid)}.apl-drawer-form__btn--success:hover{background:var(--apl-ui-color-success-hover);color:var(--apl-ui-color-on-solid)}
.apl-drawer-form__upload{background:var(--apl-ui-color-surface-subtle);border:1px dashed var(--apl-ui-color-border-strong);border-radius:var(--apl-ui-radius-md);padding:9px}.apl-drawer-form__upload .btn{font:inherit!important}.apl-drawer-form__footer{align-items:center;background:var(--apl-ui-color-surface-subtle);border:1px solid var(--apl-ui-color-border-muted);border-radius:var(--apl-ui-radius-lg);bottom:0;display:flex;gap:7px;justify-content:flex-end;padding:9px;position:sticky;z-index:6}
@media(max-width:520px){.apl-drawer-form{padding:8px}.apl-drawer-form__grid{grid-template-columns:1fr}.apl-drawer-form__field--wide{grid-column:auto}.apl-drawer-form__reminder{grid-template-columns:1fr 32px}.apl-drawer-form__reminder .apl-drawer-form__field:nth-child(2){grid-column:1/2}.apl-drawer-form__reminder .apl-drawer-form__icon-btn{grid-column:2;grid-row:1/3}.apl-drawer-form__footer .apl-drawer-form__btn{flex:1 1 0}}
/*
* Toggle content contract for rebuilt modals.
* The switch, optional icon and copy own separate flex areas. The control and
* its label stay vertically centered for both simple and multiline content.
*/
body.janox-template .janox-toggle-control {
align-items: center;
gap: var(--apl-ui-space-2);
max-width: 100%;
}
body.janox-template .janox-toggle-control > .janox-toggle-ui {
flex: 0 0 auto;
margin-top: 0;
}
body.janox-template .janox-toggle-control > .janox-toggle-label {
align-items: center;
display: flex !important;
flex: 1 1 auto;
color: var(--apl-ui-color-text-body);
font-size: var(--apl-ui-font-size-body) !important;
font-style: normal !important;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
line-height: var(--apl-ui-line-normal) !important;
min-width: 0;
}
body.janox-template .janox-toggle-control > .janox-toggle-label > i {
color: var(--apl-ui-color-text-muted);
flex: 0 0 auto;
line-height: var(--apl-ui-line-normal);
}
body.janox-template .janox-toggle-control > .janox-toggle-label > span {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
body.janox-template .janox-toggle-control > .janox-toggle-label > strong,
body.janox-template .janox-toggle-control > .janox-toggle-label > small {
flex-basis: 100%;
min-width: 0;
}
body.janox-template .janox-toggle-control > .janox-toggle-label strong,
body.janox-template .janox-toggle-control > .janox-toggle-label small {
display: block !important;
line-height: var(--apl-ui-line-normal) !important;
margin: 0 !important;
max-width: 100%;
overflow-wrap: anywhere;
position: static !important;
}
/* Keep Janox-enhanced date/time controls as one connected field inside rebuilt drawers. */
body.janox-template .apl-drawer-form .input-group.janox-datetime-group {
align-items: stretch !important;
border-collapse: separate !important;
display: flex !important;
max-width: 100% !important;
width: 100% !important;
}
body.janox-template .apl-drawer-form .input-group.janox-datetime-group > .form-control {
border-radius: var(--apl-ui-radius-md) 0 0 var(--apl-ui-radius-md) !important;
display: block !important;
flex: 1 1 0 !important;
float: none !important;
margin: 0 !important;
min-width: 0 !important;
width: auto !important;
}
body.janox-template .apl-drawer-form .input-group.janox-datetime-group > .input-group-addon {
align-items: center !important;
background: var(--apl-ui-color-surface-muted) !important;
border: 1px solid var(--apl-ui-color-border) !important;
border-left: 0 !important;
border-radius: 0 var(--apl-ui-radius-md) var(--apl-ui-radius-md) 0 !important;
display: flex !important;
flex: 0 0 34px !important;
height: 34px !important;
justify-content: center !important;
margin: 0 !important;
min-width: 34px !important;
padding: 0 !important;
width: 34px !important;
}
body.janox-template .apl-drawer-form .input-group.janox-datetime-group > .input-group-addon > i {
line-height: 1 !important;
margin: 0 !important;
position: static !important;
}
/* ======================================================================
* APL REBUILT DESIGN SYSTEM - API DE COMPONENTES Y UTILIDADES (v2)
*
* Activacion de una vista:
* ...
* o ...
*
* Convenciones:
* - Usar tokens --apl-ui-*; no fijar colores, fuentes o pesos en la vista.
* - Usar componentes .apl-* para patrones repetibles.
* - 700 es el peso maximo permitido dentro de superficies reconstruidas.
* - Los estilos heredados solo se adaptan bajo .apl-rebuilt-page.
* ====================================================================== */
:root {
/* Escala adicional para paginas y componentes */
--apl-ui-font-size-page-title: 24px;
--apl-ui-font-size-section-title: 18px;
--apl-ui-font-size-button: var(--apl-ui-font-size-control);
--apl-ui-letter-spacing-label: .04em;
/* Espaciado extendido */
--apl-ui-space-0: 0;
--apl-ui-space-5: 20px;
--apl-ui-space-6: 24px;
--apl-ui-density-field-gap: var(--apl-ui-space-2);
--apl-ui-density-section-gap: var(--apl-ui-space-3);
--apl-ui-density-surface-padding: var(--apl-ui-space-3);
--apl-ui-page-gap: var(--apl-ui-density-section-gap);
--apl-ui-page-margin-bottom: 15px;
--apl-ui-page-max-width: 1920px;
--apl-ui-property-contact-table-min-width: 1120px;
--apl-ui-property-contact-relations-min-width: 880px;
--apl-ui-property-contact-form-max-width: 760px;
/* Geometria y controles */
--apl-ui-radius-card: 14px;
--apl-ui-radius-control: var(--apl-ui-radius-md);
--apl-ui-control-height-sm: 30px;
--apl-ui-control-height: 34px;
--apl-ui-control-height-lg: 38px;
--apl-ui-control-affix-width: var(--apl-ui-control-height);
--apl-ui-table-group-header-height: calc(var(--apl-ui-control-height-sm) - var(--apl-ui-space-2));
--apl-ui-filter-action-height: var(--apl-ui-control-height);
--apl-ui-icon-button-size: var(--apl-ui-control-height);
--apl-ui-border-width: 1px;
--apl-ui-opacity-disabled: .55;
--apl-ui-query-search-min: 260px;
--apl-ui-query-field-min: 150px;
--apl-ui-page-copy-min: 320px;
--apl-ui-dian-list-table-min-width: 960px;
--apl-ui-dian-manager-table-min-width: 720px;
--apl-ui-dian-form-aside-width: 280px;
--apl-ui-dian-form-actions-width: 320px;
--apl-ui-dian-financial-metric-min-width: 150px;
--apl-ui-dian-detail-section-min-width: 360px;
--apl-ui-dian-detail-metric-min-width: 112px;
--apl-ui-dian-detail-fact-min-width: 180px;
--apl-ui-dian-line-primary-min-width: 320px;
--apl-ui-dian-line-field-min-width: 140px;
--apl-ui-dian-dialog-width: 640px;
--apl-ui-dian-textarea-min-height: 76px;
--apl-ui-dian-event-label-width: 180px;
--apl-ui-dian-frame-height: 620px;
--apl-ui-notice-copy-min: 260px;
--apl-ui-tab-navigation-min-width: 190px;
--apl-ui-tab-navigation-min-height: 52px;
--apl-ui-signature-preview-width: 137px;
--apl-ui-signature-icon-size: var(--apl-ui-control-height);
--apl-ui-signature-copy-min: var(--apl-ui-tab-navigation-min-width);
--apl-ui-step-marker-size: var(--apl-ui-control-height-sm);
--apl-ui-shadow-focus: 0 0 0 var(--apl-ui-space-1) var(--apl-ui-focus-brand);
/* Autenticación reconstruida */
--apl-ui-auth-shell-max-width: 1120px;
--apl-ui-auth-story-width: 420px;
--apl-ui-auth-workspace-width: 520px;
--apl-ui-auth-shell-min-height: 640px;
--apl-ui-auth-panel-min-height: 340px;
--apl-ui-auth-brand-mark-size: 48px;
--apl-ui-auth-method-icon-size: 42px;
--apl-ui-auth-method-min-height: 74px;
--apl-ui-auth-otp-height: 62px;
--apl-ui-auth-otp-letter-spacing: .38em;
--apl-ui-auth-copy-width: 58ch;
--apl-ui-auth-account-min: 180px;
/* Identidad pública, OAuth y documentos legales */
--apl-ui-public-shell-max-width: 1120px;
--apl-ui-public-copy-width: 68ch;
--apl-ui-public-document-width: 780px;
--apl-ui-public-nav-width: 210px;
--apl-ui-public-brand-mark-size: 42px;
--apl-ui-public-flow-icon-size: 42px;
--apl-ui-public-card-min: 230px;
--apl-ui-public-sticky-offset: 76px;
--apl-ui-public-hero-min-height: 380px;
/* Cambio de contraseña reconstruido */
--apl-ui-password-page-max-width: 1080px;
--apl-ui-password-rail-width: 290px;
--apl-ui-password-method-min: 230px;
--apl-ui-password-workspace-min-height: 520px;
--apl-ui-password-meter-height: 6px;
--apl-ui-password-success-mark-size: 64px;
--apl-ui-password-setup-width: 560px;
--apl-ui-password-copy-width: 68ch;
--apl-ui-library-sidebar-width: 248px;
--apl-ui-library-tree-sidebar-width: 352px;
--apl-ui-library-copy-width: 760px;
--apl-ui-library-search-min: var(--apl-ui-query-search-min);
--apl-ui-library-filter-min: var(--apl-ui-query-field-min);
--apl-ui-library-card-min: 238px;
--apl-ui-library-folder-card-min: 230px;
--apl-ui-library-form-aside: 290px;
--apl-ui-library-metric-icon: 42px;
--apl-ui-library-file-icon: 46px;
--apl-ui-library-thumbnail-height: 168px;
--apl-ui-library-list-thumbnail-width: 96px;
--apl-ui-library-list-thumbnail-min-height: 96px;
--apl-ui-library-folder-icon: 40px;
--apl-ui-library-dropzone-height: 180px;
--apl-ui-library-upload-dropzone-height: 112px;
--apl-ui-library-upload-dialog-width: 720px;
--apl-ui-library-upload-selection-height: 160px;
--apl-ui-library-path-dialog-width: 520px;
--apl-ui-library-selection-height: 260px;
--apl-ui-library-empty-height: 220px;
--apl-ui-library-viewer-width: 1060px;
--apl-ui-library-viewer-height: 82vh;
--apl-ui-library-viewer-height-mobile: 92vh;
--apl-ui-library-resident-min-height: 420px;
--apl-ui-library-skeleton-height: 168px;
--apl-ui-library-tree-height: 520px;
--apl-ui-library-tree-indent-1: 22px;
--apl-ui-library-tree-indent-2: 34px;
--apl-ui-library-tree-indent-3: 46px;
--apl-ui-library-tree-indent-4: 58px;
--apl-ui-library-tree-indent-5: 70px;
--apl-ui-library-explorer-folder-min: 210px;
--apl-ui-library-folder-picker-width: 720px;
--apl-ui-library-folder-picker-list-height: 340px;
--apl-ui-library-tree-menu-width: 292px;
--apl-ui-library-tree-action-dialog-width: 520px;
/* Paz y salvos reconstruidos */
--apl-ui-peace-logo-size: 52px;
--apl-ui-peace-color-field-min: 120px;
--apl-ui-peace-color-picker-size: var(--apl-ui-control-height-lg);
--apl-ui-peace-document-preview-height: 620px;
--apl-ui-peace-document-primary: #133859;
--apl-ui-peace-document-accent: #c6912d;
--apl-ui-peace-document-accent-dark: #694f19;
--apl-ui-peace-document-soft: #f1f3f5;
--apl-ui-peace-document-accent-soft: #f9f4ea;
--apl-ui-peace-document-line: #cbd3da;
--apl-ui-peace-document-accent-line: #eddcbc;
--apl-ui-peace-document-ink: #112d46;
--apl-ui-batch-progress-value: 0;
/* Proveedores reconstruidos */
--apl-ui-provider-drawer-width: 960px;
--apl-ui-provider-workspace-drawer-width: 1180px;
--apl-ui-provider-import-width: 980px;
--apl-ui-provider-sector-width: 660px;
--apl-ui-provider-primary-width: 260px;
--apl-ui-provider-operation-width: 240px;
--apl-ui-provider-related-width: 190px;
--apl-ui-provider-preview-height: 360px;
/* Modal de espacio de trabajo */
--apl-ui-modal-workspace-max-width: 1440px;
--apl-ui-modal-workspace-viewport-gap: 24px;
/* Facturas reconstruidas */
--apl-ui-invoices-filter-min: 220px;
--apl-ui-invoices-option-min: 250px;
--apl-ui-invoices-picker-height: 280px;
--apl-ui-invoices-picker-min-width: 280px;
--apl-ui-invoices-search-min: 260px;
--apl-ui-invoices-search-max: 520px;
--apl-ui-invoices-table-min-width: 1060px;
--apl-ui-invoices-table-cell-padding-block: var(--apl-ui-space-1);
--apl-ui-invoices-table-action-size: var(--apl-ui-control-height-sm);
--apl-ui-invoices-dialog-width: 520px;
--apl-ui-invoices-viewer-width: 1120px;
--apl-ui-invoices-drawer-width: 840px;
--apl-ui-invoices-send-column-min: 340px;
--apl-ui-billing-dialog-width: 840px;
--apl-ui-billing-card-min-width: 250px;
--apl-ui-billing-panel-min-width: 300px;
--apl-ui-billing-table-min-width: 820px;
--apl-ui-billing-order-max-width: 760px;
--apl-ui-billing-icon-size: 42px;
--apl-ui-billing-notice-max-height: 320px;
--apl-ui-billing-number-width: 150px;
/* Comunicados masivos por WhatsApp reconstruidos */
--apl-ui-wa-composer-column-min: 360px;
--apl-ui-wa-template-picker-min: 220px;
--apl-ui-wa-preview-min-height: 420px;
--apl-ui-wa-preview-media-height: 220px;
--apl-ui-wa-dialog-width: 760px;
--apl-ui-wa-detail-width: 980px;
--apl-ui-wa-dropzone-min-height: 132px;
--apl-ui-wa-progress-height: 8px;
--apl-ui-invoices-viewer-height: 72vh;
--apl-ui-invoices-viewer-status-width: 520px;
--apl-ui-invoices-viewer-status-icon: 64px;
--apl-ui-invoices-viewer-status-glyph: 28px;
--apl-ui-invoices-viewer-progress-height: 6px;
--apl-ui-invoices-viewer-progress-start: .18;
--apl-ui-color-scrim: rgba(15, 23, 42, .62);
--apl-ui-invoices-payment-width: 900px;
--apl-ui-invoices-payment-icon: 48px;
--apl-ui-invoices-payment-card-min: 320px;
--apl-ui-status-height: 22px;
--apl-ui-duration-skeleton: 900ms;
--apl-ui-opacity-muted: .62;
/* Empresas reconstruidas */
--apl-ui-companies-search-min: 320px;
--apl-ui-companies-filter-min: 210px;
--apl-ui-companies-record-min: 180px;
--apl-ui-companies-action-min: 118px;
--apl-ui-companies-form-min: 260px;
--apl-ui-companies-toggle-min: 280px;
--apl-ui-companies-document-min: 300px;
--apl-ui-companies-provider-min: 420px;
--apl-ui-companies-upload-min: 250px;
--apl-ui-companies-picker-height: 300px;
--apl-ui-companies-picker-min-width: 280px;
--apl-ui-companies-modal-width: 680px;
--apl-ui-companies-section-icon: 38px;
--apl-ui-companies-empty-height: 180px;
--apl-ui-companies-processing-icon: 56px;
--apl-ui-companies-sticky-offset: 12px;
--apl-ui-companies-workspace-nav-min: 126px;
--apl-ui-companies-description-limit: 72ch;
--apl-ui-companies-details-height: 190px;
--apl-ui-companies-scrim: var(--apl-ui-color-scrim);
--apl-ui-companies-record-columns: 5;
--apl-ui-companies-modal-max-height: 92vh;
/* Editores maestros de inmuebles y contactos */
--apl-ui-entity-sidebar-width: var(--apl-ui-library-sidebar-width);
--apl-ui-entity-copy-width: var(--apl-ui-companies-description-limit);
--apl-ui-entity-sticky-offset: var(--apl-ui-companies-sticky-offset);
--apl-ui-entity-textarea-min-height: calc(var(--apl-ui-control-height) * 2);
/* Vista previa de sobres físicos */
--apl-ui-envelope-manila: #d9bd88;
--apl-ui-envelope-manila-light: #ead7ad;
--apl-ui-envelope-manila-deep: #c49d60;
--apl-ui-envelope-ink: #45351f;
--apl-ui-envelope-ink-muted: #705a37;
--apl-ui-envelope-seam: rgba(88, 63, 28, .24);
--apl-ui-envelope-shadow: 0 18px 38px rgba(88, 63, 28, .18);
--apl-ui-companies-envelope-editor-min: 420px;
--apl-ui-companies-envelope-preview-min: 360px;
--apl-ui-companies-envelope-preview-max: 420px;
--apl-ui-envelope-logo-left: 66.4660%;
--apl-ui-envelope-logo-top: 6.0845%;
--apl-ui-envelope-logo-width: 24.1779%;
--apl-ui-envelope-sender-left: 9.2635%;
--apl-ui-envelope-sender-top: 7.1582%;
--apl-ui-envelope-sender-width: 50.0232%;
--apl-ui-envelope-recipient-left: 24.5484%;
--apl-ui-envelope-recipient-top: 30.7802%;
--apl-ui-envelope-recipient-width: 66.1881%;
--apl-ui-envelope-alternate-top: 50.4653%;
--apl-ui-envelope-content-left: 9.2635%;
--apl-ui-envelope-content-top: 66.9291%;
--apl-ui-envelope-content-qr-width: 25.0116%;
--apl-ui-envelope-content-full-width: 81.4729%;
--apl-ui-envelope-qr-left: 37.9574%;
--apl-ui-envelope-qr-top: 70.1503%;
--apl-ui-envelope-qr-size: 24.0852%;
--apl-ui-envelope-date-left: 37.9574%;
--apl-ui-envelope-date-top: 67.1081%;
--apl-ui-envelope-date-width: 24.0852%;
--apl-ui-envelope-agm-left: 9.2635%;
--apl-ui-envelope-agm-top: 90.3722%;
--apl-ui-envelope-agm-width: 81.4729%;
/* Procesamiento de facturación para analistas */
--apl-ui-analyst-upload-min: 260px;
--apl-ui-analyst-aside-width: 320px;
--apl-ui-analyst-dropzone-height: 150px;
--apl-ui-analyst-modal-width: 760px;
--apl-ui-analyst-modal-compact-width: 420px;
--apl-ui-analyst-modal-max-height: 88vh;
--apl-ui-analyst-step-marker: 28px;
--apl-ui-analyst-progress-height: 8px;
--apl-ui-analyst-progress-value: 0;
--apl-ui-analyst-result-min: 300px;
--apl-ui-analyst-detail-width: 74ch;
--apl-ui-analyst-scrim: var(--apl-ui-color-scrim);
/* Mensajes de factura reconstruidos */
--apl-ui-messages-content-min: 620px;
--apl-ui-messages-aside-width: 360px;
--apl-ui-messages-card-min: 260px;
--apl-ui-messages-table-min-width: 980px;
--apl-ui-messages-audit-min-width: 680px;
--apl-ui-messages-copy-max: 76ch;
--apl-ui-messages-preview-min-height: 132px;
--apl-ui-messages-selection-height: 440px;
--apl-ui-messages-dialog-width: 540px;
--apl-ui-messages-preview-width: 960px;
--apl-ui-communications-impact-dialog-width: 1120px;
--apl-ui-messages-dialog-max-height: 88vh;
--apl-ui-messages-status-icon: 40px;
/* Cartas de mora reconstruidas */
--apl-ui-debt-editor-aside-width: 390px;
--apl-ui-debt-table-min-width: 920px;
--apl-ui-debt-dialog-width: 900px;
--apl-ui-debt-composer-width: 760px;
--apl-ui-debt-preview-min-height: 560px;
--apl-ui-debt-picker-height: 360px;
--apl-ui-debt-frame-height: 68vh;
--apl-ui-debt-copy-width: 76ch;
--apl-ui-debt-preview-logo-width: 68px;
--apl-ui-debt-preview-logo-height: 44px;
--apl-ui-debt-document-primary: #133859;
--apl-ui-debt-document-accent: #c6912d;
--apl-ui-debt-document-accent-dark: #694f19;
--apl-ui-debt-document-soft: #f1f3f5;
--apl-ui-debt-document-accent-soft: #f9f4ea;
--apl-ui-debt-document-line: #cbd3da;
--apl-ui-debt-document-accent-line: #eddcbc;
--apl-ui-debt-document-ink: #112d46;
/* Liquidación detallada de comisiones */
--apl-ui-settlement-table-min-width: 920px;
--apl-ui-settlement-services-min-width: 980px;
--apl-ui-settlement-dialog-width: 1280px;
--apl-ui-settlement-search-width: var(--apl-ui-page-copy-min);
/* Espacio de trabajo de planillas */
--apl-ui-planillas-table-min-width: 880px;
--apl-ui-planillas-row-height: 52px;
--apl-ui-planillas-drawer-width: 480px;
--apl-ui-planillas-dialog-width: 520px;
--apl-ui-planillas-form-width: 980px;
--apl-ui-planillas-detail-min-width: 170px;
--apl-ui-planillas-code-width: 260px;
--apl-ui-planillas-toast-width: 360px;
--apl-ui-planillas-viewer-height: calc(100vh - 250px);
--apl-ui-planillas-viewer-min-height: 520px;
--apl-ui-planillas-empty-height: 180px;
/* Identificación de ingresos bancarios */
--apl-ui-income-table-min-width: 1380px;
--apl-ui-income-movement-min-width: 220px;
--apl-ui-income-date-min-width: 154px;
--apl-ui-income-bank-min-width: 128px;
--apl-ui-income-property-min-width: 560px;
--apl-ui-income-observation-min-width: 180px;
--apl-ui-income-search-width: 420px;
--apl-ui-income-drawer-width: 1040px;
--apl-ui-income-picker-width: 760px;
--apl-ui-income-picker-height: 420px;
--apl-ui-income-property-preview-width: 560px;
--apl-ui-income-upload-width: 920px;
--apl-ui-income-error-width: 1120px;
--apl-ui-income-audit-width: 980px;
--apl-ui-income-detail-width: 680px;
--apl-ui-income-dropzone-height: 132px;
--apl-ui-income-textarea-height: calc(var(--apl-ui-control-height) * 2);
--apl-ui-income-metric-min-width: 150px;
--apl-ui-income-row-actions-width: 146px;
--apl-ui-income-progress-height: 6px;
--apl-ui-income-reference-width: 22ch;
--apl-ui-income-copy-width: 76ch;
--apl-ui-income-secondary-table-min-width: 780px;
--apl-ui-income-empty-height: 140px;
--apl-ui-income-audit-label-width: 150px;
--apl-ui-income-audit-field-width: 220px;
--apl-ui-income-audit-arrow-rotation: 90deg;
/* Dialogos, métricas y paginación reutilizables */
--apl-ui-dialog-width: 560px;
--apl-ui-dialog-max-height: 88vh;
--apl-ui-assets-page-size-width: 88px;
--apl-ui-assets-detail-drawer-width: 560px;
--apl-ui-assets-summary-min-width: 150px;
--apl-ui-assets-form-field-min-width: 220px;
--apl-ui-assets-form-aside-width: 300px;
--apl-ui-assets-textarea-min-height: 92px;
--apl-ui-assets-upload-min-height: 112px;
--apl-ui-assets-dialog-width: 640px;
--apl-ui-assets-catalog-drawer-width: 520px;
--apl-ui-assets-maintenance-drawer-width: 760px;
--apl-ui-assets-frame-height: 100%;
--apl-ui-close-control-dialog-width: 1180px;
--apl-ui-close-control-table-min-width: 980px;
--apl-ui-close-control-owner-width: 260px;
--apl-ui-print-readings-dialog-width: 920px;
--apl-ui-print-reading-measure-min-height: calc(var(--apl-ui-control-height-lg) + var(--apl-ui-space-5));
--apl-ui-print-reading-note-min-height: calc(var(--apl-ui-control-height) * 2);
--apl-ui-community-catalog-drawer-width: 720px;
--apl-ui-codex-audit-drawer-width: 1120px;
--apl-ui-codex-audit-summary-min-width: 240px;
--apl-ui-community-audit-search-width: 340px;
--apl-ui-community-audit-table-min-width: 720px;
--apl-ui-community-audit-field-width: 180px;
--apl-ui-community-audit-fact-min-width: 150px;
--apl-ui-assignments-dashboard-height: calc(100vh - var(--shell-topbar-height, calc(var(--apl-ui-control-height-lg) + var(--apl-ui-control-height-lg))) - var(--shell-footer-height, var(--apl-ui-control-height-lg)) - var(--apl-ui-space-2));
--apl-ui-assignments-frame-height: calc(var(--apl-ui-dialog-max-height) - (var(--apl-ui-control-height-lg) * 2));
--apl-ui-metric-min-width: 170px;
--apl-ui-alert-item-min-width: 250px;
--apl-ui-pager-button-size: var(--apl-ui-control-height-sm);
--apl-ui-search-select-menu-height: 300px;
--apl-ui-search-select-option-height: var(--apl-ui-control-height-sm);
--apl-ui-search-select-indicator-size: calc(var(--apl-ui-space-4) + (var(--apl-ui-border-width) * 2));
/* Movimiento */
--apl-ui-duration-fast: 140ms;
--apl-ui-duration-normal: 200ms;
--apl-ui-ease-standard: ease;
/* Capas: los controles flotantes superan acciones sticky sin invadir modales */
--apl-ui-z-base: 0;
--apl-ui-z-dropdown: 1025;
--apl-ui-z-sticky: 1020;
--apl-ui-z-backdrop: 1030;
--apl-ui-z-modal: 1040;
--apl-ui-z-modal-dialog: 1050;
--apl-ui-z-modal-raised: 1060;
--apl-ui-z-shell: 1100;
--apl-ui-z-overlay: 20000;
--apl-ui-z-picker: 21000;
--apl-ui-z-toast: 200000;
--apl-ui-date-picker-width: 276px;
--apl-ui-date-picker-day-size: 30px;
--apl-ui-date-picker-day-width: 14.2857142857%;
--apl-ui-date-picker-nav-size: var(--apl-ui-date-picker-day-size);
--apl-ui-date-picker-padding: var(--apl-ui-space-1);
--apl-ui-date-picker-gap: calc(var(--apl-ui-space-1) / 2);
--apl-ui-date-picker-font-size: var(--apl-ui-font-size-detail);
--apl-ui-date-picker-title-font-size: var(--apl-ui-font-size-control);
--apl-ui-date-picker-trigger-icon-size: var(--apl-ui-font-size-heading-sm);
--apl-ui-date-picker-viewport-gap: var(--apl-ui-space-2);
/* Paleta del shell/menu nuevo */
--apl-ui-color-shell-bg: #111b21;
--apl-ui-color-shell-bg-alt: #0f1a20;
--apl-ui-color-shell-surface: #15212a;
--apl-ui-color-shell-surface-alt: #1d2b36;
--apl-ui-color-shell-border: rgba(233, 237, 239, .10);
--apl-ui-color-shell-border-strong: rgba(83, 189, 235, .24);
--apl-ui-color-shell-text: #e9edef;
--apl-ui-color-shell-muted: #93a8b3;
--apl-ui-color-shell-accent: #53bdeb;
--apl-ui-color-shell-accent-strong: #00a884;
--apl-ui-color-shell-shadow: rgba(0, 0, 0, .34);
}
/* Variables consumidas por el shell. Los media queries del menu pueden
* sobrescribirlas porque su CSS se carga despues de esta hoja. */
body {
--shell-safe-area-top: 0px;
--shell-safe-area-bottom: 0px;
--shell-topbar-content-height: 40px;
--shell-footer-content-height: 46px;
--shell-topbar-height: calc(var(--shell-topbar-content-height) + var(--shell-safe-area-top));
--shell-footer-height: calc(var(--shell-footer-content-height) + var(--shell-safe-area-bottom));
--shell-sidebar-expanded-width: min(340px, 88vw);
--shell-sidebar-collapsed-width: 64px;
--shell-sidebar-rail-item-size: 36px;
--shell-content-gap: 10px;
--shell-content-inline-padding: 12px;
--shell-sidebar-width: var(--shell-sidebar-expanded-width);
--shell-ui-font: var(--apl-ui-font-family);
--shell-font-label: var(--apl-ui-font-size-micro);
--shell-font-meta: var(--apl-ui-font-size-base);
--shell-font-body: var(--apl-ui-font-size-base);
--shell-font-title: var(--apl-ui-font-size-label-lg);
--shell-font-value: var(--apl-ui-font-size-heading-sm);
--shell-line-tight: 1.1;
--shell-line-normal: 1.2;
--shell-weight-regular: var(--apl-ui-font-weight-regular);
--shell-weight-medium: var(--apl-ui-font-weight-medium);
--shell-weight-semibold: var(--apl-ui-font-weight-semibold);
--shell-weight-bold: var(--apl-ui-font-weight-bold);
}
@media (max-width: 980px) {
body {
--shell-footer-content-height: 44px;
}
}
body.chat-sidebar-dark {
--shell-sidebar-dark-bg: var(--apl-ui-color-shell-bg);
--shell-sidebar-dark-bg-alt: var(--apl-ui-color-shell-bg-alt);
--shell-sidebar-dark-surface: var(--apl-ui-color-shell-surface);
--shell-sidebar-dark-surface-alt: var(--apl-ui-color-shell-surface-alt);
--shell-sidebar-dark-border: var(--apl-ui-color-shell-border);
--shell-sidebar-dark-border-strong: var(--apl-ui-color-shell-border-strong);
--shell-sidebar-dark-text: var(--apl-ui-color-shell-text);
--shell-sidebar-dark-muted: var(--apl-ui-color-shell-muted);
--shell-sidebar-dark-accent: var(--apl-ui-color-shell-accent);
--shell-sidebar-dark-accent-strong: var(--apl-ui-color-shell-accent-strong);
--shell-sidebar-dark-shadow: var(--apl-ui-color-shell-shadow);
}
/* Alcance reconstruido */
.apl-rebuilt,
[data-apl-ui="rebuilt"],
.apl-tcn-data-grid,
.apl-db-super,
.apl-send,
.apl-drawer-form {
color: var(--apl-ui-color-text-body);
font-family: var(--apl-ui-font-family);
font-size: var(--apl-ui-font-size-body);
font-weight: var(--apl-ui-font-weight-regular);
line-height: var(--apl-ui-line-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.apl-tcn-data-grid--facturas .facturas-action-btn-rec,
#apl-tcn-results .apl-tcn-data-grid--facturas .facturas-action-btn-rec {
background: var(--apl-ui-color-warning-soft) !important;
border-color: var(--apl-ui-color-warning-border) !important;
color: var(--apl-ui-color-warning-dark) !important;
}
.apl-tcn-data-grid--facturas .facturas-action-btn-rec:hover,
.apl-tcn-data-grid--facturas .facturas-action-btn-rec:focus,
#apl-tcn-results .apl-tcn-data-grid--facturas .facturas-action-btn-rec:hover,
#apl-tcn-results .apl-tcn-data-grid--facturas .facturas-action-btn-rec:focus {
background: var(--apl-ui-color-accent-soft) !important;
border-color: var(--apl-ui-color-accent-border-soft) !important;
box-shadow: var(--apl-ui-shadow-accent-focus) !important;
color: var(--apl-ui-color-warning-dark) !important;
}
.apl-rebuilt *,
.apl-rebuilt *::before,
.apl-rebuilt *::after,
[data-apl-ui="rebuilt"] *,
[data-apl-ui="rebuilt"] *::before,
[data-apl-ui="rebuilt"] *::after {
box-sizing: border-box;
}
/* El atributo hidden siempre prevalece sobre el display de los componentes. */
.apl-rebuilt[hidden],
.apl-rebuilt [hidden],
[data-apl-ui="rebuilt"][hidden],
[data-apl-ui="rebuilt"] [hidden] {
display: none !important;
}
.apl-visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: var(--apl-ui-border-width);
margin: calc(var(--apl-ui-border-width) * -1);
overflow: hidden;
padding: var(--apl-ui-space-0);
position: absolute;
white-space: nowrap;
width: var(--apl-ui-border-width);
}
.apl-rebuilt strong,
.apl-rebuilt b,
[data-apl-ui="rebuilt"] strong,
[data-apl-ui="rebuilt"] b {
font-weight: var(--apl-ui-font-weight-bold);
}
/* Pagina, hero y tarjetas */
.apl-page,
.apl-rebuilt-page {
box-sizing: border-box;
color: var(--apl-ui-color-text);
display: flex;
flex-direction: column;
gap: var(--apl-ui-page-gap);
margin: 0 auto var(--apl-ui-page-margin-bottom);
max-width: var(--apl-ui-page-max-width);
min-width: 0;
width: 100%;
}
body.janox-template .apl-page.janox-form-container,
body.janox-template .apl-rebuilt-page.janox-form-container {
background: transparent;
border: 0;
box-shadow: none;
overflow: visible;
}
body.janox-template .apl-page.janox-form-container::before,
body.janox-template .apl-page.janox-form-container::after,
body.janox-template .apl-rebuilt-page.janox-form-container::before,
body.janox-template .apl-rebuilt-page.janox-form-container::after {
display: none;
}
.apl-page__hero,
.apl-rebuilt-page .hero-card {
align-items: flex-start;
background: var(--apl-ui-color-surface);
border: 1px solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-card);
box-shadow: var(--apl-ui-shadow-sm);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-page-gap);
justify-content: space-between;
max-width: 100%;
min-width: 0;
overflow: hidden;
padding: var(--apl-ui-space-4);
}
.apl-page__copy {
flex: 1 1 var(--apl-ui-page-copy-min);
max-width: 100%;
min-width: 0;
}
.apl-page__title,
.apl-rebuilt-page .hero-text h1 {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-page-title);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: var(--apl-ui-space-1) 0 6px;
}
.apl-page__eyebrow,
.apl-rebuilt-page .eyebrow {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
letter-spacing: .08em;
margin: 0;
text-transform: uppercase;
}
.apl-page__actions,
.apl-rebuilt-page .hero-actions,
.apl-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: flex-end;
max-width: 100%;
min-width: 0;
}
.apl-page__actions > *,
.apl-rebuilt-page .hero-actions > *,
.apl-actions > * {
max-width: 100%;
}
/*
* Densidad editorial obligatoria:
* - Cada espacio de trabajo debe tener una sola identidad primaria visible.
* - La cabecera primaria concentra nombre, ID, estado y acciones; una vista parcial
* integrada debe omitir su cabecera de identidad repetida.
* - Resúmenes y franjas inferiores muestran únicamente información nueva o accionable.
* Las excepciones por seguridad operativa deben documentarse en la vista.
*/
/* Franja contextual compacta: identidad y metadatos sin convertirlos en un banner protagonista. */
.apl-context-bar {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-card);
box-shadow: var(--apl-ui-shadow-sm);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2) var(--apl-ui-space-4);
justify-content: space-between;
min-height: var(--apl-ui-control-height-lg);
min-width: 0;
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-context-bar__main {
align-items: center;
display: flex;
flex: 1 1 var(--apl-ui-page-copy-min);
gap: var(--apl-ui-space-3);
min-width: 0;
}
.apl-context-bar__title {
color: var(--apl-ui-color-text-strong);
flex: 1 1 auto;
font-size: var(--apl-ui-font-size-heading-lg);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apl-context-bar__meta {
align-items: center;
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
}
.apl-context-bar__meta span {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-badge);
color: var(--apl-ui-color-text-muted);
display: inline-flex;
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
gap: var(--apl-ui-space-1);
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
}
/* Cabecera operativa compacta para procesos y acciones de contexto. */
.apl-command-hero {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-card);
box-shadow: var(--apl-ui-shadow-sm);
max-width: 100%;
min-width: 0;
padding: var(--apl-ui-density-surface-padding);
}
.apl-command-hero__top {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-3);
justify-content: space-between;
max-width: 100%;
min-width: 0;
}
.apl-command-hero__copy {
flex: 1 1 var(--apl-ui-page-copy-min);
min-width: 0;
}
.apl-command-hero__actions {
align-items: stretch;
display: flex;
flex: 0 1 auto;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: flex-end;
max-width: 100%;
min-width: 0;
}
.apl-command-action {
align-items: center;
appearance: none;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
color: var(--apl-ui-color-text-body);
display: inline-flex;
font-family: var(--apl-ui-font-family);
gap: var(--apl-ui-space-2);
line-height: var(--apl-ui-line-tight);
margin: 0;
max-width: 100%;
min-width: var(--apl-ui-query-field-min);
padding: var(--apl-ui-space-2);
text-align: left;
text-decoration: none;
transition: background var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), border-color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), box-shadow var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
}
.apl-command-action:hover,
.apl-command-action:focus {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-text-strong);
text-decoration: none;
}
.apl-command-action:focus-visible {
box-shadow: var(--apl-ui-shadow-focus);
outline: 0;
}
.apl-command-action--danger {
background: var(--apl-ui-color-danger-soft);
border-color: var(--apl-ui-color-danger-border);
color: var(--apl-ui-color-danger-dark);
}
.apl-command-action--danger:hover,
.apl-command-action--danger:focus {
background: var(--apl-ui-color-danger-soft);
border-color: var(--apl-ui-color-danger-dark);
color: var(--apl-ui-color-danger-dark);
}
.apl-command-action__copy {
min-width: 0;
}
.apl-command-action__copy strong,
.apl-command-action__copy small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apl-command-action__copy strong {
color: inherit;
font-size: var(--apl-ui-font-size-button);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-command-action__copy small {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-context-strip {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: grid;
gap: var(--apl-ui-space-1);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-metric-min-width)), 1fr));
margin-top: var(--apl-ui-space-3);
max-width: 100%;
min-width: 0;
padding: var(--apl-ui-space-2);
}
.apl-context-strip__item {
align-items: baseline;
display: flex;
gap: var(--apl-ui-space-2);
min-width: 0;
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
}
.apl-context-strip__label {
color: var(--apl-ui-color-text-subtle);
flex: 0 0 auto;
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-context-strip__value {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-body);
font-weight: var(--apl-ui-font-weight-semibold);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apl-card,
.apl-rebuilt-page .card {
background: var(--apl-ui-color-surface);
border: 1px solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-card);
box-shadow: var(--apl-ui-shadow-sm);
max-width: 100%;
min-width: 0;
}
.apl-card--flat { box-shadow: none; }
.apl-card--interactive { transition: border-color var(--apl-ui-duration-normal) var(--apl-ui-ease-standard), box-shadow var(--apl-ui-duration-normal) var(--apl-ui-ease-standard); }
.apl-card--interactive:hover { border-color: var(--apl-ui-color-brand-border); box-shadow: var(--apl-ui-shadow-md); }
.apl-card__header { align-items: center; border-bottom: 1px solid var(--apl-ui-color-row-divider); display: flex; flex-wrap: wrap; gap: var(--apl-ui-space-2); justify-content: space-between; min-height: 44px; min-width: 0; padding: 9px var(--apl-ui-space-3); }
.apl-card__header > * { max-width: 100%; min-width: 0; }
.apl-card__heading { align-items: center; display: flex; gap: var(--apl-ui-space-2); min-width: var(--apl-ui-space-0); }
.apl-card__title { color: var(--apl-ui-color-text-strong); font-size: var(--apl-ui-font-size-section-title); font-weight: var(--apl-ui-font-weight-bold); line-height: var(--apl-ui-line-tight); margin: 0; }
.apl-card__subtitle { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-detail); margin: 2px 0 0; }
.apl-card__body { padding: var(--apl-ui-density-surface-padding); }
.apl-card__footer { align-items: center; background: var(--apl-ui-color-surface-subtle); border-top: 1px solid var(--apl-ui-color-row-divider); display: flex; gap: var(--apl-ui-space-2); justify-content: flex-end; padding: 9px var(--apl-ui-space-3); }
/*
* Etiquetas con icono: la separación pertenece al sistema, no al espacio
* escrito en cada plantilla. Así los títulos conservan el mismo ritmo aunque
* el icono y el texto estén contiguos en el HTML.
*/
.apl-icon-label,
.apl-disclosure > summary > span:not(.apl-icon-frame):not(.apl-badge):not(.apl-status) {
align-items: center;
display: inline-flex;
gap: var(--apl-ui-space-1);
min-width: var(--apl-ui-space-0);
}
.apl-page__title > i.fa:first-child,
.apl-context-bar__title > i.fa:first-child,
.apl-card__title > i.fa:first-child,
.apl-card__subtitle > i.fa:first-child,
.apl-dialog__title > i.fa:first-child,
.apl-dialog__subtitle > i.fa:first-child {
margin-inline-end: var(--apl-ui-space-1);
}
/* Resumen compacto y reutilizable para contextos financieros y operativos. */
.apl-summary-item {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-1);
min-width: 0;
padding: var(--apl-ui-space-3);
}
.apl-summary-item > span,
.apl-summary-item > small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
}
.apl-summary-item > strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title);
font-weight: var(--apl-ui-font-weight-bold);
overflow-wrap: anywhere;
}
/* Marcos de iconos: protegen centrado y geometria frente a estilos heredados. */
.apl-icon-frame {
align-items: center !important;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft);
border-radius: var(--apl-ui-radius-md);
box-sizing: border-box !important;
color: var(--apl-ui-color-brand-dark);
display: inline-flex !important;
flex: 0 0 var(--apl-ui-icon-button-size);
float: none !important;
height: var(--apl-ui-icon-button-size);
justify-content: center !important;
line-height: var(--apl-ui-line-icon) !important;
margin: 0;
min-width: var(--apl-ui-icon-button-size);
overflow: hidden;
padding: 0 !important;
position: static !important;
text-align: center;
vertical-align: middle !important;
width: var(--apl-ui-icon-button-size);
}
.apl-icon-frame--sm {
flex-basis: var(--apl-ui-control-height-sm);
height: var(--apl-ui-control-height-sm);
min-width: var(--apl-ui-control-height-sm);
width: var(--apl-ui-control-height-sm);
}
.apl-icon-frame--lg {
flex-basis: var(--apl-ui-control-height-lg);
height: var(--apl-ui-control-height-lg);
min-width: var(--apl-ui-control-height-lg);
width: var(--apl-ui-control-height-lg);
}
.apl-icon-frame--round {
border-radius: var(--apl-ui-radius-pill);
}
.apl-icon-frame--brand {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-brand-dark);
}
.apl-icon-frame--success {
background: var(--apl-ui-color-success-soft);
border-color: var(--apl-ui-color-success-border);
color: var(--apl-ui-color-success-dark);
}
.apl-icon-frame--muted {
background: var(--apl-ui-color-surface-muted);
border-color: var(--apl-ui-color-border-muted);
color: var(--apl-ui-color-text-muted);
}
.apl-icon-frame--danger {
background: var(--apl-ui-color-danger-soft);
border-color: var(--apl-ui-color-danger-border);
color: var(--apl-ui-color-danger-dark);
}
.apl-icon-frame--warning {
background: var(--apl-ui-color-warning-soft);
border-color: var(--apl-ui-color-warning-border);
color: var(--apl-ui-color-warning-dark);
}
.apl-icon-frame--info {
background: var(--apl-ui-color-info-soft);
border-color: var(--apl-ui-color-border-soft);
color: var(--apl-ui-color-info-dark);
}
.apl-icon-frame > i {
align-items: center !important;
align-self: center !important;
bottom: auto !important;
display: inline-flex !important;
float: none !important;
height: auto !important;
justify-content: center !important;
left: auto !important;
line-height: var(--apl-ui-line-icon) !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
right: auto !important;
top: auto !important;
vertical-align: middle !important;
width: auto !important;
}
.apl-icon-frame > i:not(.fa-spin) {
transform: none !important;
}
.apl-icon-frame > i.fa-spin {
transform-origin: center center !important;
}
.apl-icon-frame > i::before {
display: block !important;
line-height: var(--apl-ui-line-icon) !important;
margin: 0 !important;
position: static !important;
vertical-align: middle !important;
}
/*
* Protección transversal para contenedores semánticos de iconos.
* Evita que reglas heredadas de texto conviertan el marco en bloque o desplacen el glifo,
* incluso antes de que una vista antigua termine de migrar a .apl-icon-frame.
*/
.apl-rebuilt span[class$="__icon"],
.apl-rebuilt span[class*="__icon "],
.apl-rebuilt div[class$="__icon"],
.apl-rebuilt div[class*="__icon "],
.apl-rebuilt span[class$="__avatar"],
.apl-rebuilt span[class*="__avatar "],
.apl-rebuilt div[class$="__avatar"],
.apl-rebuilt div[class*="__avatar "],
.apl-rebuilt span[class$="__marker"],
.apl-rebuilt span[class*="__marker "],
.apl-rebuilt span[class$="__mark"],
.apl-rebuilt span[class*="__mark "],
.apl-rebuilt span[class$="__check"],
.apl-rebuilt span[class*="__check "] {
align-items: center !important;
display: inline-flex !important;
float: none !important;
justify-content: center !important;
}
.apl-rebuilt span[class$="__icon"] > i,
.apl-rebuilt span[class*="__icon "] > i,
.apl-rebuilt div[class$="__icon"] > i,
.apl-rebuilt div[class*="__icon "] > i,
.apl-rebuilt span[class$="__avatar"] > i,
.apl-rebuilt span[class*="__avatar "] > i,
.apl-rebuilt div[class$="__avatar"] > i,
.apl-rebuilt div[class*="__avatar "] > i,
.apl-rebuilt span[class$="__marker"] > i,
.apl-rebuilt span[class*="__marker "] > i,
.apl-rebuilt span[class$="__mark"] > i,
.apl-rebuilt span[class*="__mark "] > i,
.apl-rebuilt span[class$="__check"] > i,
.apl-rebuilt span[class*="__check "] > i {
align-self: center !important;
bottom: auto !important;
float: none !important;
left: auto !important;
line-height: var(--apl-ui-line-icon) !important;
margin: 0 !important;
position: static !important;
right: auto !important;
top: auto !important;
vertical-align: middle !important;
}
.apl-rebuilt span[class$="__icon"] > i::before,
.apl-rebuilt span[class*="__icon "] > i::before,
.apl-rebuilt div[class$="__icon"] > i::before,
.apl-rebuilt div[class*="__icon "] > i::before,
.apl-rebuilt span[class$="__avatar"] > i::before,
.apl-rebuilt span[class*="__avatar "] > i::before,
.apl-rebuilt div[class$="__avatar"] > i::before,
.apl-rebuilt div[class*="__avatar "] > i::before,
.apl-rebuilt span[class$="__marker"] > i::before,
.apl-rebuilt span[class*="__marker "] > i::before,
.apl-rebuilt span[class$="__mark"] > i::before,
.apl-rebuilt span[class*="__mark "] > i::before,
.apl-rebuilt span[class$="__check"] > i::before,
.apl-rebuilt span[class*="__check "] > i::before {
display: block !important;
line-height: var(--apl-ui-line-icon) !important;
margin: 0 !important;
position: static !important;
vertical-align: middle !important;
}
/* Avisos con contenido y accion: permiten reflujo sin desbordar la superficie. */
.apl-notice {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
color: var(--apl-ui-color-text-body);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
max-width: 100%;
min-width: 0;
overflow: hidden;
padding: var(--apl-ui-density-surface-padding);
}
.apl-notice--success {
background: var(--apl-ui-color-success-soft);
border-color: var(--apl-ui-color-success-border);
color: var(--apl-ui-color-success-dark);
}
.apl-notice--warning {
background: var(--apl-ui-color-warning-soft);
border-color: var(--apl-ui-color-warning-border);
color: var(--apl-ui-color-warning-dark);
}
.apl-notice--danger {
background: var(--apl-ui-color-danger-soft);
border-color: var(--apl-ui-color-danger-border);
color: var(--apl-ui-color-danger-dark);
}
/* Aviso de alta prioridad: exige atención inmediata sin depender solo del color. */
.apl-notice--prominent {
border-left-width: calc(var(--apl-ui-border-width) * 4);
box-shadow: var(--apl-ui-shadow-sm);
padding: var(--apl-ui-space-3);
}
.apl-notice--prominent.apl-notice--danger { border-color: var(--apl-ui-color-danger-dark); }
.apl-notice--prominent.apl-notice--danger .apl-icon-frame {
background: var(--apl-ui-color-danger);
border-color: var(--apl-ui-color-danger-dark);
color: var(--apl-ui-color-on-solid);
}
.apl-notice--info {
background: var(--apl-ui-color-info-soft);
border-color: var(--apl-ui-color-border-soft);
color: var(--apl-ui-color-info-dark);
}
.apl-notice__copy {
flex: 1 1 var(--apl-ui-notice-copy-min);
max-width: 100%;
min-width: 0;
}
.apl-notice__copy > strong,
.apl-notice__copy > span {
display: block;
min-width: 0;
overflow-wrap: anywhere;
}
.apl-notice__copy > span {
color: var(--apl-ui-color-text-muted);
margin-top: var(--apl-ui-space-1);
}
.apl-notice__action {
flex: 0 1 auto;
margin-left: auto;
max-width: 100%;
}
/* Listas de pasos: marcador y texto son piezas separadas y estables. */
.apl-step-list {
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-2);
list-style: none;
margin: 0;
padding: 0;
}
.apl-step {
align-items: center;
display: flex;
gap: var(--apl-ui-space-2);
min-width: 0;
}
.apl-step__marker {
align-items: center !important;
background: var(--apl-ui-color-surface-muted);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-pill);
color: var(--apl-ui-color-text-muted);
display: inline-flex !important;
flex: 0 0 var(--apl-ui-step-marker-size);
font-size: var(--apl-ui-font-size-label);
font-weight: var(--apl-ui-font-weight-semibold);
height: var(--apl-ui-step-marker-size);
justify-content: center !important;
line-height: var(--apl-ui-line-tight);
margin: 0;
min-width: var(--apl-ui-step-marker-size);
padding: 0 !important;
position: static !important;
text-align: center;
width: var(--apl-ui-step-marker-size);
}
.apl-step.is-ready .apl-step__marker {
background: var(--apl-ui-color-success-soft);
border-color: var(--apl-ui-color-success-border);
color: var(--apl-ui-color-success-dark);
}
.apl-step__marker > i {
align-items: center !important;
display: inline-flex !important;
height: auto !important;
justify-content: center !important;
line-height: var(--apl-ui-line-tight) !important;
margin: 0 !important;
position: static !important;
transform: none !important;
width: auto !important;
}
.apl-step__copy {
flex: 1 1 auto;
max-width: 100%;
min-width: 0;
}
.apl-step__copy > strong,
.apl-step__copy > span {
display: block;
min-width: 0;
overflow-wrap: anywhere;
}
.apl-step__copy > strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-step__copy > span {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
}
/* Barra de herramientas, filtros y campos */
.apl-toolbar { align-items: center; background: var(--apl-ui-color-surface); border: 1px solid var(--apl-ui-color-border-muted); border-radius: var(--apl-ui-radius-lg); display: flex; flex-wrap: wrap; gap: var(--apl-ui-space-2); justify-content: space-between; padding: 8px 10px; }
.apl-toolbar__group { align-items: center; display: flex; flex-wrap: wrap; gap: var(--apl-ui-space-2); }
.apl-check { align-items: center; color: var(--apl-ui-color-text-body); cursor: pointer; display: inline-flex; font-size: var(--apl-ui-font-size-body); gap: var(--apl-ui-space-2); margin: var(--apl-ui-space-0); min-height: var(--apl-ui-control-height-sm); }
.apl-check input[type="checkbox"] { accent-color: var(--apl-ui-color-brand); cursor: pointer; flex: 0 0 auto; height: var(--apl-ui-space-4); margin: var(--apl-ui-space-0); width: var(--apl-ui-space-4); }
.apl-check:focus-within { color: var(--apl-ui-color-text-strong); }
.apl-filter-grid, .apl-grid { display: grid; gap: var(--apl-ui-density-field-gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.apl-field-grid { display: grid; gap: var(--apl-ui-density-field-gap); grid-template-columns: repeat(2, minmax(var(--apl-ui-space-0), 1fr)); }
.apl-field-grid > * { min-width: var(--apl-ui-space-0); }
@media (max-width: 760px) { .apl-field-grid { grid-template-columns: minmax(var(--apl-ui-space-0), 1fr); } }
.apl-filter-grid { align-items: end; }
/*
* Los campos de filtro se anclan al inicio de su fila para que las ayudas,
* validaciones y contadores crezcan hacia abajo sin desplazar los controles
* vecinos. Las acciones conservan su propia alineación al final de la fila.
*/
.apl-filter-grid > .apl-field { align-self: start; }
.apl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.apl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.apl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.apl-col-1 { grid-column: span 1; }
.apl-col-2 { grid-column: span 2; }
.apl-col-3 { grid-column: span 3; }
.apl-col-4 { grid-column: span 4; }
.apl-col-5 { grid-column: span 5; }
.apl-col-6 { grid-column: span 6; }
.apl-col-7 { grid-column: span 7; }
.apl-col-8 { grid-column: span 8; }
.apl-col-9 { grid-column: span 9; }
.apl-col-10 { grid-column: span 10; }
.apl-col-11 { grid-column: span 11; }
.apl-col-12 { grid-column: 1 / -1; }
.apl-stack { display: flex; flex-direction: column; gap: var(--apl-ui-space-2); }
.apl-inline { align-items: center; display: flex; flex-wrap: wrap; gap: var(--apl-ui-space-2); }
.apl-field { min-width: 0; }
.apl-field > label { color: var(--apl-ui-color-text-muted); display: block; font-size: var(--apl-ui-font-size-detail); font-weight: var(--apl-ui-font-weight-semibold); margin: 0 0 var(--apl-ui-space-1); }
.apl-field__help { color: var(--apl-ui-color-text-subtle); display: block; font-size: var(--apl-ui-font-size-caption); margin-top: var(--apl-ui-space-1); }
.apl-field .form-control,
.apl-field select,
.apl-field textarea {
background: var(--apl-ui-color-surface-subtle);
border: 1px solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-md);
box-shadow: none;
color: var(--apl-ui-color-text-body);
font: var(--apl-ui-font-weight-regular) var(--apl-ui-font-size-control)/var(--apl-ui-line-normal) var(--apl-ui-font-family);
width: 100%;
}
.apl-field .form-control,
.apl-field select { height: var(--apl-ui-control-height); padding: 6px 9px; }
.apl-field textarea { min-height: 88px; padding: 8px 9px; resize: vertical; }
.apl-field .form-control:focus,
.apl-field select:focus,
.apl-field textarea:focus { background: var(--apl-ui-color-surface); border-color: var(--apl-ui-color-brand); box-shadow: 0 0 0 3px var(--apl-ui-focus-brand); outline: 0; }
/* Controles reconstruidos: aislados de Bootstrap y estilos heredados. */
.apl-rebuilt .apl-control,
[data-apl-ui="rebuilt"] .apl-control {
-webkit-appearance: none !important;
appearance: none !important;
background: var(--apl-ui-color-surface-subtle) !important;
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border) !important;
border-radius: var(--apl-ui-radius-md) !important;
box-shadow: none !important;
box-sizing: border-box;
color: var(--apl-ui-color-text-body) !important;
display: block;
font: var(--apl-ui-font-weight-regular) var(--apl-ui-font-size-control)/var(--apl-ui-line-normal) var(--apl-ui-font-family) !important;
height: var(--apl-ui-control-height) !important;
margin: var(--apl-ui-space-0) !important;
min-height: var(--apl-ui-control-height) !important;
min-width: 0;
outline: 0 !important;
padding: var(--apl-ui-space-2) var(--apl-ui-space-3) !important;
width: 100% !important;
}
.apl-rebuilt .apl-control::placeholder,
[data-apl-ui="rebuilt"] .apl-control::placeholder {
color: var(--apl-ui-color-text-subtle);
opacity: 1;
}
.apl-rebuilt .apl-control:hover,
[data-apl-ui="rebuilt"] .apl-control:hover {
background: var(--apl-ui-color-surface) !important;
border-color: var(--apl-ui-color-border-strong) !important;
}
.apl-rebuilt .apl-control:focus,
[data-apl-ui="rebuilt"] .apl-control:focus {
background: var(--apl-ui-color-surface) !important;
border-color: var(--apl-ui-color-brand-border) !important;
box-shadow: var(--apl-ui-shadow-focus) !important;
}
/*
* Control combinado central para prefijos y sufijos ($, %, unidades, etc.).
* El input conserva la unica silueta exterior; el complemento se integra
* dentro de ella y nunca agrega un segundo borde alrededor del conjunto.
*/
.apl-combined-control {
box-sizing: border-box;
min-width: var(--apl-ui-space-0);
position: relative;
width: 100%;
}
.apl-combined-control__affix {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
bottom: var(--apl-ui-border-width);
color: var(--apl-ui-color-text-muted);
display: flex;
justify-content: center;
min-width: var(--apl-ui-control-affix-width);
pointer-events: none;
position: absolute;
top: var(--apl-ui-border-width);
}
.apl-combined-control__affix--prefix {
border-inline-end: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: calc(var(--apl-ui-radius-md) - var(--apl-ui-border-width)) var(--apl-ui-space-0) var(--apl-ui-space-0) calc(var(--apl-ui-radius-md) - var(--apl-ui-border-width));
inset-inline-start: var(--apl-ui-border-width);
}
.apl-combined-control__affix--suffix {
border-inline-start: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-space-0) calc(var(--apl-ui-radius-md) - var(--apl-ui-border-width)) calc(var(--apl-ui-radius-md) - var(--apl-ui-border-width)) var(--apl-ui-space-0);
inset-inline-end: var(--apl-ui-border-width);
}
.apl-combined-control:hover > .apl-combined-control__affix,
.apl-combined-control:focus-within > .apl-combined-control__affix {
background: var(--apl-ui-color-surface);
}
.apl-combined-control--prefix > .apl-control {
padding-inline-start: calc(var(--apl-ui-control-affix-width) + var(--apl-ui-space-1)) !important;
}
.apl-combined-control--suffix > .apl-control {
padding-inline-end: calc(var(--apl-ui-control-affix-width) + var(--apl-ui-space-1)) !important;
}
/*
* Selector de fecha central.
* El input visible conserva valor y envío YYYY-MM-DD con validación central;
* así no depende del formato regional del navegador. El calendario APL evita
* además que el desplegable quede recortado por tarjetas, drawers o diálogos.
*/
.apl-date-control {
box-sizing: border-box;
display: inline-block;
max-width: 100%;
min-width: var(--apl-ui-space-0);
position: relative;
vertical-align: bottom;
}
body.janox-template .apl-date-control > .janox-native-picker-wrap.is-date {
display: contents !important;
}
body.janox-template .apl-date-control .janox-native-picker-trigger {
display: none !important;
}
.apl-field > .apl-date-control,
.apl-field-grid .apl-date-control,
.apl-querybar__field .apl-date-control,
.apl-filter-grid .apl-date-control,
.apl-drawer-form__field .apl-date-control {
width: 100%;
}
body.janox-template .apl-date-control > input.apl-date-control__input[type="date"],
body.janox-template .apl-date-control > input.apl-date-control__input[data-apl-original-type="date"],
body.janox-template .apl-rebuilt .apl-date-control > input.apl-date-control__input[type="date"],
body.janox-template .apl-rebuilt .apl-date-control > input.apl-date-control__input[data-apl-original-type="date"],
body.janox-template [data-apl-ui="rebuilt"] .apl-date-control > input.apl-date-control__input[type="date"],
body.janox-template [data-apl-ui="rebuilt"] .apl-date-control > input.apl-date-control__input[data-apl-original-type="date"],
.apl-rebuilt .apl-date-control > input.apl-date-control__input[type="date"],
.apl-rebuilt .apl-date-control > input.apl-date-control__input[data-apl-original-type="date"],
[data-apl-ui="rebuilt"] .apl-date-control > input.apl-date-control__input[type="date"],
[data-apl-ui="rebuilt"] .apl-date-control > input.apl-date-control__input[data-apl-original-type="date"],
.apl-drawer-form .apl-date-control > input.apl-date-control__input[type="date"],
.apl-drawer-form .apl-date-control > input.apl-date-control__input[data-apl-original-type="date"] {
-webkit-appearance: none !important;
appearance: none !important;
color-scheme: light !important;
cursor: text;
padding-right: calc(var(--apl-ui-control-height) + var(--apl-ui-space-1)) !important;
}
body.janox-template .apl-date-control > input.apl-date-control__input[type="date"]::-webkit-calendar-picker-indicator,
body.janox-template .apl-rebuilt .apl-date-control > input.apl-date-control__input[type="date"]::-webkit-calendar-picker-indicator,
body.janox-template [data-apl-ui="rebuilt"] .apl-date-control > input.apl-date-control__input[type="date"]::-webkit-calendar-picker-indicator,
.apl-rebuilt .apl-date-control > input.apl-date-control__input[type="date"]::-webkit-calendar-picker-indicator,
[data-apl-ui="rebuilt"] .apl-date-control > input.apl-date-control__input[type="date"]::-webkit-calendar-picker-indicator,
.apl-drawer-form .apl-date-control > input.apl-date-control__input[type="date"]::-webkit-calendar-picker-indicator {
display: none !important;
height: var(--apl-ui-space-0) !important;
margin: var(--apl-ui-space-0) !important;
opacity: 0 !important;
padding: var(--apl-ui-space-0) !important;
pointer-events: none !important;
width: var(--apl-ui-space-0) !important;
}
body.janox-template .apl-date-control > button.apl-date-control__trigger,
.apl-date-control > button.apl-date-control__trigger {
align-items: center !important;
background: var(--apl-ui-color-surface-muted) !important;
border: var(--apl-ui-space-0) !important;
border-left: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted) !important;
border-radius: var(--apl-ui-space-0) var(--apl-ui-radius-md) var(--apl-ui-radius-md) var(--apl-ui-space-0) !important;
bottom: var(--apl-ui-border-width) !important;
box-shadow: none !important;
color: var(--apl-ui-color-brand-dark) !important;
cursor: pointer;
display: grid !important;
font: var(--apl-ui-font-weight-regular) var(--apl-ui-font-size-control)/var(--apl-ui-line-icon) var(--apl-ui-font-family) !important;
height: auto !important;
justify-content: center !important;
left: auto !important;
margin: var(--apl-ui-space-0) !important;
min-height: var(--apl-ui-space-0) !important;
padding: var(--apl-ui-space-0) !important;
place-items: center !important;
position: absolute !important;
right: var(--apl-ui-border-width) !important;
top: var(--apl-ui-border-width) !important;
width: calc(var(--apl-ui-control-height) - (var(--apl-ui-border-width) * 2)) !important;
z-index: 1 !important;
}
body.janox-template .apl-date-control > button.apl-date-control__trigger > .apl-date-control__icon,
.apl-date-control > button.apl-date-control__trigger > .apl-date-control__icon {
box-sizing: border-box !important;
display: block !important;
height: var(--apl-ui-date-picker-trigger-icon-size) !important;
margin: var(--apl-ui-space-0) !important;
overflow: visible !important;
padding: var(--apl-ui-space-0) !important;
pointer-events: none !important;
position: static !important;
transform: none !important;
width: var(--apl-ui-date-picker-trigger-icon-size) !important;
}
body.janox-template .apl-date-control > button.apl-date-control__trigger:hover,
body.janox-template .apl-date-control > button.apl-date-control__trigger:focus,
.apl-date-control > button.apl-date-control__trigger:hover,
.apl-date-control > button.apl-date-control__trigger:focus {
background: var(--apl-ui-color-brand-surface) !important;
color: var(--apl-ui-color-brand-dark) !important;
outline: var(--apl-ui-space-0) !important;
}
body.janox-template .apl-date-control > button.apl-date-control__trigger:focus-visible,
.apl-date-control > button.apl-date-control__trigger:focus-visible {
box-shadow: inset var(--apl-ui-shadow-focus) !important;
}
.apl-date-control > button.apl-date-control__trigger:disabled {
background: var(--apl-ui-color-surface-muted) !important;
color: var(--apl-ui-color-text-disabled) !important;
cursor: not-allowed;
}
.apl-date-picker,
.apl-date-picker * {
box-sizing: border-box;
}
.apl-date-picker {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-strong);
border-radius: var(--apl-ui-radius-xl);
box-shadow: var(--apl-ui-shadow-floating);
color: var(--apl-ui-color-text-body);
font: var(--apl-ui-font-weight-regular) var(--apl-ui-date-picker-font-size)/var(--apl-ui-line-normal) var(--apl-ui-font-family);
max-height: calc(100vh - (var(--apl-ui-date-picker-viewport-gap) * 2));
max-width: calc(100vw - (var(--apl-ui-date-picker-viewport-gap) * 2));
overflow-x: hidden;
overflow-y: auto;
padding: var(--apl-ui-date-picker-padding);
position: fixed;
width: var(--apl-ui-date-picker-width);
z-index: var(--apl-ui-z-picker);
}
.apl-date-picker[hidden],
.apl-date-picker [hidden] {
display: none !important;
}
.apl-date-picker__header {
align-items: center;
display: grid;
gap: var(--apl-ui-date-picker-padding);
grid-template-columns: var(--apl-ui-date-picker-nav-size) minmax(var(--apl-ui-space-0), 1fr) var(--apl-ui-date-picker-nav-size);
margin-bottom: var(--apl-ui-date-picker-padding);
}
.apl-date-picker__month {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-date-picker-title-font-size);
font-weight: var(--apl-ui-font-weight-semibold);
text-align: center;
}
body.janox-template .apl-date-picker button,
.apl-date-picker button {
-webkit-appearance: none !important;
appearance: none !important;
box-shadow: none !important;
font-family: var(--apl-ui-font-family) !important;
margin: var(--apl-ui-space-0) !important;
}
body.janox-template .apl-date-picker__nav,
.apl-date-picker__nav {
align-items: center;
background: var(--apl-ui-color-surface-subtle) !important;
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border) !important;
border-radius: var(--apl-ui-radius-md) !important;
color: var(--apl-ui-color-text-muted) !important;
cursor: pointer;
display: flex;
height: var(--apl-ui-date-picker-nav-size);
justify-content: center;
min-height: var(--apl-ui-date-picker-nav-size) !important;
padding: var(--apl-ui-space-0) !important;
width: var(--apl-ui-date-picker-nav-size);
}
body.janox-template .apl-date-picker__nav:hover,
body.janox-template .apl-date-picker__nav:focus,
.apl-date-picker__nav:hover,
.apl-date-picker__nav:focus {
background: var(--apl-ui-color-brand-surface) !important;
border-color: var(--apl-ui-color-brand-border) !important;
color: var(--apl-ui-color-brand-dark) !important;
}
.apl-date-picker__weekdays,
.apl-date-picker__grid {
display: grid;
gap: var(--apl-ui-date-picker-gap);
grid-template-columns: repeat(7, minmax(var(--apl-ui-space-0), 1fr));
min-width: var(--apl-ui-space-0);
overflow: hidden;
width: 100%;
}
.apl-date-picker__weekdays > *,
.apl-date-picker__grid > * {
box-sizing: border-box !important;
max-width: 100% !important;
min-width: var(--apl-ui-space-0) !important;
}
.apl-date-picker__weekdays {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
margin-bottom: var(--apl-ui-date-picker-gap);
text-align: center;
}
.apl-date-picker__weekdays > span {
line-height: var(--apl-ui-date-picker-day-size);
min-width: var(--apl-ui-space-0);
}
body.janox-template .apl-date-picker__day,
.apl-date-picker__day {
align-items: center;
background: var(--apl-ui-color-surface) !important;
border: var(--apl-ui-border-width) solid transparent !important;
border-radius: var(--apl-ui-radius-md) !important;
color: var(--apl-ui-color-text-body) !important;
cursor: pointer;
display: flex;
font-size: var(--apl-ui-date-picker-font-size) !important;
font-weight: var(--apl-ui-font-weight-regular) !important;
height: var(--apl-ui-date-picker-day-size);
justify-content: center;
max-width: 100% !important;
min-width: var(--apl-ui-space-0) !important;
min-height: var(--apl-ui-date-picker-day-size) !important;
overflow: hidden;
padding: var(--apl-ui-space-0) !important;
width: 100%;
}
body.janox-template .apl-date-picker__day:hover,
body.janox-template .apl-date-picker__day:focus,
.apl-date-picker__day:hover,
.apl-date-picker__day:focus {
background: var(--apl-ui-color-brand-surface) !important;
border-color: var(--apl-ui-color-brand-border) !important;
color: var(--apl-ui-color-brand-dark) !important;
outline: var(--apl-ui-space-0) !important;
}
body.janox-template .apl-date-picker__day.is-outside,
.apl-date-picker__day.is-outside {
background: var(--apl-ui-color-surface-soft) !important;
color: var(--apl-ui-color-text-subtle) !important;
}
body.janox-template .apl-date-picker__day.is-today,
.apl-date-picker__day.is-today {
border-color: var(--apl-ui-color-brand-border-strong) !important;
color: var(--apl-ui-color-brand-dark) !important;
font-weight: var(--apl-ui-font-weight-semibold) !important;
}
body.janox-template .apl-date-picker__day.is-selected,
.apl-date-picker__day.is-selected {
background: var(--apl-ui-color-brand) !important;
border-color: var(--apl-ui-color-brand-dark) !important;
color: var(--apl-ui-color-on-solid) !important;
font-weight: var(--apl-ui-font-weight-semibold) !important;
}
body.janox-template .apl-date-picker__day:disabled,
.apl-date-picker__day:disabled {
background: var(--apl-ui-color-surface-muted) !important;
border-color: transparent !important;
color: var(--apl-ui-color-text-disabled) !important;
cursor: not-allowed;
}
.apl-date-picker__footer {
align-items: center;
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: flex;
justify-content: space-between;
margin-top: var(--apl-ui-date-picker-padding);
padding-top: var(--apl-ui-date-picker-padding);
}
body.janox-template .apl-date-picker__action,
.apl-date-picker__action {
background: transparent !important;
border: var(--apl-ui-border-width) solid transparent !important;
border-radius: var(--apl-ui-radius-md) !important;
color: var(--apl-ui-color-text-muted) !important;
cursor: pointer;
font-size: var(--apl-ui-font-size-detail) !important;
font-weight: var(--apl-ui-font-weight-semibold) !important;
min-height: var(--apl-ui-date-picker-nav-size) !important;
padding: var(--apl-ui-date-picker-gap) var(--apl-ui-space-2) !important;
}
body.janox-template .apl-date-picker__action:hover,
body.janox-template .apl-date-picker__action:focus,
.apl-date-picker__action:hover,
.apl-date-picker__action:focus {
background: var(--apl-ui-color-surface-muted) !important;
border-color: var(--apl-ui-color-border-muted) !important;
color: var(--apl-ui-color-text-strong) !important;
}
body.janox-template .apl-date-picker__action--today,
.apl-date-picker__action--today {
color: var(--apl-ui-color-brand-dark) !important;
}
/*
* Compatibilidad transversal de calendarios heredados.
* Bootstrap datepicker, Smalot datetimepicker, Bootstrap datetimepicker y
* jQuery UI comparten la misma geometría central mientras se completa su
* migración. La tabla fija y el reinicio de mínimos impiden que domingo o la
* última acción se pinten fuera del panel, incluso con zoom del navegador.
*/
body.janox-template .datepicker.dropdown-menu,
body.janox-template .datepicker.datepicker-inline,
body.janox-template .datetimepicker,
body.janox-template .bootstrap-datetimepicker-widget.dropdown-menu,
body.janox-template .ui-datepicker.ui-widget {
background: var(--apl-ui-color-surface) !important;
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-strong) !important;
border-radius: var(--apl-ui-radius-xl) !important;
box-sizing: border-box !important;
box-shadow: var(--apl-ui-shadow-floating) !important;
color: var(--apl-ui-color-text-body) !important;
font: var(--apl-ui-font-weight-regular) var(--apl-ui-date-picker-font-size)/var(--apl-ui-line-normal) var(--apl-ui-font-family) !important;
max-width: calc(100vw - (var(--apl-ui-date-picker-viewport-gap) * 2)) !important;
min-width: var(--apl-ui-space-0) !important;
padding: var(--apl-ui-date-picker-padding) !important;
width: var(--apl-ui-date-picker-width) !important;
z-index: var(--apl-ui-z-picker) !important;
}
body.janox-template .datepicker.dropdown-menu .datepicker-days table,
body.janox-template .datepicker.datepicker-inline .datepicker-days table,
body.janox-template .datetimepicker .datetimepicker-days table,
body.janox-template .bootstrap-datetimepicker-widget .datepicker-days table,
body.janox-template .ui-datepicker .ui-datepicker-calendar {
background: transparent !important;
border-collapse: separate !important;
border-spacing: var(--apl-ui-space-0) var(--apl-ui-date-picker-gap) !important;
margin: var(--apl-ui-space-0) !important;
table-layout: fixed !important;
width: 100% !important;
}
body.janox-template .datepicker.dropdown-menu .datepicker-days table th,
body.janox-template .datepicker.dropdown-menu .datepicker-days table td,
body.janox-template .datepicker.datepicker-inline .datepicker-days table th,
body.janox-template .datepicker.datepicker-inline .datepicker-days table td,
body.janox-template .datetimepicker .datetimepicker-days table th,
body.janox-template .datetimepicker .datetimepicker-days table td,
body.janox-template .bootstrap-datetimepicker-widget .datepicker-days table th,
body.janox-template .bootstrap-datetimepicker-widget .datepicker-days table td,
body.janox-template .ui-datepicker .ui-datepicker-calendar th,
body.janox-template .ui-datepicker .ui-datepicker-calendar td {
box-sizing: border-box !important;
max-width: none !important;
min-width: var(--apl-ui-space-0) !important;
padding: var(--apl-ui-space-0) !important;
width: auto !important;
}
body.janox-template .datepicker.dropdown-menu .datepicker-days table td.day,
body.janox-template .datepicker.datepicker-inline .datepicker-days table td.day,
body.janox-template .datetimepicker .datetimepicker-days table td.day,
body.janox-template .bootstrap-datetimepicker-widget .datepicker-days table td.day,
body.janox-template .ui-datepicker .ui-datepicker-calendar td > a,
body.janox-template .ui-datepicker .ui-datepicker-calendar td > span {
border-radius: var(--apl-ui-radius-md) !important;
height: var(--apl-ui-date-picker-day-size) !important;
line-height: var(--apl-ui-date-picker-day-size) !important;
max-width: 100% !important;
min-width: var(--apl-ui-space-0) !important;
overflow: hidden;
padding: var(--apl-ui-space-0) !important;
text-align: center;
width: auto !important;
}
body.janox-template .ui-datepicker .ui-datepicker-calendar td > a,
body.janox-template .ui-datepicker .ui-datepicker-calendar td > span {
display: block;
width: 100% !important;
}
body.janox-template .datepicker.dropdown-menu .datepicker-days table td.day:hover,
body.janox-template .datepicker.datepicker-inline .datepicker-days table td.day:hover,
body.janox-template .datetimepicker .datetimepicker-days table td.day:hover,
body.janox-template .bootstrap-datetimepicker-widget .datepicker-days table td.day:hover,
body.janox-template .ui-datepicker .ui-datepicker-calendar td > a:hover,
body.janox-template .ui-datepicker .ui-datepicker-calendar td > a:focus {
background: var(--apl-ui-color-brand-surface) !important;
color: var(--apl-ui-color-brand-dark) !important;
}
body.janox-template .datepicker.dropdown-menu .datepicker-days table td.old,
body.janox-template .datepicker.dropdown-menu .datepicker-days table td.new,
body.janox-template .datepicker.datepicker-inline .datepicker-days table td.old,
body.janox-template .datepicker.datepicker-inline .datepicker-days table td.new,
body.janox-template .datetimepicker .datetimepicker-days table td.old,
body.janox-template .datetimepicker .datetimepicker-days table td.new,
body.janox-template .bootstrap-datetimepicker-widget .datepicker-days table td.old,
body.janox-template .bootstrap-datetimepicker-widget .datepicker-days table td.new,
body.janox-template .ui-datepicker .ui-datepicker-other-month {
color: var(--apl-ui-color-text-subtle) !important;
}
body.janox-template .datepicker.dropdown-menu .datepicker-days table td.active,
body.janox-template .datepicker.datepicker-inline .datepicker-days table td.active,
body.janox-template .datetimepicker .datetimepicker-days table td.active,
body.janox-template .bootstrap-datetimepicker-widget .datepicker-days table td.active,
body.janox-template .ui-datepicker .ui-datepicker-calendar td > a.ui-state-active {
background: var(--apl-ui-color-brand) !important;
background-image: none !important;
border-color: var(--apl-ui-color-brand-dark) !important;
color: var(--apl-ui-color-on-solid) !important;
font-weight: var(--apl-ui-font-weight-semibold) !important;
text-shadow: none !important;
}
body.janox-template .datepicker.dropdown-menu .datepicker-days table td.disabled,
body.janox-template .datepicker.datepicker-inline .datepicker-days table td.disabled,
body.janox-template .datetimepicker .datetimepicker-days table td.disabled,
body.janox-template .bootstrap-datetimepicker-widget .datepicker-days table td.disabled,
body.janox-template .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable {
background: var(--apl-ui-color-surface-muted) !important;
color: var(--apl-ui-color-text-disabled) !important;
}
/*
* Adaptador único de calendarios APL.
* `apl-rebuilt-date-time.js` agrega `.apl-calendar-popover` a cada motor
* heredado. La clase duplicada aumenta deliberadamente la especificidad para
* que hojas de módulos cargadas después no vuelvan a modificar la geometría.
*/
body.janox-template .apl-calendar-popover.apl-calendar-popover {
background: var(--apl-ui-color-surface) !important;
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-strong) !important;
border-radius: var(--apl-ui-radius-xl) !important;
box-shadow: var(--apl-ui-shadow-floating) !important;
box-sizing: border-box !important;
color: var(--apl-ui-color-text-body) !important;
font: var(--apl-ui-font-weight-regular) var(--apl-ui-date-picker-font-size)/var(--apl-ui-line-normal) var(--apl-ui-font-family) !important;
max-height: calc(100vh - (var(--apl-ui-date-picker-viewport-gap) * 2)) !important;
max-width: calc(100vw - (var(--apl-ui-date-picker-viewport-gap) * 2)) !important;
min-width: var(--apl-ui-space-0) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
padding: var(--apl-ui-date-picker-padding) !important;
width: var(--apl-ui-date-picker-width) !important;
z-index: var(--apl-ui-z-picker) !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover.timepicker-sbs {
width: calc(var(--apl-ui-date-picker-width) + var(--apl-ui-date-picker-width) + var(--apl-ui-space-3)) !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover::before,
body.janox-template .apl-calendar-popover.apl-calendar-popover::after {
display: none !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover *,
body.janox-template .apl-calendar-popover.apl-calendar-popover *::before,
body.janox-template .apl-calendar-popover.apl-calendar-popover *::after {
box-sizing: border-box;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__day-view,
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__month-view,
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__year-view,
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__time-view,
body.janox-template .apl-calendar-popover.apl-calendar-popover .datepicker,
body.janox-template .apl-calendar-popover.apl-calendar-popover .timepicker {
max-width: 100% !important;
min-width: var(--apl-ui-space-0) !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover table {
background: transparent !important;
border: var(--apl-ui-space-0) !important;
border-collapse: separate !important;
border-spacing: var(--apl-ui-space-0) var(--apl-ui-date-picker-gap) !important;
margin: var(--apl-ui-space-0) !important;
max-width: 100% !important;
min-width: var(--apl-ui-space-0) !important;
width: 100% !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__day-grid {
table-layout: fixed !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__day-grid th,
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__day-grid td {
box-sizing: border-box !important;
max-width: none !important;
min-width: var(--apl-ui-space-0) !important;
padding: var(--apl-ui-space-0) !important;
width: auto !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__day-grid th.dow,
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__day-grid td.day,
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-calendar thead th,
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-calendar tbody td {
width: var(--apl-ui-date-picker-day-width) !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover table thead tr:first-child th {
background: transparent !important;
border: var(--apl-ui-space-0) !important;
color: var(--apl-ui-color-text-strong) !important;
font-size: var(--apl-ui-date-picker-font-size) !important;
font-weight: var(--apl-ui-font-weight-semibold) !important;
height: var(--apl-ui-date-picker-nav-size) !important;
line-height: var(--apl-ui-date-picker-nav-size) !important;
padding: var(--apl-ui-space-0) !important;
text-align: center !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__previous,
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__next,
body.janox-template .apl-calendar-popover.apl-calendar-popover th.prev,
body.janox-template .apl-calendar-popover.apl-calendar-popover th.next {
align-items: center !important;
background: var(--apl-ui-color-surface-subtle) !important;
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border) !important;
border-radius: var(--apl-ui-radius-md) !important;
color: var(--apl-ui-color-brand-dark) !important;
cursor: pointer !important;
display: flex !important;
height: var(--apl-ui-date-picker-nav-size) !important;
justify-content: center !important;
min-width: var(--apl-ui-space-0) !important;
width: var(--apl-ui-date-picker-nav-size) !important;
}
/* Conserva la semántica de celda que requieren los motores heredados. */
body.janox-template .apl-calendar-popover.apl-calendar-popover th.prev,
body.janox-template .apl-calendar-popover.apl-calendar-popover th.next {
display: table-cell !important;
vertical-align: middle !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__previous:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__previous:focus,
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__next:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover .apl-calendar-popover__next:focus,
body.janox-template .apl-calendar-popover.apl-calendar-popover th.prev:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover th.prev:focus,
body.janox-template .apl-calendar-popover.apl-calendar-popover th.next:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover th.next:focus {
background: var(--apl-ui-color-brand-surface) !important;
border-color: var(--apl-ui-color-brand-border) !important;
color: var(--apl-ui-color-brand-dark) !important;
outline: var(--apl-ui-space-0) !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-prev > span,
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-next > span {
background: none !important;
display: block !important;
font-size: var(--apl-ui-space-0) !important;
height: auto !important;
left: auto !important;
margin: var(--apl-ui-space-0) !important;
position: static !important;
top: auto !important;
width: auto !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-prev > span::before,
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-next > span::before {
font-size: var(--apl-ui-font-size-control) !important;
line-height: var(--apl-ui-line-icon) !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-prev > span::before {
content: "‹";
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-next > span::before {
content: "›";
}
body.janox-template .apl-calendar-popover.apl-calendar-popover th.dow,
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-calendar thead th {
background: transparent !important;
border: var(--apl-ui-space-0) !important;
color: var(--apl-ui-color-text-subtle) !important;
font-size: var(--apl-ui-font-size-caption) !important;
font-weight: var(--apl-ui-font-weight-semibold) !important;
height: var(--apl-ui-date-picker-day-size) !important;
line-height: var(--apl-ui-date-picker-day-size) !important;
padding: var(--apl-ui-space-0) !important;
text-align: center !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover td.day,
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-calendar td > a,
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-calendar td > span {
background: var(--apl-ui-color-surface) !important;
border: var(--apl-ui-border-width) solid transparent !important;
border-radius: var(--apl-ui-radius-md) !important;
color: var(--apl-ui-color-text-body) !important;
font-size: var(--apl-ui-date-picker-font-size) !important;
font-weight: var(--apl-ui-font-weight-regular) !important;
height: var(--apl-ui-date-picker-day-size) !important;
line-height: var(--apl-ui-date-picker-day-size) !important;
margin: var(--apl-ui-space-0) !important;
max-width: 100% !important;
min-width: var(--apl-ui-space-0) !important;
overflow: hidden !important;
padding: var(--apl-ui-space-0) !important;
text-align: center !important;
text-shadow: none !important;
width: 100% !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover td.day:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-calendar td > a:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-calendar td > a:focus {
background: var(--apl-ui-color-brand-surface) !important;
border-color: var(--apl-ui-color-brand-border) !important;
color: var(--apl-ui-color-brand-dark) !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover td.old,
body.janox-template .apl-calendar-popover.apl-calendar-popover td.new,
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-other-month {
color: var(--apl-ui-color-text-subtle) !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover td.today:not(.active),
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-today > a:not(.ui-state-active) {
background: var(--apl-ui-color-brand-surface) !important;
border-color: var(--apl-ui-color-brand-border-strong) !important;
color: var(--apl-ui-color-brand-dark) !important;
font-weight: var(--apl-ui-font-weight-semibold) !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover td.active,
body.janox-template .apl-calendar-popover.apl-calendar-popover td.active:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover td.selected,
body.janox-template .apl-calendar-popover.apl-calendar-popover td.selected:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover span.active,
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-calendar a.ui-state-active {
background: var(--apl-ui-color-brand) !important;
background-image: none !important;
border-color: var(--apl-ui-color-brand-dark) !important;
color: var(--apl-ui-color-on-solid) !important;
font-weight: var(--apl-ui-font-weight-semibold) !important;
text-shadow: none !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover td.disabled,
body.janox-template .apl-calendar-popover.apl-calendar-popover td.disabled:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover span.disabled,
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-unselectable {
background: var(--apl-ui-color-surface-muted) !important;
color: var(--apl-ui-color-text-disabled) !important;
cursor: not-allowed !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .datepicker-months td > span,
body.janox-template .apl-calendar-popover.apl-calendar-popover .datetimepicker-months td > span,
body.janox-template .apl-calendar-popover.apl-calendar-popover .datepicker-years td > span,
body.janox-template .apl-calendar-popover.apl-calendar-popover .datetimepicker-years td > span,
body.janox-template .apl-calendar-popover.apl-calendar-popover .datepicker-decades td > span,
body.janox-template .apl-calendar-popover.apl-calendar-popover .datetimepicker-hours td > span,
body.janox-template .apl-calendar-popover.apl-calendar-popover .datetimepicker-minutes td > span {
background: var(--apl-ui-color-surface) !important;
border: var(--apl-ui-border-width) solid transparent !important;
border-radius: var(--apl-ui-radius-md) !important;
color: var(--apl-ui-color-text-body) !important;
float: left !important;
font-size: var(--apl-ui-date-picker-font-size) !important;
font-weight: var(--apl-ui-font-weight-regular) !important;
height: var(--apl-ui-date-picker-nav-size) !important;
line-height: var(--apl-ui-date-picker-nav-size) !important;
margin: var(--apl-ui-space-0) !important;
min-width: var(--apl-ui-space-0) !important;
overflow: hidden !important;
padding: var(--apl-ui-space-0) var(--apl-ui-space-1) !important;
text-align: center !important;
text-overflow: ellipsis;
text-shadow: none !important;
width: 25% !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .datepicker-months td > span:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover .datetimepicker-months td > span:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover .datepicker-years td > span:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover .datetimepicker-years td > span:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover .datepicker-decades td > span:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover .datetimepicker-hours td > span:hover,
body.janox-template .apl-calendar-popover.apl-calendar-popover .datetimepicker-minutes td > span:hover {
background: var(--apl-ui-color-brand-surface) !important;
border-color: var(--apl-ui-color-brand-border) !important;
color: var(--apl-ui-color-brand-dark) !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-header {
background: transparent !important;
border: var(--apl-ui-space-0) !important;
color: var(--apl-ui-color-text-strong) !important;
min-height: var(--apl-ui-date-picker-nav-size) !important;
padding: var(--apl-ui-space-0) !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-title,
body.janox-template .apl-calendar-popover.apl-calendar-popover th.switch,
body.janox-template .apl-calendar-popover.apl-calendar-popover th.datepicker-switch,
body.janox-template .apl-calendar-popover.apl-calendar-popover th.picker-switch {
color: var(--apl-ui-color-text-strong) !important;
font-size: var(--apl-ui-date-picker-title-font-size) !important;
font-weight: var(--apl-ui-font-weight-semibold) !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-title select {
background: var(--apl-ui-color-surface) !important;
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border) !important;
border-radius: var(--apl-ui-radius-md) !important;
color: var(--apl-ui-color-text-body) !important;
font: var(--apl-ui-font-weight-regular) var(--apl-ui-date-picker-font-size)/var(--apl-ui-line-normal) var(--apl-ui-font-family) !important;
min-height: var(--apl-ui-date-picker-nav-size) !important;
}
body.janox-template .apl-calendar-popover.apl-calendar-popover tfoot th,
body.janox-template .apl-calendar-popover.apl-calendar-popover .ui-datepicker-buttonpane button {
background: transparent !important;
border: var(--apl-ui-border-width) solid transparent !important;
border-radius: var(--apl-ui-radius-md) !important;
color: var(--apl-ui-color-brand-dark) !important;
font-size: var(--apl-ui-font-size-detail) !important;
font-weight: var(--apl-ui-font-weight-semibold) !important;
min-height: var(--apl-ui-date-picker-nav-size) !important;
padding: var(--apl-ui-date-picker-gap) var(--apl-ui-space-2) !important;
text-shadow: none !important;
}
.apl-native-select {
display: block;
min-width: 0;
position: relative;
width: 100%;
}
.apl-native-select > .apl-control--select {
cursor: pointer;
padding-right: var(--apl-ui-control-height) !important;
}
.apl-native-select > i {
align-items: center !important;
color: var(--apl-ui-color-text-subtle) !important;
display: flex !important;
height: var(--apl-ui-control-height) !important;
justify-content: center !important;
left: auto !important;
margin: var(--apl-ui-space-0) !important;
pointer-events: none !important;
position: absolute !important;
right: var(--apl-ui-space-0) !important;
top: var(--apl-ui-space-0) !important;
transform: none !important;
width: var(--apl-ui-control-height) !important;
}
/* Selector de catálogo con búsqueda interna y semántica de combobox. */
.apl-search-select {
min-width: 0;
position: relative;
width: 100%;
}
.apl-search-select.is-enhanced > .apl-search-select__native {
display: none !important;
}
/*
* Un select reconstruido conserva su valor nativo para envío y validación,
* pero nunca puede ocupar una segunda fila junto a su disparador visual.
* La especificidad protege el contrato frente a hojas de módulos y temas
* heredados cargados después del sistema central.
*/
body.janox-template .apl-rebuilt .apl-search-select.is-enhanced > select.apl-search-select__native,
body.janox-template [data-apl-ui="rebuilt"] .apl-search-select.is-enhanced > select.apl-search-select__native,
.apl-rebuilt .apl-search-select.is-enhanced > select.apl-search-select__native,
[data-apl-ui="rebuilt"] .apl-search-select.is-enhanced > select.apl-search-select__native {
display: none !important;
}
.apl-native-select.apl-search-select.is-enhanced > i {
display: none !important;
}
.apl-search-select__trigger {
align-items: center;
appearance: none;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
cursor: pointer;
display: flex;
font-family: var(--apl-ui-font-family);
font-size: var(--apl-ui-font-size-body);
gap: var(--apl-ui-space-2);
height: var(--apl-ui-control-height);
justify-content: space-between;
line-height: var(--apl-ui-line-normal);
max-width: 100%;
min-width: 0;
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
text-align: left;
width: 100%;
}
.apl-search-select__trigger:hover,
.apl-search-select__trigger:focus,
.apl-search-select.is-open .apl-search-select__trigger {
background: var(--apl-ui-color-surface);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-text-strong);
}
.apl-search-select__trigger:focus-visible {
box-shadow: var(--apl-ui-shadow-focus);
outline: 0;
}
.apl-search-select__trigger:disabled {
background: var(--apl-ui-color-surface-muted);
color: var(--apl-ui-color-text-subtle);
cursor: not-allowed;
}
.apl-search-select__trigger[aria-invalid="true"],
.apl-search-select.has-error .apl-search-select__trigger {
border-color: var(--apl-ui-color-danger-border);
box-shadow: var(--apl-ui-shadow-focus);
}
.apl-search-select__value {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apl-search-select__chevron {
color: var(--apl-ui-color-text-subtle);
flex: 0 0 auto;
transition: transform var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
}
.apl-search-select.is-open .apl-search-select__chevron {
transform: rotate(180deg);
}
/*
* Contrato de desplegables reconstruidos: la superficie del disparador no
* recorta el listado. Si un contenedor necesita overflow, el selector se
* presenta en un diálogo o drawer APL.
*/
.apl-floating-control-surface,
.apl-search-select.is-open {
overflow: visible;
position: relative;
z-index: var(--apl-ui-z-dropdown);
}
.apl-search-select__panel {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
box-shadow: var(--apl-ui-shadow-md);
display: flex;
flex-direction: column;
left: 0;
max-width: 100%;
min-width: 100%;
overflow: hidden;
padding: var(--apl-ui-space-2);
position: absolute;
top: calc(100% + var(--apl-ui-space-1));
width: 100%;
z-index: var(--apl-ui-z-dropdown);
}
.apl-search-select.is-dropup .apl-search-select__panel {
bottom: calc(100% + var(--apl-ui-space-1));
top: auto;
}
/*
* Dentro de un diálogo con scroll el panel usa coordenadas del viewport.
* Así el cuerpo conserva su desplazamiento y el listado no queda recortado.
*/
.apl-search-select.is-dialog-floating .apl-search-select__panel {
bottom: auto;
position: fixed;
right: auto;
}
.apl-search-select__actions {
align-items: center;
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
margin-bottom: var(--apl-ui-space-2);
padding-bottom: var(--apl-ui-space-2);
}
.apl-search-select__actions .apl-btn {
flex: 1 1 0;
justify-content: center;
}
.apl-picker__panel > .apl-search-select__actions,
.apl-quality-picker-panel > .apl-search-select__actions {
margin: 0 var(--apl-ui-space-2) var(--apl-ui-space-2);
padding-top: var(--apl-ui-space-2);
}
.apl-invoices-picker__panel > .apl-search-select__actions,
.apl-selectbox__panel > .apl-search-select__actions {
margin-bottom: 0;
}
.apl-search-select__options {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--apl-ui-space-1);
max-height: var(--apl-ui-search-select-menu-height);
min-height: 0;
min-width: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-color: var(--apl-ui-color-border-strong) var(--apl-ui-color-surface-muted);
scrollbar-gutter: stable;
}
.apl-search-select__options::-webkit-scrollbar {
width: var(--apl-ui-space-2);
}
.apl-search-select__options::-webkit-scrollbar-track {
background: var(--apl-ui-color-surface-muted);
border-radius: var(--apl-ui-radius-pill);
}
.apl-search-select__options::-webkit-scrollbar-thumb {
background: var(--apl-ui-color-border-strong);
border-radius: var(--apl-ui-radius-pill);
}
.apl-search-select__option {
align-items: center;
appearance: none;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid transparent;
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
cursor: pointer;
display: flex;
font-family: var(--apl-ui-font-family);
font-size: var(--apl-ui-font-size-detail);
gap: var(--apl-ui-space-2);
justify-content: space-between;
min-height: var(--apl-ui-search-select-option-height);
min-width: 0;
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
text-align: left;
width: 100%;
}
.apl-search-select__option:hover,
.apl-search-select__option:focus {
background: var(--apl-ui-color-surface-hover);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-text-strong);
outline: 0;
}
.apl-search-select__option:disabled {
color: var(--apl-ui-color-text-subtle);
cursor: not-allowed;
opacity: var(--apl-ui-opacity-disabled);
}
.apl-search-select__option.is-selected,
.apl-search-select__option[aria-selected="true"] {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-brand-dark);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-search-select__option-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apl-search-select__option-mark {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-strong);
border-radius: var(--apl-ui-radius-badge);
color: var(--apl-ui-color-on-solid);
display: inline-flex;
flex: 0 0 var(--apl-ui-search-select-indicator-size);
font-size: var(--apl-ui-font-size-caption);
height: var(--apl-ui-search-select-indicator-size);
justify-content: center;
width: var(--apl-ui-search-select-indicator-size);
}
.apl-search-select--single .apl-search-select__option-mark {
border-radius: var(--apl-ui-radius-pill);
}
.apl-search-select__option-mark > i {
visibility: hidden;
}
.apl-search-select__option.is-selected .apl-search-select__option-mark,
.apl-search-select__option[aria-selected="true"] .apl-search-select__option-mark {
background: var(--apl-ui-color-brand);
border-color: var(--apl-ui-color-brand);
}
.apl-search-select__option.is-selected .apl-search-select__option-mark > i,
.apl-search-select__option[aria-selected="true"] .apl-search-select__option-mark > i {
visibility: visible;
}
.apl-search-select__option-check {
flex: 0 0 auto;
visibility: hidden;
}
.apl-search-select__option.is-selected .apl-search-select__option-check,
.apl-search-select__option[aria-selected="true"] .apl-search-select__option-check {
visibility: visible;
}
.apl-search-select__empty {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
padding: var(--apl-ui-space-3);
text-align: center;
}
/* Barra horizontal de consulta: nunca apila; desplaza solo si el área no alcanza. */
.apl-querybar {
align-items: flex-end;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-xl);
box-sizing: border-box;
display: flex !important;
flex-flow: row nowrap !important;
gap: var(--apl-ui-space-2);
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
padding: var(--apl-ui-space-3);
scrollbar-width: thin;
width: 100%;
}
.apl-querybar__search {
align-self: flex-end;
flex: 2 0 var(--apl-ui-query-search-min);
min-width: var(--apl-ui-query-search-min);
}
.apl-querybar__field {
align-self: flex-end;
flex: 1 0 var(--apl-ui-query-field-min);
min-width: var(--apl-ui-query-field-min);
}
.apl-querybar__actions {
align-items: flex-end;
align-self: flex-end;
background: var(--apl-ui-color-surface);
display: flex;
flex: 0 0 auto;
gap: var(--apl-ui-space-1);
justify-content: flex-end;
margin-left: auto;
min-height: var(--apl-ui-filter-action-height);
padding-left: var(--apl-ui-space-2);
position: sticky;
right: var(--apl-ui-space-0);
z-index: var(--apl-ui-z-sticky);
}
/* Acciones de filtro: la altura y la escala visual siempre equivalen al botón Consultar. */
.apl-filter-actions {
align-items: flex-end;
display: flex;
gap: var(--apl-ui-space-1);
justify-content: flex-end;
min-height: var(--apl-ui-filter-action-height);
}
.apl-querybar__actions > .apl-btn,
.apl-filter-grid__actions > .apl-btn,
.apl-filter-actions > .apl-btn,
.apl-scopebar__actions > .apl-btn,
.apl-query-drawer__actions > .apl-btn {
box-sizing: border-box;
flex-shrink: 0;
height: var(--apl-ui-filter-action-height);
min-height: var(--apl-ui-filter-action-height);
white-space: nowrap;
}
.apl-querybar__actions > .apl-btn:not(.apl-btn--icon),
.apl-filter-grid__actions > .apl-btn:not(.apl-btn--icon),
.apl-filter-actions > .apl-btn:not(.apl-btn--icon),
.apl-scopebar__actions > .apl-btn:not(.apl-btn--icon),
.apl-query-drawer__actions > .apl-btn:not(.apl-btn--icon) {
padding: 5px 11px;
}
/* Buscador central: icono y texto forman un único control flexible. */
body.janox-template .apl-rebuilt .apl-finder,
body.janox-template [data-apl-ui="rebuilt"] .apl-finder,
.apl-rebuilt .apl-finder,
[data-apl-ui="rebuilt"] .apl-finder {
align-items: center !important;
background: var(--apl-ui-color-surface-subtle) !important;
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border) !important;
border-radius: var(--apl-ui-radius-md) !important;
box-shadow: none !important;
box-sizing: border-box !important;
color: var(--apl-ui-color-text-body) !important;
display: flex !important;
gap: var(--apl-ui-space-2) !important;
height: var(--apl-ui-control-height) !important;
margin: var(--apl-ui-space-0) !important;
max-width: 100% !important;
min-height: var(--apl-ui-control-height) !important;
min-width: 0 !important;
overflow: hidden !important;
padding: var(--apl-ui-space-0) var(--apl-ui-space-2) !important;
position: relative !important;
width: 100% !important;
}
body.janox-template .apl-rebuilt .apl-finder:focus-within,
body.janox-template [data-apl-ui="rebuilt"] .apl-finder:focus-within,
.apl-rebuilt .apl-finder:focus-within,
[data-apl-ui="rebuilt"] .apl-finder:focus-within {
background: var(--apl-ui-color-surface) !important;
border-color: var(--apl-ui-color-brand-border) !important;
box-shadow: var(--apl-ui-shadow-focus) !important;
}
body.janox-template .apl-rebuilt .apl-finder > .fa-search,
body.janox-template [data-apl-ui="rebuilt"] .apl-finder > .fa-search,
.apl-rebuilt .apl-finder > .fa-search,
[data-apl-ui="rebuilt"] .apl-finder > .fa-search {
align-items: center !important;
align-self: stretch !important;
color: var(--apl-ui-color-text-subtle) !important;
display: inline-flex !important;
flex: 0 0 var(--apl-ui-font-size-label-lg) !important;
float: none !important;
height: auto !important;
justify-content: center !important;
left: auto !important;
line-height: var(--apl-ui-line-normal) !important;
margin: var(--apl-ui-space-0) !important;
pointer-events: none !important;
position: static !important;
top: auto !important;
transform: none !important;
width: var(--apl-ui-font-size-label-lg) !important;
z-index: auto !important;
}
body.janox-template .apl-rebuilt .apl-finder > input[type="search"],
body.janox-template [data-apl-ui="rebuilt"] .apl-finder > input[type="search"],
.apl-rebuilt .apl-finder > input[type="search"],
[data-apl-ui="rebuilt"] .apl-finder > input[type="search"] {
align-self: stretch !important;
-webkit-appearance: none !important;
appearance: none !important;
background: transparent !important;
border: 0 !important;
border-radius: var(--apl-ui-space-0) !important;
box-shadow: none !important;
box-sizing: border-box !important;
color: var(--apl-ui-color-text-body) !important;
display: block !important;
flex: 1 1 auto !important;
float: none !important;
font: var(--apl-ui-font-weight-regular) var(--apl-ui-font-size-control)/var(--apl-ui-line-normal) var(--apl-ui-font-family) !important;
height: auto !important;
margin: var(--apl-ui-space-0) !important;
max-width: none !important;
min-height: var(--apl-ui-space-0) !important;
min-width: 0 !important;
outline: 0 !important;
padding: var(--apl-ui-space-0) !important;
position: static !important;
text-indent: var(--apl-ui-space-0) !important;
transform: none !important;
width: auto !important;
}
body.janox-template .apl-rebuilt .apl-finder > input[type="search"]::placeholder,
body.janox-template [data-apl-ui="rebuilt"] .apl-finder > input[type="search"]::placeholder,
.apl-rebuilt .apl-finder > input[type="search"]::placeholder,
[data-apl-ui="rebuilt"] .apl-finder > input[type="search"]::placeholder {
color: var(--apl-ui-color-text-subtle) !important;
font: inherit !important;
opacity: 1 !important;
}
.apl-finder > input[type="search"]::-webkit-search-cancel-button,
.apl-finder > input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none !important;
appearance: none !important;
}
/*
* El buscador conserva una zona libre antes de las acciones y contiene su
* anillo de enfoque dentro de la superficie. Estas reglas deben permanecer
* después del contrato genérico de .apl-finder para evitar que el halo cubra
* Todos, Ninguno o la primera opción.
*/
body.janox-template .apl-rebuilt .apl-search-select__panel > .apl-finder,
body.janox-template [data-apl-ui="rebuilt"] .apl-search-select__panel > .apl-finder,
.apl-rebuilt .apl-search-select__panel > .apl-finder,
[data-apl-ui="rebuilt"] .apl-search-select__panel > .apl-finder {
margin-bottom: var(--apl-ui-space-2) !important;
}
body.janox-template .apl-rebuilt .apl-search-select__panel > .apl-finder:focus-within,
body.janox-template [data-apl-ui="rebuilt"] .apl-search-select__panel > .apl-finder:focus-within,
.apl-rebuilt .apl-search-select__panel > .apl-finder:focus-within,
[data-apl-ui="rebuilt"] .apl-search-select__panel > .apl-finder:focus-within {
box-shadow: inset 0 0 0 calc(var(--apl-ui-border-width) * 2) var(--apl-ui-focus-brand) !important;
}
body.janox-template .apl-rebuilt .apl-search-select [data-apl-search-select-search][hidden],
body.janox-template [data-apl-ui="rebuilt"] .apl-search-select [data-apl-search-select-search][hidden],
.apl-rebuilt .apl-search-select [data-apl-search-select-search][hidden],
[data-apl-ui="rebuilt"] .apl-search-select [data-apl-search-select-search][hidden] {
display: none !important;
}
/* Botones */
.apl-btn { align-items: center; background: var(--apl-ui-color-surface); border: 1px solid var(--apl-ui-color-border); border-radius: var(--apl-ui-radius-md); box-shadow: none; color: var(--apl-ui-color-text-body); display: inline-flex; font: var(--apl-ui-font-weight-semibold) var(--apl-ui-font-size-button)/1 var(--apl-ui-font-family); gap: 6px; justify-content: center; min-height: var(--apl-ui-control-height); padding: 7px 11px; text-decoration: none; transition: background var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), border-color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard); }
.apl-btn:hover, .apl-btn:focus { background: var(--apl-ui-color-surface-muted); border-color: var(--apl-ui-color-border-strong); color: var(--apl-ui-color-text-strong); text-decoration: none; }
.apl-btn:focus-visible { box-shadow: 0 0 0 3px var(--apl-ui-focus-brand); outline: 0; }
.apl-btn[disabled], .apl-btn.is-disabled { cursor: not-allowed; opacity: .55; pointer-events: none; }
.apl-btn[hidden] { display: none; }
.apl-btn--sm { min-height: var(--apl-ui-control-height-sm); padding: 5px 9px; }
.apl-btn--lg { min-height: var(--apl-ui-control-height-lg); padding: 8px 13px; }
.apl-btn--icon { height: var(--apl-ui-icon-button-size); min-height: var(--apl-ui-icon-button-size); padding: 0; width: var(--apl-ui-icon-button-size); }
.apl-btn--primary { background: var(--apl-ui-color-accent); border-color: var(--apl-ui-color-accent-border); color: var(--apl-ui-color-accent-dark); }
.apl-btn--primary:hover, .apl-btn--primary:focus { background: var(--apl-ui-color-accent-hover); border-color: var(--apl-ui-color-accent-border); color: var(--apl-ui-color-accent-dark); }
.apl-btn--brand { background: var(--apl-ui-color-brand); border-color: var(--apl-ui-color-brand-dark); color: var(--apl-ui-color-on-solid); }
.apl-btn--brand:hover, .apl-btn--brand:focus { background: var(--apl-ui-color-brand-dark); color: var(--apl-ui-color-on-solid); }
.apl-btn--success { background: var(--apl-ui-color-success); border-color: var(--apl-ui-color-success-dark); color: var(--apl-ui-color-on-solid); }
.apl-btn--success:hover, .apl-btn--success:focus { background: var(--apl-ui-color-success-hover); color: var(--apl-ui-color-on-solid); }
.apl-btn--danger { background: var(--apl-ui-color-danger); border-color: var(--apl-ui-color-danger-dark); color: var(--apl-ui-color-on-solid); }
.apl-btn--danger:hover, .apl-btn--danger:focus { background: var(--apl-ui-color-danger-dark); color: var(--apl-ui-color-on-solid); }
/* Tablas y estados: contrato visual único para todos los resultados. */
.apl-table-wrap,
.apl-table-frame--standard {
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
max-width: 100%;
min-width: var(--apl-ui-space-0);
overflow: auto;
width: 100%;
}
.apl-table,
.apl-table--standard {
background: var(--apl-ui-color-surface);
border-collapse: separate;
border-spacing: var(--apl-ui-space-0);
margin: var(--apl-ui-space-0);
width: 100%;
}
.apl-table th,
.apl-table td,
.apl-table--standard th,
.apl-table--standard td {
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
color: var(--apl-ui-color-text-body);
font-size: var(--apl-ui-font-size-body);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
vertical-align: middle;
}
.apl-table thead th,
.apl-table--standard thead th {
background: var(--apl-ui-color-surface-muted);
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-bold);
letter-spacing: var(--apl-ui-letter-spacing-label);
position: sticky;
text-transform: none !important;
top: var(--apl-ui-space-0);
z-index: var(--apl-ui-z-sticky);
}
/* Capitalización natural obligatoria, incluso frente a estilos heredados. */
body.janox-template table thead th,
[data-apl-ui="rebuilt"] table thead th,
.apl-rebuilt table thead th {
text-transform: none !important;
}
#apl-tcn-results .apl-tcn-data-table thead th {
text-transform: none !important;
}
/* Encabezados financieros semánticos: una sola convención para reportes y búsquedas. */
.apl-grid-group-row th,
#apl-tcn-results .apl-tcn-data-table thead .apl-grid-group-row th {
box-sizing: border-box;
font-weight: var(--apl-ui-font-weight-bold);
height: var(--apl-ui-table-group-header-height);
padding-bottom: var(--apl-ui-space-0);
padding-top: var(--apl-ui-space-0);
text-align: center;
top: var(--apl-ui-space-0);
}
.apl-grid-group-row + tr th,
#apl-tcn-results .apl-tcn-data-table thead .apl-grid-group-row + tr th {
top: var(--apl-ui-table-group-header-height) !important;
}
.apl-table thead th.apl-grid-head--context,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--context {
background: var(--apl-ui-color-surface-muted) !important;
border-bottom-color: var(--apl-ui-color-border-muted) !important;
color: var(--apl-ui-color-text-strong) !important;
}
.apl-table thead th.apl-grid-head--overdue,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--overdue {
background: var(--apl-ui-color-data-2-soft) !important;
border-bottom-color: var(--apl-ui-color-data-2-border) !important;
color: var(--apl-ui-color-data-2-text) !important;
}
.apl-table thead th.apl-grid-head--overdue-strong,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--overdue-strong {
background: var(--apl-ui-color-data-3-soft) !important;
border-bottom-color: var(--apl-ui-color-data-3-border) !important;
color: var(--apl-ui-color-data-3-text) !important;
}
.apl-table thead th.apl-grid-head--overdue-notes,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--overdue-notes {
background: var(--apl-ui-color-data-10-soft) !important;
border-bottom-color: var(--apl-ui-color-data-10-border) !important;
color: var(--apl-ui-color-data-10-text) !important;
}
.apl-table thead th.apl-grid-head--current,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--current {
background: var(--apl-ui-color-data-1-soft) !important;
border-bottom-color: var(--apl-ui-color-data-1-border) !important;
color: var(--apl-ui-color-data-1-text) !important;
}
.apl-table thead th.apl-grid-head--current-notes,
.apl-table thead th.apl-grid-head--positive,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--current-notes,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--positive {
background: var(--apl-ui-color-data-9-soft) !important;
border-bottom-color: var(--apl-ui-color-data-9-border) !important;
color: var(--apl-ui-color-data-9-text) !important;
}
.apl-table thead th.apl-grid-head--total,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--total {
background: var(--apl-ui-color-data-11-soft) !important;
border-bottom-color: var(--apl-ui-color-data-11-border) !important;
color: var(--apl-ui-color-data-11-text) !important;
}
.apl-table thead th.apl-grid-head--context + th.apl-grid-head--overdue,
.apl-table thead th.apl-grid-head--overdue + th.apl-grid-head--overdue-strong,
.apl-table thead th.apl-grid-head--overdue-strong + th.apl-grid-head--overdue-notes,
.apl-table thead th.apl-grid-head--overdue-strong + th.apl-grid-head--current,
.apl-table thead th.apl-grid-head--overdue-notes + th.apl-grid-head--current,
.apl-table thead th.apl-grid-head--current + th.apl-grid-head--current-notes,
.apl-table thead th.apl-grid-head--current + th.apl-grid-head--total,
.apl-table thead th.apl-grid-head--current-notes + th.apl-grid-head--total,
.apl-table thead th.apl-grid-head--total + th.apl-grid-head--positive,
.apl-table thead th.apl-grid-head--positive + th.apl-grid-head--total,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--context + th.apl-grid-head--overdue,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--overdue + th.apl-grid-head--overdue-strong,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--overdue-strong + th.apl-grid-head--overdue-notes,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--overdue-strong + th.apl-grid-head--current,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--overdue-notes + th.apl-grid-head--current,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--current + th.apl-grid-head--current-notes,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--current + th.apl-grid-head--total,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--current-notes + th.apl-grid-head--total,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--total + th.apl-grid-head--positive,
#apl-tcn-results .apl-tcn-data-table thead th.apl-grid-head--positive + th.apl-grid-head--total {
border-left: calc(var(--apl-ui-border-width) * 2) solid var(--apl-ui-color-border-strong) !important;
}
.apl-table tbody tr:hover td,
.apl-table--standard tbody tr:hover td {
background: var(--apl-ui-color-surface-hover);
}
.apl-table tbody tr:last-child td,
.apl-table--standard tbody tr:last-child td {
border-bottom: var(--apl-ui-space-0);
}
.apl-table__primary,
.apl-table__secondary,
.apl-table__link,
.apl-table__amount {
display: block;
}
.apl-table__primary,
.apl-table__amount {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-table__secondary {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-table__link {
color: var(--apl-ui-color-brand-dark);
overflow-wrap: anywhere;
text-decoration: none;
}
.apl-table__link:hover,
.apl-table__link:focus {
color: var(--apl-ui-color-text-strong);
text-decoration: underline;
}
/*
* Acceso universal a la consulta integral desde columnas de inmueble.
* La celda y la acción son parte del contrato central: las vistas solo
* entregan el identificador y la etiqueta del inmueble.
*/
.apl-property-cell {
align-items: center;
display: inline-flex;
gap: var(--apl-ui-space-2);
max-width: 100%;
min-width: var(--apl-ui-space-0);
}
.apl-property-cell__content {
min-width: var(--apl-ui-space-0);
}
.apl-property-consult {
align-items: center;
align-self: center;
background: transparent;
border: var(--apl-ui-border-width) solid transparent;
border-radius: var(--apl-ui-radius-sm);
box-sizing: border-box;
color: var(--apl-ui-color-brand-dark);
cursor: pointer;
display: inline-flex;
flex: 0 0 auto;
font: var(--apl-ui-font-weight-semibold) var(--apl-ui-property-consult-icon-size)/var(--apl-ui-line-icon) var(--apl-ui-font-family);
height: var(--apl-ui-property-consult-size);
justify-content: center;
margin: var(--apl-ui-space-0);
min-height: var(--apl-ui-property-consult-size);
min-width: var(--apl-ui-property-consult-size);
padding: var(--apl-ui-space-0);
transition: background var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), border-color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), box-shadow var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
width: var(--apl-ui-property-consult-size);
}
.apl-property-consult:hover,
.apl-property-consult:focus {
background: var(--apl-ui-color-brand-soft);
border-color: var(--apl-ui-color-brand-border-strong);
color: var(--apl-ui-color-brand-dark);
}
.apl-property-consult:focus-visible {
box-shadow: var(--apl-ui-shadow-accent-focus);
outline: var(--apl-ui-space-0);
}
/* La consulta integral ya tiene el inmueble como contexto y no se enlaza a sí misma. */
#apl-tcn-results .apl-property-consult {
display: none;
}
.apl-table__amount,
.apl-table__actions {
white-space: nowrap;
}
.apl-table__actions {
align-items: center;
display: flex;
gap: var(--apl-ui-space-1);
justify-content: flex-end;
}
/* Datos secundarios cuando una columna se integra en otra por responsividad. */
.apl-table__merged-secondary {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft);
margin-top: var(--apl-ui-space-1);
padding-top: var(--apl-ui-space-1);
white-space: normal;
}
.apl-table__merged-label {
color: var(--apl-ui-color-text-faint);
display: block;
font-size: var(--apl-ui-font-size-micro);
font-weight: var(--apl-ui-font-weight-semibold);
line-height: var(--apl-ui-line-tight);
margin-bottom: var(--apl-ui-space-1);
text-transform: none;
}
.apl-table__merged-value {
color: var(--apl-ui-color-text-body);
display: block;
line-height: var(--apl-ui-line-normal);
overflow-wrap: anywhere;
white-space: normal;
}
table.apl-table--standard th.apl-table__sortable {
padding: var(--apl-ui-space-0);
}
#apl-tcn-results table.apl-table--standard.apl-tcn-data-table th.apl-table__sortable {
padding: var(--apl-ui-space-0) !important;
}
/* Referencia homogénea de inmueble: código, tipo y bloque siempre legibles. */
.apl-property-reference {
align-items: baseline;
column-gap: var(--apl-ui-space-1) !important;
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: wrap;
max-width: 100%;
min-width: 0;
row-gap: 0 !important;
white-space: normal;
}
.apl-property-reference > * {
flex: 0 1 auto;
min-width: 0;
}
.apl-property-reference [class*="inmueble-meta"] {
margin-left: 0 !important;
margin-top: 0 !important;
white-space: normal !important;
}
.apl-property-reference [class*="inmueble-meta"]::before {
content: none !important;
}
.apl-badge, .apl-status { align-items: center; background: var(--apl-ui-color-surface-muted); border: 1px solid var(--apl-ui-color-border-muted); border-radius: var(--apl-ui-radius-badge); color: var(--apl-ui-color-text-muted); display: inline-flex; font-size: var(--apl-ui-font-size-caption); font-weight: var(--apl-ui-font-weight-bold); gap: 5px; line-height: 1; min-height: 22px; padding: 4px 8px; }
.apl-badge--success, .apl-status--success { background: var(--apl-ui-color-success-soft); border-color: var(--apl-ui-color-success-border); color: var(--apl-ui-color-success-dark); }
.apl-badge--warning, .apl-status--warning { background: var(--apl-ui-color-warning-soft); border-color: var(--apl-ui-color-warning-border); color: var(--apl-ui-color-warning-dark); }
.apl-badge--danger, .apl-status--danger { background: var(--apl-ui-color-danger-soft); border-color: var(--apl-ui-color-danger-border); color: var(--apl-ui-color-danger-dark); }
.apl-badge--critical, .apl-status--critical { background: var(--apl-ui-color-danger); border-color: var(--apl-ui-color-danger-dark); color: var(--apl-ui-color-on-solid); }
.apl-badge--info, .apl-status--info { background: var(--apl-ui-color-info-soft); border-color: var(--apl-ui-color-border-soft); color: var(--apl-ui-color-info-dark); }
.apl-email-state {
justify-content: flex-start;
max-width: 100%;
min-width: var(--apl-ui-space-0);
overflow: hidden;
width: 100%;
white-space: nowrap;
}
.apl-email-state > i {
flex: var(--apl-ui-space-0) var(--apl-ui-space-0) auto;
}
.apl-email-state > span {
min-width: var(--apl-ui-space-0);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Firma digital: estado físico, vista previa y carga segura */
.apl-signature-panel {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: grid;
gap: var(--apl-ui-space-3);
padding: var(--apl-ui-space-3);
}
.apl-signature-panel__summary {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
}
.apl-signature-panel__icon {
align-items: center;
background: var(--apl-ui-color-brand-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-brand-border);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-brand-dark);
display: inline-flex;
flex: var(--apl-ui-space-0) var(--apl-ui-space-0) auto;
height: var(--apl-ui-signature-icon-size);
justify-content: center;
width: var(--apl-ui-signature-icon-size);
}
.apl-signature-panel__copy {
flex: 1 1 var(--apl-ui-signature-copy-min);
min-width: var(--apl-ui-space-0);
}
.apl-signature-panel__copy strong,
.apl-signature-panel__copy small,
.apl-signature-panel__notice strong,
.apl-signature-panel__notice small,
.apl-signature-upload strong,
.apl-signature-upload small,
.apl-signature-upload em {
display: block;
}
.apl-signature-panel__copy strong,
.apl-signature-panel__notice strong,
.apl-signature-upload strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-signature-panel__copy small,
.apl-signature-panel__notice small,
.apl-signature-panel__preview figcaption,
.apl-signature-upload small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
line-height: var(--apl-ui-line-normal);
}
.apl-signature-panel__preview {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-3);
margin: var(--apl-ui-space-0);
padding: var(--apl-ui-space-2);
}
.apl-signature-panel__preview img {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-sm);
height: auto;
max-width: var(--apl-ui-signature-preview-width);
width: 100%;
}
.apl-feedback.apl-signature-panel__notice {
align-items: center;
flex-direction: row;
justify-content: flex-start;
min-height: var(--apl-ui-control-height);
padding: var(--apl-ui-space-2);
text-align: left;
}
.apl-signature-upload {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) dashed var(--apl-ui-color-border-strong);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
cursor: pointer;
display: flex;
gap: var(--apl-ui-space-3);
padding: var(--apl-ui-space-3);
}
.apl-signature-upload:hover {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
}
.apl-signature-upload > i {
color: var(--apl-ui-color-brand-dark);
font-size: var(--apl-ui-font-size-icon-xl);
}
.apl-signature-upload > span {
min-width: var(--apl-ui-space-0);
}
.apl-signature-upload em {
color: var(--apl-ui-color-brand-dark);
font-size: var(--apl-ui-font-size-detail);
font-style: normal;
font-weight: var(--apl-ui-font-weight-semibold);
margin-top: var(--apl-ui-space-1);
overflow-wrap: anywhere;
}
.apl-feedback { align-items: center; background: var(--apl-ui-color-surface-subtle); border: 1px dashed var(--apl-ui-color-border-strong); border-radius: var(--apl-ui-radius-lg); color: var(--apl-ui-color-text-muted); display: flex; flex-direction: column; gap: var(--apl-ui-space-2); justify-content: center; min-height: 140px; padding: var(--apl-ui-space-4); text-align: center; }
.apl-feedback__title { color: var(--apl-ui-color-text-strong); font-size: var(--apl-ui-font-size-label-lg); font-weight: var(--apl-ui-font-weight-semibold); }
.apl-feedback--warning { background: var(--apl-ui-color-warning-soft); border-color: var(--apl-ui-color-warning-border); color: var(--apl-ui-color-warning-dark); }
.apl-feedback--danger { background: var(--apl-ui-color-danger-soft); border-color: var(--apl-ui-color-danger-border); color: var(--apl-ui-color-danger-dark); }
/* Toggle reutilizable y compatibilidad con los filtros reconstruidos actuales */
.apl-toggle-block,
.apl-rebuilt-page .masiva-toggle-block { overflow: hidden; }
.apl-toggle-head,
.apl-rebuilt-page .masiva-toggle-head { align-items: center; background: var(--apl-ui-color-surface-subtle); border-bottom: 1px solid var(--apl-ui-color-border-muted); display: flex; justify-content: space-between; min-height: var(--apl-ui-control-height); padding: 5px 10px; }
.apl-toggle-block.is-collapsed .apl-toggle-head,
.apl-rebuilt-page .masiva-toggle-block.is-collapsed .masiva-toggle-head { border-bottom: 0; }
.apl-toggle-title,
.apl-rebuilt-page .masiva-toggle-title { color: var(--apl-ui-color-text-strong); font-size: var(--apl-ui-font-size-label); font-weight: var(--apl-ui-font-weight-bold); letter-spacing: .02em; line-height: var(--apl-ui-line-tight); text-transform: uppercase; }
.apl-toggle-meta,
.apl-rebuilt-page .masiva-toggle-wrap { align-items: center; display: inline-flex; gap: 6px; }
.apl-toggle-state,
.apl-rebuilt-page .masiva-toggle-state { color: var(--apl-ui-color-text-muted); display: inline-block; font-size: var(--apl-ui-font-size-micro); font-weight: var(--apl-ui-font-weight-bold); letter-spacing: .02em; line-height: 1; min-width: 44px; text-transform: uppercase; }
.apl-switch,
.apl-rebuilt-page .masiva-mini-toggle { cursor: pointer; display: inline-block; height: 18px; margin: 0; position: relative; width: 34px; }
.apl-switch__input,
.apl-rebuilt-page .masiva-toggle-input { height: 0; opacity: 0; position: absolute; width: 0; }
.apl-switch__track,
.apl-rebuilt-page .masiva-mini-track { background: var(--apl-ui-color-surface-strong); border: 1px solid var(--apl-ui-color-border-strong); border-radius: var(--apl-ui-radius-pill); inset: 0; position: absolute; transition: all var(--apl-ui-duration-normal) var(--apl-ui-ease-standard); }
.apl-switch__thumb,
.apl-rebuilt-page .masiva-mini-thumb { background: var(--apl-ui-color-surface); border: 1px solid var(--apl-ui-color-border-strong); border-radius: 50%; box-shadow: 0 1px 2px rgba(17, 27, 33, .22); height: 12px; left: 2px; position: absolute; top: 2px; transition: transform var(--apl-ui-duration-normal) var(--apl-ui-ease-standard); width: 12px; }
.apl-switch__input:checked + .apl-switch__track,
.apl-rebuilt-page .masiva-toggle-input:checked + .masiva-mini-track { background: var(--apl-ui-color-success); border-color: var(--apl-ui-color-success-dark); }
.apl-switch__input:checked ~ .apl-switch__thumb,
.apl-rebuilt-page .masiva-toggle-input:checked ~ .masiva-mini-thumb { border-color: var(--apl-ui-color-success-dark); transform: translateX(16px); }
.apl-switch-control { align-items: center; display: inline-flex; gap: var(--apl-ui-space-2); }
.apl-switch-control > .apl-switch { flex: 0 0 auto; pointer-events: none; }
.apl-switch-control[aria-checked="true"] .apl-switch__track { background: var(--apl-ui-color-success); border-color: var(--apl-ui-color-success-dark); }
.apl-switch-control[aria-checked="true"] .apl-switch__thumb { border-color: var(--apl-ui-color-success-dark); transform: translateX(16px); }
/* Métricas compactas para cabeceras operativas. */
.apl-metric-grid {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-metric-min-width)), 1fr));
}
.apl-metric {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: flex;
gap: var(--apl-ui-space-2);
min-width: 0;
padding: var(--apl-ui-space-3);
}
.apl-metric__copy {
flex: 1 1 auto;
min-width: 0;
}
.apl-metric__label,
.apl-metric__value,
.apl-metric__meta {
display: block;
max-width: 100%;
overflow-wrap: anywhere;
}
/* Gráficas analíticas compactas para vistas reconstruidas. */
.apl-chart {
height: var(--apl-ui-chart-height);
min-width: var(--apl-ui-space-0);
position: relative;
width: 100%;
}
.apl-chart canvas {
height: 100% !important;
max-width: 100%;
width: 100% !important;
}
.apl-chart-grid {
display: grid;
gap: var(--apl-ui-density-field-gap);
grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--apl-ui-chart-grid-min-width)),1fr));
}
/* Detalle progresivo reutilizable para datos secundarios y trazabilidad. */
.apl-disclosure {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
min-width: var(--apl-ui-space-0);
overflow: hidden;
}
.apl-disclosure > summary {
align-items: center;
color: var(--apl-ui-color-text-body);
cursor: pointer;
display: flex;
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
gap: var(--apl-ui-space-2);
justify-content: space-between;
list-style: none;
min-height: var(--apl-ui-control-height);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-disclosure > summary::-webkit-details-marker { display: none; }
.apl-disclosure > summary:hover { background: var(--apl-ui-color-surface-subtle); }
.apl-disclosure > summary:focus-visible { box-shadow: var(--apl-ui-shadow-focus); outline: none; }
.apl-disclosure__body { border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider); min-width: var(--apl-ui-space-0); }
/* Contenedor de control crítico: mantiene visible la alerta aun cuando se cierre el detalle. */
.apl-disclosure--danger {
border-color: var(--apl-ui-color-danger-dark);
box-shadow: var(--apl-ui-shadow-sm);
}
.apl-disclosure--danger > summary {
background: var(--apl-ui-color-danger-soft);
color: var(--apl-ui-color-danger-dark);
}
.apl-disclosure--danger > summary:hover { background: var(--apl-ui-color-danger-soft); }
/* Detalle progresivo dentro de celdas: mantiene la tabla compacta y permite inspeccionar todos los valores. */
.apl-disclosure--inline {
background: var(--apl-ui-color-transparent);
border: 0;
border-radius: var(--apl-ui-space-0);
overflow: visible;
}
.apl-disclosure--inline > summary {
color: var(--apl-ui-color-brand-dark);
display: inline-flex;
font-size: var(--apl-ui-font-size-caption);
gap: var(--apl-ui-space-1);
justify-content: flex-start;
min-height: var(--apl-ui-space-0);
padding: var(--apl-ui-space-1) var(--apl-ui-space-0);
}
.apl-disclosure--inline > summary:hover { background: var(--apl-ui-color-transparent); }
.apl-disclosure--inline[open] > summary > i { transform: rotate(180deg); }
.apl-disclosure--inline > .apl-disclosure__body {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
line-height: var(--apl-ui-line-relaxed);
margin-top: var(--apl-ui-space-1);
overflow-wrap: anywhere;
padding: var(--apl-ui-space-2);
}
/* Evidencia técnica progresiva para auditorías reconstruidas. */
.apl-code-block {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
color: var(--apl-ui-color-text-body);
font-family: var(--apl-ui-font-family-mono);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-regular);
line-height: var(--apl-ui-line-relaxed);
margin: var(--apl-ui-space-0);
max-height: var(--apl-ui-dialog-max-height);
overflow: auto;
padding: var(--apl-ui-space-3);
white-space: pre-wrap;
word-break: break-word;
}
.apl-audit-list {
color: var(--apl-ui-color-text-body);
display: grid;
font-size: var(--apl-ui-font-size-body);
gap: var(--apl-ui-space-1);
line-height: var(--apl-ui-line-normal);
margin: var(--apl-ui-space-2) var(--apl-ui-space-0) var(--apl-ui-space-0);
padding-inline-start: var(--apl-ui-space-4);
}
.apl-page-size {
align-items: center;
color: var(--apl-ui-color-text-muted);
display: inline-flex;
font-size: var(--apl-ui-font-size-detail);
gap: var(--apl-ui-space-1);
margin: var(--apl-ui-space-0);
}
.apl-page-size .apl-native-select {
min-width: var(--apl-ui-page-size-width);
}
.apl-metric__label {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
text-transform: uppercase;
}
.apl-metric__value {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title-lg);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin-top: var(--apl-ui-space-1);
}
.apl-metric__meta {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
/* Pestañas accesibles que no dependen de Bootstrap. */
.apl-tablist {
align-items: center;
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
display: flex;
gap: var(--apl-ui-space-1);
max-width: 100%;
overflow-x: auto;
padding: 0 var(--apl-ui-space-3);
}
.apl-tab {
align-items: center;
background: transparent;
border: 0;
border-bottom: calc(var(--apl-ui-border-width) * 2) solid transparent;
color: var(--apl-ui-color-text-muted);
display: inline-flex;
flex: 0 0 auto;
font: var(--apl-ui-font-weight-semibold) var(--apl-ui-font-size-button)/var(--apl-ui-line-normal) var(--apl-ui-font-family);
gap: var(--apl-ui-space-2);
min-height: var(--apl-ui-control-height-lg);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-tab:hover,
.apl-tab:focus {
color: var(--apl-ui-color-text-strong);
outline: 0;
}
.apl-tab[aria-selected="true"],
.apl-tab.is-active {
border-bottom-color: var(--apl-ui-color-brand);
color: var(--apl-ui-color-brand-dark);
}
.apl-tabpanel[hidden] {
display: none !important;
}
/* Medidor nativo reutilizable para consumos, capacidad y avance operativo. */
.apl-progress {
appearance: none;
background: var(--apl-ui-color-surface-muted);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-pill);
display: block;
height: var(--apl-ui-space-2);
margin: var(--apl-ui-space-1) 0;
overflow: hidden;
width: 100%;
}
.apl-progress::-webkit-progress-bar {
background: var(--apl-ui-color-surface-muted);
border-radius: var(--apl-ui-radius-pill);
}
.apl-progress::-webkit-progress-value {
background: var(--apl-ui-color-brand);
border-radius: var(--apl-ui-radius-pill);
}
.apl-progress::-moz-progress-bar {
background: var(--apl-ui-color-brand);
border-radius: var(--apl-ui-radius-pill);
}
/* Grupo compacto y homogéneo para varias acciones dentro de una celda. */
.apl-inline-actions {
align-items: center;
display: inline-flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-1);
}
.apl-inline-actions > form {
margin: 0;
}
/*
* Estándar compacto para pestañas dentro de formularios y tarjetas.
* Deben ser reconocibles como opciones sin competir con el contenido ni con la acción principal.
*/
.apl-tablist--form {
align-items: center;
background: var(--apl-ui-color-surface-muted);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: inline-flex;
gap: var(--apl-ui-space-1);
max-width: 100%;
overflow: visible;
padding: var(--apl-ui-space-1);
vertical-align: top;
width: auto;
}
.apl-tablist--form .apl-tab {
appearance: none;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
cursor: pointer;
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
flex: 0 1 auto;
min-height: var(--apl-ui-control-height-lg);
padding: var(--apl-ui-space-1) var(--apl-ui-space-3);
text-align: center;
text-decoration: none;
white-space: normal;
}
.apl-tablist--form .apl-tab:hover,
.apl-tablist--form .apl-tab:focus {
background: var(--apl-ui-color-surface-hover);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-text-strong);
text-decoration: none;
}
.apl-tablist--form .apl-tab:focus-visible {
border-color: var(--apl-ui-color-brand);
box-shadow: var(--apl-ui-shadow-focus);
outline: 0;
}
.apl-tablist--form .apl-tab[aria-selected="true"],
.apl-tablist--form .apl-tab.is-active {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border-strong);
color: var(--apl-ui-color-brand-dark);
}
.apl-tablist--form .apl-tab > i:first-child {
color: var(--apl-ui-color-text-muted);
}
.apl-tablist--form .apl-tab:hover > i:first-child,
.apl-tablist--form .apl-tab:focus > i:first-child,
.apl-tablist--form .apl-tab[aria-selected="true"] > i:first-child,
.apl-tablist--form .apl-tab.is-active > i:first-child {
color: var(--apl-ui-color-brand-dark);
}
@media (max-width: 520px) {
.apl-tablist--form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--apl-ui-query-field-min), 1fr));
width: 100%;
}
.apl-tablist--form .apl-tab {
justify-content: center;
width: 100%;
}
}
.apl-peace__template-layout {
align-items: start;
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: minmax(var(--apl-ui-space-0), 1.15fr) minmax(var(--apl-ui-tab-navigation-min-width), .85fr);
min-width: var(--apl-ui-space-0);
}
.apl-peace__template-form,
.apl-peace__template-preview {
min-width: var(--apl-ui-space-0);
}
.apl-peace__template-body {
min-height: calc(var(--apl-ui-control-height-lg) * 4) !important;
}
.apl-peace__marker-panel,
.apl-peace__identity {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
padding: var(--apl-ui-space-3);
}
.apl-peace__marker-head {
align-items: flex-start;
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
margin-bottom: var(--apl-ui-space-2);
}
.apl-peace__marker-head strong,
.apl-peace__marker-head small,
.apl-peace__identity-copy strong,
.apl-peace__identity-copy span {
display: block;
}
.apl-peace__marker-head strong,
.apl-peace__identity-copy strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-peace__marker-head small,
.apl-peace__identity-copy span {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-peace__markers {
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-1);
}
.apl-rebuilt .apl-peace__marker {
align-items: center;
appearance: none;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-pill);
box-shadow: none;
color: var(--apl-ui-color-text-body);
cursor: pointer;
display: inline-flex;
font-family: var(--apl-ui-font-family);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
gap: var(--apl-ui-space-1);
justify-content: center;
line-height: var(--apl-ui-line-normal);
min-height: var(--apl-ui-control-height-sm);
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
transition:
background-color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard),
border-color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard),
color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
}
.apl-rebuilt .apl-peace__marker > i {
color: var(--apl-ui-color-brand);
font-size: var(--apl-ui-font-size-caption);
margin: var(--apl-ui-space-0);
position: static;
}
.apl-rebuilt .apl-peace__marker:hover {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border-strong);
color: var(--apl-ui-color-brand-dark);
}
.apl-rebuilt .apl-peace__marker:focus-visible {
border-color: var(--apl-ui-color-brand);
box-shadow: var(--apl-ui-shadow-focus);
outline: var(--apl-ui-space-0);
}
.apl-rebuilt .apl-peace__marker:active {
background: var(--apl-ui-color-brand-soft);
}
.apl-peace__identity {
align-items: center;
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: var(--apl-ui-peace-logo-size) minmax(var(--apl-ui-space-0), 1fr);
}
.apl-peace__identity-logo {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-md);
display: flex;
height: var(--apl-ui-peace-logo-size);
justify-content: center;
overflow: hidden;
padding: var(--apl-ui-space-1);
}
.apl-peace__identity-logo img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.apl-peace__color-grid {
display: grid;
gap: var(--apl-ui-space-3);
grid-column: 1 / -1;
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
}
.apl-peace__color-label {
align-items: center;
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
margin-bottom: var(--apl-ui-space-1);
}
.apl-peace__color-label > label {
margin: var(--apl-ui-space-0);
}
.apl-peace__color-control {
align-items: center;
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: var(--apl-ui-peace-color-picker-size) minmax(var(--apl-ui-peace-color-field-min), 1fr) auto;
}
.apl-peace__color-picker {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-md);
cursor: pointer;
height: var(--apl-ui-peace-color-picker-size);
padding: var(--apl-ui-space-1);
width: var(--apl-ui-peace-color-picker-size);
}
.apl-peace__color-picker:hover {
border-color: var(--apl-ui-color-brand-border-strong);
}
.apl-peace__color-picker:focus-visible {
border-color: var(--apl-ui-color-brand);
box-shadow: var(--apl-ui-shadow-focus);
outline: var(--apl-ui-space-0);
}
.apl-peace__color-picker::-webkit-color-swatch-wrapper {
padding: var(--apl-ui-space-0);
}
.apl-peace__color-picker::-webkit-color-swatch,
.apl-peace__color-picker::-moz-color-swatch {
border: var(--apl-ui-space-0);
border-radius: var(--apl-ui-radius-sm);
}
.apl-peace__color-code {
min-width: var(--apl-ui-space-0);
text-transform: uppercase;
}
.apl-peace__color-control .apl-btn {
white-space: nowrap;
}
.apl-peace__template-actions {
flex-wrap: wrap;
justify-content: space-between;
}
.apl-peace__template-preview {
position: sticky;
top: var(--shell-content-gap);
}
.apl-peace-document {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-peace-document-line);
border-radius: var(--apl-ui-radius-lg);
box-shadow: var(--apl-ui-shadow-sm);
color: var(--apl-ui-peace-document-ink);
min-height: var(--apl-ui-peace-document-preview-height);
overflow: hidden;
}
.apl-peace-document__header {
align-items: center;
background: var(--apl-ui-peace-document-primary, var(--apl-ui-color-brand-dark));
color: var(--apl-ui-color-on-solid);
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: var(--apl-ui-peace-logo-size) minmax(var(--apl-ui-space-0), 1fr);
padding: var(--apl-ui-space-4);
}
.apl-peace-document__logo {
align-items: center;
background: var(--apl-ui-color-surface);
border-radius: var(--apl-ui-radius-md);
display: flex;
height: var(--apl-ui-peace-logo-size);
justify-content: center;
overflow: hidden;
padding: var(--apl-ui-space-1);
}
.apl-peace-document__logo img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.apl-peace-document__header strong,
.apl-peace-document__header span {
display: block;
}
.apl-peace-document__header strong {
font-weight: var(--apl-ui-font-weight-bold);
}
.apl-peace-document__header span {
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
opacity: var(--apl-ui-opacity-muted);
}
.apl-peace-document__accent {
background: var(--apl-ui-peace-document-accent, var(--apl-ui-color-accent));
height: var(--apl-ui-space-1);
}
.apl-peace-document__content {
padding: var(--apl-ui-space-5);
}
.apl-peace-document__eyebrow {
color: var(--apl-ui-peace-document-accent-dark);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
letter-spacing: var(--apl-ui-letter-spacing-label);
margin: var(--apl-ui-space-0) var(--apl-ui-space-0) var(--apl-ui-space-2);
text-transform: uppercase;
}
.apl-peace-document h3 {
color: var(--apl-ui-peace-document-primary, var(--apl-ui-color-brand-dark));
font-size: var(--apl-ui-font-size-title);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: var(--apl-ui-space-0) var(--apl-ui-space-0) var(--apl-ui-space-3);
}
.apl-peace-document__meta {
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-peace-document-line);
color: var(--apl-ui-color-text-subtle);
display: flex;
flex-wrap: wrap;
font-size: var(--apl-ui-font-size-caption);
gap: var(--apl-ui-space-3);
margin-bottom: var(--apl-ui-space-4);
padding-bottom: var(--apl-ui-space-3);
}
.apl-peace-document__content > p:not(.apl-peace-document__eyebrow) {
line-height: var(--apl-ui-line-relaxed);
white-space: pre-line;
}
.apl-peace-document__facts {
background: var(--apl-ui-peace-document-soft);
border: var(--apl-ui-border-width) solid var(--apl-ui-peace-document-line);
border-radius: var(--apl-ui-radius-md);
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(2, minmax(var(--apl-ui-space-0), 1fr));
margin: var(--apl-ui-space-4) var(--apl-ui-space-0);
padding: var(--apl-ui-space-3);
}
.apl-peace-document__facts div:last-child {
grid-column: 1 / -1;
}
.apl-peace-document__facts dt {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
}
.apl-peace-document__facts dd {
color: var(--apl-ui-peace-document-ink);
font-weight: var(--apl-ui-font-weight-semibold);
margin: var(--apl-ui-space-1) var(--apl-ui-space-0) var(--apl-ui-space-0);
}
.apl-peace-document__signature {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-peace-document-primary);
display: flex;
flex-direction: column;
margin-top: var(--apl-ui-space-6);
max-width: var(--apl-ui-library-form-aside);
padding-top: var(--apl-ui-space-2);
}
.apl-peace-document__signature span {
margin-bottom: var(--apl-ui-space-5);
}
.apl-peace-document__signature strong {
color: var(--apl-ui-peace-document-ink);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-peace-document__signature small {
color: var(--apl-ui-color-text-subtle);
margin-top: var(--apl-ui-space-1);
}
.apl-peace-document > footer {
background: var(--apl-ui-color-surface);
border-top: var(--apl-ui-border-width) solid var(--apl-ui-peace-document-line);
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
padding: var(--apl-ui-space-3) var(--apl-ui-space-5);
}
.apl-peace #apl-peace-template-errors {
margin-bottom: var(--apl-ui-space-0);
}
@media (max-width: 1120px) {
.apl-peace__template-layout {
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
}
.apl-peace__template-preview {
position: static;
}
}
@media (max-width: 767px) {
.apl-peace__identity {
align-items: stretch;
grid-template-columns: var(--apl-ui-peace-logo-size) minmax(var(--apl-ui-space-0), 1fr);
}
.apl-peace__color-grid {
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
}
}
@media (max-width: 520px) {
.apl-peace__marker-head,
.apl-peace__template-actions {
align-items: stretch;
flex-direction: column;
}
.apl-peace__identity {
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
}
.apl-peace__identity-logo {
width: var(--apl-ui-peace-logo-size);
}
.apl-peace__color-control {
grid-template-columns: var(--apl-ui-peace-color-picker-size) minmax(var(--apl-ui-space-0), 1fr);
}
.apl-peace__color-control .apl-btn {
grid-column: 1 / -1;
}
.apl-peace__template-actions .apl-btn {
width: 100%;
}
.apl-peace-document__content {
padding: var(--apl-ui-space-3);
}
}
/*
* Navegación de secciones: variante reconocible para módulos con varios paneles.
* Mantiene todos los destinos visibles y comunica con claridad qué opción está activa.
*/
.apl-section-nav {
background: var(--apl-ui-color-surface-subtle);
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
display: grid;
gap: var(--apl-ui-space-2);
padding: var(--apl-ui-space-2);
}
.apl-section-nav__intro {
align-items: center;
display: flex;
gap: var(--apl-ui-space-3);
min-width: 0;
}
.apl-section-nav__copy {
min-width: 0;
}
.apl-section-nav__copy strong,
.apl-section-nav__copy span {
display: block;
}
.apl-section-nav__copy strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-body);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-section-nav__copy span {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
line-height: var(--apl-ui-line-normal);
margin-top: var(--apl-ui-space-1);
}
.apl-tablist--sections {
border-bottom: 0;
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(auto-fit, minmax(var(--apl-ui-tab-navigation-min-width), 1fr));
overflow: visible;
padding: 0;
}
.apl-tablist--sections .apl-tab {
appearance: none;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
color: var(--apl-ui-color-text-body);
cursor: pointer;
justify-content: flex-start;
max-width: 100%;
min-height: var(--apl-ui-tab-navigation-min-height);
min-width: 0;
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
text-align: left;
transition: background var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), border-color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), box-shadow var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
width: 100%;
}
.apl-tablist--sections .apl-tab:hover {
background: var(--apl-ui-color-surface-hover);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-text-strong);
}
.apl-tablist--sections .apl-tab:focus-visible {
border-color: var(--apl-ui-color-brand);
box-shadow: var(--apl-ui-shadow-focus);
outline: 0;
}
.apl-tablist--sections .apl-tab[aria-selected="true"],
.apl-tablist--sections .apl-tab.is-active {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border-strong);
color: var(--apl-ui-color-brand-dark);
}
.apl-tab__icon {
background: var(--apl-ui-color-surface-muted);
border-color: var(--apl-ui-color-border-muted);
color: var(--apl-ui-color-text-muted);
}
.apl-tab:hover .apl-tab__icon {
background: var(--apl-ui-color-surface);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-brand-dark);
}
.apl-tab[aria-selected="true"] .apl-tab__icon,
.apl-tab.is-active .apl-tab__icon {
background: var(--apl-ui-color-brand);
border-color: var(--apl-ui-color-brand);
color: var(--apl-ui-color-on-solid);
}
/*
* Icono plano para pestañas que ya comunican su estado mediante el contenedor.
* Evita crear una segunda cápsula visual dentro de controles compactos.
*/
.apl-tab__icon.apl-tab__icon--plain,
.apl-tab:hover .apl-tab__icon--plain,
.apl-tab[aria-selected="true"] .apl-tab__icon--plain,
.apl-tab.is-active .apl-tab__icon--plain {
background: none;
border: 0;
color: inherit;
}
.apl-tab__icon--plain {
align-items: center;
display: inline-flex;
flex: 0 0 var(--apl-ui-space-4);
justify-content: center;
min-width: var(--apl-ui-space-4);
}
.apl-tab__copy {
flex: 1 1 auto;
min-width: 0;
}
.apl-tab__copy strong,
.apl-tab__copy small {
display: block;
overflow-wrap: anywhere;
}
.apl-tab__copy strong {
color: inherit;
font-size: var(--apl-ui-font-size-button);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-tab__copy small {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-regular);
line-height: var(--apl-ui-line-normal);
margin-top: var(--apl-ui-space-1);
}
.apl-tab[aria-selected="true"] .apl-tab__copy small,
.apl-tab.is-active .apl-tab__copy small {
color: var(--apl-ui-color-brand-dark);
}
.apl-tab__indicator {
align-items: center;
border-radius: var(--apl-ui-radius-pill);
color: var(--apl-ui-color-text-subtle);
display: inline-flex;
flex: 0 0 var(--apl-ui-control-height-sm);
height: var(--apl-ui-control-height-sm);
justify-content: center;
width: var(--apl-ui-control-height-sm);
}
.apl-tab__indicator-active {
display: none !important;
}
.apl-tab[aria-selected="true"] .apl-tab__indicator,
.apl-tab.is-active .apl-tab__indicator {
background: var(--apl-ui-color-brand);
color: var(--apl-ui-color-on-solid);
}
.apl-tab[aria-selected="true"] .apl-tab__indicator-idle,
.apl-tab.is-active .apl-tab__indicator-idle {
display: none !important;
}
.apl-tab[aria-selected="true"] .apl-tab__indicator-active,
.apl-tab.is-active .apl-tab__indicator-active {
display: inline-flex !important;
}
@media (max-width: 520px) {
.apl-section-nav {
padding: var(--apl-ui-space-2);
}
.apl-section-nav__intro {
align-items: flex-start;
}
.apl-tablist--sections {
grid-template-columns: minmax(0, 1fr);
}
}
/* Diálogo propio de las vistas reconstruidas; no hereda geometría de Bootstrap. */
.apl-dialog-layer {
align-items: center;
background: var(--apl-ui-color-scrim);
display: flex;
inset: 0;
justify-content: center;
padding: var(--apl-ui-space-4);
position: fixed;
z-index: var(--apl-ui-z-overlay);
}
.apl-dialog-layer[hidden] {
display: none !important;
}
/* Los dialog nativos permanecen cerrados hasta que showModal() o el atributo open los active. */
dialog.apl-dialog:not([open]) {
display: none !important;
}
.apl-dialog {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-card);
box-shadow: var(--apl-ui-shadow-modal);
display: flex;
flex-direction: column;
max-height: var(--apl-ui-dialog-max-height);
max-width: 100%;
overflow: hidden;
width: var(--apl-ui-dialog-width);
}
.apl-dialog__header {
align-items: flex-start;
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: flex;
gap: var(--apl-ui-space-3);
justify-content: space-between;
min-width: 0;
padding: var(--apl-ui-space-4);
}
.apl-dialog__copy {
flex: 1 1 auto;
min-width: 0;
}
.apl-dialog__title {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title-lg);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: 0;
overflow-wrap: anywhere;
}
.apl-dialog__subtitle {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-body);
margin: var(--apl-ui-space-1) 0 0;
overflow-wrap: anywhere;
}
.apl-dialog__close {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-muted);
display: inline-flex;
flex: 0 0 var(--apl-ui-icon-button-size);
height: var(--apl-ui-icon-button-size);
justify-content: center;
padding: 0;
width: var(--apl-ui-icon-button-size);
}
.apl-dialog__close:hover,
.apl-dialog__close:focus {
background: var(--apl-ui-color-surface-muted);
color: var(--apl-ui-color-text-strong);
outline: 0;
}
.apl-dialog__body {
color: var(--apl-ui-color-text-body);
overflow: auto;
padding: var(--apl-ui-space-4);
}
.apl-dialog__footer {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: flex-end;
padding: var(--apl-ui-space-3) var(--apl-ui-space-4);
}
/* Integración del diálogo de mensajes heredado con vistas reconstruidas. */
.apl-message-modal--rebuilt {
color: var(--apl-ui-color-text-body);
font-family: var(--apl-ui-font-family);
z-index: var(--apl-ui-z-overlay) !important;
}
.apl-message-modal-backdrop {
background: var(--apl-ui-color-scrim);
opacity: 1 !important;
z-index: calc(var(--apl-ui-z-overlay) - 1) !important;
}
.apl-message-modal--rebuilt .modal-dialog {
margin: calc(var(--apl-ui-space-5) + var(--apl-ui-space-2)) auto;
max-width: calc(100% - (var(--apl-ui-space-4) * 2));
width: var(--apl-ui-dialog-width);
}
.apl-message-modal--rebuilt .modal-content.apl-message-dialog {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-card);
box-shadow: var(--apl-ui-shadow-modal);
max-width: 100%;
width: 100%;
}
.apl-message-modal--rebuilt .msg-modal-head {
align-items: center;
background: var(--apl-ui-color-surface);
}
.apl-message-modal--rebuilt .msg-modal-head-badge > .glyphicon {
color: inherit;
font-size: var(--apl-ui-font-size-control);
line-height: var(--apl-ui-line-icon);
}
.apl-message-modal--rebuilt .msg-modal-head-title {
color: var(--apl-ui-color-text-strong);
display: block;
font-size: var(--apl-ui-font-size-title-lg);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: var(--apl-ui-space-0);
overflow-wrap: anywhere;
}
.apl-message-modal--rebuilt .msg-modal-head-subtitle {
color: var(--apl-ui-color-text-muted);
display: block;
font-size: var(--apl-ui-font-size-body);
line-height: var(--apl-ui-line-normal);
margin: var(--apl-ui-space-1) 0 0;
overflow-wrap: anywhere;
}
.apl-message-modal--rebuilt .modal-body.apl-dialog__body {
padding: var(--apl-ui-space-4);
}
.apl-message-modal--rebuilt .msg-alert {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
color: var(--apl-ui-color-text-body);
display: flex;
gap: var(--apl-ui-space-3);
line-height: var(--apl-ui-line-normal);
margin: var(--apl-ui-space-0);
max-width: 100%;
min-width: 0;
overflow: hidden;
padding: var(--apl-ui-density-surface-padding);
}
.apl-message-modal--rebuilt .msg-alert-info {
background: var(--apl-ui-color-info-soft);
border-color: var(--apl-ui-color-border-soft);
color: var(--apl-ui-color-info-dark);
}
.apl-message-modal--rebuilt .msg-alert-success {
background: var(--apl-ui-color-success-soft);
border-color: var(--apl-ui-color-success-border);
color: var(--apl-ui-color-success-dark);
}
.apl-message-modal--rebuilt .msg-alert-warning {
background: var(--apl-ui-color-warning-soft);
border-color: var(--apl-ui-color-warning-border);
color: var(--apl-ui-color-warning-dark);
}
.apl-message-modal--rebuilt .msg-alert-danger {
background: var(--apl-ui-color-danger-soft);
border-color: var(--apl-ui-color-danger-border);
color: var(--apl-ui-color-danger-dark);
}
.apl-message-modal--rebuilt .msg-alert-icon {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid currentColor;
border-radius: var(--apl-ui-radius-md);
display: inline-flex;
flex: 0 0 var(--apl-ui-icon-button-size);
height: var(--apl-ui-icon-button-size);
justify-content: center;
line-height: var(--apl-ui-line-icon);
width: var(--apl-ui-icon-button-size);
}
.apl-message-modal--rebuilt .msg-alert-text {
color: inherit;
flex: 1 1 var(--apl-ui-notice-copy-min);
min-width: 0;
overflow-wrap: anywhere;
}
.apl-message-modal--rebuilt .msg-alert-text ul {
margin: var(--apl-ui-space-2) 0 0;
padding-left: var(--apl-ui-space-5);
}
.apl-message-modal--rebuilt .msg-alert-lg {
font-size: var(--apl-ui-font-size-title-lg);
}
.apl-message-modal--rebuilt .msg-planilla-digital.apl-message-dialog__option {
margin-top: var(--apl-ui-space-3);
padding: var(--apl-ui-space-3);
}
.apl-message-modal--rebuilt .msg-planilla-digital label,
.apl-message-modal--rebuilt .msg-planilla-digital select,
.apl-message-modal--rebuilt .msg-planilla-digital small {
display: block;
width: 100%;
}
.apl-message-modal--rebuilt .msg-planilla-digital label {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-label-lg);
font-weight: var(--apl-ui-font-weight-bold);
margin-bottom: var(--apl-ui-space-2);
}
.apl-message-modal--rebuilt .msg-planilla-digital select {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
min-height: var(--apl-ui-control-height);
padding: var(--apl-ui-space-2);
}
.apl-message-modal--rebuilt .msg-planilla-digital small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
line-height: var(--apl-ui-line-normal);
margin-top: var(--apl-ui-space-2);
}
.apl-message-modal--rebuilt .msg-planilla-digital-warning {
color: var(--apl-ui-color-warning-dark) !important;
font-weight: var(--apl-ui-font-weight-bold);
}
.apl-message-modal--rebuilt .modal-footer.apl-dialog__footer {
margin: var(--apl-ui-space-0);
padding: var(--apl-ui-space-3) var(--apl-ui-space-4);
}
.apl-message-modal--rebuilt .apl-message-dialog__form {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: flex-end;
margin: var(--apl-ui-space-0);
}
.apl-message-modal--rebuilt .msg-btn.apl-btn {
min-width: calc(var(--apl-ui-control-height) * 3);
}
body.apl-dialog-open {
overflow: hidden;
}
/* Paginador compacto, legible y predecible. */
html body .apl-pager {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: space-between;
min-height: var(--apl-ui-control-height-lg);
min-width: 0;
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
html body .apl-pager .apl-pager__summary {
align-items: center;
color: var(--apl-ui-color-text-muted);
display: flex;
flex-wrap: wrap;
font-size: var(--apl-ui-font-size-detail);
gap: var(--apl-ui-space-1) var(--apl-ui-space-2);
line-height: var(--apl-ui-line-normal);
min-width: 0;
padding-inline: var(--apl-ui-space-1);
}
html body .apl-pager .apl-pager__summary-primary {
color: var(--apl-ui-color-text-body);
font-weight: var(--apl-ui-font-weight-semibold);
}
html body .apl-pager .apl-pager__summary-context {
color: var(--apl-ui-color-text-subtle);
}
html body .apl-pager .apl-pager__controls {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
box-shadow: var(--apl-ui-shadow-sm);
display: flex;
flex-wrap: nowrap;
gap: var(--apl-ui-space-1);
justify-content: flex-end;
list-style: none;
margin: 0;
max-width: 100%;
min-width: 0;
overflow-x: auto;
padding: var(--apl-ui-space-1);
scrollbar-width: thin;
}
html body .apl-pager .apl-pager__controls > li {
display: flex;
list-style: none;
margin: 0;
}
html body .apl-pager .apl-pager__button {
align-items: center;
background: transparent;
border: var(--apl-ui-border-width) solid transparent;
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
cursor: pointer;
display: inline-flex;
flex: 0 0 auto;
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
gap: var(--apl-ui-space-1);
height: var(--apl-ui-pager-button-size);
justify-content: center;
min-width: var(--apl-ui-pager-button-size);
padding: 0 var(--apl-ui-space-2);
text-decoration: none;
white-space: nowrap;
}
html body .apl-pager .apl-pager__button:hover,
html body .apl-pager .apl-pager__button:focus {
background: var(--apl-ui-color-surface-muted);
border-color: var(--apl-ui-color-border-muted);
color: var(--apl-ui-color-text-strong);
outline: 0;
text-decoration: none;
}
html body .apl-pager .apl-pager__button:focus-visible {
box-shadow: var(--apl-ui-shadow-focus);
}
html body .apl-pager .apl-pager__button--direction {
color: var(--apl-ui-color-text-strong);
padding-inline: var(--apl-ui-space-3);
}
html body .apl-pager .apl-pager__button.is-active,
html body .apl-pager .apl-pager__button[aria-current="page"] {
background: var(--apl-ui-color-brand);
border-color: var(--apl-ui-color-brand-dark);
color: var(--apl-ui-color-on-solid);
font-weight: var(--apl-ui-font-weight-bold);
}
html body .apl-pager .apl-pager__button.is-active:hover,
html body .apl-pager .apl-pager__button.is-active:focus,
html body .apl-pager .apl-pager__button[aria-current="page"]:hover,
html body .apl-pager .apl-pager__button[aria-current="page"]:focus {
background: var(--apl-ui-color-brand-dark);
color: var(--apl-ui-color-on-solid);
}
html body .apl-pager .apl-pager__button[disabled],
html body .apl-pager .apl-pager__button.is-disabled,
html body .apl-pager .apl-pager__button[aria-disabled="true"] {
cursor: not-allowed;
opacity: var(--apl-ui-opacity-disabled);
pointer-events: none;
}
html body .apl-pager .apl-pager__page {
align-items: center;
color: var(--apl-ui-color-text-muted);
display: inline-flex;
flex: 0 0 auto;
font-size: var(--apl-ui-font-size-detail);
height: var(--apl-ui-pager-button-size);
justify-content: center;
min-width: var(--apl-ui-pager-button-size);
padding: 0 var(--apl-ui-space-1);
text-align: center;
}
@media (max-width: 600px) {
html body .apl-pager {
align-items: stretch;
flex-direction: column;
padding: var(--apl-ui-space-2);
}
html body .apl-pager .apl-pager__summary {
justify-content: space-between;
width: 100%;
}
html body .apl-pager .apl-pager__controls {
justify-content: flex-start;
width: 100%;
}
html body .apl-pager .apl-pager__button--direction > span {
display: none;
}
html body .apl-pager .apl-pager__button--direction {
padding-inline: var(--apl-ui-space-2);
}
}
/* ======================================================================
* APL Messaging Workspace
* Mensajería documental y operación logística comparten navegación,
* consulta, tablas, formularios y estados sin estilos locales.
* ====================================================================== */
:root {
--apl-ui-messaging-table-min-width: 1080px;
--apl-ui-messaging-table-wide-min-width: 1480px;
--apl-ui-messaging-form-width: 980px;
--apl-ui-messaging-evidence-width: 900px;
--apl-ui-messaging-company-min-width: 250px;
--apl-ui-messaging-list-min-height: 120px;
--apl-ui-messaging-chart-height: 320px;
--apl-ui-messaging-preview-height: 62vh;
}
.apl-messaging {
max-width: var(--apl-ui-page-max-width);
}
.apl-messaging form,
.apl-messaging fieldset,
.apl-messaging dl,
.apl-messaging p {
margin-top: var(--apl-ui-space-0);
}
.apl-messaging-nav {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-card);
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(2, minmax(var(--apl-ui-space-0), 1fr));
padding: var(--apl-ui-space-2);
}
.apl-messaging-nav__group {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: flex;
gap: var(--apl-ui-space-2);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
}
.apl-messaging-nav__label {
color: var(--apl-ui-color-text-subtle);
flex: 0 0 auto;
font-size: var(--apl-ui-font-size-micro);
font-weight: var(--apl-ui-font-weight-bold);
letter-spacing: var(--apl-ui-letter-spacing-label);
text-transform: uppercase;
}
.apl-messaging-nav__links {
align-items: center;
display: flex;
gap: var(--apl-ui-space-1);
min-width: var(--apl-ui-space-0);
overflow-x: auto;
scrollbar-width: thin;
}
.apl-messaging-nav__link {
align-items: center;
border: var(--apl-ui-border-width) solid transparent;
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-muted);
display: inline-flex;
flex: 0 0 auto;
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
gap: var(--apl-ui-space-1);
min-height: var(--apl-ui-control-height-sm);
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
text-decoration: none;
}
.apl-messaging-nav__link:hover,
.apl-messaging-nav__link:focus {
background: var(--apl-ui-color-surface-hover);
border-color: var(--apl-ui-color-border);
color: var(--apl-ui-color-text-strong);
text-decoration: none;
}
.apl-messaging-nav__link.is-active {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-brand-dark);
}
.apl-messaging__query .apl-card__body {
padding: var(--apl-ui-space-2);
}
.apl-messaging__query .apl-querybar {
border: var(--apl-ui-space-0);
border-radius: var(--apl-ui-space-0);
padding: var(--apl-ui-space-0);
}
.apl-messaging__advanced {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
margin-top: var(--apl-ui-space-2);
padding-top: var(--apl-ui-space-2);
}
.apl-messaging__results-head,
.apl-messaging__section-head,
.apl-messaging__selection-head {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: space-between;
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-messaging__results-tools,
.apl-messaging__section-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: flex-end;
}
.apl-messaging__search {
min-width: var(--apl-ui-query-search-min);
}
.apl-messaging__results {
max-width: 100%;
min-height: var(--apl-ui-messaging-list-min-height);
min-width: var(--apl-ui-space-0);
overflow-x: hidden;
position: relative;
}
.apl-messaging .apl-card__body.apl-stack {
max-width: 100%;
min-width: var(--apl-ui-space-0);
overflow-x: hidden;
width: 100%;
}
.apl-messaging__results[aria-busy="true"] {
opacity: var(--apl-ui-opacity-disabled);
pointer-events: none;
}
.apl-messaging .apl-table {
min-width: var(--apl-ui-messaging-table-min-width);
}
.apl-messaging .apl-table--wide {
min-width: var(--apl-ui-messaging-table-wide-min-width);
}
.apl-messaging .apl-table th,
.apl-messaging .apl-table td {
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-messaging .apl-table td:last-child,
.apl-messaging .apl-table th:last-child {
white-space: nowrap;
}
.apl-messaging__primary,
.apl-messaging__secondary {
display: block;
min-width: var(--apl-ui-space-0);
overflow-wrap: anywhere;
}
.apl-messaging__primary {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-messaging__secondary {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-messaging__number {
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
.apl-messaging__row--group td {
background: var(--apl-ui-color-brand-surface);
}
.apl-messaging__row--warning td {
background: var(--apl-ui-color-warning-soft);
}
.apl-messaging__row--danger td {
background: var(--apl-ui-color-danger-soft);
}
.apl-messaging__row--success td {
background: var(--apl-ui-color-success-soft);
}
.apl-messaging__inline-control {
min-width: var(--apl-ui-query-field-min);
}
.apl-messaging__inline-control .apl-control {
min-height: var(--apl-ui-control-height-sm) !important;
}
.apl-messaging__form {
margin-inline: auto;
max-width: var(--apl-ui-messaging-form-width);
width: 100%;
}
.apl-messaging__form-grid {
display: grid;
gap: var(--apl-ui-density-field-gap);
grid-template-columns: repeat(2, minmax(var(--apl-ui-space-0), 1fr));
}
.apl-messaging__fieldset {
border: var(--apl-ui-space-0);
display: grid;
gap: var(--apl-ui-space-3);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-0);
}
.apl-messaging__fieldset > legend {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-section-title);
font-weight: var(--apl-ui-font-weight-bold);
margin: var(--apl-ui-space-0);
}
.apl-messaging__form-footer {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: flex-end;
padding: var(--apl-ui-space-3);
}
.apl-messaging__group-summary {
grid-template-columns: repeat(5, minmax(var(--apl-ui-space-0), 1fr));
}
.apl-messaging__company-toolbar {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: space-between;
}
.apl-messaging__company-toolbar .apl-field {
flex: 1 1 var(--apl-ui-query-search-min);
}
.apl-messaging__company-grid {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-messaging-company-min-width)), 1fr));
}
.apl-messaging__company {
align-items: flex-start;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
cursor: pointer;
display: flex;
gap: var(--apl-ui-space-2);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-3);
}
.apl-messaging__company:hover,
.apl-messaging__company:focus-within {
border-color: var(--apl-ui-color-brand-border);
box-shadow: var(--apl-ui-shadow-sm);
}
.apl-messaging__company.is-selected,
.apl-messaging__company.is-principal {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
}
.apl-messaging__company.has-previous {
background: var(--apl-ui-color-warning-soft);
border-color: var(--apl-ui-color-warning-border);
}
.apl-messaging__company.is-hidden {
display: none;
}
.apl-messaging__company-copy {
flex: 1 1 auto;
min-width: var(--apl-ui-space-0);
}
.apl-messaging__company-top {
align-items: flex-start;
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
}
.apl-messaging__company-meta {
color: var(--apl-ui-color-text-muted);
display: grid;
font-size: var(--apl-ui-font-size-caption);
gap: var(--apl-ui-space-1);
margin-top: var(--apl-ui-space-2);
}
.apl-messaging__selected-list {
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-1);
}
.apl-messaging__progressive > summary {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border-radius: var(--apl-ui-radius-lg);
color: var(--apl-ui-color-text-strong);
cursor: pointer;
display: flex;
font-weight: var(--apl-ui-font-weight-semibold);
gap: var(--apl-ui-space-2);
justify-content: space-between;
min-height: var(--apl-ui-control-height);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-messaging__progressive > summary::after {
content: "\f107";
font-family: FontAwesome;
}
.apl-messaging__progressive[open] > summary::after {
content: "\f106";
}
.apl-messaging__definition {
display: grid;
gap: var(--apl-ui-space-1);
grid-template-columns: repeat(3, minmax(var(--apl-ui-space-0), 1fr));
}
.apl-messaging__definition > div {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-2);
}
.apl-messaging__definition dt {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
text-transform: uppercase;
}
.apl-messaging__definition dd {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
margin: var(--apl-ui-space-1) var(--apl-ui-space-0) var(--apl-ui-space-0);
overflow-wrap: anywhere;
}
.apl-messaging__evidence-grid {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-messaging-company-min-width)), 1fr));
}
.apl-messaging__evidence {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: grid;
gap: var(--apl-ui-space-2);
padding: var(--apl-ui-space-2);
}
.apl-messaging__evidence img,
.apl-messaging__evidence-frame {
background: var(--apl-ui-color-surface-muted);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
max-height: var(--apl-ui-messaging-preview-height);
object-fit: contain;
width: 100%;
}
.apl-dialog-layer--drawer .apl-messaging__evidence-dialog,
.apl-dialog-layer--drawer .apl-messaging > .apl-dialog {
border-radius: var(--apl-ui-radius-card) var(--apl-ui-space-0) var(--apl-ui-space-0) var(--apl-ui-radius-card);
height: 100%;
margin-left: auto;
max-height: none;
width: min(100%, var(--apl-ui-community-catalog-drawer-width));
}
.apl-messaging__evidence-frame {
min-height: var(--apl-ui-messaging-preview-height);
}
.apl-messaging__chart {
min-height: var(--apl-ui-messaging-chart-height);
overflow-x: auto;
}
.apl-messaging__chart > div {
min-height: var(--apl-ui-messaging-chart-height);
}
.apl-messaging__loading {
align-items: center;
color: var(--apl-ui-color-text-muted);
display: flex;
gap: var(--apl-ui-space-2);
justify-content: center;
min-height: var(--apl-ui-messaging-list-min-height);
padding: var(--apl-ui-space-3);
}
.apl-messaging__loading .fa {
animation: apl-messaging-spin var(--apl-ui-duration-skeleton) linear infinite;
}
@keyframes apl-messaging-spin {
to { transform: rotate(360deg); }
}
@media (max-width: 1100px) {
.apl-messaging-nav {
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
}
.apl-messaging__group-summary {
grid-template-columns: repeat(2, minmax(var(--apl-ui-space-0), 1fr));
}
}
@media (max-width: 767px) {
.apl-messaging-nav__group {
align-items: stretch;
flex-direction: column;
}
.apl-messaging__form-grid,
.apl-messaging__definition,
.apl-messaging__group-summary {
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
}
.apl-messaging__results-head,
.apl-messaging__section-head,
.apl-messaging__selection-head,
.apl-messaging__company-toolbar {
align-items: stretch;
flex-direction: column;
}
.apl-messaging__results-tools,
.apl-messaging__section-actions {
justify-content: flex-start;
}
.apl-messaging__search {
min-width: var(--apl-ui-space-0);
width: 100%;
}
}
/* Capas seguras. Para un modal elevado, cambiar la variable en body; no
* redefinir .modal-backdrop dentro de una vista. */
body.janox-template {
--apl-ui-active-backdrop-z: var(--apl-ui-z-backdrop);
}
body.janox-template > .modal-backdrop {
z-index: var(--apl-ui-active-backdrop-z);
}
body.janox-template.apl-modal-layer-raised {
--apl-ui-active-backdrop-z: 1055;
}
.apl-modal { z-index: var(--apl-ui-z-modal-raised); }
/* Utilidades deliberadamente pequenas y estables */
.apl-fw-regular, [data-apl-weight="regular"] { font-weight: var(--apl-ui-font-weight-regular) !important; }
.apl-fw-medium, [data-apl-weight="medium"] { font-weight: var(--apl-ui-font-weight-medium) !important; }
.apl-fw-semibold, [data-apl-weight="semibold"] { font-weight: var(--apl-ui-font-weight-semibold) !important; }
.apl-fw-bold, [data-apl-weight="bold"] { font-weight: var(--apl-ui-font-weight-bold) !important; }
.apl-text-micro, [data-apl-size="micro"] { font-size: var(--apl-ui-font-size-micro) !important; }
.apl-text-caption, [data-apl-size="caption"] { font-size: var(--apl-ui-font-size-caption) !important; }
.apl-text-detail, [data-apl-size="detail"] { font-size: var(--apl-ui-font-size-detail) !important; }
.apl-text-body, [data-apl-size="body"] { font-size: var(--apl-ui-font-size-body) !important; }
.apl-text-title, [data-apl-size="title"] { font-size: var(--apl-ui-font-size-title) !important; }
.apl-text-strong { color: var(--apl-ui-color-text-strong) !important; }
.apl-text-muted { color: var(--apl-ui-color-text-muted) !important; }
.apl-text-subtle { color: var(--apl-ui-color-text-subtle) !important; }
.apl-text-success { color: var(--apl-ui-color-success-dark) !important; }
.apl-text-danger { color: var(--apl-ui-color-danger-dark) !important; }
.apl-hidden { display: none !important; }
.apl-w-100 { width: 100% !important; }
.apl-m-0 { margin: 0 !important; }
.apl-mt-1 { margin-top: var(--apl-ui-space-1) !important; }
.apl-mt-2 { margin-top: var(--apl-ui-space-2) !important; }
.apl-mt-3 { margin-top: var(--apl-ui-space-3) !important; }
.apl-mb-1 { margin-bottom: var(--apl-ui-space-1) !important; }
.apl-mb-2 { margin-bottom: var(--apl-ui-space-2) !important; }
.apl-mb-3 { margin-bottom: var(--apl-ui-space-3) !important; }
@media (max-width: 767px) {
.apl-context-bar { align-items: flex-start; }
.apl-context-bar__main { flex-wrap: wrap; width: 100%; }
.apl-context-bar__title { flex-basis: 100%; white-space: normal; }
.apl-context-bar__meta { width: 100%; }
.apl-page__hero,
.apl-rebuilt-page .hero-card { align-items: stretch; flex-direction: column; padding: var(--apl-ui-space-4); }
.apl-page__title,
.apl-rebuilt-page .hero-text h1 { font-size: var(--apl-ui-font-size-display); }
.apl-page__actions,
.apl-rebuilt-page .hero-actions { justify-content: flex-start; width: 100%; }
.apl-grid, .apl-grid--2, .apl-grid--3, .apl-grid--4, .apl-filter-grid { grid-template-columns: 1fr; }
.apl-col-1, .apl-col-2, .apl-col-3, .apl-col-4, .apl-col-5, .apl-col-6,
.apl-col-7, .apl-col-8, .apl-col-9, .apl-col-10, .apl-col-11, .apl-col-12 { grid-column: auto; }
.apl-actions .apl-btn { flex: 1 1 auto; }
.apl-command-hero__actions { justify-content: flex-start; width: 100%; }
.apl-command-action { flex: 1 1 var(--apl-ui-query-field-min); }
}
@media (prefers-reduced-motion: reduce) {
.apl-rebuilt *,
[data-apl-ui="rebuilt"] * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}
/* Control trazable de comisiones de barbería */
.apl-settlement,
.apl-settlement * {
box-sizing: border-box;
}
.apl-settlement__results {
display: grid;
gap: var(--apl-ui-space-2);
min-width: 0;
}
.apl-settlement__finder {
flex: 0 1 var(--apl-ui-settlement-search-width);
min-width: min(100%, var(--apl-ui-query-search-min));
width: var(--apl-ui-settlement-search-width);
}
.apl-settlement__table {
min-width: var(--apl-ui-settlement-table-min-width);
}
.apl-settlement__number {
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
.apl-settlement__professional {
align-items: center;
display: flex;
gap: var(--apl-ui-space-2);
min-width: 0;
}
.apl-settlement__professional > span:last-child,
.apl-settlement__professional strong,
.apl-settlement__professional small {
display: block;
min-width: 0;
}
.apl-settlement__initial {
align-items: center;
background: var(--apl-ui-color-brand-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-brand-border);
border-radius: var(--apl-ui-radius-pill);
color: var(--apl-ui-color-brand-dark);
display: inline-flex;
flex: 0 0 var(--apl-ui-icon-button-size);
font-size: var(--apl-ui-font-size-label-lg);
font-weight: var(--apl-ui-font-weight-bold);
height: var(--apl-ui-icon-button-size);
justify-content: center;
width: var(--apl-ui-icon-button-size);
}
.apl-settlement__cell-note {
color: var(--apl-ui-color-text-subtle);
display: block;
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-settlement__actions {
text-align: right;
white-space: nowrap;
}
.apl-settlement .apl-card__footer {
color: var(--apl-ui-color-text-muted);
justify-content: space-between;
}
.apl-settlement__detail-layer {
align-items: stretch;
}
.apl-settlement__detail-dialog {
margin: auto;
width: var(--apl-ui-settlement-dialog-width);
}
.apl-dialog-layer--drawer.apl-settlement__detail-layer {
align-items: stretch;
justify-content: flex-end;
padding: 0;
}
.apl-dialog-layer--drawer .apl-settlement__detail-dialog {
animation: apl-settlement-detail-enter var(--apl-ui-duration-normal) var(--apl-ui-ease-standard);
border-radius: var(--apl-ui-radius-card) 0 0 var(--apl-ui-radius-card);
height: 100%;
margin: 0 0 0 auto;
max-height: none;
width: min(100%, var(--apl-ui-settlement-dialog-width));
}
.apl-dialog-layer--drawer .apl-settlement__detail-dialog .apl-dialog__body {
overscroll-behavior: contain;
}
@keyframes apl-settlement-detail-enter {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.apl-dialog-layer--drawer .apl-settlement__detail-dialog {
animation: none;
}
}
.apl-settlement__detail-tools {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-3);
justify-content: space-between;
}
.apl-settlement__detail-tools .apl-finder {
flex: 1 1 var(--apl-ui-query-search-min);
max-width: var(--apl-ui-settlement-search-width);
}
.apl-settlement__services-table {
min-width: var(--apl-ui-settlement-services-min-width);
}
.apl-settlement__payment-methods {
align-items: stretch;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-1);
min-width: 0;
}
.apl-settlement__payment-method {
background: var(--apl-ui-color-brand-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-brand-border);
border-radius: var(--apl-ui-radius-md);
display: inline-flex;
flex-direction: column;
gap: var(--apl-ui-space-0);
max-width: 100%;
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
}
.apl-settlement__payment-method strong,
.apl-settlement__payment-method small {
display: block;
line-height: var(--apl-ui-line-tight);
overflow-wrap: anywhere;
}
.apl-settlement__payment-method strong {
color: var(--apl-ui-color-brand-dark);
font-size: var(--apl-ui-font-size-detail);
}
.apl-settlement__payment-method small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
font-variant-numeric: tabular-nums;
}
.apl-settlement__payment-method--muted {
background: var(--apl-ui-color-surface-muted);
border-color: var(--apl-ui-color-border-muted);
}
.apl-settlement__payment-method--muted strong {
color: var(--apl-ui-color-text-muted);
}
.apl-settlement__media-summary {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: minmax(150px, auto) minmax(0, 1fr);
padding: var(--apl-ui-space-3);
}
.apl-settlement__media-summary > header span,
.apl-settlement__media-summary > header h3,
.apl-settlement__media-summary > header small {
display: block;
margin: 0;
}
.apl-settlement__media-summary > header span,
.apl-settlement__media-summary > header small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
}
.apl-settlement__media-summary > header h3 {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title);
}
.apl-settlement__split {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-2);
margin-top: var(--apl-ui-space-3);
padding-top: var(--apl-ui-space-3);
}
.apl-settlement__split-header {
align-items: center;
display: flex;
gap: var(--apl-ui-space-3);
justify-content: space-between;
}
.apl-settlement__split-header h3,
.apl-settlement__split-header p {
margin: 0;
}
.apl-settlement__split-header h3 {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title);
}
.apl-settlement__split-header p {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
}
.apl-settlement__split-rows {
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-2);
}
.apl-settlement__split-row {
align-items: end;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: minmax(150px, 1.1fr) minmax(120px, .7fr) minmax(150px, 1fr) auto;
padding: var(--apl-ui-space-2);
}
.apl-settlement__split-balance {
background: var(--apl-ui-color-surface-muted);
border-radius: var(--apl-ui-radius-lg);
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: var(--apl-ui-space-2);
}
.apl-settlement__split-balance span,
.apl-settlement__split-balance small,
.apl-settlement__split-balance strong {
display: block;
min-width: 0;
}
.apl-settlement__split-balance span + span {
border-left: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
padding-left: var(--apl-ui-space-2);
}
.apl-settlement__split-balance small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
}
.apl-settlement__split-balance strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title);
font-variant-numeric: tabular-nums;
}
.apl-settlement__split-status {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
margin: 0;
}
.apl-settlement__split.is-complete .apl-settlement__split-status {
color: var(--apl-ui-color-success-dark);
}
.apl-settlement__split.is-over .apl-settlement__split-status {
color: var(--apl-ui-color-danger-dark);
}
.apl-settlement__payment {
align-items: flex-start;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: minmax(0, 1fr) auto;
padding: var(--apl-ui-space-3);
}
.apl-settlement__payment-main {
align-items: flex-start;
display: flex;
gap: var(--apl-ui-space-2);
min-width: 0;
}
.apl-settlement__payment-main > div,
.apl-settlement__payment-main strong,
.apl-settlement__payment-main small {
display: block;
min-width: 0;
}
.apl-settlement__payment-main small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin-top: var(--apl-ui-space-1);
}
.apl-settlement__disclosure {
grid-column: 1 / -1;
}
.apl-settlement__disclosure > summary {
color: var(--apl-ui-color-text-muted);
cursor: pointer;
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
padding: var(--apl-ui-space-2) 0;
}
.apl-settlement__disclosure[open] > summary {
color: var(--apl-ui-color-text-strong);
}
.apl-settlement__reason {
flex: 1 1 var(--apl-ui-page-copy-min);
}
.apl-settlement__timeline {
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-3);
list-style: none;
margin: 0;
padding: 0;
}
.apl-settlement__timeline li {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: var(--apl-ui-control-height-sm) minmax(0, 1fr);
}
.apl-settlement__timeline-marker {
align-items: center;
background: var(--apl-ui-color-brand-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-brand-border);
border-radius: var(--apl-ui-radius-pill);
color: var(--apl-ui-color-brand-dark);
display: inline-flex;
height: var(--apl-ui-control-height-sm);
justify-content: center;
width: var(--apl-ui-control-height-sm);
}
.apl-settlement__timeline strong,
.apl-settlement__timeline small,
.apl-settlement__timeline span {
display: block;
}
.apl-settlement__timeline small,
.apl-settlement__timeline span {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin-top: var(--apl-ui-space-1);
}
.apl-settlement__danger-zone {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
margin-top: var(--apl-ui-space-4);
padding-top: var(--apl-ui-space-3);
}
@media (max-width: 767px) {
.apl-settlement__finder {
flex-basis: 100%;
width: 100%;
}
.apl-settlement__detail-layer {
padding: var(--apl-ui-space-2);
}
.apl-settlement__payment {
grid-template-columns: 1fr;
}
.apl-settlement__media-summary {
grid-template-columns: 1fr;
}
.apl-settlement__split-header {
align-items: stretch;
flex-direction: column;
}
.apl-settlement__split-row {
grid-template-columns: 1fr;
}
.apl-settlement__split-row .apl-btn--icon {
justify-self: end;
}
}
/* APL Operator Quality Workspace */
:root {
--apl-ui-quality-filter-min: 190px;
--apl-ui-quality-search-min: 260px;
--apl-ui-quality-search-max: 620px;
--apl-ui-quality-table-min-width: 0px;
--apl-ui-quality-summary-min-width: 760px;
--apl-ui-quality-actions-width: 118px;
--apl-ui-quality-dialog-width: 760px;
--apl-ui-quality-form-dialog-width: 880px;
--apl-ui-quality-picker-min-width: 280px;
--apl-ui-quality-picker-max-width: 560px;
--apl-ui-quality-picker-height: 320px;
--apl-ui-quality-detail-width: 46ch;
--apl-ui-quality-detail-label-width: 150px;
--apl-ui-quality-mobile-label-width: 116px;
--apl-ui-quality-note-min-height: 96px;
--apl-ui-quality-counter-width: 74px;
}
.apl-quality {
--apl-ui-dialog-width: var(--apl-ui-quality-dialog-width);
gap: var(--apl-ui-space-3);
}
.apl-quality .apl-command-hero {
padding: var(--apl-ui-space-3) var(--apl-ui-space-4);
}
.apl-quality .apl-page__title {
font-size: var(--apl-ui-font-size-heading-lg);
margin-bottom: var(--apl-ui-space-1);
}
.apl-quality .apl-page__eyebrow {
font-size: var(--apl-ui-font-size-caption);
}
.apl-quality__intro {
color: var(--apl-ui-color-text-muted);
margin: 0;
max-width: var(--apl-ui-quality-detail-width);
}
.apl-quality__nav {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: flex-end;
}
.apl-quality__nav .apl-btn[aria-current="page"] {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-brand-dark);
}
.apl-quality .apl-metric-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-metric-min-width)), 1fr));
}
.apl-quality__metric {
color: inherit;
cursor: pointer;
min-height: var(--apl-ui-control-height-lg);
text-decoration: none;
transition: border-color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), background var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
}
.apl-quality__metric:hover,
.apl-quality__metric:focus {
background: var(--apl-ui-color-surface-hover);
border-color: var(--apl-ui-color-brand-border);
color: inherit;
outline: 0;
text-decoration: none;
}
.apl-quality__metric[aria-current="true"] {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
}
.apl-quality__controls {
position: relative;
z-index: var(--apl-ui-z-base);
}
.apl-quality__controlbar {
align-items: center;
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: minmax(var(--apl-ui-quality-search-min), var(--apl-ui-quality-search-max)) minmax(0, 1fr) auto;
padding: var(--apl-ui-space-3);
}
.apl-quality__control-meta {
align-items: center;
color: var(--apl-ui-color-text-muted);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
min-width: 0;
}
.apl-quality__control-actions,
.apl-quality__table-actions,
.apl-quality__form-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: flex-end;
}
.apl-quality__filter-panel {
background: var(--apl-ui-color-surface-subtle);
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
padding: var(--apl-ui-space-3);
}
.apl-quality__filter-panel[hidden] {
display: none !important;
}
.apl-quality__filter-grid {
align-items: end;
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-quality-filter-min)), 1fr));
}
.apl-quality__filter-footer {
align-items: center;
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: space-between;
margin-top: var(--apl-ui-space-3);
padding-top: var(--apl-ui-space-3);
}
.apl-quality__active-copy {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin: 0;
}
.apl-quality__section-copy {
min-width: 0;
}
.apl-quality__section-label {
color: var(--apl-ui-color-text-muted);
display: block;
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
margin-bottom: var(--apl-ui-space-1);
text-transform: uppercase;
}
.apl-quality__table-wrap {
border: 0;
border-radius: 0;
overflow-x: visible;
}
.apl-quality__table {
min-width: var(--apl-ui-quality-table-min-width);
table-layout: fixed;
}
.apl-quality__table th,
.apl-quality__table td {
overflow-wrap: anywhere;
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-quality__table th {
white-space: nowrap;
}
.apl-quality__table .apl-quality__cell--analyst { width: 16%; }
.apl-quality__table .apl-quality__cell--company { width: 22%; }
.apl-quality__table .apl-quality__cell--context { width: 17%; }
.apl-quality__table .apl-quality__cell--detail { width: 24%; }
.apl-quality__table .apl-quality__cell--compact { width: 10%; }
.apl-quality__table .apl-quality__cell--actions { width: var(--apl-ui-quality-actions-width); }
/* Distribución dedicada del reporte de reprocesos: Responsable y Pago no comparten espacio residual. */
.apl-quality__table--reprocess .apl-quality__cell--analyst { width: 15%; }
.apl-quality__table--reprocess .apl-quality__cell--company { width: 21%; }
.apl-quality__table--reprocess .apl-quality__cell--context { width: 15%; }
.apl-quality__table--reprocess .apl-quality__cell--responsibility { width: 14%; }
.apl-quality__table--reprocess .apl-quality__cell--payment { width: 7%; }
.apl-quality__table--reprocess .apl-quality__cell--invoices { width: 7%; }
.apl-quality__table--reprocess .apl-quality__cell--value { width: 10%; }
.apl-quality__table--reprocess .apl-quality__cell--actions { width: var(--apl-ui-quality-actions-width); }
.apl-quality__cell-primary,
.apl-quality__cell-secondary,
.apl-quality__cell-meta {
display: block;
min-width: 0;
}
.apl-quality__cell-primary {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-quality__cell-secondary,
.apl-quality__cell-meta {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-quality__detail-preview {
display: -webkit-box;
overflow: hidden;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.apl-quality .apl-badge,
.apl-quality .apl-status {
border-radius: var(--apl-ui-radius-badge);
white-space: nowrap;
}
.apl-quality__actions-cell {
background: var(--apl-ui-color-surface);
border-left: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
position: sticky;
right: 0;
text-align: right;
z-index: var(--apl-ui-z-base);
}
.apl-quality__table thead .apl-quality__actions-cell {
background: var(--apl-ui-color-surface-muted);
z-index: var(--apl-ui-z-sticky);
}
.apl-quality__table tbody tr:hover .apl-quality__actions-cell {
background: var(--apl-ui-color-surface-hover);
}
.apl-quality__row-actions {
align-items: center;
display: flex;
flex-wrap: nowrap;
gap: var(--apl-ui-space-1);
justify-content: flex-end;
}
.apl-quality__row-actions form {
margin: 0;
}
.apl-quality__summary {
overflow: hidden;
}
.apl-quality__summary[hidden] {
display: none !important;
}
.apl-quality__summary .apl-table-wrap {
border: 0;
border-radius: 0;
}
.apl-quality__summary .apl-table {
min-width: var(--apl-ui-quality-summary-min-width);
}
.apl-quality__empty {
border: 0;
border-radius: 0;
min-height: var(--apl-ui-quality-note-min-height);
}
.apl-quality__pager {
background: var(--apl-ui-color-surface-subtle);
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
padding: var(--apl-ui-space-3);
}
.apl-quality__per-page {
align-items: center;
display: flex;
gap: var(--apl-ui-space-2);
}
.apl-quality__per-page label {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
margin: 0;
}
.apl-quality__per-page .apl-control {
width: var(--apl-ui-quality-counter-width) !important;
}
.apl-quality__notice-list {
margin: 0;
padding-left: var(--apl-ui-space-4);
}
.apl-quality__dialog--wide {
width: var(--apl-ui-quality-form-dialog-width);
}
.apl-quality__detail-grid {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.apl-quality__detail-item {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
margin: 0;
min-width: 0;
padding: var(--apl-ui-space-3);
}
.apl-quality__detail-item--wide {
grid-column: 1 / -1;
}
.apl-quality__detail-item dt {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
margin: 0 0 var(--apl-ui-space-1);
text-transform: uppercase;
}
.apl-quality__detail-item dd {
color: var(--apl-ui-color-text-strong);
margin: 0;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.apl-quality__dialog-link {
align-items: center;
display: inline-flex;
gap: var(--apl-ui-space-1);
margin-top: var(--apl-ui-space-2);
}
.apl-quality__form-grid {
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.apl-quality__form-grid .apl-field--wide {
grid-column: 1 / -1;
}
.apl-quality__counter {
color: var(--apl-ui-color-text-subtle);
display: block;
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
text-align: right;
}
.apl-quality__field-error {
color: var(--apl-ui-color-danger-dark);
display: block;
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-quality__native-picker {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: var(--apl-ui-border-width) !important;
margin: calc(var(--apl-ui-border-width) * -1) !important;
overflow: hidden;
padding: 0 !important;
position: absolute !important;
white-space: nowrap;
width: var(--apl-ui-border-width) !important;
}
.apl-quality-picker {
min-width: 0;
position: relative;
}
.apl-quality-picker__trigger {
align-items: center;
cursor: pointer;
display: flex !important;
gap: var(--apl-ui-space-2);
justify-content: space-between;
text-align: left;
}
.apl-quality-picker__value {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apl-quality-picker__trigger > i {
color: var(--apl-ui-color-text-subtle);
flex: 0 0 auto;
}
.apl-quality-picker-panel {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-lg);
box-shadow: var(--apl-ui-shadow-floating);
max-width: var(--apl-ui-quality-picker-max-width);
min-width: var(--apl-ui-quality-picker-min-width);
overflow: hidden;
position: fixed;
z-index: var(--apl-ui-z-overlay);
}
.apl-quality-picker-panel__search {
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
padding: var(--apl-ui-space-2);
}
.apl-quality-picker-panel__options {
max-height: var(--apl-ui-quality-picker-height);
overflow: auto;
overscroll-behavior: contain;
padding: var(--apl-ui-space-1);
}
.apl-quality-picker-panel__option {
align-items: center;
background: var(--apl-ui-color-surface);
border: 0;
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
display: flex;
font: var(--apl-ui-font-weight-regular) var(--apl-ui-font-size-body)/var(--apl-ui-line-normal) var(--apl-ui-font-family);
gap: var(--apl-ui-space-2);
min-height: var(--apl-ui-control-height);
padding: var(--apl-ui-space-2);
text-align: left;
width: 100%;
}
.apl-quality-picker-panel__option:hover,
.apl-quality-picker-panel__option:focus {
background: var(--apl-ui-color-surface-hover);
color: var(--apl-ui-color-text-strong);
outline: 0;
}
.apl-quality-picker-panel__option[aria-selected="true"] {
background: var(--apl-ui-color-brand-surface);
color: var(--apl-ui-color-brand-dark);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-quality-picker-panel__mark {
align-items: center;
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-strong);
border-radius: var(--apl-ui-radius-sm);
color: transparent;
display: inline-flex;
flex: 0 0 var(--apl-ui-control-height-sm);
height: var(--apl-ui-control-height-sm);
justify-content: center;
width: var(--apl-ui-control-height-sm);
}
.apl-quality-picker-panel__option[aria-selected="true"] .apl-quality-picker-panel__mark {
background: var(--apl-ui-color-brand);
border-color: var(--apl-ui-color-brand-dark);
color: var(--apl-ui-color-on-solid);
}
.apl-quality-picker-panel__empty {
color: var(--apl-ui-color-text-muted);
padding: var(--apl-ui-space-3);
text-align: center;
}
.apl-quality__confirm .apl-dialog {
width: var(--apl-ui-dialog-width);
}
.apl-quality__confirm-copy {
color: var(--apl-ui-color-text-body);
margin: 0;
}
@media (max-width: 1000px) {
.apl-quality__controlbar {
grid-template-columns: minmax(0, 1fr) auto;
}
.apl-quality__control-meta {
grid-column: 1 / -1;
grid-row: 2;
}
.apl-quality__table-wrap {
overflow: visible;
}
.apl-quality__summary .apl-table {
min-width: var(--apl-ui-quality-table-min-width);
}
.apl-quality__table,
.apl-quality__table tbody,
.apl-quality__table tr,
.apl-quality__table td {
display: block;
min-width: 0;
width: 100%;
}
.apl-quality__table thead {
display: none;
}
.apl-quality__table .apl-quality__cell--analyst,
.apl-quality__table .apl-quality__cell--company,
.apl-quality__table .apl-quality__cell--context,
.apl-quality__table .apl-quality__cell--detail,
.apl-quality__table .apl-quality__cell--compact,
.apl-quality__table .apl-quality__cell--responsibility,
.apl-quality__table .apl-quality__cell--payment,
.apl-quality__table .apl-quality__cell--invoices,
.apl-quality__table .apl-quality__cell--value,
.apl-quality__table .apl-quality__cell--actions {
width: 100%;
}
.apl-quality__table tbody {
display: grid;
gap: var(--apl-ui-space-2);
padding: var(--apl-ui-space-2);
}
.apl-quality__table tbody tr {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
overflow: hidden;
}
.apl-quality__table tbody td {
align-items: start;
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: var(--apl-ui-quality-mobile-label-width) minmax(0, 1fr);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-quality__table tbody td::before {
color: var(--apl-ui-color-text-muted);
content: attr(data-label);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
text-transform: uppercase;
}
.apl-quality__table tbody td:last-child {
border-bottom: 0;
}
.apl-quality__actions-cell {
background: var(--apl-ui-color-surface-subtle) !important;
border-left: 0;
position: static;
text-align: left;
}
.apl-quality__row-actions {
justify-content: flex-start;
}
.apl-quality__empty-row td {
display: block !important;
text-align: center;
}
.apl-quality__empty-row td::before {
content: none !important;
}
}
@media (max-width: 767px) {
.apl-quality {
gap: var(--apl-ui-space-2);
}
.apl-quality .apl-command-hero {
padding: var(--apl-ui-space-3);
}
.apl-quality__nav,
.apl-quality__control-actions,
.apl-quality__table-actions,
.apl-quality__form-actions {
justify-content: flex-start;
width: 100%;
}
.apl-quality__nav .apl-btn,
.apl-quality__control-actions .apl-btn,
.apl-quality__form-actions .apl-btn {
flex: 1 1 auto;
}
.apl-quality__controlbar {
grid-template-columns: 1fr;
}
.apl-quality__control-meta {
grid-column: auto;
grid-row: auto;
}
.apl-quality__detail-grid,
.apl-quality__form-grid {
grid-template-columns: 1fr;
}
.apl-quality__detail-item--wide,
.apl-quality__form-grid .apl-field--wide {
grid-column: auto;
}
.apl-quality__filter-footer,
.apl-quality__pager {
align-items: stretch;
flex-direction: column;
}
.apl-quality__pager .apl-pager__controls {
justify-content: flex-start;
}
.apl-quality-picker-panel {
max-width: calc(100vw - (var(--apl-ui-space-3) * 2));
min-width: 0;
}
}
/* ======================================================================
* RESPONSIVE GROUPED DATA - API CENTRAL (v1)
*
* Contrato:
* - >1280px: tabla comparativa original.
* - 768-1280px: columnas relacionadas agrupadas; campos en matriz 2xN.
* - <=767px: cada registro se convierte en ficha por grupos.
* - <=520px: los campos se apilan en una sola columna.
*
* La identidad principal ocupa todo el ancho, nunca usa elipsis y admite
* salto de linea. Las etiquetas van encima del valor; no se separan en
* extremos opuestos. Ver docs/apl_rebuilt_responsive_data.md.
* ====================================================================== */
:root {
--apl-ui-responsive-table-breakpoint: 1280px;
--apl-ui-responsive-card-breakpoint: 767px;
--apl-ui-responsive-stack-breakpoint: 520px;
--apl-ui-responsive-group-columns: 2;
--apl-ui-responsive-identity-width: 27%;
--apl-ui-responsive-result-width: 31%;
--apl-ui-responsive-total-width: 18%;
}
.apl-responsive-table__group-head,
.apl-responsive-table__group-cell {
display: none;
}
.apl-responsive-fields,
.apl-responsive-field,
.apl-responsive-field__label,
.apl-responsive-field__value {
min-width: 0;
}
@media (max-width: 1280px) {
.apl-responsive-table-wrap {
overflow: visible;
}
.apl-responsive-table {
min-width: 0;
table-layout: fixed;
}
.apl-responsive-table .apl-responsive-table__source {
display: none !important;
}
.apl-responsive-table__group-head,
.apl-responsive-table__group-cell {
display: table-cell;
}
.apl-responsive-table__group-head[data-apl-responsive-group="identity"] {
width: var(--apl-ui-responsive-identity-width);
}
.apl-responsive-table__group-head[data-apl-responsive-group="result"],
.apl-responsive-table__group-head[data-apl-responsive-group="finance"] {
width: var(--apl-ui-responsive-result-width);
}
.apl-responsive-table__group-head[data-apl-responsive-group="total"] {
width: var(--apl-ui-responsive-total-width);
}
.apl-responsive-table .apl-responsive-table__group-cell {
overflow: visible;
padding: var(--apl-ui-space-2) !important;
text-overflow: clip;
vertical-align: top;
white-space: normal;
}
.apl-responsive-table__group-title {
display: none;
}
.apl-responsive-fields {
align-items: stretch;
background: var(--apl-ui-color-border-soft);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft);
border-radius: var(--apl-ui-radius-md);
display: grid;
gap: var(--apl-ui-border-width);
grid-template-columns: repeat(var(--apl-ui-responsive-group-columns), minmax(0, 1fr));
overflow: hidden;
}
.apl-responsive-field {
background: var(--apl-ui-color-surface);
border: 0;
border-radius: 0;
box-sizing: border-box;
display: block;
min-width: 0;
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
}
.apl-responsive-field__label {
color: var(--apl-ui-color-text-subtle);
display: block;
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
line-height: var(--apl-ui-line-tight);
margin-bottom: var(--apl-ui-space-1);
overflow-wrap: anywhere;
white-space: normal;
}
.apl-responsive-field__value,
.apl-responsive-field__value[data-align="right"],
.apl-responsive-field__value[data-align="center"] {
color: var(--apl-ui-color-text-strong);
display: block;
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
line-height: var(--apl-ui-line-tight);
min-width: 0;
overflow-wrap: anywhere;
text-align: left;
white-space: normal;
}
.apl-responsive-table__group-cell[data-apl-responsive-group="identity"] .apl-responsive-fields {
grid-template-columns: repeat(var(--apl-ui-responsive-group-columns), minmax(0, 1fr));
}
.apl-responsive-table__group-cell[data-apl-responsive-group="identity"] .apl-responsive-field:first-child {
background: var(--apl-ui-color-brand-surface);
grid-column: 1 / -1;
}
.apl-responsive-table__group-cell:not([data-apl-responsive-group="identity"]) .apl-responsive-field:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.apl-responsive-field__value .apl-table__primary,
.apl-responsive-field__value .apl-table__secondary,
.apl-responsive-field__value strong,
.apl-responsive-field__value small {
max-width: none;
overflow: visible;
overflow-wrap: anywhere;
text-overflow: clip;
white-space: normal;
}
.apl-responsive-table__actions-cell {
position: static !important;
right: auto !important;
}
}
@media (max-width: 767px) {
.apl-responsive-table-wrap {
background: var(--apl-ui-color-surface-subtle);
padding: var(--apl-ui-space-2);
}
.apl-responsive-table,
.apl-responsive-table tbody {
background: transparent;
display: block;
width: 100%;
}
.apl-responsive-table thead {
display: none;
}
.apl-responsive-table tbody > tr {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-lg);
display: grid;
grid-template-columns: minmax(0, 1fr);
margin-bottom: var(--apl-ui-space-2);
overflow: hidden;
width: 100%;
}
.apl-responsive-table tbody > tr:last-child {
margin-bottom: 0;
}
.apl-responsive-table tbody > tr[hidden] {
display: none !important;
}
.apl-responsive-table .apl-responsive-table__group-cell {
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: block;
padding: var(--apl-ui-space-2);
width: auto;
}
.apl-responsive-table__group-title {
color: var(--apl-ui-color-brand-dark);
display: block;
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-bold);
letter-spacing: var(--apl-ui-letter-spacing-label);
margin-bottom: var(--apl-ui-space-2);
text-transform: uppercase;
}
.apl-responsive-table .apl-responsive-table__actions-cell {
background: var(--apl-ui-color-surface-subtle);
border-left: 0;
display: block !important;
min-width: 0 !important;
padding: var(--apl-ui-space-2);
position: static !important;
right: auto !important;
width: auto !important;
}
.apl-responsive-table__plain-row,
.apl-responsive-table__plain-row > td {
display: block !important;
width: auto;
}
}
@media (max-width: 520px) {
.apl-responsive-fields,
.apl-responsive-table__group-cell[data-apl-responsive-group="identity"] .apl-responsive-fields {
grid-template-columns: minmax(0, 1fr);
}
.apl-responsive-field,
.apl-responsive-table__group-cell[data-apl-responsive-group="identity"] .apl-responsive-field:first-child,
.apl-responsive-table__group-cell:not([data-apl-responsive-group="identity"]) .apl-responsive-field:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
/* ======================================================================
* APL AUTH REBUILT
* Flujo progresivo de identidad, método y verificación. Todas las medidas,
* colores y pesos proceden de tokens --apl-ui-* del sistema central.
* ====================================================================== */
.apl-auth-page {
background: var(--apl-ui-color-page);
color: var(--apl-ui-color-text-body);
font: var(--apl-ui-font-weight-regular) var(--apl-ui-font-size-body)/var(--apl-ui-line-normal) var(--apl-ui-font-family);
margin: var(--apl-ui-space-0);
min-height: 100vh;
}
.apl-auth-page,
.apl-auth-page * {
box-sizing: border-box;
}
.apl-auth-page [hidden] {
display: none !important;
}
.apl-auth-skip {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-brand);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-brand-dark);
left: var(--apl-ui-space-3);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
position: fixed;
top: var(--apl-ui-space-3);
transform: translateY(-200%);
z-index: var(--apl-ui-z-toast);
}
.apl-auth-skip:focus {
transform: translateY(0);
}
.apl-auth-layout {
align-items: center;
display: flex;
justify-content: center;
min-height: 100vh;
padding: var(--apl-ui-space-6);
}
.apl-auth-shell {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-card);
box-shadow: var(--apl-ui-shadow-md);
display: grid;
grid-template-columns: minmax(0, var(--apl-ui-auth-story-width)) minmax(0, var(--apl-ui-auth-workspace-width));
min-height: var(--apl-ui-auth-shell-min-height);
overflow: hidden;
width: min(100%, var(--apl-ui-auth-shell-max-width));
}
.apl-auth-story {
background: var(--apl-ui-color-brand-dark);
color: var(--apl-ui-color-on-solid);
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-6);
justify-content: space-between;
min-width: 0;
padding: var(--apl-ui-space-6);
}
.apl-auth-brand {
align-items: center;
display: flex;
gap: var(--apl-ui-space-3);
}
.apl-auth-brand__mark {
align-items: center;
background: var(--apl-ui-color-accent);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-accent-border);
border-radius: var(--apl-ui-radius-xl);
color: var(--apl-ui-color-accent-dark);
display: inline-flex;
flex: 0 0 var(--apl-ui-auth-brand-mark-size);
font-size: var(--apl-ui-font-size-icon-xl);
height: var(--apl-ui-auth-brand-mark-size);
justify-content: center;
width: var(--apl-ui-auth-brand-mark-size);
}
.apl-auth-brand__copy strong,
.apl-auth-brand__copy span {
display: block;
}
.apl-auth-brand__copy strong {
font-size: var(--apl-ui-font-size-title-lg);
font-weight: var(--apl-ui-font-weight-bold);
}
.apl-auth-brand__copy span {
color: var(--apl-ui-color-brand-border);
font-size: var(--apl-ui-font-size-detail);
margin-top: var(--apl-ui-space-1);
}
.apl-auth-story__content {
max-width: var(--apl-ui-auth-copy-width);
}
.apl-auth-story__eyebrow,
.apl-auth-workspace__eyebrow {
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-bold);
letter-spacing: var(--apl-ui-letter-spacing-label);
margin: var(--apl-ui-space-0) var(--apl-ui-space-0) var(--apl-ui-space-2);
text-transform: uppercase;
}
.apl-auth-story__eyebrow {
color: var(--apl-ui-color-accent);
}
.apl-auth-story__title {
color: var(--apl-ui-color-on-solid);
font-size: var(--apl-ui-font-size-page-title);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: var(--apl-ui-space-0);
}
.apl-auth-story__lead {
color: var(--apl-ui-color-brand-border);
font-size: var(--apl-ui-font-size-label-lg);
margin: var(--apl-ui-space-3) var(--apl-ui-space-0) var(--apl-ui-space-5);
}
.apl-auth-story .apl-step {
align-items: flex-start;
}
.apl-auth-story .apl-step__marker {
background: var(--apl-ui-color-brand);
border-color: var(--apl-ui-color-brand-border-strong);
color: var(--apl-ui-color-on-solid);
}
.apl-auth-story .apl-step__copy > strong {
color: var(--apl-ui-color-on-solid);
}
.apl-auth-story .apl-step__copy > span {
color: var(--apl-ui-color-brand-border);
}
.apl-auth-persistence {
align-items: flex-start;
background: var(--apl-ui-color-brand);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-brand-border-strong);
border-radius: var(--apl-ui-radius-xl);
display: flex;
gap: var(--apl-ui-space-3);
padding: var(--apl-ui-space-3);
}
.apl-auth-persistence__icon {
align-items: center;
background: var(--apl-ui-color-brand-surface);
border-radius: var(--apl-ui-radius-pill);
color: var(--apl-ui-color-brand-dark);
display: inline-flex;
flex: 0 0 var(--apl-ui-control-height-sm);
height: var(--apl-ui-control-height-sm);
justify-content: center;
width: var(--apl-ui-control-height-sm);
}
.apl-auth-persistence strong,
.apl-auth-persistence > span:last-child,
.apl-auth-persistence > span:last-child > span {
display: block;
}
.apl-auth-persistence strong {
color: var(--apl-ui-color-on-solid);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-auth-persistence > span:last-child,
.apl-auth-persistence > span:last-child > span {
color: var(--apl-ui-color-brand-border);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-auth-workspace {
background: var(--apl-ui-color-surface);
display: flex;
flex-direction: column;
min-width: 0;
padding: var(--apl-ui-space-6);
}
.apl-auth-workspace__head {
margin-bottom: var(--apl-ui-space-4);
}
.apl-auth-workspace__eyebrow {
color: var(--apl-ui-color-brand-dark);
}
.apl-auth-workspace__title {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-heading-lg);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: var(--apl-ui-space-0);
}
.apl-auth-workspace__subtitle {
color: var(--apl-ui-color-text-muted);
margin: var(--apl-ui-space-2) var(--apl-ui-space-0) var(--apl-ui-space-0);
}
.apl-auth-progress {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(3, minmax(0, 1fr));
list-style: none;
margin: var(--apl-ui-space-0) var(--apl-ui-space-0) var(--apl-ui-space-4);
padding: var(--apl-ui-space-0);
}
.apl-auth-progress__item {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-subtle);
display: flex;
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
gap: var(--apl-ui-space-1);
min-width: 0;
padding: var(--apl-ui-space-2);
}
.apl-auth-progress__item > span {
align-items: center;
background: var(--apl-ui-color-surface-muted);
border-radius: var(--apl-ui-radius-pill);
display: inline-flex;
flex: 0 0 var(--apl-ui-control-height-sm);
height: var(--apl-ui-control-height-sm);
justify-content: center;
width: var(--apl-ui-control-height-sm);
}
.apl-auth-progress__item.is-current {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-brand-dark);
}
.apl-auth-progress__item.is-current > span {
background: var(--apl-ui-color-brand);
color: var(--apl-ui-color-on-solid);
}
.apl-auth-progress__item.is-complete {
background: var(--apl-ui-color-success-soft);
border-color: var(--apl-ui-color-success-border);
color: var(--apl-ui-color-success-dark);
}
.apl-auth-progress__item.is-complete > span {
background: var(--apl-ui-color-success);
color: var(--apl-ui-color-on-solid);
}
.apl-auth-live {
margin-bottom: var(--apl-ui-space-3);
}
.apl-auth-live.apl-notice {
align-items: flex-start;
}
.apl-auth-panel {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: var(--apl-ui-auth-panel-min-height);
min-width: 0;
}
.apl-auth-panel__head {
margin-bottom: var(--apl-ui-space-4);
}
.apl-auth-panel__head h2 {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title-lg);
font-weight: var(--apl-ui-font-weight-bold);
margin: var(--apl-ui-space-0);
}
.apl-auth-panel__head p {
color: var(--apl-ui-color-text-muted);
margin: var(--apl-ui-space-2) var(--apl-ui-space-0) var(--apl-ui-space-0);
}
.apl-auth-form {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--apl-ui-space-3);
}
.apl-auth-form__actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
margin-top: auto;
padding-top: var(--apl-ui-space-3);
}
.apl-auth-form__actions .apl-btn--brand,
.apl-auth-form__actions .apl-btn--primary {
flex: 1 1 var(--apl-ui-auth-account-min);
}
.apl-auth-link {
color: var(--apl-ui-color-brand-dark);
font-weight: var(--apl-ui-font-weight-semibold);
text-decoration: none;
}
.apl-auth-link:hover,
.apl-auth-link:focus {
color: var(--apl-ui-color-brand);
text-decoration: underline;
}
.apl-auth-account {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: flex;
gap: var(--apl-ui-space-3);
margin-bottom: var(--apl-ui-space-3);
min-width: 0;
padding: var(--apl-ui-space-3);
}
.apl-auth-account__copy {
flex: 1 1 var(--apl-ui-auth-account-min);
min-width: 0;
}
.apl-auth-account__copy span,
.apl-auth-account__copy strong {
display: block;
overflow-wrap: anywhere;
}
.apl-auth-account__copy span {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
}
.apl-auth-account__copy strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
margin-top: var(--apl-ui-space-1);
}
.apl-auth-methods {
display: grid;
gap: var(--apl-ui-space-2);
}
.apl-auth-method {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
color: var(--apl-ui-color-text-body);
cursor: pointer;
display: grid;
font: inherit;
gap: var(--apl-ui-space-3);
grid-template-columns: var(--apl-ui-auth-method-icon-size) minmax(0, 1fr) var(--apl-ui-control-height-sm);
min-height: var(--apl-ui-auth-method-min-height);
padding: var(--apl-ui-space-3);
text-align: left;
transition: background var(--apl-ui-duration-normal) var(--apl-ui-ease-standard), border-color var(--apl-ui-duration-normal) var(--apl-ui-ease-standard), box-shadow var(--apl-ui-duration-normal) var(--apl-ui-ease-standard);
width: 100%;
}
.apl-auth-method:hover,
.apl-auth-method:focus-visible {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
box-shadow: var(--apl-ui-shadow-focus);
outline: var(--apl-ui-space-0);
}
.apl-auth-method__icon {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
color: var(--apl-ui-color-brand-dark);
display: inline-flex;
font-size: var(--apl-ui-font-size-icon-lg);
height: var(--apl-ui-auth-method-icon-size);
justify-content: center;
width: var(--apl-ui-auth-method-icon-size);
}
.apl-auth-method__copy strong,
.apl-auth-method__copy span {
display: block;
}
.apl-auth-method__copy strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-auth-method__copy span {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
overflow-wrap: anywhere;
}
.apl-auth-method__arrow {
align-items: center;
color: var(--apl-ui-color-text-subtle);
display: inline-flex;
height: var(--apl-ui-control-height-sm);
justify-content: center;
width: var(--apl-ui-control-height-sm);
}
.apl-auth-password-wrap {
position: relative;
}
.apl-auth-password-wrap .apl-control {
padding-right: calc(var(--apl-ui-control-height-lg) + var(--apl-ui-space-2)) !important;
}
.apl-auth-password-toggle {
background: transparent;
border: var(--apl-ui-space-0);
color: var(--apl-ui-color-text-muted);
cursor: pointer;
height: var(--apl-ui-control-height);
padding: var(--apl-ui-space-0);
position: absolute;
right: var(--apl-ui-space-0);
top: var(--apl-ui-space-0);
width: var(--apl-ui-control-height-lg);
}
.apl-auth-password-toggle:focus-visible {
box-shadow: var(--apl-ui-shadow-focus);
outline: var(--apl-ui-space-0);
}
.apl-auth-channel {
align-items: flex-start;
background: var(--apl-ui-color-info-soft);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft);
border-radius: var(--apl-ui-radius-lg);
color: var(--apl-ui-color-info-dark);
display: flex;
gap: var(--apl-ui-space-3);
padding: var(--apl-ui-space-3);
}
.apl-auth-channel strong,
.apl-auth-channel span {
display: block;
}
.apl-auth-channel strong {
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-auth-channel span {
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-auth-otp {
font-size: var(--apl-ui-font-size-display) !important;
font-weight: var(--apl-ui-font-weight-bold) !important;
height: var(--apl-ui-auth-otp-height) !important;
letter-spacing: var(--apl-ui-auth-otp-letter-spacing);
padding-left: var(--apl-ui-space-5) !important;
text-align: center;
}
.apl-auth-code-meta {
align-items: center;
color: var(--apl-ui-color-text-muted);
display: flex;
flex-wrap: wrap;
font-size: var(--apl-ui-font-size-caption);
gap: var(--apl-ui-space-2);
justify-content: space-between;
}
.apl-auth-workspace__foot {
align-items: center;
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
color: var(--apl-ui-color-text-subtle);
display: flex;
flex-wrap: wrap;
font-size: var(--apl-ui-font-size-caption);
gap: var(--apl-ui-space-2);
justify-content: space-between;
margin-top: var(--apl-ui-space-4);
padding-top: var(--apl-ui-space-3);
}
.apl-auth-workspace__security,
.apl-auth-workspace__legal {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
}
.apl-auth-workspace__legal a {
color: var(--apl-ui-color-brand-dark);
font-weight: var(--apl-ui-font-weight-semibold);
text-decoration: none;
}
.apl-auth-workspace__legal a:hover,
.apl-auth-workspace__legal a:focus {
color: var(--apl-ui-color-brand);
text-decoration: underline;
}
.apl-auth-page .apl-btn.is-loading {
cursor: wait;
opacity: var(--apl-ui-opacity-muted);
}
.apl-auth-noscript {
margin-top: var(--apl-ui-space-3);
}
@media (max-width: 900px) {
.apl-auth-layout {
align-items: flex-start;
padding: var(--apl-ui-space-4);
}
.apl-auth-shell {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
width: min(100%, var(--apl-ui-auth-workspace-width));
}
.apl-auth-story {
gap: var(--apl-ui-space-4);
padding: var(--apl-ui-space-5);
}
.apl-auth-story__content {
max-width: none;
}
.apl-auth-story__lead,
.apl-auth-story .apl-step-list {
display: none;
}
.apl-auth-persistence {
margin-top: var(--apl-ui-space-0);
}
}
@media (max-width: 640px) {
.apl-auth-layout {
padding: var(--apl-ui-space-0);
}
.apl-auth-shell {
border: var(--apl-ui-space-0);
border-radius: var(--apl-ui-space-0);
box-shadow: none;
min-height: 100vh;
width: 100%;
}
.apl-auth-story,
.apl-auth-workspace {
padding: var(--apl-ui-space-4);
}
.apl-auth-story {
gap: var(--apl-ui-space-3);
}
.apl-auth-story__content {
display: none;
}
.apl-auth-persistence {
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-auth-workspace__head {
margin-bottom: var(--apl-ui-space-3);
}
.apl-auth-progress__item {
justify-content: center;
}
.apl-auth-progress__item > b {
display: none;
}
.apl-auth-panel {
min-height: 0;
}
.apl-auth-account {
align-items: flex-start;
flex-wrap: wrap;
}
.apl-auth-account .apl-btn {
margin-left: calc(var(--apl-ui-auth-method-icon-size) + var(--apl-ui-space-3));
}
.apl-auth-form__actions {
align-items: stretch;
flex-direction: column;
}
.apl-auth-form__actions .apl-btn,
.apl-auth-form__actions .apl-auth-link {
flex: 0 0 auto;
width: 100%;
}
.apl-auth-form__actions .apl-btn {
min-height: var(--apl-ui-control-height-lg);
}
.apl-auth-form__actions .apl-auth-link {
padding: var(--apl-ui-space-2);
text-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
.apl-auth-page *,
.apl-auth-page *::before,
.apl-auth-page *::after {
scroll-behavior: auto !important;
transition-duration: var(--apl-ui-space-0) !important;
}
}
/* ======================================================================
* APL PASSWORD REBUILT
* Cambio de contraseña progresivo y configuración inicial.
* Toda identidad visual y geometría consume tokens --apl-ui-*.
* ====================================================================== */
.apl-password-page {
font: var(--apl-ui-font-weight-regular) var(--apl-ui-font-size-body)/var(--apl-ui-line-normal) var(--apl-ui-font-family);
max-width: var(--apl-ui-password-page-max-width);
}
.apl-password-page,
.apl-password-page * {
box-sizing: border-box;
}
.apl-password-page [hidden],
.apl-password-setup-page [hidden] {
display: none !important;
}
.apl-password-hero__lead {
color: var(--apl-ui-color-text-muted);
margin: var(--apl-ui-space-2) var(--apl-ui-space-0) var(--apl-ui-space-0);
max-width: var(--apl-ui-password-copy-width);
}
.apl-password-account {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: flex;
gap: var(--apl-ui-space-2);
min-width: var(--apl-ui-auth-account-min);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-password-account small,
.apl-password-account strong {
display: block;
overflow-wrap: anywhere;
}
.apl-password-account small {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
}
.apl-password-account strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
margin-top: var(--apl-ui-space-1);
}
.apl-password-shell {
align-items: start;
display: grid;
gap: var(--apl-ui-page-gap);
grid-template-columns: minmax(var(--apl-ui-space-0), var(--apl-ui-password-rail-width)) minmax(var(--apl-ui-space-0), 1fr);
min-width: var(--apl-ui-space-0);
}
.apl-password-rail {
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-4);
padding: var(--apl-ui-space-4);
}
.apl-password-rail__head {
align-items: center;
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: flex;
gap: var(--apl-ui-space-3);
padding-bottom: var(--apl-ui-space-3);
}
.apl-password-rail__head > div,
.apl-password-rail__head strong,
.apl-password-rail__head span {
display: block;
min-width: var(--apl-ui-space-0);
}
.apl-password-rail__head strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-bold);
}
.apl-password-rail__head span {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-password-steps {
gap: var(--apl-ui-space-3);
}
.apl-password-steps .apl-step {
align-items: flex-start;
border-radius: var(--apl-ui-radius-lg);
padding: var(--apl-ui-space-2);
}
.apl-password-steps .apl-step.is-current {
background: var(--apl-ui-color-brand-surface);
}
.apl-password-steps .apl-step.is-current .apl-step__marker {
background: var(--apl-ui-color-brand);
border-color: var(--apl-ui-color-brand-dark);
color: var(--apl-ui-color-on-solid);
}
.apl-password-steps .apl-step.is-complete .apl-step__marker {
background: var(--apl-ui-color-success);
border-color: var(--apl-ui-color-success-dark);
color: var(--apl-ui-color-on-solid);
}
.apl-password-steps .apl-step.is-complete .apl-step__copy > strong {
color: var(--apl-ui-color-success-dark);
}
.apl-password-security-note {
align-items: flex-start;
background: var(--apl-ui-color-info-soft);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft);
border-radius: var(--apl-ui-radius-lg);
color: var(--apl-ui-color-info-dark);
display: flex;
gap: var(--apl-ui-space-2);
margin-top: auto;
padding: var(--apl-ui-space-3);
}
.apl-password-security-note > i {
margin-top: var(--apl-ui-space-1);
}
.apl-password-security-note strong,
.apl-password-security-note span {
display: block;
}
.apl-password-security-note strong {
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-password-security-note span span {
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-password-workspace {
min-height: var(--apl-ui-password-workspace-min-height);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-5);
}
.apl-password-feedback {
margin-bottom: var(--apl-ui-space-3);
}
.apl-password-stage {
display: flex;
flex-direction: column;
min-height: calc(var(--apl-ui-password-workspace-min-height) - (var(--apl-ui-space-5) * 2));
min-width: var(--apl-ui-space-0);
}
.apl-password-stage__head {
margin-bottom: var(--apl-ui-space-4);
}
.apl-password-stage__head h2 {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-section-title);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: var(--apl-ui-space-1) var(--apl-ui-space-0) var(--apl-ui-space-0);
}
.apl-password-stage__head p:not(.apl-page__eyebrow) {
color: var(--apl-ui-color-text-muted);
margin: var(--apl-ui-space-2) var(--apl-ui-space-0) var(--apl-ui-space-0);
}
.apl-password-methods {
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-password-method-min)), 1fr));
}
.apl-password-method {
min-height: var(--apl-ui-auth-method-min-height);
}
.apl-password-substage {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: var(--apl-ui-space-0);
}
.apl-password-back {
align-items: center;
align-self: flex-start;
background: transparent;
border: var(--apl-ui-space-0);
color: var(--apl-ui-color-brand-dark);
cursor: pointer;
display: inline-flex;
font: var(--apl-ui-font-weight-semibold) var(--apl-ui-font-size-button)/var(--apl-ui-line-normal) var(--apl-ui-font-family);
gap: var(--apl-ui-space-2);
min-height: var(--apl-ui-control-height);
padding: var(--apl-ui-space-1) var(--apl-ui-space-0);
}
.apl-password-back:hover,
.apl-password-back:focus {
color: var(--apl-ui-color-brand);
text-decoration: underline;
}
.apl-password-back:focus-visible {
box-shadow: var(--apl-ui-shadow-focus);
outline: var(--apl-ui-space-0);
}
.apl-password-substage .apl-password-stage__head {
margin-top: var(--apl-ui-space-3);
}
.apl-password-fields {
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: repeat(2, minmax(var(--apl-ui-space-0), 1fr));
}
.apl-password-strength {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
padding: var(--apl-ui-space-3);
}
.apl-password-strength__head {
align-items: center;
color: var(--apl-ui-color-text-muted);
display: flex;
font-size: var(--apl-ui-font-size-caption);
gap: var(--apl-ui-space-2);
justify-content: space-between;
}
.apl-password-strength__head strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-password-strength__meter {
display: grid;
gap: var(--apl-ui-space-1);
grid-template-columns: repeat(4, minmax(var(--apl-ui-space-0), 1fr));
margin-top: var(--apl-ui-space-2);
}
.apl-password-strength__meter span {
background: var(--apl-ui-color-surface-strong);
border-radius: var(--apl-ui-radius-pill);
height: var(--apl-ui-password-meter-height);
}
.apl-password-strength[data-cp-strength="weak"] .apl-password-strength__meter span:nth-child(1) {
background: var(--apl-ui-color-danger);
}
.apl-password-strength[data-cp-strength="fair"] .apl-password-strength__meter span:nth-child(-n+2) {
background: var(--apl-ui-color-accent);
}
.apl-password-strength[data-cp-strength="good"] .apl-password-strength__meter span:nth-child(-n+3) {
background: var(--apl-ui-color-brand);
}
.apl-password-strength[data-cp-strength="strong"] .apl-password-strength__meter span {
background: var(--apl-ui-color-success);
}
.apl-password-rules {
display: grid;
gap: var(--apl-ui-space-2);
list-style: none;
margin: var(--apl-ui-space-0);
padding: var(--apl-ui-space-0);
}
.apl-password-rules li {
align-items: flex-start;
color: var(--apl-ui-color-text-muted);
display: flex;
gap: var(--apl-ui-space-2);
}
.apl-password-rules li > i {
color: var(--apl-ui-color-text-subtle);
margin-top: var(--apl-ui-space-1);
}
.apl-password-rules li.is-ready {
color: var(--apl-ui-color-success-dark);
}
.apl-password-rules li.is-ready > i {
color: var(--apl-ui-color-success);
}
.apl-password-success {
align-items: center;
justify-content: center;
text-align: center;
}
.apl-password-success__mark {
align-items: center;
background: var(--apl-ui-color-success-soft);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-success-border);
border-radius: var(--apl-ui-radius-pill);
color: var(--apl-ui-color-success-dark);
display: inline-flex;
font-size: var(--apl-ui-font-size-icon-xl);
height: var(--apl-ui-password-success-mark-size);
justify-content: center;
margin-bottom: var(--apl-ui-space-3);
width: var(--apl-ui-password-success-mark-size);
}
.apl-password-success h2 {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-page-title);
font-weight: var(--apl-ui-font-weight-bold);
margin: var(--apl-ui-space-1) var(--apl-ui-space-0);
}
.apl-password-success > p:not(.apl-page__eyebrow) {
color: var(--apl-ui-color-text-muted);
margin: var(--apl-ui-space-2) auto var(--apl-ui-space-4);
max-width: var(--apl-ui-password-copy-width);
}
.apl-password-page .apl-btn.is-loading,
.apl-password-setup-page .apl-btn.is-loading {
cursor: wait;
opacity: var(--apl-ui-opacity-disabled);
}
.apl-password-setup-page {
background: var(--apl-ui-color-page);
color: var(--apl-ui-color-text-body);
font: var(--apl-ui-font-weight-regular) var(--apl-ui-font-size-body)/var(--apl-ui-line-normal) var(--apl-ui-font-family);
margin: var(--apl-ui-space-0);
min-height: 100vh;
}
.apl-password-setup-page,
.apl-password-setup-page * {
box-sizing: border-box;
}
.apl-password-setup-layout {
align-items: center;
display: flex;
justify-content: center;
min-height: 100vh;
padding: var(--apl-ui-space-6);
}
.apl-password-setup {
width: min(100%, var(--apl-ui-password-setup-width));
}
.apl-password-setup__brand {
align-items: center;
display: flex;
gap: var(--apl-ui-space-3);
margin-bottom: var(--apl-ui-space-4);
}
.apl-password-setup__brand-copy strong,
.apl-password-setup__brand-copy span {
display: block;
}
.apl-password-setup__brand-copy strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title-lg);
font-weight: var(--apl-ui-font-weight-bold);
}
.apl-password-setup__brand-copy span {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-password-setup__card {
padding: var(--apl-ui-space-5);
}
.apl-password-setup__head {
margin-bottom: var(--apl-ui-space-4);
}
.apl-password-setup__head h1 {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-page-title);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: var(--apl-ui-space-1) var(--apl-ui-space-0);
}
.apl-password-setup__head p:not(.apl-page__eyebrow) {
color: var(--apl-ui-color-text-muted);
margin: var(--apl-ui-space-2) var(--apl-ui-space-0) var(--apl-ui-space-0);
}
.apl-password-setup__account {
margin-bottom: var(--apl-ui-space-4);
}
.apl-password-setup__footer {
align-items: center;
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
color: var(--apl-ui-color-text-subtle);
display: flex;
font-size: var(--apl-ui-font-size-caption);
gap: var(--apl-ui-space-2);
margin-top: var(--apl-ui-space-4);
padding-top: var(--apl-ui-space-3);
}
@media (max-width: 900px) {
.apl-password-shell {
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
}
.apl-password-steps {
display: grid;
grid-template-columns: repeat(3, minmax(var(--apl-ui-space-0), 1fr));
}
.apl-password-security-note {
margin-top: var(--apl-ui-space-0);
}
}
@media (max-width: 640px) {
.apl-password-account {
width: 100%;
}
.apl-password-rail,
.apl-password-workspace,
.apl-password-setup__card {
padding: var(--apl-ui-space-4);
}
.apl-password-rail__head {
padding-bottom: var(--apl-ui-space-2);
}
.apl-password-steps {
gap: var(--apl-ui-space-1);
}
.apl-password-steps .apl-step {
align-items: center;
flex-direction: column;
padding: var(--apl-ui-space-1);
text-align: center;
}
.apl-password-steps .apl-step__copy > span {
display: none;
}
.apl-password-steps .apl-step__copy > strong {
font-size: var(--apl-ui-font-size-caption);
}
.apl-password-workspace,
.apl-password-stage {
min-height: var(--apl-ui-space-0);
}
.apl-password-fields {
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
}
.apl-password-page .apl-auth-form__actions {
align-items: stretch;
flex-direction: column;
}
.apl-password-page .apl-auth-form__actions .apl-btn,
.apl-password-success .apl-btn {
width: 100%;
}
.apl-password-setup-layout {
align-items: flex-start;
padding: var(--apl-ui-space-3);
}
}
@media (prefers-reduced-motion: reduce) {
.apl-password-page *,
.apl-password-page *::before,
.apl-password-page *::after,
.apl-password-setup-page *,
.apl-password-setup-page *::before,
.apl-password-setup-page *::after {
scroll-behavior: auto !important;
transition-duration: var(--apl-ui-space-0) !important;
}
}
/* ======================================================================
* APL COMMUNITY REBUILT
* Inmuebles, personas, censo, privacidad y trazabilidad.
* Toda la identidad visual y la geometria reutilizable se gobiernan aqui.
* ====================================================================== */
:root {
--apl-ui-community-table-min-width: 1080px;
--apl-ui-community-detail-width: 1120px;
--apl-ui-community-search-height: 260px;
--apl-ui-community-textarea-min-height: calc(var(--apl-ui-control-height) * 2);
--apl-ui-community-inline-field-min: 170px;
--apl-ui-community-record-copy-min: 220px;
--apl-ui-community-identity-column: 25%;
--apl-ui-community-owner-column: 25%;
--apl-ui-community-census-column: 16%;
--apl-ui-community-config-column: 18%;
--apl-ui-community-status-column: 16%;
--apl-ui-community-actions-column: 16%;
--apl-ui-community-drawer-field-min: 190px;
--apl-ui-community-toggle-min: 240px;
--apl-ui-community-period-option-min: var(--apl-ui-tab-navigation-min-width);
--apl-ui-community-interest-action-min: var(--apl-ui-query-search-min);
}
.apl-community[data-community-module="inmuebles"] {
--apl-ui-community-identity-column: 22%;
--apl-ui-community-owner-column: 22%;
--apl-ui-community-census-column: 12%;
--apl-ui-community-config-column: 14%;
--apl-ui-community-status-column: 16%;
--apl-ui-community-actions-column: 14%;
}
.apl-community {
gap: var(--apl-ui-space-3);
}
.apl-community__list-hero {
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-community__list-hero .apl-command-hero__top {
gap: var(--apl-ui-space-2);
}
.apl-community__list-hero .apl-command-hero__copy {
flex-basis: var(--apl-ui-query-search-min);
}
.apl-community__list-hero .apl-page__title {
font-size: var(--apl-ui-font-size-heading-lg);
margin-bottom: var(--apl-ui-space-0);
}
.apl-community__list-hero .apl-command-hero__actions {
gap: var(--apl-ui-space-1);
}
.apl-community__list-hero .apl-command-action {
border-radius: var(--apl-ui-radius-md);
gap: var(--apl-ui-space-1);
min-width: 0;
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
}
.apl-community__list-hero .apl-command-action > .apl-icon-frame {
flex-basis: var(--apl-ui-control-height-sm);
height: var(--apl-ui-control-height-sm);
min-width: var(--apl-ui-control-height-sm);
width: var(--apl-ui-control-height-sm);
}
.apl-community__list-hero .apl-command-action__copy small {
display: none;
}
.apl-community__list-hero .apl-community__module-nav {
margin-top: var(--apl-ui-space-2);
padding-top: var(--apl-ui-space-2);
}
.apl-community__list-hero .apl-community__module-link {
gap: var(--apl-ui-space-1);
min-height: var(--apl-ui-control-height-sm);
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
}
.apl-community--workspace > .apl-command-hero .apl-command-hero__actions > .apl-status {
border-radius: var(--apl-ui-radius-badge);
}
.apl-community__description {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-body);
line-height: var(--apl-ui-line-normal);
margin: var(--apl-ui-space-2) 0 var(--apl-ui-space-0);
max-width: var(--apl-ui-messages-copy-max);
}
.apl-community__module-nav {
align-items: center;
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-1);
margin-top: var(--apl-ui-space-3);
padding-top: var(--apl-ui-space-3);
}
.apl-community__module-link {
align-items: center;
border: var(--apl-ui-border-width) solid transparent;
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-muted);
display: inline-flex;
font: var(--apl-ui-font-weight-semibold) var(--apl-ui-font-size-button)/var(--apl-ui-line-normal) var(--apl-ui-font-family);
gap: var(--apl-ui-space-2);
min-height: var(--apl-ui-control-height);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
text-decoration: none;
}
.apl-community__module-link:hover,
.apl-community__module-link:focus {
background: var(--apl-ui-color-surface-muted);
color: var(--apl-ui-color-text-strong);
text-decoration: none;
}
.apl-community__module-link.is-active,
.apl-community__module-link[aria-current="page"] {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-brand-dark);
}
.apl-community__metric-link {
color: inherit;
min-width: 0;
text-decoration: none;
}
.apl-community__metric-link:hover,
.apl-community__metric-link:focus {
color: inherit;
text-decoration: none;
}
.apl-community__metric-link:focus-visible .apl-metric {
box-shadow: var(--apl-ui-shadow-focus);
}
.apl-community__filters .apl-card__body {
padding: var(--apl-ui-space-2);
}
.apl-toggle-grid {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-community-toggle-min)), 1fr));
min-width: 0;
}
.apl-community-impact {
min-width: 0;
}
.apl-community__results-head,
.apl-community__results-tools,
.apl-community__channels,
.apl-community__row-actions,
.apl-community-detail__overview,
.apl-community-detail__identity,
.apl-community-detail__person,
.apl-community-detail__record-actions {
align-items: center;
display: flex;
gap: var(--apl-ui-space-2);
}
.apl-community__results-head,
.apl-community-detail__overview {
flex-wrap: wrap;
justify-content: space-between;
}
.apl-community__results-tools,
.apl-community__row-actions,
.apl-community-detail__record-actions {
flex-wrap: wrap;
justify-content: flex-end;
}
.apl-community__results-tools label {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
margin: 0;
}
.apl-community__results-tools .apl-native-select {
min-width: var(--apl-ui-control-height-lg);
}
.apl-table-query-results {
transition: opacity var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
}
.apl-table-query-results[aria-busy="true"] {
opacity: var(--apl-ui-opacity-muted);
pointer-events: none;
}
.apl-table-query__match {
background: var(--apl-ui-color-warning-soft);
border-radius: var(--apl-ui-radius-sm);
color: var(--apl-ui-color-warning-dark);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-community__filters > .apl-notice {
margin: var(--apl-ui-space-0) var(--apl-ui-space-2) var(--apl-ui-space-2);
}
.apl-community__table {
min-width: var(--apl-ui-community-table-min-width);
table-layout: fixed;
}
.apl-community__table .apl-responsive-table__source:nth-child(1) {
width: var(--apl-ui-community-identity-column);
}
.apl-community__table .apl-responsive-table__source:nth-child(2) {
width: var(--apl-ui-community-owner-column);
}
.apl-community__table .apl-responsive-table__source:nth-child(3) {
width: var(--apl-ui-community-census-column);
}
.apl-community__table .apl-responsive-table__source:nth-child(4) {
width: var(--apl-ui-community-config-column);
}
.apl-community__table .apl-responsive-table__source:nth-child(5) {
width: var(--apl-ui-community-status-column);
}
.apl-community__table .apl-responsive-table__actions-cell {
min-width: var(--apl-ui-community-actions-column);
width: var(--apl-ui-community-actions-column);
}
.apl-community__primary,
.apl-community__secondary,
.apl-community-detail__person strong,
.apl-community-detail__person small,
.apl-community-detail__record strong,
.apl-community-detail__record small {
display: block;
max-width: 100%;
overflow-wrap: anywhere;
}
.apl-community__primary {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
line-height: var(--apl-ui-line-tight);
}
.apl-community__secondary {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
line-height: var(--apl-ui-line-normal);
margin-top: var(--apl-ui-space-1);
}
.apl-community__description-line {
color: var(--apl-ui-color-text-body);
display: block;
font-size: var(--apl-ui-font-size-detail);
line-height: var(--apl-ui-line-normal);
margin-top: var(--apl-ui-space-2);
overflow-wrap: anywhere;
}
.apl-community__description-line b,
.apl-community__field-label {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-community__field-label {
display: block;
line-height: var(--apl-ui-line-tight);
margin-bottom: var(--apl-ui-space-1);
}
.apl-community__subsection {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
margin-top: var(--apl-ui-space-2);
padding-top: var(--apl-ui-space-2);
}
.apl-community__counts,
.apl-community__operation-flags {
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
}
.apl-community__counts .apl-community__count {
margin-right: var(--apl-ui-space-0);
}
.apl-community__fact-list {
display: grid;
gap: var(--apl-ui-space-2);
margin: var(--apl-ui-space-0);
}
.apl-community__fact-list > div {
min-width: 0;
}
.apl-community__fact-list dt,
.apl-community__fact-list dd {
margin: var(--apl-ui-space-0);
overflow-wrap: anywhere;
}
.apl-community__fact-list dt {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
line-height: var(--apl-ui-line-tight);
}
.apl-community__fact-list dd {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
line-height: var(--apl-ui-line-normal);
margin-top: var(--apl-ui-space-1);
}
.apl-community__cell-status {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-2);
min-width: 0;
}
.apl-community__cell-status .apl-community__secondary,
.apl-community__operation-flags {
margin-top: var(--apl-ui-space-0);
}
.apl-community__operation-flags {
gap: var(--apl-ui-space-1);
}
.apl-responsive-field--wide {
grid-column: 1 / -1;
}
.apl-community__channels {
align-items: flex-start;
margin-top: var(--apl-ui-space-2);
}
.apl-community__count {
display: inline-flex;
flex-direction: column;
margin-right: var(--apl-ui-space-2);
min-width: 0;
}
.apl-community__count strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title);
font-weight: var(--apl-ui-font-weight-bold);
}
.apl-community__count small {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
}
.apl-community__row-actions {
white-space: nowrap;
}
.apl-community__detail-dialog {
width: var(--apl-ui-community-detail-width);
}
.apl-community__detail-dialog .apl-dialog__body {
background: var(--apl-ui-color-page);
}
.apl-community-detail {
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-3);
min-width: 0;
}
.apl-community-detail--editor > .apl-metric-grid {
gap: var(--apl-ui-space-1);
}
.apl-community-detail--editor > .apl-metric-grid .apl-metric {
min-height: var(--apl-ui-control-height-lg);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-community-detail--editor > .apl-metric-grid .apl-metric__copy {
align-items: baseline;
display: grid;
gap: var(--apl-ui-space-1) var(--apl-ui-space-2);
grid-template-columns: auto auto minmax(0, 1fr);
}
.apl-community-detail--editor > .apl-metric-grid .apl-metric__label,
.apl-community-detail--editor > .apl-metric-grid .apl-metric__value,
.apl-community-detail--editor > .apl-metric-grid .apl-metric__meta {
line-height: var(--apl-ui-line-tight);
margin-top: 0;
}
.apl-community-detail__overview {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
padding: var(--apl-ui-space-3);
}
.apl-community-detail__identity {
align-items: flex-start;
flex: 1 1 var(--apl-ui-page-copy-min);
min-width: 0;
}
.apl-community-detail__identity > div {
min-width: 0;
}
.apl-community-detail__identity h3 {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title-lg);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: var(--apl-ui-space-1) 0;
overflow-wrap: anywhere;
}
.apl-community-detail__identity p {
color: var(--apl-ui-color-text-muted);
margin: 0;
overflow-wrap: anywhere;
}
.apl-community-detail__split {
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: repeat(2,minmax(0,1fr));
}
.apl-community-detail__section {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
min-width: 0;
padding: var(--apl-ui-space-3);
}
.apl-community-detail__section-head {
align-items: flex-start;
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: space-between;
margin-bottom: var(--apl-ui-space-3);
padding-bottom: var(--apl-ui-space-2);
}
.apl-community-detail__section-head h4 {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-heading-sm);
font-weight: var(--apl-ui-font-weight-bold);
margin: 0;
}
.apl-community-detail__section-head p {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin: var(--apl-ui-space-1) 0 0;
}
.apl-community-detail__facts {
display: grid;
gap: var(--apl-ui-border-width);
grid-template-columns: repeat(2,minmax(0,1fr));
margin: 0;
overflow: hidden;
}
.apl-community-detail__facts > div {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft);
border-radius: var(--apl-ui-radius-md);
min-width: 0;
padding: var(--apl-ui-space-2);
}
.apl-community-detail__facts dt {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
margin: 0 0 var(--apl-ui-space-1);
}
.apl-community-detail__facts dd {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
margin: 0;
overflow-wrap: anywhere;
}
.apl-community-detail__person {
align-items: flex-start;
min-width: 0;
}
.apl-community-detail__person > div {
flex: 1 1 auto;
min-width: 0;
}
.apl-community-detail__person strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-community-detail__person small,
.apl-community-detail__record small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin-top: var(--apl-ui-space-1);
}
.apl-community-detail__records {
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-2);
}
.apl-community-detail__record {
align-items: flex-start;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: space-between;
min-width: 0;
padding: var(--apl-ui-space-2);
}
.apl-community-detail__record > div:first-child,
.apl-community-detail__record > .apl-community-detail__person {
flex: 1 1 var(--apl-ui-community-record-copy-min);
min-width: 0;
}
.apl-community-detail__record-actions {
flex: 0 1 auto;
}
.apl-community-detail__disclosure {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
overflow: visible;
}
.apl-community-detail__disclosure > summary {
align-items: center;
cursor: pointer;
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
list-style: none;
padding: var(--apl-ui-space-3);
}
.apl-community-detail__disclosure > summary::-webkit-details-marker {
display: none;
}
.apl-community-detail__disclosure > summary > span {
min-width: 0;
}
.apl-community-detail__disclosure > summary strong,
.apl-community-detail__disclosure > summary small {
display: block;
overflow-wrap: anywhere;
}
.apl-community-detail__disclosure > summary strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-community-detail__disclosure > summary small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin-top: var(--apl-ui-space-1);
}
.apl-community-detail__disclosure > summary > i {
color: var(--apl-ui-color-text-subtle);
transition: transform var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
}
.apl-community-detail__disclosure[open] > summary > i {
transform: rotate(180deg);
}
.apl-community-detail__disclosure-body {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
padding: var(--apl-ui-space-3);
}
.apl-community-form {
margin: 0;
}
.apl-community .apl-community__textarea {
height: auto !important;
min-height: var(--apl-ui-community-textarea-min-height) !important;
resize: vertical;
}
.apl-community__inline-form {
align-items: center;
display: flex;
flex: 1 1 var(--apl-ui-community-inline-field-min);
flex-wrap: wrap;
gap: var(--apl-ui-space-1);
justify-content: flex-end;
margin: 0;
}
.apl-community__inline-form .apl-control {
flex: 1 1 var(--apl-ui-community-inline-field-min);
width: auto !important;
}
.apl-community-channel-actions {
flex: 1 1 var(--apl-ui-community-inline-field-min);
}
.apl-community-channel-actions > .apl-community__inline-form {
flex: 1 1 var(--apl-ui-community-inline-field-min);
}
.apl-community-channel-editor {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
flex: 1 0 100%;
min-width: 0;
padding-top: var(--apl-ui-space-3);
}
.apl-community-channel-editor__head {
align-items: flex-start;
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
margin-bottom: var(--apl-ui-space-3);
}
.apl-community-channel-editor__head > div {
min-width: 0;
}
.apl-community-channel-editor__head strong,
.apl-community-channel-editor__head small {
display: block;
overflow-wrap: anywhere;
}
.apl-community-channel-editor__head strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-community-channel-editor__head small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin-top: var(--apl-ui-space-1);
}
.apl-community-search {
position: relative;
}
.apl-community-search__results {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
box-sizing: border-box;
box-shadow: var(--apl-ui-shadow-md);
left: 0;
max-height: var(--apl-ui-community-search-height);
overflow-y: auto;
padding: var(--apl-ui-space-2);
position: absolute;
right: 0;
top: calc(100% + var(--apl-ui-space-1));
z-index: var(--apl-ui-z-dropdown);
}
.apl-community-search__results.is-above {
bottom: calc(100% + var(--apl-ui-space-1));
top: auto;
}
.apl-community-search__option {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid transparent;
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
display: block;
font-family: var(--apl-ui-font-family);
padding: var(--apl-ui-space-2);
text-align: left;
width: 100%;
}
.apl-community-search__option:hover,
.apl-community-search__option:focus {
background: var(--apl-ui-color-surface-hover);
border-color: var(--apl-ui-color-brand-border);
outline: 0;
}
.apl-community-search__option strong,
.apl-community-search__option small {
display: block;
overflow-wrap: anywhere;
}
.apl-community-search__option strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-community-search__option small,
.apl-community-search__empty {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin-top: var(--apl-ui-space-1);
}
.apl-community-search__empty {
display: block;
padding: var(--apl-ui-space-2);
}
.apl-community__field-action {
align-items: flex-end;
display: flex;
}
.apl-community__field-action .apl-btn {
width: 100%;
}
.apl-community__impact {
margin-top: var(--apl-ui-space-3);
}
.apl-community-detail__long-value {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
margin: var(--apl-ui-space-3) 0 0;
overflow-wrap: anywhere;
padding: var(--apl-ui-space-2);
}
.apl-community-detail__timeline {
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-2);
list-style: none;
margin: 0;
padding: 0;
}
.apl-community-detail__timeline li {
align-items: flex-start;
display: flex;
gap: var(--apl-ui-space-2);
min-width: 0;
}
.apl-community-detail__timeline li > div {
flex: 1 1 auto;
min-width: 0;
}
.apl-community-detail__timeline strong,
.apl-community-detail__timeline small {
display: block;
overflow-wrap: anywhere;
}
.apl-community-detail__timeline strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-community-detail__timeline small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin-top: var(--apl-ui-space-1);
}
.apl-community-audit__head {
align-items: flex-end;
gap: var(--apl-ui-space-3);
}
.apl-community-audit__search {
display: grid;
flex: 0 1 var(--apl-ui-community-audit-search-width);
gap: var(--apl-ui-space-1);
margin: 0;
max-width: 100%;
width: var(--apl-ui-community-audit-search-width);
}
.apl-community-audit__search > span:first-child {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-community-audit__search .apl-search-field {
display: block;
position: relative;
}
.apl-community-audit__search .apl-search-field > i {
color: var(--apl-ui-color-text-muted);
left: var(--apl-ui-space-3);
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.apl-community-audit__search .apl-control {
padding-left: calc(var(--apl-ui-space-5) + var(--apl-ui-space-1));
width: 100%;
}
.apl-community-audit__list {
display: grid;
gap: var(--apl-ui-space-2);
}
.apl-community-audit [data-community-audit-results] {
transition: opacity var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
}
.apl-community-audit.is-loading [data-community-audit-results] {
opacity: var(--apl-ui-opacity-disabled);
pointer-events: none;
}
.apl-community-audit__event {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
min-width: 0;
overflow: hidden;
}
.apl-community-audit__event[hidden] {
display: none;
}
.apl-community-audit__event > summary {
align-items: flex-start;
cursor: pointer;
display: flex;
gap: var(--apl-ui-space-2);
list-style: none;
min-height: var(--apl-ui-control-height-lg);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-community-audit__event > summary::-webkit-details-marker {
display: none;
}
.apl-community-audit__event > summary:hover,
.apl-community-audit__event > summary:focus-visible {
background: var(--apl-ui-color-surface-hover);
outline: 0;
}
.apl-community-audit__summary-copy {
flex: 1 1 auto;
min-width: 0;
}
.apl-community-audit__summary-copy > small,
.apl-community-audit__title-row > strong {
display: block;
overflow-wrap: anywhere;
}
.apl-community-audit__title-row {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-1) var(--apl-ui-space-2);
justify-content: space-between;
}
.apl-community-audit__title-row > strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-community-audit__summary-copy > small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin-top: var(--apl-ui-space-1);
}
.apl-community-audit__chevron {
color: var(--apl-ui-color-text-muted);
flex: 0 0 auto;
margin-top: var(--apl-ui-space-2);
transition: transform var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
}
.apl-community-audit__event[open] .apl-community-audit__chevron {
transform: rotate(180deg);
}
.apl-community-audit__body {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
display: grid;
gap: var(--apl-ui-space-3);
padding: var(--apl-ui-space-3);
}
.apl-community-audit__facts,
.apl-community-audit__technical dl {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(auto-fit, minmax(var(--apl-ui-community-audit-fact-min-width), 1fr));
margin: 0;
}
.apl-community-audit__facts > div,
.apl-community-audit__technical dl > div {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft);
border-radius: var(--apl-ui-radius-md);
min-width: 0;
padding: var(--apl-ui-space-2);
}
.apl-community-audit__facts dt,
.apl-community-audit__technical dt {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-community-audit__facts dd,
.apl-community-audit__technical dd {
color: var(--apl-ui-color-text-body);
margin: var(--apl-ui-space-1) 0 0;
overflow-wrap: anywhere;
}
.apl-community-audit__comparison {
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
max-width: 100%;
overflow: auto;
}
.apl-community-audit__comparison .apl-table {
min-width: var(--apl-ui-community-audit-table-min-width);
}
.apl-community-audit__comparison th:first-child {
width: var(--apl-ui-community-audit-field-width);
}
.apl-community-audit__comparison tbody th {
background: var(--apl-ui-color-surface-subtle);
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
text-align: left;
vertical-align: top;
}
.apl-community-audit__comparison tbody th small {
color: var(--apl-ui-color-text-muted);
display: block;
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-regular);
margin-top: var(--apl-ui-space-1);
}
.apl-community-audit__comparison td {
vertical-align: top;
}
.apl-community-audit__value {
display: block;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.apl-community-audit__value.is-empty {
color: var(--apl-ui-color-text-muted);
font-style: italic;
}
.apl-community-audit__technical {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft);
border-radius: var(--apl-ui-radius-md);
padding: var(--apl-ui-space-2);
}
.apl-community-audit__technical > summary {
color: var(--apl-ui-color-text-body);
cursor: pointer;
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-community-audit__technical[open] > summary {
margin-bottom: var(--apl-ui-space-2);
}
.apl-community-audit__pagination {
margin-top: var(--apl-ui-space-3);
}
.apl-community-audit__page {
color: var(--apl-ui-color-text-body);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
}
@media (max-width: 767px) {
.apl-community-audit__head {
align-items: stretch;
}
.apl-community-audit__search {
flex-basis: 100%;
width: 100%;
}
.apl-community-audit__title-row {
align-items: flex-start;
flex-direction: column;
}
}
.apl-interest-schedule__periods,
.apl-interest-schedule__action {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
padding: var(--apl-ui-space-3);
}
.apl-period-groups {
display: grid;
gap: var(--apl-ui-space-2);
}
.apl-period-group {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
overflow: hidden;
}
.apl-period-group > summary {
align-items: center;
cursor: pointer;
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
list-style: none;
min-height: var(--apl-ui-control-height);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-period-group > summary::-webkit-details-marker {
display: none;
}
.apl-period-group > summary strong,
.apl-period-group > summary small {
display: block;
}
.apl-period-group > summary strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-period-group > summary small {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-period-group > summary > i {
color: var(--apl-ui-color-text-subtle);
transition: transform var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
}
.apl-period-group[open] > summary > i {
transform: rotate(180deg);
}
.apl-period-group__body {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
padding: var(--apl-ui-space-2);
}
.apl-period-group__body > .apl-actions {
margin-bottom: var(--apl-ui-space-2);
}
.apl-period-grid {
display: grid;
gap: var(--apl-ui-space-1);
grid-template-columns: repeat(auto-fill,minmax(min(100%,var(--apl-ui-community-period-option-min)),1fr));
}
.apl-period-option {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft);
border-radius: var(--apl-ui-radius-md);
cursor: pointer;
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: auto minmax(0,1fr) auto;
min-height: var(--apl-ui-control-height-lg);
min-width: 0;
padding: var(--apl-ui-space-2);
transition: background var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), border-color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
width: 100%;
}
.apl-period-option:hover,
.apl-period-option:focus-within {
background: var(--apl-ui-color-surface-hover);
border-color: var(--apl-ui-color-brand-border);
}
.apl-period-option:has(input:checked) {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border-strong);
}
.apl-period-option > input,
.apl-interest-action > input {
accent-color: var(--apl-ui-color-brand);
margin: var(--apl-ui-space-0);
}
.apl-period-option > input[type="checkbox"] {
height: var(--apl-ui-space-4);
width: var(--apl-ui-space-4);
}
.apl-period-option__copy {
min-width: 0;
}
.apl-period-option__copy strong,
.apl-period-option__copy small {
display: block;
overflow-wrap: normal;
word-break: normal;
}
.apl-period-option__copy strong,
.apl-period-option [data-interest-period-status] {
white-space: nowrap;
}
.apl-period-option__copy strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-period-option__copy small {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-interest-action-grid {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--apl-ui-community-interest-action-min)),1fr));
}
.apl-interest-action {
align-items: flex-start;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
cursor: pointer;
display: flex;
gap: var(--apl-ui-space-2);
min-height: var(--apl-ui-control-height-lg);
padding: var(--apl-ui-space-2);
transition: background var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), border-color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
}
.apl-interest-action:hover,
.apl-interest-action:focus-within,
.apl-interest-action:has(input:checked) {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
}
.apl-interest-action > span {
min-width: 0;
}
.apl-interest-action strong,
.apl-interest-action small {
display: block;
overflow-wrap: anywhere;
}
.apl-interest-action strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-interest-action small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin-top: var(--apl-ui-space-1);
}
@media (max-width: 1280px) {
.apl-community__table {
min-width: 0;
}
}
@media (max-width: 767px) {
.apl-community__module-nav {
align-items: stretch;
}
.apl-community__module-link {
flex: 1 1 var(--apl-ui-query-field-min);
justify-content: center;
}
.apl-community__detail-dialog {
max-height: var(--apl-ui-dialog-max-height);
}
.apl-community-detail__split {
grid-template-columns: minmax(0,1fr);
}
.apl-community-detail__overview {
align-items: flex-start;
flex-direction: column;
}
.apl-community-detail__record-actions,
.apl-community__row-actions {
justify-content: flex-start;
width: 100%;
}
.apl-community__row-actions .apl-btn {
flex: 1 1 auto;
}
}
@media (max-width: 520px) {
.apl-community-detail__facts {
grid-template-columns: minmax(0,1fr);
}
.apl-community__inline-form {
align-items: stretch;
flex-direction: column;
width: 100%;
}
.apl-community__inline-form .apl-control,
.apl-community__inline-form .apl-btn {
width: 100% !important;
}
.apl-community-channel-actions,
.apl-community-channel-editor__head {
align-items: stretch;
flex-direction: column;
width: 100%;
}
}
/* APL Owner Community self-service */
.apl-owner-community {
color: var(--apl-ui-color-text);
font-family: var(--apl-ui-font-family);
font-size: var(--apl-ui-font-size-base);
}
.apl-owner-community__privacy {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--apl-ui-space-2);
justify-content: flex-start;
margin-block-end: var(--apl-ui-space-3);
min-height: 0;
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
text-align: left;
}
.apl-owner-community__privacy > i {
color: var(--apl-ui-color-brand);
flex: 0 0 auto;
font-size: var(--apl-ui-font-size-icon-xl);
}
.apl-owner-community__privacy > div {
align-items: baseline;
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
gap: var(--apl-ui-space-1) var(--apl-ui-space-2);
min-width: 0;
}
.apl-owner-community__privacy > div > strong,
.apl-owner-community__privacy > div > span {
display: inline;
line-height: var(--apl-ui-line-normal);
margin: 0;
}
.apl-owner-community__root {
display: grid;
gap: var(--apl-ui-space-3);
}
.apl-owner-community__columns {
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.apl-owner-community__metrics {
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
}
.apl-owner-community__metrics > span {
align-items: baseline;
background: var(--apl-ui-color-surface-muted);
border-radius: var(--apl-ui-radius-pill);
color: var(--apl-ui-color-text-muted);
display: inline-flex;
gap: var(--apl-ui-space-1);
padding: var(--apl-ui-space-1) var(--apl-ui-space-3);
}
.apl-owner-community__metrics strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title);
font-weight: var(--apl-ui-font-weight-bold);
}
.apl-owner-community__notice {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin: var(--apl-ui-space-3) 0 0;
}
.apl-owner-community__records {
display: grid;
gap: var(--apl-ui-space-2);
}
.apl-owner-community__record {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border-radius: var(--apl-ui-radius-lg);
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: auto minmax(0, 1fr) auto;
min-width: 0;
padding: var(--apl-ui-space-2);
}
.apl-owner-community__record-icon {
align-items: center;
background: var(--apl-ui-color-brand-surface);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-brand);
display: inline-flex;
height: calc(var(--apl-ui-space-4) * 2);
justify-content: center;
width: calc(var(--apl-ui-space-4) * 2);
}
.apl-owner-community__record > div {
display: grid;
min-width: 0;
}
.apl-owner-community__record strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
overflow-wrap: anywhere;
}
.apl-owner-community__record small,
.apl-owner-community__record div > span {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
overflow-wrap: anywhere;
}
.apl-community-self-form {
display: grid;
gap: var(--apl-ui-space-3);
}
.apl-community-self-form .apl-actions {
margin-block-start: var(--apl-ui-space-2);
}
.apl-rebuilt.opv2-drawer.is-community-form {
background: var(--apl-ui-color-surface);
color: var(--apl-ui-color-text-body);
font-family: var(--apl-ui-font-family);
font-size: var(--apl-ui-font-size-body);
font-weight: var(--apl-ui-font-weight-regular);
line-height: var(--apl-ui-line-normal);
}
.apl-rebuilt.opv2-drawer.is-community-form > header {
background: var(--apl-ui-color-surface);
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
gap: var(--apl-ui-space-3);
min-height: var(--apl-ui-control-height-lg);
padding: var(--apl-ui-space-4);
}
.apl-rebuilt.opv2-drawer.is-community-form > header span {
color: var(--apl-ui-color-brand-dark);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-bold);
letter-spacing: var(--apl-ui-letter-spacing-label);
}
.apl-rebuilt.opv2-drawer.is-community-form > header h2 {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: var(--apl-ui-space-1) 0 var(--apl-ui-space-0);
}
.apl-rebuilt.opv2-drawer.is-community-form > header .opv2-icon-button {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
height: var(--apl-ui-icon-button-size);
min-width: var(--apl-ui-icon-button-size);
width: var(--apl-ui-icon-button-size);
}
.apl-rebuilt.opv2-drawer.is-community-form .opv2-drawer-body {
background: var(--apl-ui-color-page);
padding: var(--apl-ui-space-4);
}
.apl-rebuilt.opv2-drawer.is-community-form > footer {
background: var(--apl-ui-color-surface);
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
gap: var(--apl-ui-space-2);
min-height: var(--apl-ui-control-height-lg);
padding: var(--apl-ui-space-3) var(--apl-ui-space-4);
}
.apl-rebuilt.opv2-drawer.is-community-form .apl-community-self-form {
min-width: 0;
width: 100%;
}
.apl-rebuilt.opv2-drawer.is-community-form .apl-community-self-form > .apl-feedback {
align-items: flex-start;
min-height: 0;
padding: var(--apl-ui-space-3);
text-align: left;
}
.apl-rebuilt.opv2-drawer.is-community-form .apl-community-self-form > .apl-grid {
gap: var(--apl-ui-space-3);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-community-drawer-field-min)), 1fr));
min-width: 0;
width: 100%;
}
.apl-rebuilt.opv2-drawer.is-community-form .apl-community-self-form > .apl-grid > .apl-field,
.apl-rebuilt.opv2-drawer.is-community-form .apl-community-self-form > .apl-grid > .apl-owner-community__check {
grid-column: auto;
min-width: 0;
}
.apl-rebuilt.opv2-drawer.is-community-form .apl-community-self-form > .apl-grid > .apl-col-12 {
grid-column: 1 / -1;
}
.apl-rebuilt.opv2-drawer.is-community-form .apl-community-self-form .apl-actions {
justify-content: flex-end;
margin-block-start: var(--apl-ui-space-0);
}
.apl-owner-community__check {
align-items: flex-start;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
cursor: pointer;
display: flex;
gap: var(--apl-ui-space-2);
line-height: var(--apl-ui-line-relaxed);
padding: var(--apl-ui-space-3);
}
.apl-owner-community__check input {
accent-color: var(--apl-ui-color-brand);
flex: 0 0 var(--apl-ui-font-size-icon-lg);
height: var(--apl-ui-font-size-icon-lg);
margin: var(--apl-ui-space-1) var(--apl-ui-space-0) var(--apl-ui-space-0);
width: var(--apl-ui-font-size-icon-lg);
}
.apl-owner-community__check span {
min-width: 0;
overflow-wrap: anywhere;
}
@media (max-width: 767px) {
.apl-owner-community__columns {
grid-template-columns: minmax(0, 1fr);
}
.apl-owner-community .apl-card__header {
align-items: stretch;
}
.apl-owner-community .apl-card__header .apl-btn {
justify-content: center;
width: 100%;
}
}
@media (max-width: 520px) {
.apl-owner-community__record {
grid-template-columns: auto minmax(0, 1fr);
}
.apl-owner-community__record > .apl-btn {
grid-column: 1 / -1;
justify-content: center;
width: 100%;
}
}
/* ======================================================================
* APL EMAIL HISTORY REBUILT
* Analítica, historial agrupado, detalle seguro y carga administrativa.
* Toda decisión visual procede de tokens --apl-ui-* del sistema central.
* ====================================================================== */
:root {
--apl-ui-email-description-width: 72ch;
--apl-ui-email-analytics-aside: 340px;
--apl-ui-email-chart-height: 250px;
--apl-ui-email-chart-stroke: 3;
--apl-ui-email-chart-grid-stroke: 1;
--apl-ui-email-legend-dot: 9px;
--apl-ui-email-progress-height: 8px;
--apl-ui-email-table-min-width: 1040px;
--apl-ui-email-dialog-width: 1120px;
--apl-ui-email-preview-height: 62vh;
--apl-ui-email-preview-min-height: 360px;
--apl-ui-email-upload-width: 760px;
--apl-ui-email-dropzone-height: 190px;
--apl-ui-email-selection-height: 44px;
--apl-ui-email-correction-reason-height: 92px;
}
.apl-email {
color: var(--apl-ui-color-text-body);
font: var(--apl-ui-font-weight-regular) var(--apl-ui-font-size-body)/var(--apl-ui-line-normal) var(--apl-ui-font-family);
}
.apl-email *, .apl-email *::before, .apl-email *::after { box-sizing: border-box; }
.apl-email__description { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-body); line-height: var(--apl-ui-line-normal); margin: var(--apl-ui-space-2) var(--apl-ui-space-0) var(--apl-ui-space-0); max-width: var(--apl-ui-email-description-width); }
.apl-email__live[hidden], .apl-email__advanced[hidden], .apl-email__panel[hidden] { display: none !important; }
.apl-email.is-loading { opacity: var(--apl-ui-opacity-disabled); pointer-events: none; }
.apl-email__filter-body { display: flex; flex-direction: column; gap: var(--apl-ui-space-3); }
.apl-email__advanced { border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider); padding-top: var(--apl-ui-space-3); }
.apl-email__workspace { overflow: hidden; }
.apl-email__panel { padding: var(--apl-ui-space-4); }
.apl-email__metric-link { color: inherit; min-width: var(--apl-ui-space-0); text-decoration: none; }
.apl-email__metric-link:hover, .apl-email__metric-link:focus { color: inherit; outline: 0; text-decoration: none; }
.apl-email__metric-link:focus-visible .apl-metric { box-shadow: var(--apl-ui-shadow-focus); }
.apl-email__analytics-grid { display: grid; gap: var(--apl-ui-space-3); grid-template-columns: minmax(var(--apl-ui-space-0), 2fr) minmax(min(100%, var(--apl-ui-email-analytics-aside)), 1fr); margin-top: var(--apl-ui-space-3); }
.apl-email__trend-card { min-width: var(--apl-ui-space-0); }
.apl-email__modules-card { grid-column: 1 / -1; }
.apl-email__legend { align-items: center; color: var(--apl-ui-color-text-muted); display: flex; flex-wrap: wrap; font-size: var(--apl-ui-font-size-caption); gap: var(--apl-ui-space-3); }
.apl-email__legend > span { align-items: center; display: inline-flex; gap: var(--apl-ui-space-1); }
.apl-email__legend-dot { background: var(--apl-ui-color-brand); border-radius: var(--apl-ui-radius-pill); display: inline-block; height: var(--apl-ui-email-legend-dot); width: var(--apl-ui-email-legend-dot); }
.apl-email__legend-dot.is-sent { background: var(--apl-ui-color-success); }
.apl-email__chart { min-width: var(--apl-ui-space-0); width: 100%; }
.apl-email__chart svg { display: block; height: var(--apl-ui-email-chart-height); overflow: visible; width: 100%; }
.apl-email__chart-grid { stroke: var(--apl-ui-color-row-divider); stroke-width: var(--apl-ui-email-chart-grid-stroke); vector-effect: non-scaling-stroke; }
.apl-email__chart-line { fill: none; stroke: var(--apl-ui-color-brand); stroke-linecap: round; stroke-linejoin: round; stroke-width: var(--apl-ui-email-chart-stroke); vector-effect: non-scaling-stroke; }
.apl-email__chart-line.is-sent { stroke: var(--apl-ui-color-success); }
.apl-email__chart-axis { color: var(--apl-ui-color-text-subtle); display: flex; font-size: var(--apl-ui-font-size-caption); justify-content: space-between; margin-top: var(--apl-ui-space-1); }
.apl-email__breakdown { display: flex; flex-direction: column; gap: var(--apl-ui-space-3); }
.apl-email__bar-row { color: inherit; display: grid; gap: var(--apl-ui-space-2); min-width: var(--apl-ui-space-0); text-decoration: none; }
.apl-email__bar-row:hover, .apl-email__bar-row:focus { color: inherit; outline: 0; text-decoration: none; }
.apl-email__bar-copy { align-items: center; display: flex; gap: var(--apl-ui-space-2); justify-content: space-between; min-width: var(--apl-ui-space-0); }
.apl-email__bar-copy span { color: var(--apl-ui-color-text-body); min-width: var(--apl-ui-space-0); overflow-wrap: anywhere; }
.apl-email__bar-copy strong { color: var(--apl-ui-color-text-strong); flex: var(--apl-ui-space-0) var(--apl-ui-space-0) auto; font-weight: var(--apl-ui-font-weight-bold); }
.apl-email__progress { accent-color: var(--apl-ui-color-brand); appearance: none; background: var(--apl-ui-color-surface-strong); border: 0; border-radius: var(--apl-ui-radius-pill); height: var(--apl-ui-email-progress-height); overflow: hidden; width: 100%; }
.apl-email__progress::-webkit-progress-bar { background: var(--apl-ui-color-surface-strong); border-radius: var(--apl-ui-radius-pill); }
.apl-email__progress::-webkit-progress-value { background: var(--apl-ui-color-brand); border-radius: var(--apl-ui-radius-pill); }
.apl-email__progress::-moz-progress-bar { background: var(--apl-ui-color-brand); border-radius: var(--apl-ui-radius-pill); }
.apl-email__progress.is-success { accent-color: var(--apl-ui-color-success); }
.apl-email__progress.is-success::-webkit-progress-value { background: var(--apl-ui-color-success); }
.apl-email__progress.is-success::-moz-progress-bar { background: var(--apl-ui-color-success); }
.apl-email__progress.is-info { accent-color: var(--apl-ui-color-info-dark); }
.apl-email__progress.is-info::-webkit-progress-value { background: var(--apl-ui-color-info-dark); }
.apl-email__progress.is-info::-moz-progress-bar { background: var(--apl-ui-color-info-dark); }
.apl-email__progress.is-danger { accent-color: var(--apl-ui-color-danger); }
.apl-email__progress.is-danger::-webkit-progress-value { background: var(--apl-ui-color-danger); }
.apl-email__progress.is-danger::-moz-progress-bar { background: var(--apl-ui-color-danger); }
.apl-email__insight { background: var(--apl-ui-color-surface-subtle); border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted); border-radius: var(--apl-ui-radius-md); color: var(--apl-ui-color-text-muted); margin: var(--apl-ui-space-0); padding: var(--apl-ui-space-2); }
.apl-email__results-head { align-items: center; border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider); display: flex; flex-wrap: wrap; gap: var(--apl-ui-space-3); justify-content: space-between; margin: calc(var(--apl-ui-space-4) * -1) calc(var(--apl-ui-space-4) * -1) var(--apl-ui-space-3); padding: var(--apl-ui-space-3) var(--apl-ui-space-4); }
.apl-email__results-tools { align-items: center; display: flex; gap: var(--apl-ui-space-2); }
.apl-email__results-tools label { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-detail); font-weight: var(--apl-ui-font-weight-semibold); margin: var(--apl-ui-space-0); }
.apl-email__table-wrap { max-width: 100%; }
.apl-email__table { min-width: var(--apl-ui-email-table-min-width); }
.apl-email__table th:last-child, .apl-email__table td:last-child { text-align: right; }
.apl-email__primary { color: var(--apl-ui-color-text-strong); display: block; font-weight: var(--apl-ui-font-weight-semibold); line-height: var(--apl-ui-line-tight); overflow-wrap: anywhere; white-space: normal; }
.apl-email__secondary { color: var(--apl-ui-color-text-subtle); display: block; font-size: var(--apl-ui-font-size-caption); line-height: var(--apl-ui-line-normal); margin-top: var(--apl-ui-space-1); overflow-wrap: anywhere; white-space: normal; }
.apl-email__status-stack { align-items: flex-start; display: flex; flex-direction: column; gap: var(--apl-ui-space-1); }
.apl-email__table .apl-status { white-space: normal; }
.apl-email__table .apl-responsive-table__actions-cell .apl-btn { white-space: nowrap; }
.apl-email__pager { border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider); margin-top: var(--apl-ui-space-3); padding-top: var(--apl-ui-space-3); }
.apl-email__empty { margin: var(--apl-ui-space-4); }
.apl-email__dialog { width: var(--apl-ui-email-dialog-width); }
.apl-email__standalone { padding: var(--apl-ui-space-3); }
.apl-email-detail { display: flex; flex-direction: column; gap: var(--apl-ui-space-3); min-width: var(--apl-ui-space-0); }
.apl-email-detail__headline { align-items: flex-start; background: var(--apl-ui-color-brand-surface); border: var(--apl-ui-border-width) solid var(--apl-ui-color-brand-border); border-radius: var(--apl-ui-radius-lg); display: flex; gap: var(--apl-ui-space-3); justify-content: space-between; padding: var(--apl-ui-space-3); }
.apl-email-detail__headline > div:first-child { min-width: var(--apl-ui-space-0); }
.apl-email-detail__headline h3 { color: var(--apl-ui-color-text-strong); font-size: var(--apl-ui-font-size-title-lg); font-weight: var(--apl-ui-font-weight-bold); line-height: var(--apl-ui-line-tight); margin: var(--apl-ui-space-1) var(--apl-ui-space-0); overflow-wrap: anywhere; }
.apl-email-detail__headline p:not(.apl-page__eyebrow) { color: var(--apl-ui-color-text-muted); margin: var(--apl-ui-space-0); overflow-wrap: anywhere; }
.apl-email-detail__headline-status { align-items: flex-end; display: flex; flex-direction: column; flex: var(--apl-ui-space-0) var(--apl-ui-space-0) auto; gap: var(--apl-ui-space-1); }
.apl-email-detail__summary { display: grid; gap: var(--apl-ui-space-2); grid-template-columns: repeat(4, minmax(var(--apl-ui-space-0), 1fr)); }
.apl-email-detail__datum { background: var(--apl-ui-color-surface-subtle); border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted); border-radius: var(--apl-ui-radius-md); min-width: var(--apl-ui-space-0); padding: var(--apl-ui-space-2); }
.apl-email-detail__datum span { color: var(--apl-ui-color-text-subtle); display: block; font-size: var(--apl-ui-font-size-caption); font-weight: var(--apl-ui-font-weight-semibold); text-transform: uppercase; }
.apl-email-detail__datum strong { color: var(--apl-ui-color-text-strong); display: block; font-weight: var(--apl-ui-font-weight-semibold); margin-top: var(--apl-ui-space-1); overflow-wrap: anywhere; }
.apl-email-detail__timeline { display: grid; gap: var(--apl-ui-space-2); list-style: none; margin: var(--apl-ui-space-0); padding: var(--apl-ui-space-0); }
.apl-email-detail__timeline li, .apl-email-detail__recipients article, .apl-email-detail__attachments article { align-items: center; border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider); display: flex; gap: var(--apl-ui-space-2); min-width: var(--apl-ui-space-0); padding-bottom: var(--apl-ui-space-2); }
.apl-email-detail__timeline li:last-child, .apl-email-detail__recipients article:last-child, .apl-email-detail__attachments article:last-child { border-bottom: 0; padding-bottom: var(--apl-ui-space-0); }
.apl-email-detail__timeline li > div, .apl-email-detail__recipients article > div, .apl-email-detail__attachments article > div { flex: 1 1 auto; min-width: var(--apl-ui-space-0); }
.apl-email-detail__timeline strong, .apl-email-detail__timeline span, .apl-email-detail__recipients strong, .apl-email-detail__recipients span, .apl-email-detail__attachments strong, .apl-email-detail__attachments span { display: block; overflow-wrap: anywhere; }
.apl-email-detail__timeline strong, .apl-email-detail__recipients strong, .apl-email-detail__attachments strong { color: var(--apl-ui-color-text-strong); font-weight: var(--apl-ui-font-weight-semibold); }
.apl-email-detail__timeline div > span, .apl-email-detail__recipients div > span, .apl-email-detail__attachments div > span { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-detail); margin-top: var(--apl-ui-space-1); }
.apl-email-detail__notice { background: var(--apl-ui-color-info-soft); border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft); border-radius: var(--apl-ui-radius-md); color: var(--apl-ui-color-info-dark); margin-top: var(--apl-ui-space-3); padding: var(--apl-ui-space-2); }
.apl-email-detail__notice.is-danger { background: var(--apl-ui-color-danger-soft); border-color: var(--apl-ui-color-danger-border); color: var(--apl-ui-color-danger-dark); }
.apl-email-detail__notice strong, .apl-email-detail__notice span { display: block; overflow-wrap: anywhere; }
.apl-email-detail__notice strong { font-weight: var(--apl-ui-font-weight-semibold); margin-bottom: var(--apl-ui-space-1); }
.apl-email-detail__recipients, .apl-email-detail__attachments { display: grid; gap: var(--apl-ui-space-2); }
.apl-email-correction { border-color: var(--apl-ui-color-danger-border); }
.apl-email-correction__list { display: grid; gap: var(--apl-ui-space-3); }
.apl-email-correction__item { background: var(--apl-ui-color-surface-subtle); border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted); border-radius: var(--apl-ui-radius-lg); display: grid; gap: var(--apl-ui-space-3); padding: var(--apl-ui-space-3); }
.apl-email-correction__diagnosis { align-items: center; display: flex; gap: var(--apl-ui-space-2); min-width: var(--apl-ui-space-0); }
.apl-email-correction__diagnosis > div { min-width: var(--apl-ui-space-0); }
.apl-email-correction__diagnosis strong, .apl-email-correction__diagnosis span { display: block; overflow-wrap: anywhere; }
.apl-email-correction__diagnosis strong { color: var(--apl-ui-color-text-strong); font-weight: var(--apl-ui-font-weight-semibold); }
.apl-email-correction__diagnosis span { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-detail); margin-top: var(--apl-ui-space-1); }
.apl-email-correction .apl-feedback .apl-btn { margin-top: var(--apl-ui-space-2); }
.apl-email-correction__form { background: var(--apl-ui-color-surface); border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted); border-radius: var(--apl-ui-radius-md); display: grid; gap: var(--apl-ui-space-2); margin: var(--apl-ui-space-0); padding: var(--apl-ui-space-3); }
.apl-email-correction__form textarea { min-height: var(--apl-ui-email-correction-reason-height); resize: vertical; }
.apl-email-correction__confirmation { align-items: flex-start; color: var(--apl-ui-color-text-body); display: flex; gap: var(--apl-ui-space-2); margin: var(--apl-ui-space-0); }
.apl-email-correction__confirmation input { accent-color: var(--apl-ui-color-brand); flex: var(--apl-ui-space-0) var(--apl-ui-space-0) auto; margin-top: var(--apl-ui-space-1); }
.apl-email-correction__form > .apl-btn { justify-self: start; }
.apl-email-detail__preview { background: var(--apl-ui-color-surface); border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted); border-radius: var(--apl-ui-radius-md); display: block; height: var(--apl-ui-email-preview-height); min-height: var(--apl-ui-email-preview-min-height); width: 100%; }
.apl-email-detail__attachments .apl-btn, .apl-email-detail__attachments > article > .apl-status { flex: var(--apl-ui-space-0) var(--apl-ui-space-0) auto; }
.apl-email-detail__action-zone { align-items: center; background: var(--apl-ui-color-accent-soft); border: var(--apl-ui-border-width) solid var(--apl-ui-color-accent-border-soft); border-radius: var(--apl-ui-radius-lg); display: flex; gap: var(--apl-ui-space-3); justify-content: space-between; padding: var(--apl-ui-space-3); }
.apl-email-detail__action-zone > div { min-width: var(--apl-ui-space-0); }
.apl-email-detail__action-zone strong, .apl-email-detail__action-zone span { display: block; overflow-wrap: anywhere; }
.apl-email-detail__action-zone strong { color: var(--apl-ui-color-accent-dark); font-weight: var(--apl-ui-font-weight-semibold); }
.apl-email-detail__action-zone span { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-detail); margin-top: var(--apl-ui-space-1); }
.apl-email-detail__action-zone form { flex: var(--apl-ui-space-0) var(--apl-ui-space-0) auto; margin: var(--apl-ui-space-0); }
.apl-email-upload { max-width: var(--apl-ui-email-upload-width); }
.apl-email-upload__form .apl-card__body { display: flex; flex-direction: column; gap: var(--apl-ui-space-3); }
.apl-email-upload__dropzone { align-items: center; background: var(--apl-ui-color-surface-subtle); border: var(--apl-ui-border-width) dashed var(--apl-ui-color-brand-border-strong); border-radius: var(--apl-ui-radius-lg); cursor: pointer; display: flex; flex-direction: column; gap: var(--apl-ui-space-2); justify-content: center; min-height: var(--apl-ui-email-dropzone-height); padding: var(--apl-ui-space-4); text-align: center; }
.apl-email-upload__dropzone strong { color: var(--apl-ui-color-text-strong); font-weight: var(--apl-ui-font-weight-semibold); }
.apl-email-upload__dropzone > span:not(.apl-icon-frame) { color: var(--apl-ui-color-text-muted); }
.apl-email-upload__dropzone input { max-width: 100%; }
.apl-email-upload__selection { align-items: center; background: var(--apl-ui-color-surface-subtle); border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted); border-radius: var(--apl-ui-radius-md); display: flex; flex-wrap: wrap; gap: var(--apl-ui-space-2); min-height: var(--apl-ui-email-selection-height); padding: var(--apl-ui-space-2); }
.apl-email-upload__selection > span:not(.apl-status) { color: var(--apl-ui-color-text-muted); }
@media (max-width: 1280px) {
.apl-email__table { min-width: var(--apl-ui-space-0); }
}
@media (max-width: 900px) {
.apl-email__analytics-grid { grid-template-columns: minmax(var(--apl-ui-space-0), 1fr); }
.apl-email__modules-card { grid-column: auto; }
.apl-email-detail__summary { grid-template-columns: repeat(2, minmax(var(--apl-ui-space-0), 1fr)); }
}
@media (max-width: 767px) {
.apl-email__panel { padding: var(--apl-ui-space-2); }
.apl-email__results-head { margin: calc(var(--apl-ui-space-2) * -1) calc(var(--apl-ui-space-2) * -1) var(--apl-ui-space-2); padding: var(--apl-ui-space-2); }
.apl-email__results-tools { align-items: flex-start; flex-direction: column; width: 100%; }
.apl-email__table { min-width: var(--apl-ui-space-0); }
.apl-email__table .apl-responsive-table__actions-cell .apl-btn { width: 100%; }
.apl-email__pager { align-items: stretch; flex-direction: column; }
.apl-email__pager .apl-pager__controls { justify-content: flex-start; overflow-x: auto; }
.apl-email__dialog { max-height: 100%; }
.apl-email-detail__headline, .apl-email-detail__action-zone { align-items: stretch; flex-direction: column; }
.apl-email-detail__headline-status { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
.apl-email-detail__action-zone form, .apl-email-detail__action-zone .apl-btn { width: 100%; }
}
@media (max-width: 520px) {
.apl-email-detail__summary { grid-template-columns: minmax(var(--apl-ui-space-0), 1fr); }
.apl-email-detail__attachments article { align-items: stretch; flex-direction: column; }
.apl-email-detail__attachments .apl-btn, .apl-email-detail__attachments > article > .apl-status { width: 100%; }
.apl-email-correction__form > .apl-btn, .apl-email-correction .apl-feedback .apl-btn { width: 100%; }
.apl-email-upload__form .apl-card__footer .apl-btn { width: 100%; }
}
/* ======================================================================
* APL CLIENT RECEIVABLES REBUILT
* Control consolidado y trazable de la cartera de clientes de Aplicamos.
* ====================================================================== */
:root {
--apl-ui-receivables-dialog-width: min(96vw, 1080px);
--apl-ui-receivables-copy-max-width: 760px;
--apl-ui-receivables-primary-col-width: 28%;
--apl-ui-receivables-empty-state-min-height: calc(var(--apl-ui-control-height-lg) * 4);
}
.apl-receivables,
.apl-receivables * {
box-sizing: border-box;
}
.apl-receivables {
--apl-ui-dialog-width: var(--apl-ui-receivables-dialog-width);
}
.apl-receivables__description,
.apl-receivables__detail-copy {
color: var(--apl-ui-color-text-muted);
margin: var(--apl-ui-space-1) 0 0;
max-width: var(--apl-ui-receivables-copy-max-width);
}
.apl-receivables__metrics {
margin-bottom: var(--apl-ui-space-3);
}
.apl-receivables__metric {
color: inherit;
cursor: pointer;
text-decoration: none;
}
.apl-receivables__metric:hover,
.apl-receivables__metric:focus,
.apl-receivables__metric.is-active {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
color: inherit;
outline: 0;
text-decoration: none;
}
.apl-receivables__metric.is-active {
box-shadow: var(--apl-ui-shadow-focus);
}
.apl-receivables__filters {
margin-bottom: var(--apl-ui-space-3);
}
.apl-receivables__advanced {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
margin-top: var(--apl-ui-space-3);
padding-top: var(--apl-ui-space-3);
}
.apl-receivables__workspace {
overflow: hidden;
}
.apl-receivables__results-head,
.apl-receivables__detail-head,
.apl-receivables__detail-identity {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-3);
justify-content: space-between;
min-width: 0;
padding: var(--apl-ui-space-3);
}
.apl-receivables__query-summary {
align-items: flex-start;
background: var(--apl-ui-color-accent-soft);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-accent-border-soft);
border-radius: var(--apl-ui-radius-lg);
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-1);
min-width: 0;
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-receivables__query-label,
.apl-receivables__query-value,
.apl-receivables__query-meta {
display: block;
max-width: 100%;
overflow-wrap: anywhere;
}
.apl-receivables__query-label {
color: var(--apl-ui-color-accent-dark);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
text-transform: uppercase;
}
.apl-receivables__query-value {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title-lg);
font-variant-numeric: tabular-nums;
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
}
.apl-receivables__query-meta {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
}
.apl-receivables__results-tools {
align-items: center;
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: auto minmax(var(--apl-ui-control-height-lg), 1fr);
}
.apl-receivables__results-tools > label {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
margin: 0;
}
.apl-receivables__table-wrap,
.apl-receivables__detail-table-wrap {
border-left: 0;
border-radius: 0;
border-right: 0;
}
.apl-receivables__table .apl-responsive-table__source:first-child {
width: var(--apl-ui-receivables-primary-col-width);
}
.apl-receivables__table .apl-responsive-table__actions-cell,
.apl-receivables__detail-table .apl-responsive-table__actions-cell {
white-space: nowrap;
}
.apl-receivables__primary,
.apl-receivables__secondary {
display: block;
min-width: 0;
overflow-wrap: anywhere;
}
.apl-receivables__primary {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-receivables__secondary {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-receivables__number {
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
.apl-receivables__pager,
.apl-receivables__detail-pager {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
padding: var(--apl-ui-space-3);
}
.apl-receivables__empty,
.apl-receivables__detail-empty {
border: 0;
border-radius: 0;
min-height: var(--apl-ui-receivables-empty-state-min-height);
}
.apl-receivables__dialog {
max-height: var(--apl-ui-dialog-max-height);
width: var(--apl-ui-receivables-dialog-width);
}
.apl-receivables__detail {
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-3);
min-width: 0;
}
.apl-receivables__detail-identity {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
padding: var(--apl-ui-space-3);
}
.apl-receivables__detail-title {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title-lg);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: var(--apl-ui-space-1) 0 0;
overflow-wrap: anywhere;
}
.apl-receivables__detail-metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.apl-receivables__detail-head {
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
padding: 0 0 var(--apl-ui-space-2);
}
.apl-receivables__state-actions {
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-1);
margin-top: var(--apl-ui-space-2);
}
.apl-receivables__state-actions .apl-btn.is-active {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-brand-dark);
}
.apl-receivables__live {
margin-bottom: var(--apl-ui-space-3);
min-height: 0;
}
.apl-receivables__live--success {
background: var(--apl-ui-color-success-soft);
border-color: var(--apl-ui-color-success-border);
color: var(--apl-ui-color-success-dark);
}
@media (max-width: 767px) {
.apl-receivables__results-head,
.apl-receivables__detail-head,
.apl-receivables__detail-identity {
align-items: stretch;
flex-direction: column;
}
.apl-receivables__query-summary,
.apl-receivables__results-tools {
width: 100%;
}
.apl-receivables__results-tools {
grid-template-columns: auto minmax(0, 1fr);
}
.apl-receivables__detail-metrics {
grid-template-columns: minmax(0, 1fr);
}
.apl-receivables__dialog-layer {
padding: var(--apl-ui-space-1);
}
.apl-receivables__dialog {
max-height: 100%;
}
.apl-receivables__dialog .apl-dialog__body {
padding: var(--apl-ui-space-2);
}
.apl-receivables__table .apl-responsive-table__actions-cell .apl-btn {
width: 100%;
}
.apl-receivables__state-actions .apl-btn {
flex: 1 1 auto;
}
}
/* APL Rebuilt table sorting contract */
.apl-table th[data-apl-sort-key],
.apl-table[data-apl-table-sort="native"] th[data-sort] {
padding: 0;
}
.apl-table-sort {
align-items: center;
background: transparent;
border: 0;
border-radius: var(--apl-ui-radius-sm);
color: inherit;
cursor: pointer;
display: flex;
font: inherit;
font-weight: var(--apl-ui-font-weight-semibold);
gap: var(--apl-ui-space-1);
justify-content: space-between;
min-height: var(--apl-ui-control-height-sm);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
text-align: inherit;
width: 100%;
}
.apl-table-sort:hover {
background: var(--apl-ui-color-surface-muted);
color: var(--apl-ui-color-text-strong);
}
.apl-table-sort:focus-visible {
box-shadow: var(--apl-ui-shadow-focus);
outline: 0;
}
.apl-table-sort__indicator {
align-items: center;
color: var(--apl-ui-color-text-subtle);
display: inline-flex;
flex: 0 0 auto;
font-size: var(--apl-ui-font-size-caption);
justify-content: center;
min-width: var(--apl-ui-space-3);
}
.apl-table-sort__indicator::before {
content: "\2195";
}
.apl-table th[aria-sort="ascending"] .apl-table-sort__indicator,
.apl-table th[aria-sort="descending"] .apl-table-sort__indicator {
color: var(--apl-ui-color-brand-dark);
}
.apl-table th[aria-sort="ascending"] .apl-table-sort__indicator::before {
content: "\2191";
}
.apl-table th[aria-sort="descending"] .apl-table-sort__indicator::before {
content: "\2193";
}
.apl-table th[aria-sort="ascending"] .apl-table-sort,
.apl-table th[aria-sort="descending"] .apl-table-sort {
background: var(--apl-ui-color-brand-surface);
color: var(--apl-ui-color-brand-dark);
}
/* ======================================================================
* APL Batch Monitor
*
* Directriz central:
* - Todo proceso por lotes expone progreso consultable por AJAX.
* - La interfaz permanece utilizable y el monitor no se puede cerrar
* mientras exista trabajo activo.
* - Los resultados distinguen preparación, cola, confirmación y error.
* - El detalle es progresivo: el resumen ocupa poco espacio y las métricas
* se muestran solo cuando el usuario las solicita.
* ====================================================================== */
:root {
--apl-ui-batch-monitor-width: 380px;
--apl-ui-batch-monitor-top: calc(var(--apl-ui-control-height-lg) + var(--apl-ui-space-4));
--apl-ui-batch-monitor-max-height: calc(100vh - var(--apl-ui-control-height-lg) - var(--apl-ui-space-6));
--apl-ui-batch-list-max-height: calc(var(--apl-ui-batch-monitor-max-height) - (var(--apl-ui-control-height-lg) * 2));
--apl-ui-batch-progress-height: 6px;
--apl-ui-batch-spinner-size: var(--apl-ui-font-size-title-lg);
--apl-ui-batch-icon-size: var(--apl-ui-control-height-sm);
--apl-ui-batch-metric-min: 68px;
--apl-ui-batch-monitor-z: 1065;
}
.apl-batch-monitor,
.apl-batch-monitor * {
box-sizing: border-box;
}
.apl-batch-monitor {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-strong);
border-radius: var(--apl-ui-radius-card);
box-shadow: var(--apl-ui-shadow-floating);
color: var(--apl-ui-color-text-body);
font-family: var(--apl-ui-font-family);
font-size: var(--apl-ui-font-size-body);
line-height: var(--apl-ui-line-normal);
max-height: var(--apl-ui-batch-monitor-max-height);
overflow: hidden;
position: fixed;
right: var(--apl-ui-space-4);
top: var(--apl-ui-batch-monitor-top);
width: var(--apl-ui-batch-monitor-width);
z-index: var(--apl-ui-batch-monitor-z);
}
.apl-batch-monitor[hidden],
.apl-batch-monitor [hidden] {
display: none !important;
}
.apl-batch-monitor__header {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: auto minmax(var(--apl-ui-space-0), 1fr) auto;
padding: var(--apl-ui-space-3);
}
.apl-batch-monitor__header-icon {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
}
.apl-batch-monitor__heading {
min-width: var(--apl-ui-space-0);
}
.apl-batch-monitor__heading > strong,
.apl-batch-monitor__heading > span {
display: block;
}
.apl-batch-monitor__heading > strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-heading-sm);
font-weight: var(--apl-ui-font-weight-bold);
}
.apl-batch-monitor__heading > span {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin-top: var(--apl-ui-space-1);
}
.apl-batch-monitor__close {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-muted);
display: inline-flex;
height: var(--apl-ui-icon-button-size);
justify-content: center;
padding: var(--apl-ui-space-0);
transition: background var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
width: var(--apl-ui-icon-button-size);
}
.apl-batch-monitor__close:not(:disabled):hover,
.apl-batch-monitor__close:not(:disabled):focus {
background: var(--apl-ui-color-surface-muted);
color: var(--apl-ui-color-text-strong);
outline: var(--apl-ui-space-0);
}
.apl-batch-monitor__close:disabled {
color: var(--apl-ui-color-text-disabled);
cursor: not-allowed;
opacity: var(--apl-ui-opacity-disabled);
}
.apl-batch-monitor__request {
align-items: center;
background: var(--apl-ui-color-info-soft);
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-border-soft);
display: flex;
gap: var(--apl-ui-space-2);
padding: var(--apl-ui-space-3);
}
.apl-batch-monitor__request strong,
.apl-batch-monitor__request small {
display: block;
}
.apl-batch-monitor__request strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-batch-monitor__request small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin-top: var(--apl-ui-space-1);
}
.apl-batch-monitor__spinner {
animation: apl-batch-spin var(--apl-ui-duration-skeleton) linear infinite;
border: var(--apl-ui-space-1) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-pill);
border-top-color: var(--apl-ui-color-brand);
flex: var(--apl-ui-space-0) var(--apl-ui-space-0) auto;
height: var(--apl-ui-batch-spinner-size);
width: var(--apl-ui-batch-spinner-size);
}
.apl-batch-monitor__list {
max-height: var(--apl-ui-batch-list-max-height);
overflow: auto;
overscroll-behavior: contain;
}
.apl-batch-monitor__job {
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
padding: var(--apl-ui-space-3);
}
.apl-batch-monitor__job:last-child {
border-bottom: var(--apl-ui-space-0);
}
.apl-batch-monitor__job-head {
align-items: center;
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: auto minmax(var(--apl-ui-space-0), 1fr) auto;
}
.apl-batch-monitor__job-icon {
height: var(--apl-ui-batch-icon-size);
width: var(--apl-ui-batch-icon-size);
}
.apl-batch-monitor__job.is-completed .apl-batch-monitor__job-icon {
background: var(--apl-ui-color-success-soft);
border-color: var(--apl-ui-color-success-border);
color: var(--apl-ui-color-success-dark);
}
.apl-batch-monitor__job.is-warning .apl-batch-monitor__job-icon {
background: var(--apl-ui-color-warning-soft);
border-color: var(--apl-ui-color-warning-border);
color: var(--apl-ui-color-warning-dark);
}
.apl-batch-monitor__job.is-failed .apl-batch-monitor__job-icon {
background: var(--apl-ui-color-danger-soft);
border-color: var(--apl-ui-color-danger-border);
color: var(--apl-ui-color-danger-dark);
}
.apl-batch-monitor__job-copy {
min-width: var(--apl-ui-space-0);
}
.apl-batch-monitor__job-copy > strong,
.apl-batch-monitor__job-copy > span {
display: block;
}
.apl-batch-monitor__job-copy > strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apl-batch-monitor__job-meta {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-batch-monitor__state.is-completed {
background: var(--apl-ui-color-success-soft);
border-color: var(--apl-ui-color-success-border);
color: var(--apl-ui-color-success-dark);
}
.apl-batch-monitor__state.is-warning {
background: var(--apl-ui-color-warning-soft);
border-color: var(--apl-ui-color-warning-border);
color: var(--apl-ui-color-warning-dark);
}
.apl-batch-monitor__state.is-failed {
background: var(--apl-ui-color-danger-soft);
border-color: var(--apl-ui-color-danger-border);
color: var(--apl-ui-color-danger-dark);
}
.apl-batch-monitor__state.is-running,
.apl-batch-monitor__state.is-pending,
.apl-batch-monitor__state.is-queued {
background: var(--apl-ui-color-info-soft);
border-color: var(--apl-ui-color-border-soft);
color: var(--apl-ui-color-info-dark);
}
.apl-batch-monitor__detail {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin: var(--apl-ui-space-2) var(--apl-ui-space-0);
}
.apl-batch-monitor__progress {
background: var(--apl-ui-color-surface-strong);
border-radius: var(--apl-ui-radius-pill);
height: var(--apl-ui-batch-progress-height);
overflow: hidden;
width: 100%;
}
.apl-batch-monitor__progress-bar {
background: var(--apl-ui-color-brand);
display: block;
height: 100%;
transform: scaleX(var(--apl-ui-batch-progress-value, 0));
transform-origin: left center;
transition: transform var(--apl-ui-duration-normal) var(--apl-ui-ease-standard);
width: 100%;
}
.apl-batch-monitor__job.is-completed .apl-batch-monitor__progress-bar {
background: var(--apl-ui-color-success);
}
.apl-batch-monitor__job.is-warning .apl-batch-monitor__progress-bar {
background: var(--apl-ui-color-accent-border);
}
.apl-batch-monitor__job.is-failed .apl-batch-monitor__progress-bar {
background: var(--apl-ui-color-danger);
}
.apl-batch-monitor__job-actions {
align-items: center;
display: flex;
justify-content: space-between;
margin-top: var(--apl-ui-space-2);
}
.apl-batch-monitor__percent {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-batch-monitor__details-toggle {
background: transparent;
border: var(--apl-ui-space-0);
color: var(--apl-ui-color-brand-dark);
font-family: inherit;
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
padding: var(--apl-ui-space-1);
}
.apl-batch-monitor__details-toggle:hover,
.apl-batch-monitor__details-toggle:focus {
color: var(--apl-ui-color-brand);
outline: var(--apl-ui-space-0);
text-decoration: underline;
}
.apl-batch-monitor__metrics {
display: grid;
gap: var(--apl-ui-space-1);
grid-template-columns: repeat(auto-fit, minmax(var(--apl-ui-batch-metric-min), 1fr));
margin-top: var(--apl-ui-space-2);
}
.apl-batch-monitor__email-errors {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
margin-top: var(--apl-ui-space-2);
padding-top: var(--apl-ui-space-2);
}
.apl-batch-monitor__email-errors-title {
color: var(--apl-ui-color-danger-dark);
display: block;
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
margin-bottom: var(--apl-ui-space-2);
}
.apl-batch-monitor__email-error {
background: var(--apl-ui-color-danger-soft);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-danger-border);
border-radius: var(--apl-ui-radius-md);
padding: var(--apl-ui-space-2);
}
.apl-batch-monitor__email-error + .apl-batch-monitor__email-error {
margin-top: var(--apl-ui-space-2);
}
.apl-batch-monitor__email-error-head {
align-items: center;
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
}
.apl-batch-monitor__email-error-head > strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-batch-monitor__email-error-head > span {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
}
.apl-batch-monitor__error-fields {
display: grid;
gap: var(--apl-ui-space-2);
margin-top: var(--apl-ui-space-2);
}
.apl-batch-monitor__error-field,
.apl-batch-monitor__error-field > small,
.apl-batch-monitor__error-field > strong {
display: block;
min-width: var(--apl-ui-space-0);
}
.apl-batch-monitor__error-field > small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
}
.apl-batch-monitor__error-field > strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
overflow-wrap: anywhere;
}
.apl-batch-monitor__error-reason,
.apl-batch-monitor__error-remaining {
color: var(--apl-ui-color-danger-dark);
font-size: var(--apl-ui-font-size-caption);
margin: var(--apl-ui-space-2) var(--apl-ui-space-0) var(--apl-ui-space-0);
overflow-wrap: anywhere;
}
.apl-batch-monitor__metric {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
padding: var(--apl-ui-space-2);
}
.apl-batch-monitor__metric > strong,
.apl-batch-monitor__metric > small {
display: block;
}
.apl-batch-monitor__metric > strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title);
font-weight: var(--apl-ui-font-weight-bold);
}
.apl-batch-monitor__metric > small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
}
.apl-batch-monitor__metric.is-success > strong {
color: var(--apl-ui-color-success-dark);
}
.apl-batch-monitor__metric.is-error > strong {
color: var(--apl-ui-color-danger-dark);
}
.apl-batch-monitor__metric.is-warning > strong {
color: var(--apl-ui-color-warning-dark);
}
.apl-batch-monitor__footer {
background: var(--apl-ui-color-surface-subtle);
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
@keyframes apl-batch-spin {
to { transform: rotate(360deg); }
}
/* Selector compacto de archivos reutilizable en cargas masivas. */
.apl-file-picker {
min-width: 0;
position: relative;
}
.apl-file-picker__input {
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: var(--apl-ui-border-width);
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: var(--apl-ui-border-width);
}
.apl-file-picker__surface {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) dashed var(--apl-ui-color-border-strong);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
cursor: pointer;
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: var(--apl-ui-control-height-sm) minmax(0, 1fr) auto;
margin: 0;
min-height: var(--apl-ui-control-height);
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
transition: background-color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), border-color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), box-shadow var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
}
.apl-file-picker__surface:hover,
.apl-file-picker__surface:focus,
.apl-file-picker__input:focus + .apl-file-picker__surface,
.apl-file-picker.is-dragging .apl-file-picker__surface {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border-strong);
box-shadow: var(--apl-ui-shadow-focus);
outline: none;
}
.apl-file-picker__copy {
min-width: 0;
}
.apl-file-picker__copy strong,
.apl-file-picker__copy small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apl-file-picker__copy strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-file-picker__copy small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-file-picker__action {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
display: inline-flex;
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
gap: var(--apl-ui-space-1);
min-height: var(--apl-ui-control-height-sm);
padding: 0 var(--apl-ui-space-2);
}
.apl-file-picker.is-selected .apl-file-picker__surface {
background: var(--apl-ui-color-success-soft);
border-color: var(--apl-ui-color-success-border);
}
.apl-file-picker.is-selected .apl-file-picker__icon,
.apl-file-picker.is-selected .apl-file-picker__action {
color: var(--apl-ui-color-success-dark);
}
.apl-file-picker.is-invalid .apl-file-picker__surface {
background: var(--apl-ui-color-danger-soft);
border-color: var(--apl-ui-color-danger-border);
}
.apl-file-picker.is-invalid .apl-file-picker__icon,
.apl-file-picker.is-invalid .apl-file-picker__copy small,
.apl-file-picker.is-invalid .apl-file-picker__action {
color: var(--apl-ui-color-danger-dark);
}
.apl-file-picker__input:disabled + .apl-file-picker__surface {
background: var(--apl-ui-color-surface-muted);
cursor: not-allowed;
opacity: var(--apl-ui-opacity-disabled);
}
@media (max-width: 520px) {
.apl-batch-monitor {
left: var(--apl-ui-space-2);
right: var(--apl-ui-space-2);
top: var(--apl-ui-space-2);
width: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.apl-batch-monitor__spinner {
animation-duration: calc(var(--apl-ui-duration-skeleton) * 2);
}
.apl-batch-monitor__progress-bar {
transition: none;
}
}
/* Administración contextual de catálogos de inmuebles. */
.apl-field__label-row {
align-items: center;
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
margin-bottom: var(--apl-ui-space-1);
min-width: 0;
}
.apl-field__label-row > label {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
margin: 0;
min-width: 0;
}
.apl-field__manage {
align-items: center;
appearance: none;
background: transparent;
border: 0;
color: var(--apl-ui-color-brand-dark);
display: inline-flex;
flex: 0 0 auto;
font-family: var(--apl-ui-font-family);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
gap: var(--apl-ui-space-1);
line-height: var(--apl-ui-line-normal);
padding: 0;
}
.apl-field__manage:hover,
.apl-field__manage:focus {
color: var(--apl-ui-color-text-strong);
outline: 0;
text-decoration: underline;
}
.apl-dialog-layer--drawer {
align-items: stretch;
justify-content: flex-end;
padding: 0;
}
.apl-dialog-layer--drawer > .apl-dialog--drawer {
border-radius: var(--apl-ui-radius-card) var(--apl-ui-space-0) var(--apl-ui-space-0) var(--apl-ui-radius-card);
height: 100%;
margin-left: auto;
max-height: 100%;
width: min(100%, var(--apl-ui-community-catalog-drawer-width));
}
.apl-dialog-layer--drawer > .apl-dialog--drawer .apl-dialog__body {
flex: 1 1 auto;
overscroll-behavior: contain;
}
/* El expediente CODEX necesita espacio de lectura, no un panel de formulario. */
.apl-dialog-layer--drawer > .apl-dialog--codex-audit {
width: min(100%, var(--apl-ui-codex-audit-drawer-width));
}
.apl-dialog--codex-audit .apl-dialog__body {
overflow-x: hidden;
}
.apl-codex-audit-detail,
.apl-codex-audit-detail > *,
.apl-codex-audit-detail .apl-grid > *,
.apl-codex-audit-detail .apl-notice__copy {
max-width: 100%;
min-width: var(--apl-ui-space-0);
}
.apl-codex-audit-detail__summary {
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-codex-audit-summary-min-width)), 1fr));
}
.apl-codex-audit-detail .apl-table {
table-layout: fixed;
}
.apl-codex-audit-detail .apl-table th,
.apl-codex-audit-detail .apl-table td,
.apl-codex-audit-detail .apl-summary-item > strong,
.apl-codex-audit-detail .apl-summary-item > small,
.apl-codex-audit-detail .apl-notice__copy > strong,
.apl-codex-audit-detail .apl-notice__copy > span,
.apl-codex-audit-detail .apl-audit-list > li {
overflow-wrap: anywhere;
white-space: normal;
word-break: break-word;
}
.apl-dialog-layer--drawer .apl-property-catalog__dialog {
animation: apl-property-catalog-enter var(--apl-ui-duration-normal) var(--apl-ui-ease-standard);
border-radius: var(--apl-ui-radius-card) 0 0 var(--apl-ui-radius-card);
height: 100%;
margin-left: auto;
max-height: none;
width: min(100%, var(--apl-ui-community-catalog-drawer-width));
}
.apl-property-catalog__dialog .apl-dialog__body {
overscroll-behavior: contain;
}
.apl-property-catalog__form {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-card);
display: grid;
gap: var(--apl-ui-space-3);
padding: var(--apl-ui-space-3);
}
.apl-property-catalog__type-fields {
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-page-copy-min)), 1fr));
}
.apl-property-catalog__type-fields[hidden] {
display: none !important;
}
.apl-property-catalog__current {
margin-top: var(--apl-ui-space-4);
}
.apl-property-catalog__items {
display: grid;
gap: var(--apl-ui-space-2);
margin-top: var(--apl-ui-space-3);
}
.apl-property-catalog__item {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-3);
justify-content: space-between;
min-width: 0;
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-property-catalog__item-copy {
min-width: 0;
}
.apl-property-catalog__item-copy strong,
.apl-property-catalog__item-copy small {
display: block;
overflow-wrap: anywhere;
}
.apl-property-catalog__item-copy strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-body);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-property-catalog__item-copy small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
@keyframes apl-property-catalog-enter {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.apl-dialog-layer--drawer .apl-property-catalog__dialog {
animation: none;
}
}
/* Formularios compactos y listas de canales reutilizables. */
/*
* Directriz fija de densidad APL:
* Contrato completo: docs/apl_rebuilt_information_density.md
* - compacto es el estado predeterminado, no una variante visual;
* - primero se aprovecha la cuadrícula disponible y después se aumenta la altura;
* - una superficie existe solo si agrega información, contexto o una acción;
* - las excepciones deben declararse con data-apl-density-exception.
*/
.apl-notice--compact {
gap: var(--apl-ui-space-2);
padding: var(--apl-ui-space-2);
}
.apl-notice--compact .apl-icon-frame {
flex-basis: var(--apl-ui-control-height-sm);
height: var(--apl-ui-control-height-sm);
min-width: var(--apl-ui-control-height-sm);
width: var(--apl-ui-control-height-sm);
}
/* Barra de alertas operativas: conserva contexto y acceso sin crear tarjetas altas. */
.apl-alert-bar {
display: grid;
gap: var(--apl-ui-space-1);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-alert-item-min-width)), 1fr));
min-width: 0;
}
.apl-alert-bar__item {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
cursor: pointer;
display: grid;
font: inherit;
gap: var(--apl-ui-space-2);
grid-template-columns: auto minmax(0, 1fr) auto;
min-height: var(--apl-ui-control-height);
min-width: 0;
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
text-align: left;
}
.apl-alert-bar__item:hover,
.apl-alert-bar__item:focus-visible {
border-color: var(--apl-ui-color-border-strong);
box-shadow: var(--apl-ui-shadow-focus);
outline: 0;
}
.apl-alert-bar__item--danger { background: var(--apl-ui-color-danger-soft); border-color: var(--apl-ui-color-danger-border); }
.apl-alert-bar__item--warning { background: var(--apl-ui-color-warning-soft); border-color: var(--apl-ui-color-warning-border); }
.apl-alert-bar__item--info { background: var(--apl-ui-color-info-soft); border-color: var(--apl-ui-color-border-soft); }
.apl-alert-bar__item--success { background: var(--apl-ui-color-success-soft); border-color: var(--apl-ui-color-success-border); }
.apl-alert-bar__item .apl-icon-frame {
height: var(--apl-ui-control-height-sm);
min-width: var(--apl-ui-control-height-sm);
width: var(--apl-ui-control-height-sm);
}
.apl-alert-bar__copy {
min-width: 0;
}
.apl-alert-bar__copy > strong,
.apl-alert-bar__copy > small {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apl-alert-bar__copy > strong { font-weight: var(--apl-ui-font-weight-bold); }
.apl-alert-bar__copy > small { color: var(--apl-ui-color-text-muted); font-size: var(--apl-ui-font-size-caption); }
.apl-compact-grid {
display: grid;
gap: var(--apl-ui-density-field-gap);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
min-width: 0;
}
.apl-compact-panel {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
min-width: 0;
padding: var(--apl-ui-space-2);
}
.apl-compact-panel__head {
align-items: flex-start;
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
margin-bottom: var(--apl-ui-space-2);
min-width: 0;
}
.apl-compact-panel__head strong,
.apl-compact-panel__head small {
display: block;
overflow-wrap: anywhere;
}
.apl-compact-panel__head strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-compact-panel__head small {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-form-guidance {
align-items: flex-start;
color: var(--apl-ui-color-text-subtle);
display: flex;
font-size: var(--apl-ui-font-size-caption);
gap: var(--apl-ui-space-2);
line-height: var(--apl-ui-line-normal);
margin: var(--apl-ui-space-2) 0 0;
}
.apl-form-guidance > i {
color: var(--apl-ui-color-info-dark);
flex: 0 0 auto;
margin-top: 2px;
}
.apl-toggle-grid--compact {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.apl-form-layout {
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: repeat(12, minmax(0, 1fr));
margin: 0;
min-width: 0;
}
.apl-form-layout__primary {
grid-column: span 7;
}
.apl-form-layout__secondary {
grid-column: span 5;
}
.apl-form-layout__wide {
grid-column: 1 / -1;
}
.apl-form-layout > .apl-card {
align-self: stretch;
overflow: hidden;
}
.apl-channel-grid {
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
min-width: 0;
}
.apl-channel-panel {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
min-width: 0;
padding: var(--apl-ui-space-3);
}
.apl-channel-panel__head {
align-items: center;
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
min-width: 0;
}
.apl-channel-panel__copy {
min-width: 0;
}
.apl-channel-panel__title {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-section-title);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: 0;
}
.apl-channel-panel__subtitle {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
margin: var(--apl-ui-space-1) 0 0;
}
.apl-channel-list {
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-2);
margin-top: var(--apl-ui-space-3);
min-width: 0;
}
.apl-channel-row {
align-items: end;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
display: grid;
gap: var(--apl-ui-space-2);
min-width: 0;
padding: var(--apl-ui-space-2);
}
.apl-channel-row--email {
grid-template-columns: minmax(0, 1fr) auto;
}
.apl-channel-row--phone {
grid-template-columns: minmax(150px, .9fr) minmax(150px, 1.2fr) minmax(130px, 1fr) auto;
}
.apl-channel-row > .apl-field,
.apl-channel-row > .apl-btn {
min-width: 0;
}
.apl-btn.apl-btn--danger-soft {
background: var(--apl-ui-color-surface);
border-color: var(--apl-ui-color-border);
color: var(--apl-ui-color-text-muted);
}
.apl-btn.apl-btn--danger-soft:hover,
.apl-btn.apl-btn--danger-soft:focus {
background: var(--apl-ui-color-danger-soft);
border-color: var(--apl-ui-color-danger-border);
color: var(--apl-ui-color-danger-dark);
}
.apl-community .apl-contact-create__textarea {
min-height: calc(var(--apl-ui-control-height) * 2) !important;
}
@media (max-width: 1040px) {
.apl-form-layout__primary,
.apl-form-layout__secondary {
grid-column: 1 / -1;
}
.apl-channel-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 700px) {
.apl-channel-row--phone {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
}
.apl-channel-row--phone .apl-field:nth-child(3) {
grid-column: 1 / span 2;
}
.apl-channel-row--phone > .apl-btn {
grid-column: 3;
grid-row: 1;
}
}
@media (max-width: 520px) {
.apl-channel-panel__head {
align-items: stretch;
flex-direction: column;
}
.apl-channel-panel__head .apl-btn {
width: 100%;
}
.apl-form-layout__wide .apl-card__footer {
align-items: stretch;
flex-direction: column-reverse;
}
.apl-form-layout__wide .apl-card__footer .apl-btn {
width: 100%;
}
}
/*
* Editor maestro de Inmuebles y Contactos.
* Replica la arquitectura de Empresas: navegación persistente a la izquierda
* y una sola área de trabajo visible a la derecha.
*/
.apl-master-editor {
align-items: start;
display: grid;
gap: var(--apl-ui-page-gap);
grid-template-columns: var(--apl-ui-entity-sidebar-width) minmax(0, 1fr);
margin: 0;
min-width: 0;
}
.apl-master-editor__nav.apl-section-nav,
.apl-community-detail--editor > .apl-card > .apl-section-nav {
align-self: start;
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-card);
box-shadow: var(--apl-ui-shadow-sm);
overflow: hidden;
padding: var(--apl-ui-space-2);
position: sticky;
top: var(--apl-ui-entity-sticky-offset);
}
.apl-master-editor__nav {
grid-column: 1;
grid-row: 1 / span 2;
}
.apl-master-editor__nav .apl-section-nav__intro,
.apl-community-detail--editor > .apl-card > .apl-section-nav .apl-section-nav__intro {
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
padding: var(--apl-ui-space-2);
}
.apl-master-editor__nav .apl-tablist--sections,
.apl-community-detail--editor > .apl-card > .apl-section-nav .apl-tablist--sections {
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-1);
margin-top: var(--apl-ui-space-2);
}
.apl-master-editor__nav .apl-tablist--sections .apl-tab,
.apl-community-detail--editor > .apl-card > .apl-section-nav .apl-tablist--sections .apl-tab {
border-color: transparent;
border-radius: var(--apl-ui-radius-md);
min-height: var(--apl-ui-control-height-lg);
}
.apl-master-editor__content {
display: block;
grid-column: 2;
min-width: 0;
}
.apl-master-editor__content > .apl-card {
margin: 0;
min-width: 0;
overflow: visible;
}
.apl-master-editor__actions {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-card);
bottom: var(--apl-ui-space-2);
box-shadow: var(--apl-ui-shadow-md);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
grid-column: 2;
justify-content: flex-end;
padding: var(--apl-ui-space-3);
position: sticky;
z-index: var(--apl-ui-z-sticky);
}
.apl-community-detail--editor > .apl-card {
align-items: start;
background: transparent;
border: 0;
box-shadow: none;
display: grid;
gap: var(--apl-ui-page-gap);
grid-template-columns: var(--apl-ui-entity-sidebar-width) minmax(0, 1fr);
overflow: visible;
}
.apl-community-detail--editor > .apl-card > .apl-section-nav {
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
grid-column: 1;
grid-row: 1;
}
.apl-community-detail--editor > .apl-card > .apl-card__body {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-card);
box-shadow: var(--apl-ui-shadow-sm);
grid-column: 2;
grid-row: 1;
min-width: 0;
}
/* Accesos por tarea y creación guiada para la administración de comunidad. */
.apl-task-launcher {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-card);
box-shadow: var(--apl-ui-shadow-sm);
display: grid;
gap: var(--apl-ui-space-3);
padding: var(--apl-ui-space-3);
}
.apl-task-launcher__head h2,
.apl-task-launcher__head p {
margin: var(--apl-ui-space-0);
}
.apl-task-launcher__head h2 {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-section-title);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-task-launcher__head p:last-child {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-body-sm);
margin-top: var(--apl-ui-space-1);
}
.apl-task-launcher__grid {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-tab-navigation-min-width)), 1fr));
}
.apl-task-action {
align-items: center;
appearance: none;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
color: var(--apl-ui-color-text-body);
cursor: pointer;
display: grid;
font: inherit;
gap: var(--apl-ui-space-2);
grid-template-columns: auto minmax(var(--apl-ui-space-0), 1fr) auto;
min-height: var(--apl-ui-tab-navigation-min-height);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
text-align: left;
transition: background-color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), border-color var(--apl-ui-duration-fast) var(--apl-ui-ease-standard), box-shadow var(--apl-ui-duration-fast) var(--apl-ui-ease-standard);
width: 100%;
}
.apl-task-action:hover,
.apl-task-action:focus-visible {
background: var(--apl-ui-color-surface-hover);
border-color: var(--apl-ui-color-brand-border);
box-shadow: var(--apl-ui-shadow-focus);
outline: none;
}
.apl-task-action > span:nth-child(2) {
min-width: var(--apl-ui-space-0);
}
.apl-task-action strong,
.apl-task-action small {
display: block;
}
.apl-task-action strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-body);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-task-action small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-task-action > i {
color: var(--apl-ui-color-text-subtle);
}
/* Ayuda contextual compacta: solo presenta acciones autorizadas por el servidor. */
.apl-context-actions {
align-items: center;
background: var(--apl-ui-color-brand-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-brand-border);
border-radius: var(--apl-ui-radius-lg);
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: auto minmax(var(--apl-ui-space-0), 1fr) minmax(var(--apl-ui-space-0), 2fr);
margin-bottom: var(--apl-ui-space-2);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-context-actions__copy {
min-width: var(--apl-ui-space-0);
}
.apl-context-actions__copy strong,
.apl-context-actions__copy small {
display: block;
}
.apl-context-actions__copy strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-body);
font-weight: var(--apl-ui-font-weight-semibold);
line-height: var(--apl-ui-line-tight);
}
.apl-context-actions__copy small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
line-height: var(--apl-ui-line-normal);
margin-top: var(--apl-ui-space-1);
}
.apl-context-actions__list {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-1);
justify-content: flex-end;
min-width: var(--apl-ui-space-0);
}
.apl-context-actions__list .apl-btn {
flex: 0 0 auto;
white-space: nowrap;
}
.is-community-guided-target {
animation: apl-community-guided-target calc(var(--apl-ui-duration-skeleton) * 4) var(--apl-ui-ease-standard);
border-color: var(--apl-ui-color-brand-border-strong) !important;
box-shadow: var(--apl-ui-shadow-focus) !important;
}
.is-community-guided-target.apl-field > .apl-control,
.is-community-guided-target.apl-field > .apl-native-select > .apl-control,
.is-community-guided-target.apl-field > .apl-finder,
.is-community-guided-target .apl-control:focus {
border-color: var(--apl-ui-color-brand) !important;
box-shadow: var(--apl-ui-shadow-focus) !important;
}
@keyframes apl-community-guided-target {
0%, 55% {
background-color: var(--apl-ui-color-brand-surface);
box-shadow: var(--apl-ui-shadow-focus);
}
100% {
background-color: var(--apl-ui-color-surface);
box-shadow: none;
}
}
@media (max-width: 900px) {
.apl-context-actions {
grid-template-columns: auto minmax(var(--apl-ui-space-0), 1fr);
}
.apl-context-actions__list {
grid-column: 1 / -1;
justify-content: flex-start;
}
}
@media (max-width: 600px) {
.apl-context-actions__list {
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
padding-bottom: var(--apl-ui-space-1);
}
}
.apl-guided-actions {
justify-content: space-between;
}
.apl-guided-actions__context {
min-width: var(--apl-ui-space-0);
}
.apl-guided-actions__context strong,
.apl-guided-actions__context small {
display: block;
}
.apl-guided-actions__context strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-body);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-guided-actions__context small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-guided-actions__buttons {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
}
@media (max-width: 980px) {
.apl-master-editor,
.apl-community-detail--editor > .apl-card {
grid-template-columns: minmax(0, 1fr);
}
.apl-master-editor__nav,
.apl-master-editor__content,
.apl-master-editor__actions,
.apl-community-detail--editor > .apl-card > .apl-section-nav,
.apl-community-detail--editor > .apl-card > .apl-card__body {
grid-column: 1;
}
.apl-master-editor__nav,
.apl-community-detail--editor > .apl-card > .apl-section-nav {
grid-row: auto;
position: static;
}
.apl-master-editor__nav .apl-tablist--sections,
.apl-community-detail--editor > .apl-card > .apl-section-nav .apl-tablist--sections {
flex-direction: row;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
}
.apl-master-editor__nav .apl-tablist--sections .apl-tab,
.apl-community-detail--editor > .apl-card > .apl-section-nav .apl-tablist--sections .apl-tab {
flex: 0 0 var(--apl-ui-tab-navigation-min-width);
}
.apl-master-editor__actions {
grid-row: auto;
}
.apl-community-detail--editor > .apl-card > .apl-card__body {
grid-row: auto;
}
}
@media (max-width: 520px) {
.apl-master-editor__actions {
align-items: stretch;
flex-direction: column-reverse;
}
.apl-master-editor__actions .apl-btn {
width: 100%;
}
.apl-guided-actions__buttons {
align-items: stretch;
flex-direction: column-reverse;
width: 100%;
}
}
/* Centro reconstruido de paz y salvos */
.apl-peace__shell {
overflow: hidden;
}
.apl-peace__panels {
background: var(--apl-ui-color-page);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-3);
}
.apl-peace__panel {
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-3);
min-width: var(--apl-ui-space-0);
}
.apl-peace__individual-layout {
align-items: start;
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr) minmax(var(--apl-ui-tab-navigation-min-width), var(--apl-ui-library-form-aside));
min-width: var(--apl-ui-space-0);
}
.apl-peace__form,
.apl-peace__guide,
.apl-peace__audit-card {
min-width: var(--apl-ui-space-0);
}
.apl-peace__form-grid > .apl-field {
min-width: var(--apl-ui-space-0);
}
.apl-rebuilt .apl-control--textarea {
height: auto !important;
min-height: calc(var(--apl-ui-control-height-lg) * 2) !important;
}
.apl-peace__optional {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
overflow: hidden;
}
.apl-peace__optional > summary {
align-items: center;
color: var(--apl-ui-color-text-body);
cursor: pointer;
display: flex;
gap: var(--apl-ui-space-2);
justify-content: space-between;
min-height: var(--apl-ui-control-height-lg);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-peace__optional > summary::marker {
color: var(--apl-ui-color-brand);
}
.apl-peace__optional > summary span {
align-items: center;
display: inline-flex;
gap: var(--apl-ui-space-2);
}
.apl-peace__optional > summary strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-peace__optional > summary small {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
}
.apl-peace__optional-grid {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
padding: var(--apl-ui-space-3);
}
.apl-peace__form-actions {
flex-wrap: wrap;
}
.apl-peace__guide {
position: sticky;
top: var(--shell-content-gap);
}
.apl-peace__selection-summary {
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
margin-top: var(--apl-ui-space-0);
}
.apl-peace__guide-note {
align-items: flex-start;
color: var(--apl-ui-color-text-muted);
display: flex;
gap: var(--apl-ui-space-2);
margin: var(--apl-ui-space-0);
}
.apl-peace__guide-note > i {
color: var(--apl-ui-color-brand-dark);
margin-top: var(--apl-ui-space-1);
}
.apl-peace__audit-table .apl-table__primary {
color: var(--apl-ui-color-text-strong);
display: block;
font-weight: var(--apl-ui-font-weight-semibold);
overflow-wrap: anywhere;
}
.apl-peace__audit-evidence {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-2);
margin-top: var(--apl-ui-space-2);
}
.apl-peace__audit-code {
align-items: center;
color: var(--apl-ui-color-text-muted);
display: inline-flex;
font-family: var(--apl-ui-font-family-mono);
font-size: var(--apl-ui-font-size-caption);
gap: var(--apl-ui-space-1);
overflow-wrap: anywhere;
}
.apl-peace__audit-code > i {
color: var(--apl-ui-color-brand);
}
.apl-peace__dialog-layer {
z-index: var(--apl-ui-z-overlay);
}
.apl-peace__email-dialog {
width: var(--apl-ui-community-catalog-drawer-width);
}
.apl-peace__dialog-section-head {
align-items: center;
display: flex;
gap: var(--apl-ui-space-2);
margin-bottom: var(--apl-ui-space-2);
}
.apl-peace__dialog-section-head > span:last-child {
min-width: var(--apl-ui-space-0);
}
.apl-peace__dialog-section-head strong,
.apl-peace__dialog-section-head small {
display: block;
}
.apl-peace__dialog-section-head strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-peace__dialog-section-head small {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-peace__recipients {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(2, minmax(var(--apl-ui-space-0), 1fr));
}
.apl-peace__recipient {
align-items: flex-start;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
display: flex;
gap: var(--apl-ui-space-2);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-2);
}
.apl-peace__recipient input {
accent-color: var(--apl-ui-color-brand);
flex: 0 0 auto;
margin-top: var(--apl-ui-space-1);
}
.apl-peace__recipient span {
min-width: var(--apl-ui-space-0);
}
.apl-peace__recipient strong,
.apl-peace__recipient small {
display: block;
overflow-wrap: anywhere;
}
.apl-peace__recipient strong {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-peace__recipient small {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-peace__pager {
width: 100%;
}
.apl-peace__audit-card .apl-feedback {
min-height: calc(var(--apl-ui-control-height-lg) * 3);
}
.apl-peace [aria-busy="true"] {
cursor: progress;
}
@media (max-width: 1024px) {
.apl-peace__individual-layout {
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
}
.apl-peace__guide {
position: static;
}
.apl-peace__guide .apl-step-list {
display: grid;
grid-template-columns: repeat(2, minmax(var(--apl-ui-space-0), 1fr));
}
}
@media (max-width: 767px) {
.apl-peace__panels {
padding: var(--apl-ui-space-2);
}
.apl-peace__form-grid > .apl-field,
.apl-peace__optional-grid > .apl-field {
grid-column: 1 / -1;
}
.apl-peace__recipients {
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
}
}
@media (max-width: 520px) {
.apl-peace__guide .apl-step-list {
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
}
.apl-peace__form-actions,
.apl-peace .apl-dialog__footer {
align-items: stretch;
flex-direction: column-reverse;
}
.apl-peace__form-actions .apl-btn,
.apl-peace .apl-dialog__footer .apl-btn {
width: 100%;
}
.apl-peace__optional > summary {
align-items: flex-start;
flex-direction: column;
}
}
/*
* CONTROLES FLOTANTES SIN RECORTE
* Contrato obligatorio: docs/apl_rebuilt_floating_controls.md.
*
* Un listado desplegable pertenece a la capa dropdown: debe superar tarjetas,
* paneles y acciones sticky, pero permanecer debajo de backdrops y modales.
* Mientras un control está abierto, sus ancestros reconstruidos liberan el
* overflow para que ninguna superficie del formulario recorte el listado.
*/
.apl-rebuilt .apl-picker.is-open,
.apl-rebuilt .apl-search-select.is-open,
.apl-rebuilt .bootstrap-select.open,
.apl-rebuilt .btn-group.open,
.apl-rebuilt .dropdown.open,
.apl-rebuilt .chosen-container-active.chosen-with-drop,
.apl-rebuilt .select2-container--open,
[data-apl-ui="rebuilt"] .apl-picker.is-open,
[data-apl-ui="rebuilt"] .apl-search-select.is-open,
[data-apl-ui="rebuilt"] .bootstrap-select.open,
[data-apl-ui="rebuilt"] .btn-group.open,
[data-apl-ui="rebuilt"] .dropdown.open,
[data-apl-ui="rebuilt"] .chosen-container-active.chosen-with-drop,
[data-apl-ui="rebuilt"] .select2-container--open,
.apl-drawer-form .bootstrap-select.open,
.apl-drawer-form .btn-group.open,
.apl-drawer-form .dropdown.open,
.apl-drawer-form .chosen-container-active.chosen-with-drop,
.apl-drawer-form .select2-container--open {
isolation: isolate;
position: relative;
z-index: var(--apl-ui-z-dropdown);
}
.apl-rebuilt .apl-picker__panel,
.apl-rebuilt .apl-search-select__panel,
.apl-rebuilt .dropdown-menu,
.apl-rebuilt .bootstrap-select .dropdown-menu,
.apl-rebuilt .multiselect-container,
.apl-rebuilt .chosen-drop,
.apl-rebuilt .select2-dropdown,
[data-apl-ui="rebuilt"] .apl-picker__panel,
[data-apl-ui="rebuilt"] .apl-search-select__panel,
[data-apl-ui="rebuilt"] .dropdown-menu,
[data-apl-ui="rebuilt"] .bootstrap-select .dropdown-menu,
[data-apl-ui="rebuilt"] .multiselect-container,
[data-apl-ui="rebuilt"] .chosen-drop,
[data-apl-ui="rebuilt"] .select2-dropdown,
.apl-drawer-form .dropdown-menu,
.apl-drawer-form .bootstrap-select .dropdown-menu,
.apl-drawer-form .multiselect-container,
.apl-drawer-form .chosen-drop,
.apl-drawer-form .select2-dropdown {
z-index: var(--apl-ui-z-dropdown) !important;
}
@supports selector(:has(*)) {
.apl-rebuilt:has(.apl-picker.is-open),
.apl-rebuilt:has(.apl-search-select.is-open:not(.is-dialog-floating)),
.apl-rebuilt:has(.bootstrap-select.open),
.apl-rebuilt:has(.btn-group.open > .dropdown-menu),
.apl-rebuilt:has(.dropdown.open > .dropdown-menu),
.apl-rebuilt:has(.chosen-container-active.chosen-with-drop),
.apl-rebuilt:has(.select2-container--open),
.apl-rebuilt *:has(.apl-picker.is-open),
.apl-rebuilt *:has(.apl-search-select.is-open:not(.is-dialog-floating)),
.apl-rebuilt *:has(.bootstrap-select.open),
.apl-rebuilt *:has(.btn-group.open > .dropdown-menu),
.apl-rebuilt *:has(.dropdown.open > .dropdown-menu),
.apl-rebuilt *:has(.chosen-container-active.chosen-with-drop),
.apl-rebuilt *:has(.select2-container--open),
[data-apl-ui="rebuilt"] *:has(.apl-picker.is-open),
[data-apl-ui="rebuilt"] *:has(.apl-search-select.is-open:not(.is-dialog-floating)),
[data-apl-ui="rebuilt"] *:has(.bootstrap-select.open),
[data-apl-ui="rebuilt"] *:has(.btn-group.open > .dropdown-menu),
[data-apl-ui="rebuilt"] *:has(.dropdown.open > .dropdown-menu),
[data-apl-ui="rebuilt"] *:has(.chosen-container-active.chosen-with-drop),
[data-apl-ui="rebuilt"] *:has(.select2-container--open),
[data-apl-ui="rebuilt"]:has(.apl-picker.is-open),
[data-apl-ui="rebuilt"]:has(.apl-search-select.is-open:not(.is-dialog-floating)),
[data-apl-ui="rebuilt"]:has(.bootstrap-select.open),
[data-apl-ui="rebuilt"]:has(.btn-group.open > .dropdown-menu),
[data-apl-ui="rebuilt"]:has(.dropdown.open > .dropdown-menu),
[data-apl-ui="rebuilt"]:has(.chosen-container-active.chosen-with-drop),
[data-apl-ui="rebuilt"]:has(.select2-container--open),
.apl-drawer-form *:has(.bootstrap-select.open),
.apl-drawer-form *:has(.btn-group.open > .dropdown-menu),
.apl-drawer-form *:has(.dropdown.open > .dropdown-menu) {
overflow: visible !important;
z-index: var(--apl-ui-z-dropdown);
}
/*
* Un selector abierto dentro de un diálogo no puede convertir la página ni
* los wrappers externos en una capa dropdown. Esos ancestros permanecen
* neutrales y el diálogo conserva la capa overlay por encima del shell.
*/
.apl-rebuilt:has(.apl-dialog-layer:not([hidden])),
.apl-rebuilt *:has(.apl-dialog-layer:not([hidden])),
[data-apl-ui="rebuilt"]:has(.apl-dialog-layer:not([hidden])),
[data-apl-ui="rebuilt"] *:has(.apl-dialog-layer:not([hidden])) {
z-index: auto;
}
.apl-rebuilt .apl-dialog-layer:not([hidden]),
[data-apl-ui="rebuilt"] .apl-dialog-layer:not([hidden]) {
isolation: isolate;
z-index: var(--apl-ui-z-overlay) !important;
}
}
/*
* IDENTIDAD EN ENLACES PÚBLICOS
* El avatar es una presentación derivada y circular. El logo corporativo
* original permanece intacto y conserva su función en documentos y módulos.
*/
.navbar .apl-public-company-brand {
align-items: center;
display: inline-flex;
height: var(--apl-ui-public-company-avatar-size);
margin-left: var(--apl-ui-space-3);
padding: var(--apl-ui-space-0);
width: var(--apl-ui-public-company-avatar-size);
}
body.apl-public-booking-document .navbar.navbar-fixed-top {
min-height: var(--apl-ui-public-menu-height);
}
.navbar img#img_homelogo.apl-public-company-avatar {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted) !important;
border-radius: var(--apl-ui-radius-pill);
box-shadow: var(--apl-ui-shadow-sm);
display: block;
height: var(--apl-ui-public-company-avatar-size) !important;
max-height: var(--apl-ui-public-company-avatar-size);
max-width: var(--apl-ui-public-company-avatar-size);
object-position: center;
overflow: hidden;
width: var(--apl-ui-public-company-avatar-size) !important;
}
.navbar img#img_homelogo.apl-public-company-avatar.is-generated {
object-fit: cover;
padding: var(--apl-ui-space-0);
}
.navbar img#img_homelogo.apl-public-company-avatar.is-source {
object-fit: contain;
padding: var(--apl-ui-space-1);
}
/* Espacio de trabajo reconstruido para Cierres / Operador. */
.apl-operator {
font-family: var(--apl-ui-font-family);
}
.apl-operator form,
.apl-operator fieldset,
.apl-operator dl,
.apl-operator p {
margin: var(--apl-ui-space-0);
}
.apl-operator-nav {
align-items: center;
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-xl);
display: flex;
gap: var(--apl-ui-space-2);
min-height: var(--apl-ui-control-height);
overflow: hidden;
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
}
.apl-operator-nav__label {
color: var(--apl-ui-color-text-subtle);
flex: 0 0 auto;
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-bold);
letter-spacing: var(--apl-ui-letter-spacing-label);
padding: var(--apl-ui-space-0) var(--apl-ui-space-2);
text-transform: uppercase;
}
.apl-operator-nav__links {
align-items: center;
display: flex;
flex: 1 1 auto;
gap: var(--apl-ui-space-1);
min-width: var(--apl-ui-space-0);
overflow-x: auto;
scrollbar-width: thin;
}
.apl-operator-nav__link {
align-items: center;
border: var(--apl-ui-border-width) solid transparent;
border-radius: var(--apl-ui-radius-md);
color: var(--apl-ui-color-text-body);
display: inline-flex;
flex: 0 0 auto;
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
gap: var(--apl-ui-space-1);
min-height: var(--apl-ui-control-height-sm);
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
text-decoration: none;
white-space: nowrap;
}
.apl-operator-nav__link:hover,
.apl-operator-nav__link:focus {
background: var(--apl-ui-color-surface-subtle);
border-color: var(--apl-ui-color-border);
color: var(--apl-ui-color-text-strong);
text-decoration: none;
}
.apl-operator-nav__link.is-active {
background: var(--apl-ui-color-brand-surface);
border-color: var(--apl-ui-color-brand-border);
color: var(--apl-ui-color-brand-dark);
}
.apl-operator-query > .apl-card__body {
padding: var(--apl-ui-space-2);
}
.apl-operator-query .apl-querybar {
background: var(--apl-ui-color-surface-subtle);
border-color: var(--apl-ui-color-border-muted);
padding: var(--apl-ui-space-2);
}
.apl-operator-query__advanced {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
margin-top: var(--apl-ui-space-2);
padding: var(--apl-ui-space-3) var(--apl-ui-space-1) var(--apl-ui-space-1);
}
.apl-operator-query__advanced[hidden] {
display: none;
}
.apl-operator__field-wide {
grid-column: 1 / -1;
}
.apl-operator__field-actions {
align-self: end;
}
.apl-operator__results-head {
align-items: center;
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: space-between;
padding: var(--apl-ui-space-3);
}
.apl-operator__results-tools {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-1);
justify-content: flex-end;
}
.apl-operator__page-size {
align-items: center;
color: var(--apl-ui-color-text-muted);
display: inline-flex;
font-size: var(--apl-ui-font-size-detail);
gap: var(--apl-ui-space-1);
}
.apl-operator__page-size .apl-native-select {
min-width: var(--apl-ui-operator-page-size-width);
}
.apl-operator-pulse {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-xl);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
overflow: hidden;
}
.apl-operator-pulse__item {
align-items: center;
border-right: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
color: var(--apl-ui-color-text-body);
display: flex;
gap: var(--apl-ui-space-2);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
text-decoration: none;
}
.apl-operator-pulse__item:last-child {
border-right: 0;
}
.apl-operator-pulse__item:hover,
.apl-operator-pulse__item:focus,
.apl-operator-pulse__item.is-active {
background: var(--apl-ui-color-brand-surface);
color: var(--apl-ui-color-text-strong);
text-decoration: none;
}
.apl-operator-pulse__item > span {
color: var(--apl-ui-color-text-muted);
display: block;
font-size: var(--apl-ui-font-size-caption);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apl-operator-pulse__item > strong {
color: var(--apl-ui-color-text-strong);
flex: 0 0 auto;
font-size: var(--apl-ui-font-size-title);
font-weight: var(--apl-ui-font-weight-bold);
}
.apl-operator__secondary {
color: var(--apl-ui-color-text-subtle);
display: block;
font-size: var(--apl-ui-font-size-caption);
line-height: var(--apl-ui-line-normal);
margin-top: var(--apl-ui-space-1);
}
.apl-operator__cell-primary {
color: var(--apl-ui-color-text-strong);
display: block;
font-weight: var(--apl-ui-font-weight-semibold);
line-height: var(--apl-ui-line-normal);
}
.apl-operator__cell-detail {
color: var(--apl-ui-color-text-muted);
display: -webkit-box;
font-size: var(--apl-ui-font-size-caption);
line-height: var(--apl-ui-line-normal);
overflow: hidden;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.apl-operator__notice-list {
margin: var(--apl-ui-space-1) var(--apl-ui-space-0) var(--apl-ui-space-0);
padding-left: var(--apl-ui-space-4);
}
.apl-operator__split {
align-items: start;
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: minmax(var(--apl-ui-operator-field-min-width), var(--apl-ui-operator-form-width)) minmax(0, 1fr);
}
.apl-operator__split > .apl-card {
min-width: var(--apl-ui-space-0);
}
.apl-operator__compact-form {
display: grid;
gap: var(--apl-ui-space-2);
}
.apl-operator__fieldset {
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-3);
}
.apl-operator__fieldset > legend {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-label);
font-weight: var(--apl-ui-font-weight-bold);
padding: var(--apl-ui-space-0) var(--apl-ui-space-2);
width: auto;
}
.apl-operator__form-footer {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-2);
justify-content: space-between;
padding: var(--apl-ui-space-3);
}
.apl-operator__form-actions {
justify-content: flex-end;
}
.apl-operator__progressive {
border-top: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
}
.apl-operator__progressive > summary {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
color: var(--apl-ui-color-text-strong);
cursor: pointer;
display: flex;
font-size: var(--apl-ui-font-size-label);
font-weight: var(--apl-ui-font-weight-bold);
justify-content: space-between;
min-height: var(--apl-ui-control-height-lg);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-operator__progressive > summary:hover,
.apl-operator__progressive > summary:focus {
background: var(--apl-ui-color-brand-surface);
}
.apl-operator__progressive > summary::after {
content: "+";
font-size: var(--apl-ui-font-size-title);
}
.apl-operator__progressive[open] > summary::after {
content: "−";
}
.apl-operator__payment-block {
overflow: hidden;
}
.apl-operator__payment-block > .apl-card__header {
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-operator__analyst-summary {
align-items: center;
cursor: pointer;
display: flex;
gap: var(--apl-ui-space-3);
justify-content: space-between;
list-style: none;
min-height: var(--apl-ui-control-height-lg);
padding: var(--apl-ui-space-2) var(--apl-ui-space-3);
}
.apl-operator__analyst-summary::-webkit-details-marker {
display: none;
}
.apl-operator__analyst-summary:hover,
.apl-operator__analyst-summary:focus {
background: var(--apl-ui-color-surface-subtle);
}
.apl-operator__analyst-summary::after {
color: var(--apl-ui-color-text-muted);
content: "+";
flex: 0 0 auto;
font-size: var(--apl-ui-font-size-title);
font-weight: var(--apl-ui-font-weight-bold);
}
.apl-operator__payment-block[open] > .apl-operator__analyst-summary::after {
content: "−";
}
.apl-operator__check-all {
align-items: center;
color: var(--apl-ui-color-text-body);
display: inline-flex;
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
gap: var(--apl-ui-space-2);
margin: var(--apl-ui-space-0);
}
.apl-operator__payment-summary {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--apl-ui-space-3);
justify-content: space-between;
}
.apl-operator__grand-total {
color: var(--apl-ui-color-text-strong);
display: block;
font-size: var(--apl-ui-font-size-display);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
}
.apl-operator__sticky-summary {
bottom: calc(var(--shell-footer-height, 0px) + var(--apl-ui-operator-sticky-offset));
position: sticky;
z-index: var(--apl-ui-z-sticky);
}
.apl-operator__dialog-wide {
max-width: var(--apl-ui-operator-dialog-width);
}
.apl-dialog-layer--drawer .apl-operator__drawer {
height: 100%;
margin-left: auto;
max-height: 100%;
max-width: var(--apl-ui-operator-drawer-width);
}
.apl-dialog-layer--drawer .apl-operator__drawer .apl-dialog__body {
flex: 1 1 auto;
overflow: auto;
}
.apl-operator__definition {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--apl-ui-operator-detail-min-width)), 1fr));
}
.apl-operator__definition > div {
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-3);
}
.apl-operator__definition dt {
color: var(--apl-ui-color-text-subtle);
font-size: var(--apl-ui-font-size-caption);
font-weight: var(--apl-ui-font-weight-semibold);
text-transform: uppercase;
}
.apl-operator__definition dd {
color: var(--apl-ui-color-text-body);
font-size: var(--apl-ui-font-size-body);
line-height: var(--apl-ui-line-relaxed);
margin: var(--apl-ui-space-1) var(--apl-ui-space-0) var(--apl-ui-space-0);
overflow-wrap: anywhere;
white-space: pre-line;
}
.apl-operator .apl-table {
min-width: var(--apl-ui-space-0);
}
.apl-operator .apl-table[data-apl-operator-table="wide"] {
min-width: var(--apl-ui-operator-table-min-width);
}
.apl-operator .apl-table td,
.apl-operator .apl-table th {
max-width: var(--apl-ui-operator-summary-min-width);
overflow-wrap: anywhere;
}
.apl-operator .apl-table td:last-child,
.apl-operator .apl-table th:last-child {
max-width: none;
white-space: nowrap;
}
.apl-operator .apl-table-wrap {
border-radius: var(--apl-ui-space-0);
}
@media (max-width: 900px) {
.apl-operator .apl-page__copy {
flex-basis: auto;
}
.apl-operator-nav__label {
display: none;
}
.apl-operator__split {
grid-template-columns: minmax(0, 1fr);
}
.apl-operator .apl-table[data-apl-columns="on"] {
min-width: var(--apl-ui-operator-table-min-width);
}
.apl-operator .apl-table[data-apl-columns="on"] th {
white-space: nowrap;
}
.apl-operator-pulse {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.apl-operator-pulse__item:nth-child(2) {
border-right: 0;
}
}
@media (max-width: 600px) {
.apl-operator-query .apl-querybar {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr));
overflow: visible;
}
.apl-operator-query .apl-querybar__search {
grid-column: 1 / -1;
min-width: var(--apl-ui-space-0);
}
.apl-operator-query .apl-querybar__field {
grid-column: span 3;
min-width: var(--apl-ui-space-0);
}
.apl-operator-query .apl-querybar__actions {
grid-column: 1 / -1;
justify-content: stretch;
margin-left: var(--apl-ui-space-0);
padding-left: var(--apl-ui-space-0);
position: static;
width: 100%;
}
.apl-operator-query .apl-querybar__actions > .apl-btn {
flex: 1 1 auto;
justify-content: center;
}
.apl-operator-pulse {
grid-template-columns: minmax(0, 1fr);
}
.apl-operator-pulse__item {
border-bottom: var(--apl-ui-border-width) solid var(--apl-ui-color-row-divider);
border-right: 0;
}
.apl-operator-pulse__item:last-child {
border-bottom: 0;
}
.apl-operator__results-head,
.apl-operator__payment-summary {
align-items: stretch;
}
.apl-operator__results-tools {
justify-content: flex-start;
width: 100%;
}
}
/* Registro diario de contadores: lectura compacta sin tabla ni desplazamiento horizontal. */
.apl-print-readings-dialog {
width: var(--apl-ui-print-readings-dialog-width);
}
.apl-print-readings-dialog > form {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: var(--apl-ui-space-0);
}
.apl-print-readings-dialog__body {
display: grid;
gap: var(--apl-ui-space-3);
grid-auto-rows: max-content;
overflow-x: hidden;
}
.apl-print-reading-date {
display: grid;
gap: var(--apl-ui-space-2);
}
.apl-print-reading-list {
display: grid;
gap: var(--apl-ui-space-2);
max-width: 100%;
min-width: var(--apl-ui-space-0);
}
.apl-print-reading-item {
align-items: end;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: grid;
gap: var(--apl-ui-space-3);
grid-template-columns: minmax(var(--apl-ui-space-0), 1.05fr) minmax(var(--apl-ui-space-0), 1.3fr) minmax(var(--apl-ui-space-0), 1fr);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-3);
}
.apl-print-reading-item.is-invalid {
background: var(--apl-ui-color-danger-soft);
border-color: var(--apl-ui-color-danger-border);
}
.apl-print-reading-item__error {
align-items: center;
color: var(--apl-ui-color-danger-dark);
display: flex;
font-size: var(--apl-ui-font-size-detail);
gap: var(--apl-ui-space-1);
grid-column: 1 / -1;
line-height: var(--apl-ui-line-normal);
margin: var(--apl-ui-space-0);
}
.apl-print-reading-item__error[hidden] {
display: none;
}
.apl-print-reading-item__printer {
align-items: center;
display: flex;
gap: var(--apl-ui-space-2);
min-width: var(--apl-ui-space-0);
}
.apl-print-reading-item__printer > div {
min-width: var(--apl-ui-space-0);
}
.apl-print-reading-item__printer strong,
.apl-print-reading-item__printer span {
display: block;
overflow-wrap: anywhere;
}
.apl-print-reading-item__printer strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-body);
font-weight: var(--apl-ui-font-weight-semibold);
line-height: var(--apl-ui-line-tight);
}
.apl-print-reading-item__printer span {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-caption);
margin-top: var(--apl-ui-space-1);
}
.apl-print-reading-item__printer b {
color: var(--apl-ui-color-text-strong);
font-weight: var(--apl-ui-font-weight-semibold);
}
.apl-print-reading-item__fields,
.apl-print-reading-item__results {
display: grid;
gap: var(--apl-ui-space-2);
grid-template-columns: repeat(2, minmax(var(--apl-ui-space-0), 1fr));
min-width: var(--apl-ui-space-0);
}
.apl-print-reading-item__results {
margin: var(--apl-ui-space-0);
}
.apl-print-reading-measure {
background: var(--apl-ui-color-surface);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-md);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
min-height: var(--apl-ui-print-reading-measure-min-height);
min-width: var(--apl-ui-space-0);
padding: var(--apl-ui-space-1) var(--apl-ui-space-2);
}
.apl-print-reading-measure > label,
.apl-print-reading-measure > dt {
color: var(--apl-ui-color-text-subtle);
display: block;
font-size: var(--apl-ui-font-size-detail);
font-weight: var(--apl-ui-font-weight-semibold);
line-height: var(--apl-ui-line-normal);
margin: var(--apl-ui-space-0) var(--apl-ui-space-0) var(--apl-ui-space-1);
overflow-wrap: normal;
white-space: nowrap;
}
.apl-print-reading-measure--editable:focus-within {
border-color: var(--apl-ui-color-brand-border);
box-shadow: var(--apl-ui-shadow-focus);
}
.apl-print-reading-measure--editable .apl-control {
background: transparent !important;
border: var(--apl-ui-space-0) !important;
border-radius: var(--apl-ui-space-0) !important;
box-shadow: none !important;
color: var(--apl-ui-color-text-strong) !important;
font-size: var(--apl-ui-font-size-title) !important;
font-weight: var(--apl-ui-font-weight-semibold) !important;
height: var(--apl-ui-control-height-sm) !important;
min-height: var(--apl-ui-control-height-sm) !important;
padding: var(--apl-ui-space-0) !important;
}
.apl-print-reading-measure--editable .apl-control:hover,
.apl-print-reading-measure--editable .apl-control:focus {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.apl-print-reading-item__results dd {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-tight);
margin: var(--apl-ui-space-1) var(--apl-ui-space-0) var(--apl-ui-space-0);
overflow-wrap: anywhere;
}
.apl-print-reading-summary {
align-items: center;
background: var(--apl-ui-color-surface-subtle);
border: var(--apl-ui-border-width) solid var(--apl-ui-color-border-muted);
border-radius: var(--apl-ui-radius-lg);
display: flex;
gap: var(--apl-ui-space-3);
justify-content: space-between;
padding: var(--apl-ui-space-3);
}
.apl-print-reading-summary > div > span,
.apl-print-reading-summary > div > strong,
.apl-print-reading-summary > div > small {
display: block;
}
.apl-print-reading-summary > div > span:first-child,
.apl-print-reading-summary small {
color: var(--apl-ui-color-text-muted);
font-size: var(--apl-ui-font-size-detail);
line-height: var(--apl-ui-line-normal);
}
.apl-print-reading-summary strong {
color: var(--apl-ui-color-text-strong);
font-size: var(--apl-ui-font-size-title);
font-weight: var(--apl-ui-font-weight-bold);
line-height: var(--apl-ui-line-normal);
margin-top: var(--apl-ui-space-1);
}
.apl-print-reading-summary strong > span {
display: inline;
}
.apl-print-reading-summary__reconciliation {
align-items: flex-end;
display: flex;
flex-direction: column;
gap: var(--apl-ui-space-1);
text-align: right;
}
.apl-print-readings-dialog .apl-print-reading-note textarea.apl-control--textarea {
min-height: var(--apl-ui-print-reading-note-min-height) !important;
resize: vertical;
}
@media (max-width: 760px) {
.apl-print-reading-item {
align-items: stretch;
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
}
.apl-print-reading-summary {
align-items: flex-start;
flex-direction: column;
}
.apl-print-reading-summary__reconciliation {
align-items: flex-start;
text-align: left;
}
}
@media (max-width: 520px) {
.apl-print-reading-item__fields {
grid-template-columns: minmax(var(--apl-ui-space-0), 1fr);
}
.apl-print-readings-dialog .apl-dialog__footer > .apl-btn {
flex: 1 1 auto;
justify-content: center;
}
}