/* ═══════════════════════════════════════════════════════════════════════════
   DS-SITE — Global Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Custom Table: Truncated Cell ───────────────────────────────────────── */

.custom-cell.cell-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    display: block;
    line-height: 38px;
}

/* Listado de suplidores: filas compactas como las demás tablas de parámetros
   (la celda con cell-truncate no debe inflar la altura con line-height 38px) */
#suppliersTable .custom-cell.cell-truncate { line-height: 1.5; }

/* Texto de celda (GlobalCustomTable): trunca con "…" dentro de la celda flex.
   El span necesita min-width:0 para poder encogerse por debajo de su contenido. */
.custom-cell > .gct-cell-text {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Honrar el align declarado dentro de la celda flex: `text-align` no posiciona
   hijos flex (badges, botones), por eso el badge de estado quedaba a la izquierda
   aunque la columna se declarara `align: 'center'`. */
.custom-cell.text-center { justify-content: center; }
.custom-cell.text-right  { justify-content: flex-end; }
.custom-cell.text-left   { justify-content: flex-start; }

/* Centrar la columna de estado (badge) de forma robusta, independientemente de
   la clase de alineación que emita el JS compilado/cargado: cualquier celda que
   contenga un badge centra su contenido. */
.custom-cell:has(> .badge) { justify-content: center; }

/* ─── Tablas de documentos de conciliación bancaria ─────────────────────────
   Estas tablas (Documentos en Tránsito/Confirmados, Sin Coincidencia) son
   estrechas (dispuestas de a dos columnas), por lo que:
   1) La columna "Tipo" muestra la abreviatura (NB, NC, CHK, DPT) — el nombre
      completo queda en el tooltip (title) — para no robarle ancho a la descripción.
   2) Se reparte el grid dándole prioridad a "Descripción" con un mínimo que
      garantiza que su encabezado nunca se trunque. */
.docs-sys-table .custom-header,
.docs-sys-table .custom-tbody,
.docs-sys-table .custom-footer,
.docs-sys-table .custom-table-form {
    grid-template-columns:
        48px            /* # / Secuencia */
        56px            /* Tipo (abreviado) */
        90px            /* Fecha */
        minmax(130px, 2.6fr) /* Descripción (prioridad, nunca corta el label) */
        minmax(84px, 1fr)    /* Monto */
        minmax(104px, 1.1fr) /* Estatus */
        56px            /* Acciones */
        !important;
}

/* Por defecto el badge de tipo se ve completo (tablas anchas, p.ej. coincidencias). */
.doc-type-badge .dtb-abbr { display: none; }
.doc-type-badge .dtb-full { display: inline; }

/* En las tablas estrechas de documentos, siempre abreviado. */
.docs-sys-table .doc-type-badge .dtb-full { display: none; }
.docs-sys-table .doc-type-badge .dtb-abbr { display: inline; }

/* ─── Context menu options ──────────────────────────────────────────────── */

.text-menu-option svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: #505050;
}

.text-menu-option p {
    color: #505050;
}

.text-menu-option:hover {
    background-color: #f0f0f0;
}

.text-menu-option.text-danger svg,
.text-menu-option.text-danger p,
.text-menu-option.text-danger i {
    color: #dc3545 !important;
    fill: #dc3545 !important;
}

.text-menu-option.text-danger:hover {
    background-color: #fef2f2;
}

.text-menu-option.text-success svg,
.text-menu-option.text-success p,
.text-menu-option.text-success i {
    color: #16a34a !important;
    fill: #16a34a !important;
}

.text-menu-option.text-success:hover {
    background-color: #f0fdf4;
}

/* ─── Status Tabs (Activos / Inactivos) ──────────────────────────────────── */

.ds-status-tabs-host {
    background: #fff;
    box-shadow: 0 0 13px 0 rgba(62, 44, 90, .08);
    margin-bottom: 1rem;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .09);
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 16px;
}

.ds-status-tabs-host .ds-nav-tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
}

.ds-status-tabs-host .ds-nav-item {
    display: flex;
    align-items: center;
}

.ds-status-tabs-host .ds-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: 0.4s;
}

.ds-status-tabs-host .ds-nav-link:hover:not(.active) {
    background: rgba(0, 0, 0, .04);
}

.ds-status-tabs-host .ds-nav-link.active {
    background: #008fd3;
    color: #fff;
}

.ds-status-tabs-host .ds-nav-link.active[data-tab="inactive"] {
    background: #b91c1c;
    color: #fff;
}

.ds-status-tabs-host .ds-tab-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .08);
    color: inherit;
}

.ds-status-tabs-host .ds-nav-link.active .ds-tab-badge {
    background: rgba(255, 255, 255, .25);
}

/* ─── Associate Profile Pic (1:1 ratio) ──────────────────────────────────── */

.associate-profile-pic,
.associate-profile-pic.h-95 {
    height: auto !important;
    aspect-ratio: 1 / 1;
    max-width: 170px;
    margin-left: auto;
    margin-right: auto;
}

.associate-profile-pic > img {
    object-fit: cover;
}

/* ─── DS Switch (Apple-style) ─────────────────────────────────────────────── */

.ds-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.ds-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ds-switch__track {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 12px;
    transition: background .25s ease;
    cursor: pointer;
}

.ds-switch__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    transition: transform .25s cubic-bezier(.4, .0, .2, 1);
}

.ds-switch input:checked + .ds-switch__track {
    background: #1a73e8;
}

.ds-switch input:checked + .ds-switch__track::after {
    transform: translateX(20px);
}

.ds-switch input:disabled + .ds-switch__track {
    opacity: .5;
    cursor: not-allowed;
}

/* ─── Section Header (Saving Types / global) ──────────────────────────────── */

.st-section-header {
    display:         flex;
    align-items:     center;
    gap:             8px;
    background:      #f8f9fa;
    border-left:     3px solid #1a73e8;
    border-radius:   0 4px 4px 0;
    padding:         8px 14px;
    margin-bottom:   16px;
    font-weight:     600;
    font-size:       0.85rem;
    color:           #343a40;
    letter-spacing:  0.02em;
    text-transform:  uppercase;
}

.st-section-header i {
    font-size:    1rem;
    color:        #1a73e8;
    margin-right: 8px;
}

/* El botón de menú (burger) dentro de un st-section-header (ej. encabezado de
   grupo en Grupos Contables) hereda el margin-right de la regla anterior, lo
   que descentra el icono dentro del botón redondo. Lo reseteamos para que
   quede centrado igual que el menú de subgrupo. */
.st-section-header .btn-menu i {
    margin: 0;
}

/* ─── Skeleton Loading ─────────────────────────────────────────────────────── */

.lr-skeleton-table {
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}

.lr-skeleton-row {
    display: flex;
    gap: 1px;
    background: #dee2e6;
}

.lr-skeleton-row + .lr-skeleton-row {
    border-top: 1px solid #dee2e6;
}

.lr-skeleton-row.lr-skeleton-header .lr-skeleton-cell {
    background: #f1f3f5;
    height: 36px;
}

.lr-skeleton-cell {
    flex: 1;
    height: 42px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.lr-skeleton-cell::after {
    content: '';
    position: absolute;
    inset: 10px 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #edf0f2 25%, #f5f6f8 50%, #edf0f2 75%);
    background-size: 200% 100%;
    animation: lr-shimmer 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes lr-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Loan Request — View crossfade ───────────────────────────────────────── */

.lr-view--leaving {
    opacity: 0 !important;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}

/* ─── Loan Request — Tab transitions ──────────────────────────────────────── */

#lr_tabs .nav-link {
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

#lr_tabs .nav-link:not(.disabled):hover {
    background: rgba(26, 115, 232, .04);
}

#lr_tabs .nav-link.disabled {
    opacity: .45;
    cursor: not-allowed;
}

#lr_tab_general,
#lr_tab_detail,
#lr_tab_optional,
#lr_tab_disbursement,
#lr_tab_amortization,
#lr_tab_analysis,
#lr_tab_comments {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}

#lr_tab_general.show,
#lr_tab_detail.show,
#lr_tab_optional.show,
#lr_tab_disbursement.show,
#lr_tab_amortization.show,
#lr_tab_analysis.show,
#lr_tab_comments.show {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Loan Request — Detail tab divider ───────────────────────────────────── */

#lr_tab_detail .col-lg-6:first-child {
    border-right: 1px solid #e9ecef;
    padding-right: 1.5rem;
}

#lr_tab_detail .col-lg-6:last-child {
    padding-left: 1.5rem;
}

/* ─── Loan Request — Button micro-feedback ────────────────────────────────── */

#lr_btn_new,
#lr_btn_back,
#lr_btn_next,
#lr_btn_search_associate,
#lr_btn_refresh_guarantees {
    transition: transform .12s ease, box-shadow .12s ease;
}

#lr_btn_new:active,
#lr_btn_back:active,
#lr_btn_next:active:not(:disabled),
#lr_btn_search_associate:active,
#lr_btn_refresh_guarantees:active {
    transform: scale(0.97);
}

#lr_btn_next:not(:disabled) {
    box-shadow: 0 2px 8px -2px rgba(26, 115, 232, .25);
}

/* ─── Loan Request — Applicable Amount Total ──────────────────────────────── */

.lr-applicable-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
    border-radius: 8px;
    padding: .65rem 1rem;
    margin-top: 10px;
}

.lr-applicable-total__label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .7);
}

.lr-applicable-total__value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.lr-applicable-total--danger {
    background: linear-gradient(135deg, #c62828 0%, #b71c1c 100%);
}

.lr-order-total {
    background: linear-gradient(135deg, #f9a825 0%, #f57f17 100%);
}

.lr-order-remaining {
    background: linear-gradient(135deg, #e65100 0%, #bf360c 100%);
}

.lr-order-remaining--done {
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
}

/* ─── Loan Request — Annual Rate highlight ────────────────────────────────── */

.lr-annual-rate {
    font-size: 20px;
    font-weight: 700;
    color: #1a73e8;
    line-height: 1.2;
    padding: 4px 0;
}

/* ─── Loan Request Summary — Bento Grid ───────────────────────────────────── */

.lr-summary {
    border-top: 1px solid #dee2e6;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.lr-summary__header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #868e96;
    margin-bottom: 1rem;
}

.lr-summary__header i {
    font-size: .85rem;
    color: #1a73e8;
}

/* ── Bento container ─────────────────────────────────────────────────────── */

.lr-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 8px;
}

/* ── Base tile ────────────────────────────────────────────────────────────── */

.lr-bento__tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .5rem .75rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: box-shadow .15s ease, transform .15s ease;
}

.lr-bento__tile:hover {
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

/* ── Hero tile — spans 2 cols, full left side ────────────────────────────── */

.lr-bento__tile--hero {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
    border-color: transparent;
    padding: .75rem 1rem;
    justify-content: flex-end;
    min-height: 90px;
}

.lr-bento__tile--hero .lr-bento__label {
    color: rgba(255, 255, 255, .7);
    font-size: .7rem;
}

.lr-bento__tile--hero .lr-bento__hero-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 2px 0 4px;
}

.lr-bento__tile--hero .lr-bento__sub {
    font-size: .72rem;
    color: rgba(255, 255, 255, .55);
    display: flex;
    align-items: center;
    gap: 4px;
}

.lr-bento__tile--hero .lr-bento__sub span {
    color: rgba(255, 255, 255, .8);
    font-weight: 600;
}

.lr-bento__tile--hero:hover {
    box-shadow: 0 8px 24px -8px rgba(26, 115, 232, .35);
}

/* ── Primary tiles — slightly larger value ───────────────────────────────── */

.lr-bento__tile--primary .lr-bento__value {
    font-size: 1rem;
    color: #1a73e8;
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */

.lr-bento__icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #f1f3f5;
    color: #495057;
    font-size: .65rem;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.lr-bento__tile--primary .lr-bento__icon {
    background: rgba(26, 115, 232, .08);
    color: #1a73e8;
}

/* ── Label ────────────────────────────────────────────────────────────────── */

.lr-bento__label {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #868e96;
    margin-bottom: 2px;
    white-space: nowrap;
}

/* ── Value ────────────────────────────────────────────────────────────────── */

.lr-bento__value {
    font-size: .82rem;
    font-weight: 700;
    color: #212529;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* ─── Loan Request — Associate search input polish ────────────────────────── */

#lr_associate_search_container .form-control[readonly] {
    background: #fff;
    cursor: pointer;
    border-color: #ced4da;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#lr_associate_search_container .form-control[readonly]:hover {
    border-color: #a0aec0;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, .06);
}

/* ─── Associate Summary Card (global) ─────────────────────────────────────── */

.asc-summary-card {
    background: #fff;
    border: 1px solid #e2e5e9;
    border-radius: 10px;
    margin-top: .75rem;
    overflow: hidden;
    transition: box-shadow .2s ease;
}

.asc-summary-card:hover {
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .1);
}

/* ── Top section: avatar + name + badge ──────────────────────────────────── */

.asc-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: .75rem 1rem;
    background: linear-gradient(135deg, #f8f9fb 0%, #f1f4f8 100%);
    border-bottom: 1px solid #e9ecef;
}

.asc-card__avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.asc-card__identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.asc-card__name {
    font-size: .9rem;
    font-weight: 700;
    color: #1a1d21;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asc-card__id-line {
    font-size: .72rem;
    color: #6c757d;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.asc-card__badge {
    flex-shrink: 0;
    font-size: .65rem;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: .02em;
}

.asc-card__deselect {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: none;
    color: #868e96;
    font-size: .7rem;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 4px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.asc-card__deselect:hover {
    color: #dc3545;
    border-color: #dc3545;
    background: rgba(220, 53, 69, .05);
}

/* ── Details: bento mini-grid ─────────────────────────────────────────────── */

.asc-card__bento {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0;
    padding: .6rem .85rem;
}

.asc-card__cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .35rem .5rem;
    border-left: 1px solid #e9ecef;
}

.asc-card__cell:nth-child(3n + 1) {
    border-left: none;
    padding-left: 0;
}

.asc-card__cell--wide {
    grid-column: span 1;
}

.asc-card__cell-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #adb5bd;
    line-height: 1;
}

.asc-card__cell > i {
    display: none;
}

.asc-card__cell-label i {
    font-size: .58rem;
    color: #1a73e8;
    opacity: .55;
}

.asc-card__cell-value {
    font-size: .78rem;
    font-weight: 600;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ─── Supplier Summary Card (Yellow theme) ──────────────────────────────── */

.spl-summary-card {
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .2s ease;
    margin-top: .5rem;
}

.spl-summary-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }

.spl-card__top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .6rem .85rem;
    background: linear-gradient(135deg, #fff8e1 0%, #ffffff 60%);
    border-bottom: 1px solid #e9ecef;
}

.spl-card__avatar {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #f9a825, #fbc02d);
    color: #fff;
    font-size: .95rem;
    flex-shrink: 0;
}

.spl-card__identity {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0; flex: 1;
}

.spl-card__name {
    font-size: .88rem; font-weight: 700; color: #1a1d21;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.spl-card__id-line {
    font-size: .72rem; color: #6c757d;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.spl-card__badge { font-size: .6rem; flex-shrink: 0; }

.spl-card__deselect {
    background: none; border: 1px solid #dee2e6; border-radius: 50%;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    color: #868e96; font-size: .7rem; cursor: pointer;
    flex-shrink: 0; margin-left: 4px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.spl-card__deselect:hover {
    color: #dc3545; border-color: #dc3545;
    background: rgba(220, 53, 69, .05);
}

.spl-card__bento {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0;
    padding: .6rem .85rem;
}

.spl-card__cell {
    display: flex; flex-direction: column; gap: 2px;
    padding: .35rem .5rem;
    border-left: 1px solid #e9ecef;
}

.spl-card__cell:nth-child(3n + 1) { border-left: none; padding-left: 0; }
.spl-card__cell--wide { grid-column: span 1; }

.spl-card__cell-label {
    display: flex; align-items: center; gap: 4px;
    font-size: .6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: #adb5bd; line-height: 1;
}

.spl-card__cell-label i {
    font-size: .58rem; color: #f9a825; opacity: .7;
}

.spl-card__cell-value {
    font-size: .78rem; font-weight: 600; color: #212529;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}

/* ─── Certificate Summary Card (Gold theme) ─────────────────────────────── */

.cert-summary-card {
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .2s ease;
    margin-top: .5rem;
}

.cert-summary-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }

.cert-card__top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .6rem .85rem;
    background: linear-gradient(135deg, #fdf6e3 0%, #ffffff 60%);
    border-bottom: 1px solid #e9ecef;
}

.cert-card__avatar {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #c98a0c, #e6a817);
    color: #fff;
    font-size: .95rem;
    flex-shrink: 0;
}

.cert-card__identity {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0; flex: 1;
}

.cert-card__name {
    font-size: .88rem; font-weight: 700; color: #1a1d21;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cert-card__id-line {
    font-size: .72rem; color: #6c757d;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cert-card__badge { font-size: .6rem; flex-shrink: 0; }

.cert-card__deselect {
    background: none; border: 1px solid #dee2e6; border-radius: 50%;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    color: #868e96; font-size: .7rem; cursor: pointer;
    flex-shrink: 0; margin-left: 4px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.cert-card__deselect:hover {
    color: #dc3545; border-color: #dc3545;
    background: rgba(220, 53, 69, .05);
}

.cert-card__bento {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0;
    padding: .6rem .85rem;
}

.cert-card__cell {
    display: flex; flex-direction: column; gap: 2px;
    padding: .35rem .5rem;
    border-left: 1px solid #e9ecef;
}

.cert-card__cell:nth-child(3n + 1) { border-left: none; padding-left: 0; }
.cert-card__cell--wide { grid-column: span 1; }

.cert-card__cell-label {
    display: flex; align-items: center; gap: 4px;
    font-size: .6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: #adb5bd; line-height: 1;
}

.cert-card__cell-label i {
    font-size: .58rem; color: #c98a0c; opacity: .7;
}

.cert-card__cell-value {
    font-size: .78rem; font-weight: 600; color: #212529;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .lr-bento {
        grid-template-columns: 1fr 1fr;
    }

    .lr-bento__tile--hero {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 100px;
    }

    .lr-bento__tile--hero .lr-bento__hero-value {
        font-size: 1.35rem;
    }

    #lr_tab_detail .col-lg-6:first-child {
        border-right: none;
        border-bottom: 1px solid #e9ecef;
        padding-right: 15px;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    #lr_tab_detail .col-lg-6:last-child {
        padding-left: 15px;
    }

    .asc-card__bento {
        grid-template-columns: 1fr 1fr;
    }

    .asc-card__cell--wide {
        grid-column: span 2;
    }

    .spl-card__bento {
        grid-template-columns: 1fr 1fr;
    }

    .spl-card__cell--wide {
        grid-column: span 2;
    }

    .cert-card__bento {
        grid-template-columns: 1fr 1fr;
    }

    .cert-card__cell--wide {
        grid-column: span 2;
    }

    .lr-disb-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Loan Request — Disbursement Cards ──────────────────────────────────── */

.lr-disb-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.lr-disb-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
    user-select: none;
}

.lr-disb-card:hover {
    border-color: #a0c4f1;
    box-shadow: 0 4px 14px -6px rgba(26, 115, 232, .15);
    transform: translateY(-1px);
}

.lr-disb-card--active {
    border-color: #1a73e8;
    background: #f0f7ff;
}

.lr-disb-card--disabled {
    position: relative;
    pointer-events: none;
    user-select: none;
}

.lr-disb-card--disabled::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    z-index: 1;
}

.lr-disb-card__icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f1f3f5;
    color: #495057;
    font-size: 1rem;
    margin-bottom: 6px;
    transition: background .2s ease, color .2s ease;
}

.lr-disb-card--active .lr-disb-card__icon {
    background: rgba(26, 115, 232, .12);
    color: #1a73e8;
}

.lr-disb-card__label {
    font-size: .78rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.lr-disb-card--active .lr-disb-card__label {
    color: #1a73e8;
}

.lr-disb-card__input {
    width: 100%;
    text-align: center;
    font-size: .85rem;
}

/* ─── Bank Account Selector ──────────────────────────────────────────────── */

.ds-bank-selector {
    width: 100%;
    margin-top: 6px;
}

.ds-bank-selector__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    background: none;
    border: 1px dashed #adb5bd;
    border-radius: 6px;
    color: #6c757d;
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.ds-bank-selector__btn:hover {
    border-color: #1a73e8;
    color: #1a73e8;
}

.ds-bank-selector__card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: #f8f9fb;
    border: 1px solid #e2e5e9;
    border-radius: 6px;
    cursor: pointer;
    transition: box-shadow .15s ease;
}

.ds-bank-selector__card:hover {
    box-shadow: 0 2px 8px -3px rgba(0,0,0,.08);
}

.ds-bank-selector__logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}

.ds-bank-selector__logo-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #868e96;
    font-size: .7rem;
    flex-shrink: 0;
}

.ds-bank-selector__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ds-bank-selector__name {
    font-size: .72rem;
    font-weight: 600;
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-bank-selector__account {
    font-size: .65rem;
    color: #868e96;
    font-variant-numeric: tabular-nums;
}

.ds-bank-selector__change {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: none;
    color: #868e96;
    font-size: .6rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: color .12s ease, border-color .12s ease;
}

.ds-bank-selector__change:hover {
    color: #dc3545;
    border-color: #dc3545;
}

/* ── Bank modal ──────────────────────────────────────────────────────────── */

.ds-bank-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-bank-modal__dialog {
    background: #fff;
    border-radius: 10px;
    width: 480px;
    max-width: 92vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px -15px rgba(0,0,0,.25);
    overflow: hidden;
}

.ds-bank-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid #e9ecef;
}

.ds-bank-modal__header h5 {
    font-size: .9rem;
    font-weight: 700;
    color: #212529;
    margin: 0;
}

.ds-bank-modal__close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: #f1f3f5;
    color: #495057;
    font-size: .8rem;
    cursor: pointer;
}

.ds-bank-modal__close:hover { background: #e9ecef; }

.ds-bank-modal__search {
    padding: .5rem 1rem;
    border-bottom: 1px solid #f1f3f5;
}

.ds-bank-modal__search input {
    font-size: .78rem;
}

.ds-bank-modal__list {
    flex: 1;
    overflow-y: auto;
    padding: .5rem;
}

.ds-bank-modal__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .5rem .65rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
}

.ds-bank-modal__item:hover {
    background: #f1f3f5;
}

.ds-bank-modal__item--active {
    background: rgba(26, 115, 232, .06);
    border: 1px solid rgba(26, 115, 232, .2);
}

.ds-bank-modal__logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}

.ds-bank-modal__logo-ph {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #868e96;
    font-size: .8rem;
    flex-shrink: 0;
}

.ds-bank-modal__item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ds-bank-modal__item-name {
    font-size: .78rem;
    font-weight: 600;
    color: #212529;
}

.ds-bank-modal__item-acc {
    font-size: .68rem;
    color: #868e96;
    font-variant-numeric: tabular-nums;
}

.ds-bank-modal__item-desc {
    font-size: .68rem;
    color: #adb5bd;
    white-space: nowrap;
}

.lr-disb-card__select {
    width: 100%;
    font-size: .72rem;
    border-radius: 4px;
}

.lr-disb-card__fill-btn {
    margin-top: 6px;
    padding: 3px 10px;
    font-size: .68rem;
    font-weight: 600;
    color: #6c757d;
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
    white-space: nowrap;
}

.lr-disb-card__fill-btn:hover {
    color: #1a73e8;
    border-color: #1a73e8;
    background: rgba(26, 115, 232, .04);
}

.lr-disb-card__fill-btn:active {
    transform: scale(0.97);
}

/* ─── Loan Request — Amortization Table ──────────────────────────────────── */

.lr-amort-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.lr-amort-stat {
    padding: .6rem .85rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.lr-amort-stat__label {
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #868e96;
    margin-bottom: 2px;
}

.lr-amort-stat__value {
    font-size: .95rem;
    font-weight: 700;
    color: #212529;
    font-variant-numeric: tabular-nums;
}

.lr-amort-stat--highlight {
    background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
    border-color: transparent;
}

.lr-amort-stat--highlight .lr-amort-stat__label { color: rgba(255,255,255,.65); }
.lr-amort-stat--highlight .lr-amort-stat__value { color: #fff; }

.lr-amort-table-wrap {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.lr-amort-table-wrap table {
    margin: 0;
    font-size: .78rem;
}

.lr-amort-table-wrap thead th {
    position: sticky;
    top: 0;
    background: #f1f3f5;
    z-index: 1;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #495057;
    padding: .5rem .6rem;
    border-bottom: 2px solid #dee2e6;
}

.lr-amort-table-wrap tbody td {
    padding: .4rem .6rem;
    font-variant-numeric: tabular-nums;
    border-color: #f1f3f5;
}

.lr-amort-table-wrap tbody tr:hover {
    background: rgba(26, 115, 232, .03);
}

.lr-amort-table-wrap tbody tr:last-child {
    font-weight: 700;
    background: #f8f9fa;
    border-top: 2px solid #dee2e6;
}

/* ─── Loan Request — Analysis Charts ─────────────────────────────────────── */

.lr-chart-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: .75rem;
    margin-bottom: .75rem;
    max-height: 220px;
    overflow: hidden;
}

.lr-chart-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #f1f3f5;
}

.lr-chart-card__title {
    font-size: .72rem;
    font-weight: 700;
    color: #495057;
    margin: 0;
}

.lr-chart-card__expand {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    background: none;
    color: #868e96;
    font-size: .6rem;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
    flex-shrink: 0;
}

.lr-chart-card__expand:hover {
    color: #1a73e8;
    border-color: #1a73e8;
    background: rgba(26, 115, 232, .04);
}

/* ── Chart expand modal ──────────────────────────────────────────────────── */

.lr-chart-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1060;
    background: rgba(0, 0, 0, .55);
    align-items: center;
    justify-content: center;
}

.lr-chart-modal.active {
    display: flex;
}

.lr-chart-modal__dialog {
    background: #fff;
    border-radius: 12px;
    width: 860px;
    max-width: 92vw;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px -16px rgba(0, 0, 0, .3);
}

.lr-chart-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
}

.lr-chart-modal__header h5 {
    font-size: .95rem;
    font-weight: 700;
    color: #212529;
    margin: 0;
}

.lr-chart-modal__close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: #f1f3f5;
    color: #495057;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s ease;
}

.lr-chart-modal__close:hover {
    background: #e9ecef;
}

.lr-chart-modal__body {
    padding: 1.25rem;
}

.lr-chart-modal__info {
    padding: 0 1.25rem 1.25rem;
    font-size: .78rem;
    color: #495057;
    line-height: 1.5;
}

.lr-chart-modal__info-row {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.lr-chart-modal__info-label {
    font-weight: 600;
    color: #868e96;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    min-width: 120px;
}

.lr-chart-modal__info-value {
    color: #212529;
}

/* ─── Loan Request — Comments Chat ───────────────────────────────────────── */

.lr-chat {
    display: flex;
    flex-direction: column;
    height: 420px;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    margin-top: .75rem;
}

.lr-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: #f8f9fb;
}

.lr-chat__bubble {
    max-width: 70%;
    padding: .5rem .85rem;
    border-radius: 12px;
    margin-bottom: .5rem;
    font-size: .82rem;
    line-height: 1.4;
    position: relative;
}

.lr-chat__bubble--mine {
    margin-left: auto;
    background: #1a73e8;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.lr-chat__bubble--other {
    margin-right: auto;
    background: #fff;
    color: #212529;
    border: 1px solid #e9ecef;
    border-bottom-left-radius: 4px;
}

.lr-chat__bubble-author {
    font-size: .65rem;
    font-weight: 600;
    margin-bottom: 2px;
    opacity: .7;
}

.lr-chat__bubble-time {
    font-size: .58rem;
    opacity: .55;
    margin-top: 3px;
    text-align: right;
}

.lr-chat__input-area {
    display: flex;
    gap: 8px;
    padding: .65rem .85rem;
    background: #fff;
    border-top: 1px solid #e9ecef;
}

.lr-chat__input-area .form-control {
    font-size: .82rem;
}

/* ─── Savings Withdrawal — Summary Footer (bento tiles) ──────────────────── */

.wd-summary-footer {
    border-top: 1px solid #dee2e6;
    padding: .75rem 1rem;
    display: flex;
    justify-content: flex-end;
}

.wd-summary-tiles {
    display: flex;
    gap: 8px;
}

.wd-summary-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem 1rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    min-width: 110px;
}

.wd-summary-tile__label {
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #868e96;
    margin-bottom: 2px;
}

.wd-summary-tile__value {
    font-size: .9rem;
    font-weight: 700;
    color: #212529;
    font-variant-numeric: tabular-nums;
}

.wd-summary-tile--primary {
    background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
    border-color: transparent;
}

.wd-summary-tile--primary .wd-summary-tile__label {
    color: rgba(255, 255, 255, .65);
}

.wd-summary-tile--primary .wd-summary-tile__value {
    color: #fff;
}

.wd-summary-tile--highlight {
    border-color: #28a745;
    background: rgba(40, 167, 69, .04);
}

.wd-summary-tile--highlight .wd-summary-tile__label {
    color: #28a745;
}

.wd-summary-tile--highlight .wd-summary-tile__value {
    color: #1b5e20;
}

/* ─── DS Toolbar Context Menu ─────────────────────────────────────────────── */

.ds-ctx-menu-wrap {
    position: relative;
    display: inline-block;
}

.ds-ctx-menu-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: none;
    color: #495057;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.ds-ctx-menu-btn:hover {
    background: #f1f3f5;
    border-color: #adb5bd;
}

.ds-ctx-menu {
    display: none;
    position: fixed;
    min-width: 200px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .15);
    z-index: 9999;
    padding: 4px 0;
    overflow: hidden;
}

.ds-ctx-menu.active {
    display: block;
}

.ds-ctx-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: .78rem;
    font-weight: 500;
    color: #343a40;
    cursor: pointer;
    transition: background .12s ease;
    white-space: nowrap;
}

.ds-ctx-menu__item:hover {
    background: #f1f3f5;
}

.ds-ctx-menu__item--danger {
    color: #dc3545;
}

.ds-ctx-menu__item--danger:hover {
    background: rgba(220, 53, 69, .06);
}

.ds-ctx-menu__item.disabled {
    opacity: .4;
    pointer-events: none;
}

.ds-ctx-menu__item i {
    width: 16px;
    text-align: center;
    font-size: .75rem;
    color: #868e96;
}

.ds-ctx-menu__item--danger i {
    color: #dc3545;
}

.ds-ctx-menu__divider {
    height: 1px;
    background: #e9ecef;
    margin: 4px 0;
}

/* ─── Withdrawal — Loan Payment Cards ─────────────────────────────────────── */

.wd-loan-payment-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.wd-loan-payment-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .85rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.wd-loan-payment-card__title {
    font-size: .82rem;
    font-weight: 700;
    color: #212529;
}

.wd-loan-payment-card__body {
    padding: .5rem .85rem;
}

.wd-loan-payment-card__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.wd-loan-payment-card__label {
    font-size: .75rem;
    font-weight: 600;
    color: #495057;
    min-width: 70px;
}

.wd-loan-payment-card__ref {
    font-size: .75rem;
    color: #868e96;
    font-variant-numeric: tabular-nums;
    min-width: 80px;
    text-align: right;
}

/* Sub-row for loan payment inputs */
.wd-loan-inputs-row {
    background: #f8f9fb;
    border-top: none !important;
    padding-top: 0 !important;
    min-height: auto !important;
}

.wd-loan-inputs-cell {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 16px 12px;
    justify-content: flex-end;
}

.wd-loan-inp-group {
    flex: 1;
    min-width: 130px;
    max-width: 180px;
}

.wd-loan-inp-label {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 2px;
}

.wd-loan-inp-label .text-muted {
    font-weight: 400;
    font-size: .62rem;
}

.wd-loan-payment-card__info {
    padding: .5rem .85rem;
    border-bottom: 1px solid #f0f0f0;
}

.wd-loan-payment-card__info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: .75rem;
    color: #4a5568;
    line-height: 1.6;
}

.wd-loan-payment-card__info-row strong {
    color: #2d3748;
}

.wd-loan-payment-card__inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: .6rem .85rem;
}

.wd-loan-payment-card__inp-group {
    flex: 1;
    min-width: 120px;
}

.wd-loan-payment-card__inp-group label {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 2px;
}

.wd-loan-payment-card__inp-group label .text-muted {
    font-weight: 400;
    font-size: .65rem;
}

.wd-loan-payment-card__footer {
    padding: .35rem .85rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    font-size: .72rem;
    color: #868e96;
    text-align: right;
}

@media (max-width: 768px) {
    .lr-amort-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .wd-summary-footer {
        justify-content: center;
    }

    .wd-summary-tiles {
        flex-wrap: wrap;
    }
}

/* ─── Loans Disbursement ─────────────────────────────────────────────────── */

.ld-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ld-record-count {
    font-size: 0.78rem;
    color: #8a9aaa;
    margin-left: auto;
}

/* Switch cell in table */
.ld-sw-cell {
    max-width: 50px !important;
    min-width: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

.ld-row-switch {
    margin: 0 !important;
    padding-left: 10px;
}

/* Sub-row for disbursement methods */
/* ─── DGII Certificates ─────────────────────────────────────────────────── */

.dc-file-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 16px;
    border: 2px dashed #cdd5de;
    border-radius: 8px;
    background: #f8f9fb;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    text-align: center;
}

.dc-file-drop:hover,
.dc-file-drop--hover {
    border-color: #1a73e8;
    background: #eef4fd;
}

.dc-file-drop--filled {
    border-color: #28a745;
    background: #f0faf3;
}

.dc-file-drop.validate-input {
    border-color: #dc3545;
    background: #fef2f2;
}

.dc-file-drop__icon {
    font-size: 2rem;
    color: #8e99a8;
}

.dc-file-drop--filled .dc-file-drop__icon {
    color: #28a745;
}

.dc-file-drop__text {
    font-size: .9rem;
    font-weight: 500;
    color: #3a4a5a;
}

.dc-file-drop__hint {
    font-size: .75rem;
    color: #8e99a8;
}

/* ─── ECF Document Cards ────────────────────────────────────────────────── */

.ed-doc-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 14px;
    transition: box-shadow .2s;
}

.ed-doc-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.07); }

.ed-doc-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    gap: 12px;
    transition: border-color .15s, border-radius .15s;
}

.ed-doc-card--open .ed-doc-card__header {
    border-bottom-color: #e2e8f0;
    border-radius: 10px 10px 0 0;
}

.ed-doc-card__header:hover { background: #eef2f7; }

.ed-doc-card__left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.ed-doc-card__toggle {
    font-size: .8rem;
    color: #94a3b8;
    transition: transform .2s;
    flex-shrink: 0;
}

.ed-doc-card__toggle--open { transform: rotate(90deg); }

.ed-doc-card__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: #e2e8f0;
    color: #475569;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    line-height: 1;
    flex-shrink: 0;
}

.ed-doc-card--open .ed-doc-card__index {
    background: #2563eb;
    color: #ffffff;
}

.ed-doc-card__encf {
    font-weight: 700;
    font-size: .9rem;
    color: #0f172a;
    white-space: nowrap;
}

.ed-doc-card__date {
    font-size: .75rem;
    color: #94a3b8;
}

.ed-doc-card__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ed-doc-card__amount {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.3px;
}

.ed-doc-card__ctx {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s;
    position: relative;
}

.ed-doc-card__ctx:hover { background: #f1f5f9; }

.ed-doc-card__body {
    display: none;
    padding: 20px;
    border-radius: 0 0 10px 10px;
}

.ed-doc-card__body--open { display: block; }

/* Top row: QR left + info right */
.ed-doc-top {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
}

.ed-doc-qr {
    flex-shrink: 0;
}

.ed-doc-qr img {
    width: 120px;
    height: 120px;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    padding: 4px;
    background: #fff;
}

.ed-doc-qr__loading,
.ed-doc-qr__err {
    width: 120px;
    height: 120px;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ed-doc-qr__loading {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: ed-qr-shimmer 1.2s infinite linear;
}
.ed-doc-qr__err i {
    color: #cbd5e1;
    font-size: 2rem;
}
@keyframes ed-qr-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

.ed-doc-top-info {
    flex: 1;
    min-width: 0;
}

.ed-doc-buyer {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.ed-doc-buyer-rnc {
    font-size: .78rem;
    color: #64748b;
    margin-bottom: 10px;
}

.ed-doc-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.ed-doc-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2px;
}

.ed-doc-tag i { font-size: .68rem; }
.ed-doc-tag--blue   { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.ed-doc-tag--green  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.ed-doc-tag--yellow { background: #fffbeb; color: #a16207; border: 1px solid #fde68a; }
.ed-doc-tag--red    { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.ed-doc-tag--gray   { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

.ed-doc-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: .78rem;
    color: #64748b;
}

.ed-doc-meta-row strong { color: #334155; font-weight: 600; }

/* Money tiles */
.ed-doc-money-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.ed-doc-money-tile {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}

.ed-doc-money-tile__label {
    font-size: .68rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    margin-bottom: 2px;
}

.ed-doc-money-tile__value {
    font-size: .95rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.ed-doc-money-tile--accent {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.ed-doc-money-tile--accent .ed-doc-money-tile__value { color: #1a73e8; }

/* Error box */
.ed-doc-error {
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: .82rem;
    color: #991b1b;
    margin-bottom: 16px;
}

.ed-doc-error i { margin-right: 6px; }

.ed-doc-section-title {
    font-size: .8rem;
    font-weight: 700;
    color: #475569;
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #e2e8f0;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.ed-doc-section-title i { margin-right: 6px; color: #94a3b8; }

.ed-env-empty {
    text-align: center;
    padding: 32px;
    color: #94a3b8;
    font-size: .88rem;
}

.ed-env-empty i { font-size: 2.2rem; display: block; margin-bottom: 10px; }

/* Context menu dropdown */
.ed-ctx-menu {
    position: absolute;
    right: 0;
    top: 32px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    min-width: 180px;
    z-index: 50;
    overflow: hidden;
    display: none;
}

.ed-ctx-menu--open { display: block; }

.ed-ctx-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: .82rem;
    color: #334155;
    cursor: pointer;
    transition: background .12s;
    text-decoration: none;
}

.ed-ctx-menu__item:hover { background: #f1f5f9; color: #334155; }
.ed-ctx-menu__item i { color: #64748b; width: 16px; text-align: center; }

/* ─── Environment toolbar (expand-all switch) ───────────────────────────── */

.ed-env-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    gap: 12px;
}

.ed-env-toolbar__info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 600;
    color: #475569;
}

.ed-env-toolbar__info i {
    color: #64748b;
    font-size: .9rem;
}

.ed-env-cards { display: block; }

/* ─── Switch (generic, DGII screen scope) ───────────────────────────────── */

.ed-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.ed-switch__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.ed-switch__track {
    position: relative;
    width: 38px;
    height: 22px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background-color .2s ease;
    flex-shrink: 0;
}

.ed-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    transition: transform .2s ease;
}

.ed-switch__input:checked + .ed-switch__track {
    background: #2563eb;
}

.ed-switch__input:checked + .ed-switch__track .ed-switch__thumb {
    transform: translateX(16px);
}

.ed-switch__input:focus-visible + .ed-switch__track {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}

.ed-switch__label {
    font-size: .82rem;
    font-weight: 600;
    color: #334155;
}

/* ─── Topbar menu host (dgii documents) ────────────────────────────────── */

.ed-toolbar-menu-host {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
}

.ed-toolbar-menu-host .ds-ctx-menu-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

/* ─── Report modal (two date fields) ────────────────────────────────────── */

.ed-report-modal__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ed-report-modal__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ─── Send-by-email modal ───────────────────────────────────────────────── */

.ed-email-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, background-color .18s ease, backdrop-filter .18s ease;
}

.ed-email-modal__overlay--open {
    opacity: 1;
    pointer-events: auto;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(4px);
}

.ed-email-modal {
    width: min(460px, calc(100vw - 32px));
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .22);
    overflow: hidden;
    transform: translateY(8px) scale(.98);
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease;
}

.ed-email-modal__overlay--open .ed-email-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.ed-email-modal__header {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #f1f5f9;
}

.ed-email-modal__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.ed-email-modal__titles { min-width: 0; }

.ed-email-modal__title {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
}

.ed-email-modal__subtitle {
    font-size: .78rem;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.35;
}

.ed-email-modal__subtitle b { color: #0f172a; font-weight: 600; }

.ed-email-modal__close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.ed-email-modal__close:hover { background: #f1f5f9; color: #334155; }

.ed-email-modal__body { padding: 18px; }

.ed-email-modal__label {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 6px;
}

.ed-email-modal__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ed-email-modal__input-wrap i {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    pointer-events: none;
}

.ed-email-modal__input {
    width: 100%;
    height: 42px;
    padding: 0 12px 0 36px;
    font-size: .9rem;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.ed-email-modal__input::placeholder { color: #94a3b8; }

.ed-email-modal__input:focus {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.ed-email-modal__input--error {
    border-color: #dc2626;
    background: #fef2f2;
}

.ed-email-modal__input--error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}

.ed-email-modal__error {
    min-height: 18px;
    margin-top: 6px;
    font-size: .76rem;
    color: #dc2626;
}

.ed-email-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

/* ─── Track status modal ───────────────────────────────────────────────── */

.ed-track-modal { width: min(540px, calc(100vw - 32px)); }

.ed-track-modal__body {
    max-height: min(70vh, 560px);
    overflow-y: auto;
}

.ed-track-modal__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 12px;
    color: #64748b;
    font-size: .88rem;
}

.ed-track-modal__loading i { font-size: 1.1rem; color: #2563eb; }

.ed-track-modal__error {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 14px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    align-items: center;
}

.ed-track-modal__error i { font-size: 1.4rem; color: #dc2626; justify-self: center; }
.ed-track-modal__error-title { font-weight: 700; font-size: .9rem; }
.ed-track-modal__error-msg   { font-size: .8rem; margin-top: 2px; color: #7f1d1d; }

.ed-track-modal__status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid;
    margin-bottom: 14px;
}

.ed-track-modal__status-code {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ed-track-modal__status-label {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.ed-track-modal__status--green {
    background: #f0fdf4; border-color: #bbf7d0; color: #166534;
}
.ed-track-modal__status--amber {
    background: #fffbeb; border-color: #fde68a; color: #92400e;
}
.ed-track-modal__status--red {
    background: #fef2f2; border-color: #fecaca; color: #991b1b;
}
.ed-track-modal__status--slate {
    background: #f1f5f9; border-color: #cbd5e1; color: #334155;
}

.ed-track-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.ed-track-modal__cell {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
}

.ed-track-modal__cell-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 4px;
}

.ed-track-modal__cell-val {
    font-size: .88rem;
    color: #0f172a;
    font-weight: 600;
    word-break: break-all;
}

.ed-track-modal__cell-val--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500;
    font-size: .82rem;
}

.ed-track-modal__msgs-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ed-track-modal__msgs-title i { color: #2563eb; }

.ed-track-modal__msgs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ed-track-modal__msg {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.ed-track-modal__msg-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #0f172a;
    color: #f1f5f9;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ed-track-modal__msg-val {
    font-size: .84rem;
    color: #334155;
    line-height: 1.4;
}

/* ─── RNC Selector (global helper) ─────────────────────────────────────── */

.rnc-sel {
    position: relative;
    display: block;
}

.rnc-sel__row { display: flex; align-items: stretch; }
.rnc-sel__input { flex: 1; }
.rnc-sel__btn { min-width: 40px; }

/* Status line: posición absoluta para NO afectar el layout del grid. */
.rnc-sel__status {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 3px;
    display: none;
    align-items: center;
    gap: 5px;
    padding: 2px 4px;
    font-size: .7rem;
    color: #475569;
    line-height: 1.25;
    pointer-events: none;
    z-index: 2;
}

.rnc-sel__status:not(:empty) { display: inline-flex; max-width: 100%; pointer-events: auto; }

.rnc-sel__status--ok   { color: #166534; }
.rnc-sel__status--warn { color: #92400e; }

.rnc-sel__status i { font-size: .78rem; flex-shrink: 0; }
.rnc-sel__status--ok   i { color: #16a34a; }
.rnc-sel__status--warn i { color: #d97706; }

.rnc-sel__status-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}

/* Autocomplete menu (attached to body) */
.rnc-sel__menu {
    position: fixed;
    z-index: 1085;
    max-height: 300px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.rnc-sel__menu--open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.rnc-sel__item {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background .12s;
}

.rnc-sel__item:last-child { border-bottom: none; }
.rnc-sel__item:hover { background: #eff6ff; }

.rnc-sel__item-name {
    font-size: .84rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rnc-sel__item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
    font-size: .72rem;
    color: #64748b;
}

.rnc-sel__item-rnc i { color: #94a3b8; margin-right: 4px; }

.rnc-sel__item-status {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .68rem;
    font-weight: 700;
}

/* Modal */
.rnc-sel-modal__overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0);
    z-index: 1090;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, background-color .22s ease, backdrop-filter .22s ease;
}

.rnc-sel-modal__overlay--open {
    opacity: 1;
    pointer-events: auto;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(5px);
}

.rnc-sel-modal {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    display: flex;
    flex-direction: column;
    transform: translateY(8px) scale(.98);
    opacity: 0;
    transition: transform .26s ease, opacity .26s ease;
}

.rnc-sel-modal__overlay--open .rnc-sel-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.rnc-sel-modal__header {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
}

.rnc-sel-modal__icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.1rem;
}

.rnc-sel-modal__title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.rnc-sel-modal__subtitle {
    margin-top: 2px;
    font-size: .76rem;
    color: #64748b;
}

.rnc-sel-modal__close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.rnc-sel-modal__close:hover { background: #f1f5f9; color: #334155; }

.rnc-sel-modal__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    padding: 14px 18px 18px;
    gap: 10px;
}

.rnc-sel-modal__search {
    position: relative;
    display: flex;
    align-items: center;
}

.rnc-sel-modal__search i {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    pointer-events: none;
}

.rnc-sel-modal__search input {
    width: 100%;
    height: 42px;
    padding: 0 12px 0 36px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    font-size: .9rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.rnc-sel-modal__search input:focus {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.rnc-sel-modal__list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    min-height: 260px;
    max-height: 60vh;
}

.rnc-sel-modal__row {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background-color .12s;
}

.rnc-sel-modal__row:last-of-type { border-bottom: none; }

.rnc-sel-modal__row:hover { background: #eff6ff; }

.rnc-sel-modal__row-name {
    font-size: .88rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rnc-sel-modal__row-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: .74rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.rnc-sel-modal__row-meta i { color: #94a3b8; margin-right: 4px; }

.rnc-sel-modal__row-status {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .68rem;
    font-weight: 700;
}

.rnc-sel-modal__loading,
.rnc-sel-modal__empty,
.rnc-sel-modal__error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    font-size: .84rem;
    color: #64748b;
}

.rnc-sel-modal__loading i { color: #2563eb; }
.rnc-sel-modal__error   { color: #991b1b; }
.rnc-sel-modal__error i { color: #dc2626; }

.rnc-sel-modal__sentinel { height: 1px; }

/* ─── DGII Documents by Client — filters, table, toolbar ──────────────── */

.dbc-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.dbc-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s;
}

.dbc-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }

.dbc-card__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

.dbc-card__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .96rem;
    font-weight: 700;
    color: #0f172a;
}

.dbc-card__title i { color: #2563eb; font-size: 1rem; }

.dbc-card__sub {
    width: 100%;
    font-size: .78rem;
    color: #64748b;
    margin-top: 2px;
}

.dbc-card__toolbar {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    flex-wrap: wrap;
}

.dbc-card__body {
    padding: 16px;
}

.dbc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e40af;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
}

.dbc-chip--on-btn {
    margin-left: 8px;
    background: rgba(255, 255, 255, .22);
    color: #ffffff;
}

.dbc-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}

/* Normaliza los form-groups del grid: Bootstrap pone margin-bottom: 0 en
   :last-child/:only-child lo que, junto con align-items:end, baja el último
   input respecto a los demás. Forzamos margen 0 a todos (el gap del grid
   ya separa). */
.dbc-filter-grid .form-group { margin-bottom: 0; }

/* Iguala la altura del select2-my a la del .form-control para que el form-group
   del ambiente tenga la misma altura que los demás y no se desplace. */
.dbc-filter-grid select2-my .s2m-holder {
    height: calc(1.5em + 0.75rem + 2px);
}

.dbc-filter-grid__actions {
    display: flex;
    gap: 8px;
    justify-self: end;
    align-self: end;
}

@media (max-width: 900px) {
    .dbc-filter-grid__actions { justify-self: stretch; }
}

.dbc-error {
    min-height: 18px;
    margin-top: 6px;
    font-size: .78rem;
    color: #dc2626;
}

#dbc_table_container .table-col-5 .custom-header,
#dbc_table_container .table-col-5 .custom-tbody {
    grid-template-columns: 70px minmax(200px, 1.5fr) 1fr 1fr 1fr;
}

.dbc-row-switch {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dbc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 16px;
    text-align: center;
    color: #94a3b8;
}

.dbc-empty i { font-size: 2rem; color: #cbd5e1; }
.dbc-empty__title { font-size: .92rem; font-weight: 700; color: #475569; margin-top: 6px; }
.dbc-empty__sub   { font-size: .78rem; color: #94a3b8; }

/* ─── DGII Hold Documents — summary, table, detail modal ────────────────── */

.hd-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
}

.hd-summary:empty { display: none; }

.hd-sum__total {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .88rem;
    font-weight: 700;
    color: #92400e;
}

.hd-sum__total i { font-size: 1.1rem; color: #d97706; }

.hd-sum__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hd-sum-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid transparent;
}

.hd-sum-chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.hd-sum-chip i { font-size: .78rem; }

.hd-sum-chip--green  { border-color: #bbf7d0; color: #166534; }
.hd-sum-chip--amber  { border-color: #fde68a; color: #92400e; }
.hd-sum-chip--blue   { border-color: #bfdbfe; color: #1e40af; }
.hd-sum-chip--slate  { border-color: #cbd5e1; color: #475569; }

#hd_table_container .table-col-6 .custom-header,
#hd_table_container .table-col-6 .custom-tbody {
    grid-template-columns: 1.4fr 1fr 1fr .9fr 1.3fr 70px;
}

/* Tabla de codificación contable — Nota de Crédito / Nota de Débito banco */
#cbn_cod_table .custom-header,
#cbn_cod_table .custom-tbody,
#dbn_cod_table .custom-header,
#dbn_cod_table .custom-tbody {
    grid-template-columns: 1.6fr 1.2fr 2fr 1fr 1fr 80px;
}

/* Tabla de codificación contable — Entrada de Diario.
   Header + ambos tbody (filas + fila de captura) + footer comparten las mismas
   columnas para que los sub-grids queden alineados (evita la deformación). */
#jne_cod_table .custom-header,
#jne_cod_table .custom-tbody,
#jne_cod_table .custom-footer {
    grid-template-columns: 1.6fr 1.2fr 2fr 1fr 1fr 80px;
}

/* Tabla de codificación (solo lectura) — detalle de Cheques Emitidos */
#chi_cod_table .custom-header,
#chi_cod_table .custom-tbody {
    grid-template-columns: 90px 2fr 1.4fr 1fr 1fr;
}

/* Componente compartido de Codificación (CodificationManager) — origen único.
   Reemplaza las reglas por-ID de arriba conforme se migran los módulos. */
.cod-table .custom-header,
.cod-table .custom-tbody {
    grid-template-columns: 1.6fr 1.2fr 2fr 1fr 1fr 80px;
}
.cod-table--readonly .custom-header,
.cod-table--readonly .custom-tbody {
    grid-template-columns: 1.6fr 2fr 1.2fr 1fr 1fr;
}

/* Tablas de posteo masivo (Notas de Crédito / Débito / Depósitos) — bulk
   con checkbox. Header usa custom-thead > custom-row, por eso el grid va en
   thead y tbody (las filas internas heredan vía subgrid). */
#pcn_table .custom-thead, #pcn_table .custom-tbody,
#pdn_table .custom-thead, #pdn_table .custom-tbody,
#pdp_table .custom-thead, #pdp_table .custom-tbody {
    display: grid;
    grid-template-columns: 44px 70px 110px minmax(0, 2.2fr) minmax(0, 1.5fr) 1.2fr 120px 44px;
}

#pcn_table .custom-thead .custom-cell,
#pdn_table .custom-thead .custom-cell,
#pdp_table .custom-thead .custom-cell {
    background-color: #f1f3f7;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    border-bottom: 2px solid #dee2e6;
    padding-top: 10px;
    padding-bottom: 10px;
    position: sticky;
    top: 0;
    z-index: 2;
}



.hd-env-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.hd-env-pill--green { background: #dcfce7; color: #166534; }
.hd-env-pill--amber { background: #fef3c7; color: #92400e; }
.hd-env-pill--blue  { background: #dbeafe; color: #1e40af; }
.hd-env-pill--slate { background: #f1f5f9; color: #475569; }

.hd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 16px;
    text-align: center;
    color: #94a3b8;
}

.hd-empty i { font-size: 2.2rem; color: #cbd5e1; }

.hd-empty__title { font-size: 1rem; font-weight: 700; color: #475569; margin-top: 8px; }
.hd-empty__sub   { font-size: .82rem; color: #94a3b8; }

.hd-detail {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0);
    z-index: 1070;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, background-color .22s ease, backdrop-filter .22s ease;
}

.hd-detail--open {
    opacity: 1;
    pointer-events: auto;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(5px);
}

.hd-detail__panel {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    display: flex;
    flex-direction: column;
    transform: translateY(8px) scale(.98);
    opacity: 0;
    transition: transform .26s ease, opacity .26s ease;
}

.hd-detail--open .hd-detail__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.hd-detail__hdr {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #f1f5f9;
}

.hd-detail__ico {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fffbeb;
    color: #d97706;
    font-size: 1.1rem;
}

.hd-detail__title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.hd-detail__subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
    font-size: .74rem;
    color: #64748b;
}

.hd-detail__rnc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.hd-detail__rnc i { color: #94a3b8; }

.hd-detail__close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.hd-detail__close:hover { background: #f1f5f9; color: #334155; }

.hd-detail__body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
}

.hd-detail__loading,
.hd-detail__error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 12px;
    font-size: .88rem;
}

.hd-detail__loading { color: #64748b; }
.hd-detail__loading i { color: #2563eb; }

.hd-detail__error { color: #991b1b; }
.hd-detail__error i { color: #dc2626; }

.hd-detail__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.hd-detail__cell {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
}

.hd-detail__cell--full { grid-column: 1 / -1; }

.hd-detail__label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
    margin-bottom: 4px;
}

.hd-detail__val {
    font-size: .86rem;
    color: #0f172a;
    font-weight: 600;
    word-break: break-all;
}

.hd-detail__val--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500;
    font-size: .78rem;
    color: #334155;
}

.hd-detail__section { margin-top: 4px; }

.hd-detail__section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #334155;
    margin-bottom: 8px;
}

.hd-detail__section-title i { color: #2563eb; }

.hd-detail__json {
    background: #0f172a;
    color: #f1f5f9;
    padding: 12px 14px;
    border-radius: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .76rem;
    line-height: 1.5;
    overflow: auto;
    max-height: 280px;
    margin: 0;
    white-space: pre;
}

.hd-detail__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

/* ─── Email Notifications — layout, cards, rows ────────────────────────── */

.en-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    padding: 16px;
}

.en-card {
    grid-column: span 5;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s;
}

.en-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }

.en-card--wide { grid-column: span 7; }

@media (max-width: 1100px) {
    .en-card, .en-card--wide { grid-column: span 12; }
}

.en-card__hdr {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.en-card__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .96rem;
    font-weight: 700;
    color: #0f172a;
}

.en-card__title i { color: #2563eb; font-size: 1rem; }

.en-card__sub {
    margin-top: 4px;
    font-size: .78rem;
    color: #64748b;
}

.en-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.en-card__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.en-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    margin-left: 6px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e40af;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.en-input-error {
    min-height: 16px;
    margin-top: 4px;
    font-size: .74rem;
    color: #dc2626;
}

.form-control.is-invalid {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

/* ── Empty state ── */

.en-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 16px;
    text-align: center;
    color: #94a3b8;
}

.en-empty i { font-size: 2rem; color: #cbd5e1; }

.en-empty__title { font-size: .92rem; font-weight: 700; color: #475569; margin-top: 6px; }
.en-empty__sub   { font-size: .78rem; color: #94a3b8; }

/* ── Groups ── */

.en-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.en-group {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.en-group__hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-bottom: 1px solid transparent;
}

.en-group__hdr i { font-size: .9rem; }

.en-group__hdr--red   { background: #fef2f2; color: #991b1b; border-bottom-color: #fecaca; }
.en-group__hdr--blue  { background: #eff6ff; color: #1e40af; border-bottom-color: #bfdbfe; }
.en-group__hdr--amber { background: #fffbeb; color: #92400e; border-bottom-color: #fde68a; }

.en-group__count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: #ffffff;
    font-size: .7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.en-group__body {
    display: flex;
    flex-direction: column;
}

/* ── Rows ── */

.en-row {
    display: grid;
    grid-template-columns: 40px 1fr 34px;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid #f1f5f9;
    transition: background-color .15s;
}

.en-row:first-child { border-top: none; }

.en-row:hover { background: #f8fafc; }

.en-row__avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
}

.en-row__avatar--red   { background: #fef2f2; color: #dc2626; }
.en-row__avatar--blue  { background: #eff6ff; color: #2563eb; }
.en-row__avatar--amber { background: #fffbeb; color: #d97706; }

.en-row__info { min-width: 0; }

.en-row__email {
    font-size: .88rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.en-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 3px;
    font-size: .72rem;
    color: #94a3b8;
}

.en-row__meta i { margin-right: 3px; }

.en-row__delete {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .85rem;
    transition: background-color .15s, color .15s, border-color .15s;
}

.en-row__delete:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* ─── DGII Options — layout, cards, actions ────────────────────────────── */

.do-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    padding: 16px;
}

.do-card {
    grid-column: span 6;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s;
}

.do-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }

.do-card--full { grid-column: span 12; }

@media (max-width: 1100px) {
    .do-card, .do-card--full { grid-column: span 12; }
}

.do-card__hdr {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.do-card__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .96rem;
    font-weight: 700;
    color: #0f172a;
}

.do-card__title i { color: #2563eb; font-size: 1rem; }

.do-card__sub {
    margin-top: 4px;
    font-size: .78rem;
    color: #64748b;
}

.do-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.do-client-info {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
}

.do-client-info--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #94a3b8;
    font-size: .85rem;
    padding: 18px;
    border-style: dashed;
}

.do-client-info--empty i { color: #cbd5e1; font-size: 1.1rem; }

.do-client-info__name {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.do-client-info__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.do-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
}

.do-pill i { font-size: .76rem; }

.do-pill--slate { background: #f1f5f9; color: #475569; }
.do-pill--green { background: #dcfce7; color: #166534; }
.do-pill--amber { background: #fef3c7; color: #92400e; }
.do-pill--red   { background: #fee2e2; color: #991b1b; }

.do-action {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.do-action + .do-action { margin-top: 4px; }

.do-action--danger {
    background: #fef2f2;
    border-color: #fecaca;
}

.do-action__info { min-width: 0; }

.do-action__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 700;
    color: #0f172a;
}

.do-action--danger .do-action__title { color: #991b1b; }
.do-action--danger .do-action__title i { color: #dc2626; }

.do-action__desc {
    margin-top: 4px;
    font-size: .78rem;
    color: #64748b;
    line-height: 1.4;
}

.do-action__controls { display: flex; align-items: flex-end; gap: 8px; }

.do-action__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.do-action__row select2-my { min-width: 200px; }

.do-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.do-cert-result { margin-top: 4px; }

.do-cert-result__panel {
    border: 1px solid;
    border-radius: 12px;
    overflow: hidden;
    animation: do-fade-in .24s ease both;
}

@keyframes do-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.do-cert-result__panel--green { border-color: #bbf7d0; background: #f0fdf4; }
.do-cert-result__panel--amber { border-color: #fde68a; background: #fffbeb; }
.do-cert-result__panel--slate { border-color: #e2e8f0; background: #f8fafc; }

.do-cert-result__hdr {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
}

.do-cert-result__ico {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    font-size: 1.15rem;
}

.do-cert-result__panel--green .do-cert-result__ico { color: #16a34a; }
.do-cert-result__panel--amber .do-cert-result__ico { color: #d97706; }
.do-cert-result__panel--slate .do-cert-result__ico { color: #475569; }

.do-cert-result__title {
    font-size: .94rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.do-cert-result__msg {
    margin-top: 3px;
    font-size: .8rem;
    color: #475569;
}

.do-cert-result__count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    min-width: 72px;
}

.do-cert-result__count span {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.do-cert-result__count small {
    font-size: .64rem;
    color: #64748b;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.do-cert-result__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 14px 14px;
}

.do-cert-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.do-cert-row__name {
    font-size: .86rem;
    font-weight: 700;
    color: #0f172a;
}

.do-cert-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    font-size: .74rem;
    color: #64748b;
}

.do-cert-row__meta i { color: #94a3b8; margin-right: 4px; }

.do-cert-row__days {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 10px;
    min-width: 76px;
}

.do-cert-row__days span {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.do-cert-row__days small {
    font-size: .64rem;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .8;
}

.do-cert-row__days--green { background: #dcfce7; color: #166534; }
.do-cert-row__days--amber { background: #fef3c7; color: #92400e; }
.do-cert-row__days--red   { background: #fee2e2; color: #991b1b; }

/* ─── DGII Options — toolbar del card + modal "Nuevo Cliente" ────────── */

.do-card__toolbar {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.do-modal {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: none;
}
.do-modal:not([hidden]),
.do-modal.do-modal--open {
    display: block;
}
.do-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(2px);
}
.do-modal__card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, 92vw);
    max-height: 88vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.do-modal__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.do-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}
.do-modal__close {
    background: transparent;
    border: 0;
    color: #64748b;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px 8px;
    border-radius: 4px;
}
.do-modal__close:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.do-modal__body {
    padding: 16px 18px;
    overflow-y: auto;
}
.do-modal__body .form-group { margin-bottom: 12px; }
.do-modal__body .form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
    display: block;
}
.do-modal__ftr {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.do-modal__error {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fee2e2;
    color: #991b1b;
    font-size: .8125rem;
    border: 1px solid #fecaca;
}

/* ─── DGII Dashboard — tabs, date bar, compare ─────────────────────────── */

.dd-tabs {
    padding: 0 16px;
    margin: 10px 0 0;
}

.dd-tabs .nav-link i { color: #64748b; }
.dd-tabs .nav-link.active i { color: #2563eb; }

.dd-date-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin: 16px;
    margin-bottom: 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.dd-date-bar__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #475569;
    text-transform: uppercase;
}

.dd-date-bar__label i { color: #2563eb; font-size: .85rem; }

.dd-date-bar__inputs {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.dd-date-bar__group { min-width: 200px; flex: 0 1 220px; }

.dd-date-bar__actions {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
}

/* ── Compare ── */

.dd-compare {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.dd-compare-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
}

.dd-compare-card__hdr {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.dd-compare-card__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .96rem;
    font-weight: 700;
    color: #0f172a;
}

.dd-compare-card__title i { color: #2563eb; font-size: 1rem; }

.dd-compare-card__dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.dd-compare-card__dates .input-group { flex: 0 1 220px; min-width: 200px; }

.dd-compare-card__apply { margin-left: auto; }

.dd-compare-card__body {
    padding: 16px;
    min-height: 80px;
}

.dd-compare-loading,
.dd-compare-error,
.dd-compare-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 12px;
    font-size: .88rem;
    color: #64748b;
    text-align: center;
}

.dd-compare-loading i { color: #2563eb; }
.dd-compare-error   { color: #991b1b; }
.dd-compare-error i { color: #dc2626; }
.dd-compare-empty i { font-size: 1.5rem; color: #cbd5e1; }

.dd-compare-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.dd-compare-head__period {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dd-compare-head__period small {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
}

.dd-compare-head__period span {
    font-size: .88rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.dd-compare-head__period--2 { text-align: right; }

.dd-compare-head__sep {
    color: #94a3b8;
    font-size: 1.1rem;
    padding: 0 6px;
}

.dd-compare-metrics {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dd-compare-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.dd-compare-row__label {
    font-size: .82rem;
    font-weight: 700;
    color: #334155;
}

.dd-compare-row__v1,
.dd-compare-row__v2 {
    font-size: .88rem;
    font-weight: 600;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.dd-compare-row__v2 { color: #1e40af; }

.dd-compare-row__delta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dd-compare-row__delta small {
    font-weight: 600;
    opacity: .85;
}

.dd-compare-row__delta--up      { background: #dcfce7; color: #166534; }
.dd-compare-row__delta--down    { background: #fee2e2; color: #991b1b; }
.dd-compare-row__delta--neutral { background: #f1f5f9; color: #475569; }

/* ── Customers compare (dual column) ── */

.dd-compare-cust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .dd-compare-cust { grid-template-columns: 1fr; }
}

.dd-compare-cust-col {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.dd-compare-cust-col__hdr {
    padding: 8px 14px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #475569;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.dd-compare-cust-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid #f1f5f9;
}

.dd-compare-cust-row:first-of-type { border-top: none; }

.dd-compare-cust-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #e2e8f0;
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
}

.dd-compare-cust-name {
    font-size: .82rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-compare-cust-meta {
    display: flex;
    gap: 10px;
    font-size: .7rem;
    color: #94a3b8;
    margin-top: 2px;
}

.dd-compare-cust-amt {
    font-size: .84rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

/* ─── DGII Dashboard — fullscreen modal ─────────────────────────────────── */

.dd-fullscreen {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    z-index: 1080;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, background-color .22s ease, backdrop-filter .22s ease;
}

.dd-fullscreen--open {
    opacity: 1;
    pointer-events: auto;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(6px);
}

.dd-fullscreen__close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #f1f5f9;
    font-size: 1.15rem;
    cursor: pointer;
    z-index: 2;
    transition: background-color .15s, transform .15s;
}

.dd-fullscreen__close:hover {
    background: rgba(255, 255, 255, .18);
    transform: rotate(90deg);
}

.dd-fullscreen__host {
    width: min(1400px, 100%);
    max-height: calc(100vh - 64px);
    display: flex;
    transform: translateY(8px) scale(.98);
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
}

.dd-fullscreen--open .dd-fullscreen__host {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.dd-fullscreen__host > .dd-section--fullscreen {
    flex: 1;
    max-height: calc(100vh - 64px);
    grid-column: unset !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.dd-section--fullscreen .dd-section__body {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

.dd-section--fullscreen .dd-chart { padding: 20px; }
.dd-section--fullscreen .dd-chart--short { min-height: 40vh; }

.dd-section--fullscreen .dd-chart svg {
    width: 100%;
    height: auto;
    max-height: 70vh;
}

body.dd-fullscreen-lock { overflow: hidden; }

/* Ocultar el botón de fullscreen cuando la sección ya está en fullscreen. */
.dd-section--fullscreen .dd-btn-fullscreen { display: none; }

/* Estilo específico del botón fullscreen (variante del refresh). */
.dd-btn-fullscreen:hover { transform: none; }

/* ─── DGII Dashboard — Layout, sections, KPIs, charts ──────────────────── */

.dd-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    padding: 16px;
}

.dd-section {
    grid-column: span 6;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .2s;
}

.dd-section:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }

.dd-section--full { grid-column: span 12; }

@media (max-width: 1100px) {
    .dd-section, .dd-section--full { grid-column: span 12; }
}

.dd-section__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    gap: 12px;
}

.dd-section__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 700;
    color: #0f172a;
}

.dd-section__title i { color: #2563eb; font-size: 1rem; }

.dd-section__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dd-cd {
    font-size: .72rem;
    font-weight: 600;
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 3px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dd-cd--paused {
    color: #64748b;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.dd-btn-refresh {
    width: 28px;
    height: 28px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .82rem;
    transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}

.dd-btn-refresh:hover {
    background: #2563eb; color: #ffffff; border-color: #2563eb;
    transform: rotate(90deg);
}

.dd-section__body {
    padding: 16px;
    min-height: 140px;
    display: block;
}

/* ── Chart area ── */

.dd-chart {
    padding: 12px 12px 16px;
    overflow: hidden;
}

.dd-chart svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.dd-chart--short { min-height: 180px; }

.dd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 12px;
    color: #94a3b8;
    font-size: .85rem;
    text-align: center;
}

.dd-empty i { font-size: 1.8rem; color: #cbd5e1; }

/* ── KPI grid ── */

.dd-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.dd-kpi {
    position: relative;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}

.dd-kpi:hover { border-color: #cbd5e1; transform: translateY(-1px); }

.dd-kpi__icon {
    position: absolute;
    top: 12px; right: 12px;
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    background: #f1f5f9;
    color: #475569;
}

.dd-kpi__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 6px;
}

.dd-kpi__value {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    word-break: break-all;
}

.dd-kpi__sub {
    margin-top: 4px;
    font-size: .7rem;
    color: #94a3b8;
}

.dd-kpi--blue   .dd-kpi__icon { background: #eff6ff; color: #2563eb; }
.dd-kpi--green  .dd-kpi__icon { background: #f0fdf4; color: #16a34a; }
.dd-kpi--amber  .dd-kpi__icon { background: #fffbeb; color: #d97706; }
.dd-kpi--red    .dd-kpi__icon { background: #fef2f2; color: #dc2626; }
.dd-kpi--violet .dd-kpi__icon { background: #f5f3ff; color: #7c3aed; }
.dd-kpi--teal   .dd-kpi__icon { background: #f0fdfa; color: #0d9488; }
.dd-kpi--slate  .dd-kpi__icon { background: #f1f5f9; color: #475569; }

/* ── Donut legend ── */

.dd-legend {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 6px;
}

.dd-legend__row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    font-size: .78rem;
}

.dd-legend__swatch {
    width: 12px; height: 12px;
    border-radius: 3px;
}

.dd-legend__label {
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-legend__val {
    color: #0f172a;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ─── DGII Tokens — Environment grid & cards ───────────────────────────── */

.dt-env-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.dt-env-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .15s;
}

.dt-env-card:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.dt-env-card__header {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}

.dt-env-card__header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #94a3b8;
}

.dt-env-card--green  .dt-env-card__header::before { background: #16a34a; }
.dt-env-card--amber  .dt-env-card__header::before { background: #d97706; }
.dt-env-card--blue   .dt-env-card__header::before { background: #2563eb; }
.dt-env-card--slate  .dt-env-card__header::before { background: #64748b; }

.dt-env-card__ico {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: #f1f5f9;
    color: #475569;
}

.dt-env-card--green  .dt-env-card__ico { background: #f0fdf4; color: #16a34a; }
.dt-env-card--amber  .dt-env-card__ico { background: #fffbeb; color: #d97706; }
.dt-env-card--blue   .dt-env-card__ico { background: #eff6ff; color: #2563eb; }

.dt-env-card__titles { min-width: 0; }

.dt-env-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.dt-env-card__env {
    font-size: .72rem;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .04em;
    margin-top: 3px;
    text-transform: uppercase;
}

.dt-env-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .72rem;
    font-weight: 700;
}

.dt-env-card--green  .dt-env-card__badge { background: #dcfce7; color: #166534; }
.dt-env-card--amber  .dt-env-card__badge { background: #fef3c7; color: #92400e; }
.dt-env-card--blue   .dt-env-card__badge { background: #dbeafe; color: #1e40af; }

.dt-env-card__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.dt-env-card__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 12px;
    color: #94a3b8;
    font-size: .85rem;
    text-align: center;
}

.dt-env-card__empty i { font-size: 1.6rem; color: #cbd5e1; }

/* ─── DGII Tokens — Individual token row ────────────────────────────────── */

.dt-token {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .15s;
}

.dt-token:hover { border-color: #cbd5e1; }

.dt-token__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dt-token__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #475569;
}

.dt-token__label i { color: #64748b; }

.dt-token__actions { display: inline-flex; gap: 6px; }

.dt-token__btn {
    width: 28px;
    height: 28px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .82rem;
    transition: background-color .15s, color .15s, border-color .15s;
}

.dt-token__btn:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.dt-token__val {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    word-break: break-all;
    letter-spacing: .02em;
}

.dt-token__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.dt-token__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dt-token__meta-item span {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.dt-token__meta-item b {
    font-size: .82rem;
    color: #334155;
    font-weight: 600;
    word-break: break-all;
}

.dt-token__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-weight: 500 !important;
    font-size: .76rem !important;
    color: #475569 !important;
}

/* ─── Documents list — infinite scroll sentinel ─────────────────────────── */

.ed-scroll-sentinel {
    display: block;
    height: 1px;
    width: 100%;
    pointer-events: none;
}

/* ─── Documents list — skeleton rows (carga infinita) ───────────────────── */

.ed-skel-cell {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    transition: opacity .2s ease, transform .2s ease;
}

.ed-skel-bar {
    display: block;
    height: 12px;
    width: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 40%, #eef2f7 80%);
    background-size: 200% 100%;
    animation: ed-skel-shimmer 1.3s ease-in-out infinite;
}

.ed-skel-bar--pill   { height: 14px; width: 72px; border-radius: 999px; }
.ed-skel-bar--amount { height: 11px; width: 60%; }
.ed-skel-bar--date   { height: 10px; width: 50%; }
.ed-skel-bar--menu   { width: 18px; height: 18px; margin: 0 auto; border-radius: 4px; }

.ed-skel-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

@keyframes ed-skel-shimmer {
    0%   { background-position:  100% 0; }
    100% { background-position: -100% 0; }
}

.ed-row-skeleton--leave .ed-skel-cell {
    opacity: 0;
    transform: translateY(-4px);
}

/* ─── Documents list — new rows fade-in (tras paginación) ──────────────── */

.ed-row-enter {
    animation: ed-row-enter .36s cubic-bezier(.2, .7, .25, 1) both;
    will-change: opacity, transform;
}

@keyframes ed-row-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ─── Documents list — column widths & env cells ────────────────────────── */

#ed_table_container .table-col-7 .custom-header,
#ed_table_container .table-col-7 .custom-tbody {
    grid-template-columns: minmax(180px, 1.4fr) 1fr .9fr 1.1fr 1.1fr 1.1fr 70px;
}

.ed-env-cell { padding-top: 8px !important; padding-bottom: 8px !important; }

.ed-env-cell__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    line-height: 1.2;
    width: 100%;
}

.ed-env-cell__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
}

.ed-env-cell__pill i { font-size: .72rem; }

.ed-env-cell__pill--green { background: #dcfce7; color: #166534; }
.ed-env-cell__pill--amber { background: #fef3c7; color: #92400e; }
.ed-env-cell__pill--red   { background: #fee2e2; color: #991b1b; }

.ed-env-cell__amount {
    font-size: .78rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.ed-env-cell__date {
    font-size: .7rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.ed-env-cell__empty {
    display: inline-block;
    color: #cbd5e1;
    font-size: 1rem;
    font-weight: 700;
}

/* ─── Auto-refresh chip ─────────────────────────────────────────────────── */

.ed-auto-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    color: #475569;
    transition: background-color .2s, border-color .2s, color .2s;
}

.ed-auto-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
    position: relative;
}

.ed-auto-chip__text {
    white-space: nowrap;
}

.ed-auto-chip__cd {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    font-size: .7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #334155;
}

.ed-auto-chip--active {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.ed-auto-chip--active .ed-auto-chip__dot {
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .55);
    animation: ed-auto-pulse 2s infinite;
}

.ed-auto-chip--active .ed-auto-chip__cd {
    background: #ffffff;
    border-color: #bbf7d0;
    color: #166534;
}

.ed-auto-chip--paused {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
}

.ed-auto-chip--paused .ed-auto-chip__dot {
    background: #94a3b8;
    animation: none;
}

@keyframes ed-auto-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(22, 163, 74, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(22, 163, 74, 0);   }
}

/* ─── Tab count badge ───────────────────────────────────────────────────── */

.ed-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    margin-left: 6px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color .2s, color .2s;
}

.nav-link.active .ed-tab-count {
    background: #2563eb;
    color: #ffffff;
}

.nav-link.disabled .ed-tab-count {
    background: #f1f5f9;
    color: #94a3b8;
}

/* ─── Bento grid system ─────────────────────────────────────────────────── */

.ed-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.ed-bento__tile {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
    transition: border-color .2s;
}

.ed-bento__tile:hover { border-color: #cbd5e1; }

.ed-bento__tile--span2 { grid-column: span 2; }
.ed-bento__tile--span3 { grid-column: span 3; }
.ed-bento__tile--span4 { grid-column: span 4; }

.ed-bento__tile--highlight {
    background: linear-gradient(135deg, #f0f7ff 0%, #f8fafc 100%);
    border-color: #bfdbfe;
}

.ed-bento__tile--dark {
    background: #0f172a;
    border-color: #1e293b;
}

.ed-bento__tile--dark .ed-bento__label { color: #64748b; }
.ed-bento__tile--dark .ed-bento__val   { color: #f1f5f9; }

.ed-bento__action {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, .25);
    background: rgba(255, 255, 255, .06);
    color: #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    font-size: .82rem;
    transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}

.ed-bento__action:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    transform: translateY(-1px);
}

.ed-bento__tile:not(.ed-bento__tile--dark) .ed-bento__action {
    background: #ffffff;
    color: #475569;
    border-color: #e2e8f0;
}

.ed-bento__tile:not(.ed-bento__tile--dark) .ed-bento__action:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.ed-bento__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: .8rem;
    margin-bottom: 8px;
}

.ed-bento__icon--blue   { background: #eff6ff; color: #2563eb; }
.ed-bento__icon--green  { background: #f0fdf4; color: #16a34a; }
.ed-bento__icon--amber  { background: #fffbeb; color: #d97706; }
.ed-bento__icon--slate  { background: #f1f5f9; color: #475569; }
.ed-bento__icon--red    { background: #fef2f2; color: #dc2626; }
.ed-bento__icon--white  { background: rgba(255,255,255,.1); color: #94a3b8; }

.ed-bento__label {
    font-size: .65rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1;
}

.ed-bento__val {
    font-size: .88rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
}

.ed-bento__val--lg {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.3px;
}

.ed-bento__val--mono {
    font-family: 'Courier New', monospace;
    font-size: .78rem;
    letter-spacing: .4px;
    word-break: break-all;
}

.ed-bento__val--money {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.3px;
}

.ed-bento__val--accent  { color: #2563eb; }
.ed-bento__val--green   { color: #16a34a; }
.ed-bento__val--red     { color: #dc2626; }

.ed-bento__sub {
    font-size: .7rem;
    color: #94a3b8;
    margin-top: 2px;
}

/* Inline pair: label + value side by side */
.ed-bento__pair {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.ed-bento__pair + .ed-bento__pair { margin-top: 4px; }

.ed-bento__pair-label {
    font-size: .7rem;
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
}

.ed-bento__pair-val {
    font-size: .82rem;
    color: #334155;
    font-weight: 600;
}

/* ─── Refinancing checkbox ──────────────────────────────────────────────── */

.lr-refinance-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1a73e8;
}

.ld-methods-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    overflow: visible !important;
    min-width: 120px;
}

.ld-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eef2f7;
    border: 1px solid #dde3ea;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    color: #3a4a5a;
    white-space: nowrap;
}

.ld-method-badge i {
    color: #6a7a8a;
    font-size: 0.7rem;
}

.ld-method-badge--order {
    background: #fff8e1;
    border-color: #ffe082;
    color: #e65100;
}

.ld-method-badge--order i {
    color: #f9a825;
}

/* ─── Loan Type ──────────────────────────────────────────────────────────── */

/* Toggle Switch */
.lt-switch {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    margin: 0;
    user-select: none;
}
.lt-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.lt-switch__track {
    position: relative;
    width: 40px;
    height: 22px;
    background: #ced4da;
    border-radius: 11px;
    transition: background .2s;
    flex-shrink: 0;
}
.lt-switch__input:checked + .lt-switch__track {
    background: #28a745;
}
.lt-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: left .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.lt-switch__input:checked + .lt-switch__track .lt-switch__thumb {
    left: 21px;
}
.lt-switch__label {
    font-size: .875rem;
    color: #4a5568;
}

/* Conditional sub-section */
.lt-conditional {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: .75rem;
    margin-top: .75rem;
}

/* Toggle row layout */
.lt-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
}
.lt-toggle-cell {
    display: flex;
    align-items: center;
    min-width: 200px;
}

/* Accounting input */
.lt-acct-label {
    font-size: .78rem;
    color: #6c757d;
    margin-bottom: .3rem;
    display: block;
}

/* Calculator modal */
.lt-calc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.lt-calc-modal {
    background: #fff;
    border-radius: 10px;
    width: 95%;
    max-width: 1100px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,.3);
}
.lt-calc-modal__header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.lt-calc-modal__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}
.lt-calc-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

/* Calculator cards */
.lt-calc-cards-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.lt-calc-card-full {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    transition: border-color .15s, box-shadow .15s;
    position: relative;
}
.lt-calc-card-full:not(.is-assigned) {
    cursor: pointer;
}
.lt-calc-card-full:not(.is-assigned):hover {
    border-color: #4299e1;
    box-shadow: 0 4px 14px rgba(66,153,225,.18);
}
.lt-calc-card-full.is-assigned {
    border-color: #28a745;
    background: #f0fff4;
    cursor: default;
}
.lt-calc-card-full.is-pending {
    border-color: #f6ad55;
    background: #fffbf0;
}
.lt-calc-card-full__header {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.lt-calc-card-full__info { flex: 1; }
.lt-calc-card__check {
    color: #28a745;
    font-size: 1rem;
    display: none;
    margin-top: .15rem;
    flex-shrink: 0;
}
.lt-calc-card-full.is-assigned .lt-calc-card__check { display: inline; }
.lt-calc-card__pending-icon {
    color: #ed8936;
    font-size: 1rem;
    display: none;
    margin-top: .15rem;
    flex-shrink: 0;
}
.lt-calc-card-full.is-pending .lt-calc-card__pending-icon { display: inline; }
.lt-calc-card__name {
    font-weight: 700;
    font-size: .95rem;
    color: #1a202c;
    margin-bottom: .2rem;
}
.lt-calc-card__desc {
    font-size: .82rem;
    color: #718096;
    line-height: 1.4;
    margin-bottom: .4rem;
}
.lt-calc-card__badges { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .2rem; }

/* Calculator param list */
.lt-cparam-block {
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid #e9ecef;
}
.lt-cparam-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    margin-bottom: .4rem;
}
.lt-cparam-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.lt-cparam-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .2rem;
    font-size: .82rem;
    color: #4a5568;
}
.lt-cparam-bullet {
    color: #a0aec0;
    font-size: .6rem;
    flex-shrink: 0;
    margin-right: .1rem;
}
.lt-cparam-name { font-weight: 500; }
.lt-cparam-desc {
    display: block;
    width: 100%;
    font-size: .75rem;
    color: #718096;
    margin-left: .9rem;
}

/* Badges */
.lt-badge {
    font-size: .65rem;
    font-weight: 600;
    padding: .15rem .45rem;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.lt-badge--blue   { background: #ebf8ff; color: #2b6cb0; }
.lt-badge--green  { background: #f0fff4; color: #276749; }
.lt-badge--red    { background: #fff5f5; color: #9b2c2c; }
.lt-badge--purple { background: #faf5ff; color: #553c9a; }
.lt-badge--orange { background: #fffbeb; color: #92400e; }

/* Disbursement type list */
.lt-disb-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .5rem;
}
.lt-disb-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .9rem;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    user-select: none;
    margin: 0;
}
.lt-disb-item:hover {
    background: #f0f7ff;
    border-color: #bee3f8;
}
.lt-disb-item__checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #4299e1;
}
.lt-disb-item__label {
    font-size: .875rem;
    font-weight: 500;
    color: #2d3748;
}

/* Assigned calculators list */
.lt-assignment-block {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: .75rem;
    overflow: hidden;
}
.lt-assignment-block:last-child { margin-bottom: 0; }
.lt-assignment-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    background: #f8f9fa;
}
.lt-assignment-order {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #4299e1;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lt-assignment-name { font-weight: 600; font-size: .875rem; flex: 1; }
.lt-assignment-meta { font-size: .75rem; color: #718096; }
.lt-assignment-params {
    padding: .9rem 1rem 1rem;
    border-top: 1px solid #e9ecef;
    background: #fff;
}
.lt-aparam-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    margin-bottom: .75rem;
}

/* Pending assignment */
.lt-assignment-block--pending {
    border-color: #f6ad55;
}
.lt-assignment-item--pending {
    background: #fffbf0;
}
.lt-assignment-order--pending {
    background: #ed8936;
}
.lt-assignment-delete {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #868e96;
    font-size: .7rem;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.lt-assignment-delete:hover {
    color: #dc3545;
    border-color: #dc3545;
    background: rgba(220, 53, 69, .05);
}

.lt-assignment-save-row {
    padding: .6rem 1rem .75rem;
    background: #fffbf0;
    border-top: 1px solid #f6ad55;
}

/* Calculator tab: narrower centered container */
#lt_tab_calc > .p-3 {
    max-width: 80%;
    margin: 0 auto;
}

#lt_tab_calc .mt-3.mb-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#lt_tab_calc .mt-3.mb-4 > div[id^="lt_calc_section_"] {
    width: 100%;
}

/* Type group headers */
.lt-type-group { margin-bottom: 1.25rem; }
.lt-type-group:last-child { margin-bottom: 0; }
.lt-type-group__header {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .35rem .75rem;
    border-radius: 5px;
    margin-bottom: .5rem;
}
.lt-type-group__header--blue   { background: #ebf8ff; color: #2b6cb0; }
.lt-type-group__header--yellow { background: #fffbeb; color: #92400e; }
.lt-type-group__header--green  { background: #f0fff4; color: #276749; }
.lt-type-group__header--purple { background: #faf5ff; color: #553c9a; }
.lt-type-group__header--gray   { background: #f7fafc; color: #4a5568; }

/* ─── Collection Calendar ────────────────────────────────────────────────── */

/* ─── Electronic Transfer Info Bar ────────────────────────────────────────── */

.elt-info-bar {
    background: #f8f9fb;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: .75rem;
}

.elt-info-bar__desc {
    font-size: .85rem;
    font-weight: 600;
    color: #2d3748;
}

.elt-info-bar__total {
    font-size: .82rem;
    font-weight: 600;
    color: #4a5568;
}

.cc-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e9ecef;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    overflow: hidden;
}

.cc-calendar__header {
    background: #f1f3f5;
    padding: 8px 4px;
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
}

.cc-calendar__day {
    background: #fff;
    min-height: 90px;
    padding: 6px 8px;
    cursor: pointer;
    transition: background .12s;
    position: relative;
}

.cc-calendar__day:hover {
    background: #f0f7ff;
}

.cc-calendar__day--other {
    background: #f8f9fa;
    color: #adb5bd;
    cursor: default;
}

.cc-calendar__day--other:hover {
    background: #f8f9fa;
}

.cc-calendar__day--today {
    border: 2px solid #1a73e8;
}

.cc-calendar__day-number {
    font-size: .78rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 4px;
}

.cc-calendar__day--other .cc-calendar__day-number {
    color: #ced4da;
}

.cc-calendar__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 2px;
}

.cc-calendar__dot--created  { background: #4299e1; }
.cc-calendar__dot--pending  { background: #ecc94b; }
.cc-calendar__dot--paid     { background: #48bb78; }

.cc-calendar__summary {
    font-size: .68rem;
    color: #718096;
    line-height: 1.3;
}

.cc-calendar__badge {
    display: inline-block;
    font-size: .62rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    margin-top: 2px;
}

.cc-calendar__badge--amount {
    background: #ebf8ff;
    color: #2b6cb0;
}

/* Day detail cards */
.cc-day-card {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: .75rem 1rem;
    margin-bottom: .75rem;
    background: #fff;
}

.cc-day-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.cc-day-card__title {
    font-weight: 600;
    font-size: .85rem;
    color: #2d3748;
}

.cc-day-card__row {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: #4a5568;
    padding: 2px 0;
}

.cc-day-card__row--total {
    font-weight: 700;
    border-top: 1px solid #e9ecef;
    padding-top: 4px;
    margin-top: 4px;
}

/* ─── Config Loan & Saving ───────────────────────────────────────────────────── */

.cfg-section-card {
    border: 1px solid #e4e7ea;
    border-radius: 6px;
    background: #fff;
    padding: 1.25rem;
}

.cfg-section-card .content-table-responsive {
    min-height: auto;
    padding: 0;
}

.cfg-section-card--disabled {
    position: relative;
    pointer-events: none;
    user-select: none;
}

.cfg-section-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, .8);
    border-radius: 6px;
    color: #6c757d;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .3px;
}

.cfg-section-overlay i {
    font-size: 1.6rem;
}

.cfg-section-card__add {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.cfg-section-card__add select2-my {
    flex: 1;
}

.cfg-item {
    padding: .35rem .5rem;
    border-radius: 4px;
    margin-bottom: .3rem;
    background: #f8f9fa;
}

.cfg-item__badge {
    font-size: .8rem;
    padding: .3em .7em;
}

.cfg-item + .cfg-item {
    margin-top: .25rem;
}

.cfg-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .65rem;
    border-radius: 4px;
    background: #f8f9fa;
    margin-bottom: .35rem;
    transition: background .15s;
}

.cfg-toggle-row:hover {
    background: #e9ecef;
}

.cfg-toggle-row__label {
    font-size: .85rem;
    color: #2d3748;
}

/* ─── Company Configuration — Custom Calculators ─────────────────────────────── */

/* Steps bar */
.ccalc-steps-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: .75rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e4e7ea;
}

.ccalc-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #adb5bd;
    font-size: .85rem;
    padding: .3rem .9rem;
    border-radius: 20px;
    transition: background .2s, color .2s;
    user-select: none;
}

.ccalc-step.active    { background: #d4edda; color: #155724; font-weight: 600; }
.ccalc-step.completed { color: #28a745; cursor: pointer; }
.ccalc-step.completed:hover { background: #f0fdf4; }

.ccalc-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: currentColor;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.ccalc-step.active    .ccalc-step__num { background: #155724; }
.ccalc-step.completed .ccalc-step__num { background: #28a745; }

.ccalc-step + .ccalc-step::before {
    content: '\203A';
    margin-right: .9rem;
    color: #ced4da;
    font-size: 1.1rem;
}

/* Header summary strip */
.ccalc-summary-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    background: #eef2f7;
    border: 1px solid #c8d6e5;
    border-radius: 6px;
    padding: .45rem 1rem;
    font-size: .8rem;
    margin-bottom: 1.5rem;
}

.ccalc-summary-item {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.ccalc-summary-label {
    color: #6c757d;
    font-weight: 500;
}

.ccalc-summary-value {
    color: #1a202c;
    font-weight: 700;
}

.ccalc-summary-sep {
    color: #ced4da;
    font-weight: 300;
}

.ccalc-summary-badge {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
}

.ccalc-summary-badge--green { background: #d4edda; color: #155724; }
.ccalc-summary-badge--red   { background: #f8d7da; color: #721c24; }

/* Param rows (step 2) */
.ccalc-param-row { background: #f8f9fa; border-radius: 4px; }
.ccalc-param-row:hover { background: #e9ecef; }
.ccalc-param-row--editing { background: #fff8e1; border: 1px solid #ffe082; }

/* Section title (used dynamically in JS) */
.ccalc-section-title {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    margin-bottom: 1rem;
}

/* Form section separator */
.ccalc-form-section {
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: 1.25rem;
}

/* Editor container */
#cc_editor_container {
    height: 384px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}

/* Editor toolbar */
.ccalc-editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.ccalc-editor-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.ccalc-editor-label i { color: #718096; }

/* Param chips strip (above editor) */
#cc_params_chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    min-height: 28px;
    margin-bottom: .5rem;
}

#cc_params_chips:empty { display: none; }

/* Chip base */
.ccalc-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .6rem;
    border-radius: 20px;
    font-size: .75rem;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, transform .1s, box-shadow .15s;
    line-height: 1.3;
    white-space: nowrap;
    background: none;
}

.ccalc-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
}

.ccalc-chip:active { transform: translateY(0); }

.ccalc-chip--param {
    background: #e3f8f5;
    border-color: #81e6d9;
    color: #234e52;
}

.ccalc-chip--param:hover { background: #b2f5ea; border-color: #4fd1c5; }

.ccalc-chip__name  { font-weight: 600; }

.ccalc-chip__type {
    font-size: .65rem;
    background: rgba(0, 0, 0, .08);
    border-radius: 10px;
    padding: .1rem .35rem;
    opacity: .8;
}

.ccalc-chips-empty-hint {
    font-size: .75rem;
    color: #adb5bd;
    font-style: italic;
}

/* Test inputs below editor */
#cc_dynamic_inputs { margin-top: .75rem; }

.ccalc-inputs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .5rem .75rem;
}

.ccalc-input-cell label {
    font-size: .75rem;
    color: #4a5568;
    margin-bottom: .25rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.ccalc-input-key {
    font-size: .68rem;
    font-family: monospace;
    background: #edf2f7;
    border-radius: 4px;
    padding: .1rem .3rem;
    color: #4a5568;
}

/* Action bar */
.ccalc-action-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
}

#cc_test_result { font-family: monospace; }

/* Context panel (right) */
.ccalc-context-panel {
    background: #1e2433;
    border-radius: 8px;
    border: 1px solid #2d3748;
    height: 100%;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ccalc-context-panel__header {
    padding: .6rem .9rem;
    background: #2d3748;
    border-bottom: 1px solid #4a5568;
    flex-shrink: 0;
}

.ccalc-context-panel__title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #a0aec0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.ccalc-context-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: .5rem .25rem;
}

.ccalc-context-panel__body::-webkit-scrollbar       { width: 5px; }
.ccalc-context-panel__body::-webkit-scrollbar-track  { background: #1e2433; }
.ccalc-context-panel__body::-webkit-scrollbar-thumb  { background: #4a5568; border-radius: 4px; }

.ccalc-ctx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .65rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background .12s;
    gap: .5rem;
}

.ccalc-ctx-row:hover { background: #2d3748; }
.ccalc-ctx-row:hover .ccalc-ctx-key { color: #63b3ed; }

.ccalc-ctx-key {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .78rem;
    color: #90cdf4;
    white-space: nowrap;
    transition: color .12s;
}

.ccalc-ctx-eq {
    font-family: monospace;
    font-size: .75rem;
    color: #4a5568;
    flex-shrink: 0;
}

.ccalc-ctx-val {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .78rem;
    color: #68d391;
    text-align: right;
    white-space: nowrap;
}

.ccalc-ctx-insert-hint {
    display: none;
    font-size: .65rem;
    color: #4a5568;
    margin-left: .5rem;
}

.ccalc-ctx-row:hover .ccalc-ctx-insert-hint { display: inline; }

.ccalc-ctx-group-label {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #718096;
    padding: .5rem .65rem .2rem;
}

/* ── Custom Filter Global (Notion-style pill bar) ────────────────────────── */
.cgf-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0 10px;
    min-height: 38px;
}

.cgf-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Add-filter button */
.cgf-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: #94a3b8;
    background: none;
    border: 1px dashed transparent;
    padding: 3px 8px;
    border-radius: 20px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    line-height: 1.4;
}
.cgf-add-btn:hover {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

/* Clear-all button */
.cgf-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: #94a3b8;
    background: none;
    border: none;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1.4;
}
.cgf-clear-btn:hover { color: #dc3545; background: #fff5f5; }

/* Active filter pill */
.cgf-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    background: rgba(25,118,210,.07);
    border: 1px solid rgba(25,118,210,.22);
    color: #1565c0;
    border-radius: 20px;
    padding: 3px 6px 3px 9px;
    cursor: pointer;
    transition: background .15s;
    max-width: 260px;
    user-select: none;
}
.cgf-pill:hover { background: rgba(25,118,210,.13); }
.cgf-pill-icon { font-size: .7rem; color: #1976d2; flex-shrink: 0; }
.cgf-pill-label { font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.cgf-pill-sep { color: rgba(25,118,210,.45); font-size: .72rem; }
.cgf-pill-value {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cgf-pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(21,101,192,.55);
    padding: 0;
    margin-left: 2px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.cgf-pill-remove:hover { background: rgba(25,118,210,.18); color: #1565c0; }
.cgf-pill-empty {
    background: rgba(25,118,210,.03);
    border-style: dashed;
    border-color: rgba(25,118,210,.28);
}
.cgf-pill-empty:hover { background: rgba(25,118,210,.08); }
.cgf-pill-placeholder { color: rgba(21,101,192,.45); font-style: italic; }

/* Dropdown panel */
@keyframes cgf-dd-in {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.cgf-dropdown {
    position: fixed;
    z-index: 100001;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
    min-width: 220px;
    max-width: 310px;
    overflow: hidden;
    animation: cgf-dd-in .16s cubic-bezier(.22,.68,0,1.2) both;
    transform-origin: top left;
}
/* Off-screen sentinel — applied while measuring natural dimensions before positioning */
.cgf-dropdown--measuring { top: -9999px; left: -9999px; }
/* Lowered z-index while the global calendar modal (z-index 9999) is open above the dropdown */
.cgf-dropdown--calendar-open { z-index: 9998; }
.cgf-dd-header {
    padding: 10px 14px 8px;
    font-size: .69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #94a3b8;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
}
.cgf-dd-field-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    font-size: .84rem;
    color: #334155;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.cgf-dd-field-item:hover { background: #f0f7ff; color: #1565c0; }
.cgf-dd-field-item:hover i { color: #1976d2; }
.cgf-dd-field-item i { font-size: .76rem; color: #b0bec5; width: 14px; flex-shrink: 0; transition: color .12s; }

/* Search inside dropdown */
.cgf-dd-search {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
}
.cgf-dd-search input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 9px;
    font-size: .82rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.cgf-dd-search input:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25,118,210,.1);
}

/* Options list */
.cgf-dd-options {
    max-height: 210px;
    overflow-y: auto;
    padding: 4px 0;
}
.cgf-dd-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: .83rem;
    color: #334155;
    cursor: pointer;
    transition: background .1s, color .1s;
}
.cgf-dd-option:hover { background: #f0f7ff; color: #1565c0; }
.cgf-dd-option input[type="checkbox"] { margin: 0; flex-shrink: 0; cursor: pointer; }
.cgf-dd-option.cgf-dd-option-selected { background: #eff6ff; color: #1976d2; font-weight: 600; }

/* Text / date input editor */
.cgf-dd-text-input {
    padding: 12px 14px;
}
.cgf-dd-text-input .input-group { flex-wrap: nowrap; }

/* Footer with action buttons */
.cgf-dd-footer {
    padding: 8px 12px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    background: #fafbfc;
}
.cgf-dd-apply {
    font-size: .78rem;
    padding: 5px 14px;
    border-radius: 6px;
    border: none;
    background: #1976d2;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s, box-shadow .15s;
}
.cgf-dd-apply:hover {
    background: #1565c0;
    box-shadow: 0 2px 8px rgba(25,118,210,.3);
}
.cgf-dd-remove {
    font-size: .78rem;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #94a3b8;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.cgf-dd-remove:hover { background: #fff5f5; border-color: #fca5a5; color: #dc3545; }

/* Loading state */
.cgf-dd-loading {
    padding: 18px 14px;
    text-align: center;
    font-size: .8rem;
    color: #94a3b8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONSOLIDATED MODULE STYLES
   Extracted from www/core/modules/ and inline HBS <style> blocks
═══════════════════════════════════════════════════════════════════════════ */

/* ── bulk-post.css ─────────────────────────────────────────────────────────── */

#bk_table_container .custom-tbody .custom-row { cursor: pointer; }
#bk_table_container .custom-tbody .custom-row.bk-row-unbalanced { background-color: #fff8f0; }
#bk_table_container .custom-tbody .custom-row.bk-row-unbalanced:hover { background-color: #ffeede; }

.bk-badge-ok {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.72rem; font-weight: 600; color: #1a7a4a;
    background: #e6f7ee; border-radius: 20px; padding: 2px 8px; white-space: nowrap;
}
.bk-badge-warn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.72rem; font-weight: 600; color: #b95c00;
    background: #fff1e0; border-radius: 20px; padding: 2px 8px; white-space: nowrap;
}
.bk-selection-panel {
    background: #f4f6fb; border: 1px solid #dde3f0; border-radius: 8px;
    padding: 8px 14px 10px; margin-bottom: 10px;
}
.bk-selection-label {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: #9aa3b8; margin-bottom: 6px; display: block;
}
.bk-tags-wrap { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.bk-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.78rem; padding: 3px 8px; border-radius: 20px;
    background: #1b55e2; color: #fff; font-weight: 500; white-space: nowrap;
}
.bk-tag i { cursor: pointer; opacity: 0.75; font-size: 0.7rem; transition: opacity 0.15s; }
.bk-tag i:hover { opacity: 1; }
@keyframes bk-pop-in {
    0%   { transform: scale(0.4); opacity: 0; }
    65%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}
.bk-tag-enter { animation: bk-pop-in 0.22s ease forwards; }

/* ── credit-note.css ───────────────────────────────────────────────────────── */

#cn_second_view > .panel-hdr { margin-bottom: 10px; }

.cn-id-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; background: #f0f4ff;
    border: 0.5px solid #d6e0f5; border-radius: 6px;
    margin-bottom: 16px; font-size: 0.9rem;
}
.cn-id-bar .cn-id-label { color: #6c757d; font-weight: 500; }
.cn-id-bar .cn-id-number { font-weight: 700; color: #1a73e8; font-size: 1rem; }
.cn-id-bar .cn-id-seq {
    font-size: 0.78rem; font-weight: 500; color: #8c919a;
    background: #e9ecef; padding: 2px 8px; border-radius: 4px;
}
.cn-section-header {
    display: flex; align-items: center; background: #f8f9fa;
    border-left: 3px solid #1a73e8; border-radius: 0 4px 4px 0;
    padding: 8px 14px; margin-bottom: 16px; font-weight: 600;
    font-size: 0.85rem; color: #343a40; letter-spacing: 0.02em; text-transform: uppercase;
}
.cn-section-header i { font-size: 1rem; color: #1a73e8; margin-right: 8px; }
.cn-form-group {
    border: 1px solid #e9ecef; border-radius: 6px;
    padding: 16px 20px 8px; margin-bottom: 20px; background: #ffffff;
}
.cn-section { border: 1px solid #e9ecef; border-radius: 6px; margin-bottom: 16px; overflow: hidden; }
.cn-section > .cn-section-header { border-radius: 0; margin-bottom: 0; border-left: 3px solid #1a73e8; }
.cn-section > .cn-form-group { border: none; border-radius: 0; margin-bottom: 0; }
.cn-supplier-info {
    display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px;
    padding: 6px 10px; background: #f7f8fa; border: 1px solid #eaedf1;
    border-radius: 6px; font-size: 0.72rem; min-height: 30px;
}
.cn-info-empty { color: #c4c8cc; font-style: italic; }
.cn-supplier-info .cn-si-item { display: flex; align-items: center; gap: 4px; }
.cn-supplier-info .cn-si-item i { color: #adb5bd; font-size: 0.72rem; width: 12px; text-align: center; }
.cn-supplier-info .cn-si-label { color: #8c919a; }
.cn-supplier-info .cn-si-value { color: #1a1d21; font-weight: 600; }
.cn-supplier-info .cn-si-badge {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
}
.cn-si-badge-active   { background: #eefbf0; color: #1d8939; }
.cn-si-badge-inactive { background: #fef1f1; color: #dc3545; }
.cn-concept-info {
    display: flex; flex-direction: column; gap: 3px; margin-top: 6px;
    padding: 6px 10px; background: #f0f4ff; border: 1px solid #d6e0f5;
    border-radius: 6px; font-size: 0.72rem; min-height: 30px;
}
.cn-ci-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.cn-concept-info .cn-ci-item { display: flex; align-items: center; gap: 4px; }
.cn-concept-info .cn-ci-item i { color: #6c8ebf; font-size: 0.72rem; width: 12px; text-align: center; }
.cn-concept-info .cn-ci-label { color: #8c919a; }
.cn-concept-info .cn-ci-value { color: #1a1d21; font-weight: 600; }
.cn-doc-info {
    display: flex; flex-direction: column; gap: 3px; margin-top: 6px;
    padding: 6px 10px; background: #fffbf0; border: 1px solid #f0e6c8;
    border-radius: 6px; font-size: 0.72rem; min-height: 30px;
}
.cn-di-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.cn-doc-info .cn-di-item { display: flex; align-items: center; gap: 4px; }
.cn-doc-info .cn-di-item i { color: #d4a017; font-size: 0.72rem; width: 12px; text-align: center; }
.cn-doc-info .cn-di-label { color: #8c919a; }
.cn-doc-info .cn-di-value { color: #1a1d21; font-weight: 600; }
.cn-doc-info .cn-di-value-red { color: #dc3545; font-weight: 700; }
.cn-summary-panel { border: 1px solid #e9ecef; border-radius: 8px; background: #fff; margin-top: 16px; overflow: hidden; }
.cn-summary-panel-header {
    display: flex; align-items: center; padding: 10px 20px; font-weight: 600;
    font-size: 0.78rem; color: #343a40; letter-spacing: 0.02em; text-transform: uppercase;
    background: #f8f9fa; border-bottom: 1px solid #e9ecef; border-left: 3px solid #1a73e8;
}
.cn-summary-panel-header i { font-size: 0.9rem; color: #1a73e8; margin-right: 8px; }
.cn-footer-row { display: flex; align-items: stretch; gap: 0; }
.cn-footer-col { min-width: 0; }
.cn-footer-journal { flex: 7; border-right: 1px solid #dee2e6; margin-right: 12px; display: flex; flex-direction: column; }
.cn-footer-journal .cn-journal-body { flex: 1; display: flex; flex-direction: column; }
.cn-footer-journal .cn-journal-table { flex: 1; }
.cn-footer-journal .cn-journal-table tbody { vertical-align: bottom; }
.cn-footer-totals { flex: 3; display: flex; flex-direction: column; }
.cn-footer-col-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8c919a; padding: 10px 14px 6px; }
.cn-footer-totals-body { display: flex; flex-direction: column; flex: 1; padding: 6px 20px 0; }
.cn-footer-totals-body .cn-summary-total {
    margin-top: auto; background: #fafbfc; padding: 8px 20px;
    margin-left: -20px; margin-right: -20px; border-top: 2px solid #dee2e6; border-bottom: none !important;
}
.cn-journal-body { padding: 0; }
.cn-journal-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.cn-journal-table thead th {
    padding: 6px 14px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: #8c919a; background: #fafbfc; border-bottom: 1px solid #e9ecef;
}
.cn-journal-table tbody td { padding: 7px 14px; vertical-align: middle; border-bottom: 1px solid #f3f4f6; }
.cn-journal-table tbody tr:last-child td { border-bottom: none; }
.cn-journal-account { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.74rem; color: #495057; white-space: nowrap; }
.cn-journal-desc { color: #6c757d; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-journal-amount { font-weight: 600; text-align: right; white-space: nowrap; }
.cn-journal-table tfoot td { padding: 8px 14px; font-weight: 700; font-size: 0.8rem; border-top: 2px solid #dee2e6; background: #fafbfc; }
.cn-summary-col { display: flex; flex-direction: column; }
.cn-summary-section-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #adb5bd; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid #e9ecef; }
.cn-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 0.8rem; border-bottom: 1px dashed #f0f1f3; }
.cn-summary-row:last-child { border-bottom: none; }
.cn-summary-row .label { color: #8c919a; font-weight: 500; }
.cn-summary-row .value { font-weight: 600; color: #1a1d21; font-size: 0.82rem; }
.cn-summary-col .cn-summary-total { margin-top: auto; }
.cn-summary-total { border-bottom: none !important; border-top: 2px solid #dee2e6; padding-top: 8px; }
.cn-summary-total .label { font-weight: 700; color: #1a1d21; }
.cn-summary-total .value { font-weight: 800; font-size: 0.92rem; color: #1a1d21; }
.cn-balance-text { display: inline-flex; align-items: center; gap: 4px; padding: 6px 16px; border-radius: 20px; font-size: 0.76rem; font-weight: 600; }
.cn-balance-ok    { background: #eefbf0; color: #1d8939; }
.cn-balance-err   { background: #fef1f1; color: #dc3545; }
.cn-balance-empty { background: #f7f8fa; color: #adb5bd; }
.cn-summary-item { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.cn-summary-label { font-size: 0.75rem; color: #6c757d; line-height: 1; }
.cn-summary-value { font-size: 0.95rem; font-weight: 600; color: #343a40; line-height: 1.2; }
.cn-amounts-row { display: flex; align-items: flex-start; gap: 0; }
.cn-amount-cell { flex: 1; min-width: 0; }
.cn-amount-cell .form-label { font-size: 0.75rem; margin-bottom: 4px; }
.cn-op { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 31px; margin-top: 22px; font-size: 1.1rem; font-weight: 700; color: #1a73e8; }
.cn-op-minus { color: #dc3545; }
.cn-op-equals { color: #495057; font-size: 1.2rem; }
.cn-amount-total { background: #f8faf8; border: 1px solid #d4edda; border-radius: 6px; padding: 6px 10px 4px; }
.cn-total-display { font-size: 1.05rem; font-weight: 700; color: #28a745; padding: 4px 0; line-height: 1.5; text-align: right; }
.cn-balance-ref { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 0; }
.cn-balance-ref-label { font-size: 0.65rem; color: #adb5bd; line-height: 1; }
.cn-balance-ref-value { font-size: 0.78rem; font-weight: 600; color: #6c757d; }
.cn-readonly-auto,
input.cn-readonly-auto:disabled,
textarea.cn-readonly-auto:disabled { background-color: #f0f4ff !important; color: #495057; cursor: default; }
@keyframes cn-autofill-flash {
    0%   { background-color: #d4edff; }
    100% { background-color: #f0f4ff; }
}
.cn-autofilled { animation: cn-autofill-flash 0.6s ease-out forwards; }

/* ── document-payable.css ──────────────────────────────────────────────────── */

.dp-section-header {
    display: flex; align-items: center; background: #f8f9fa;
    border-left: 3px solid #1a73e8; padding: 8px 14px; margin: 0;
    font-weight: 600; font-size: 0.78rem; color: #343a40;
    letter-spacing: 0.02em; text-transform: uppercase;
    border-bottom: 1px solid #e9ecef; border-radius: 6px 6px 0 0;
}
.dp-section-header i { font-size: 0.9rem; color: #1a73e8; margin-right: 8px; }
.dp-form-group { border: 1px solid #e9ecef; border-top: none; border-radius: 0 0 6px 6px; padding: 14px 18px 8px; margin-bottom: 0; background: #ffffff; }
.dp-summary-panel { border: 1px solid #e9ecef; border-radius: 8px; background: #fff; margin-top: 16px; overflow: hidden; }
.dp-summary-header {
    display: flex; align-items: center; padding: 10px 20px; font-weight: 600;
    font-size: 0.78rem; color: #343a40; letter-spacing: 0.02em; text-transform: uppercase;
    background: #f8f9fa; border-bottom: 1px solid #e9ecef; border-left: 3px solid #1a73e8;
}
.dp-summary-header i { font-size: 0.9rem; color: #1a73e8; margin-right: 8px; }
.dp-summary-panel > .row { padding: 16px 20px; }
.dp-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 0.8rem; border-bottom: 1px dashed #f0f1f3; }
.dp-summary-row:last-child { border-bottom: none; }
.dp-summary-row .label { color: #8c919a; font-weight: 500; }
.dp-summary-row .value { font-weight: 600; color: #1a1d21; font-size: 0.82rem; }
.dp-summary-row.dp-row-subtract .label,
.dp-summary-row.dp-row-subtract .value { color: #dc3545; }
.dp-summary-section-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #adb5bd; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid #e9ecef; }
.dp-summary-total { border-bottom: none !important; border-top: 2px solid #dee2e6; margin-top: 6px; padding-top: 8px; }
.dp-summary-total .label { font-weight: 700; color: #1a1d21; }
.dp-summary-total .value { font-weight: 800; font-size: 0.92rem; color: #1a1d21; }
.dp-summary-col { display: flex; flex-direction: column; }
.dp-summary-col .dp-summary-total { margin-top: auto; }
.dp-balance-indicator { margin-top: 14px; text-align: center; }
.dp-balance-text { display: inline-flex; align-items: center; gap: 4px; padding: 6px 16px; border-radius: 20px; font-size: 0.76rem; font-weight: 600; }
.dp-balance-ok    { background: #eefbf0; color: #1d8939; }
.dp-balance-err   { background: #fef1f1; color: #dc3545; }
.dp-balance-empty { background: #f7f8fa; color: #adb5bd; }
.dp-id-bar {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    background: #f0f4ff; border: 0.5px solid #d6e0f5; border-radius: 6px;
    margin-bottom: 16px; font-size: 0.9rem;
}
.dp-id-bar .dp-id-label { color: #6c757d; font-weight: 500; }
.dp-id-bar .dp-id-number { font-weight: 700; color: #1a73e8; font-size: 1rem; }
.dp-id-bar .dp-id-seq { font-size: 0.78rem; font-weight: 500; color: #8c919a; background: #e9ecef; padding: 2px 8px; border-radius: 4px; }
.dp-footer-row { display: flex; gap: 0; }
.dp-footer-col { min-width: 0; }
.dp-footer-journal { flex: 7; border-right: 1px solid #dee2e6; margin-right: 12px; }
.dp-footer-totals  { flex: 3; display: flex; flex-direction: column; }
.dp-footer-col-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8c919a; padding: 10px 14px 6px; }
.dp-footer-totals-body { display: flex; flex-direction: column; flex: 1; padding: 6px 20px 0; }
.dp-footer-totals-body .dp-summary-total {
    margin-top: auto; background: #fafbfc; padding: 8px 20px;
    margin-left: -20px; margin-right: -20px; border-top: 2px solid #dee2e6; border-bottom: none !important;
}
.dp-journal-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.dp-journal-table thead th { padding: 6px 14px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8c919a; background: #fafbfc; border-bottom: 1px solid #e9ecef; }
.dp-journal-table tbody td { padding: 7px 14px; vertical-align: middle; border-bottom: 1px solid #f3f4f6; }
.dp-journal-table tbody tr:last-child td { border-bottom: none; }
.dp-journal-account { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.74rem; color: #495057; white-space: nowrap; }
.dp-journal-desc { color: #6c757d; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-journal-cc { color: #8c919a; font-size: 0.7rem; white-space: nowrap; }
.dp-journal-amount { font-weight: 600; text-align: right; white-space: nowrap; }
.dp-journal-table tfoot td { padding: 8px 14px; font-weight: 700; font-size: 0.8rem; border-top: 2px solid #dee2e6; background: #fafbfc; }
.dp-identification-band { background: #f8f9fc; border: 1px solid #e2e8f0; border-left: 3px solid #1a73e8; border-radius: 0 6px 6px 0; padding: 14px 20px 12px; margin-bottom: 14px; }
.dp-supplier-info {
    display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px;
    padding: 6px 10px; background: #f7f8fa; border: 1px solid #eaedf1;
    border-radius: 6px; font-size: 0.72rem; animation: dp-info-in .25s ease;
}
@keyframes dp-info-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dp-supplier-info-item { display: flex; align-items: center; gap: 4px; }
.dp-supplier-info-item i { color: #adb5bd; font-size: 0.72rem; width: 12px; text-align: center; }
.dp-supplier-info-item .dp-si-label { color: #8c919a; }
.dp-supplier-info-item .dp-si-value { color: #1a1d21; font-weight: 600; }
.dp-supplier-info .dp-si-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; }
.dp-si-badge-active   { background: #eefbf0; color: #1d8939; }
.dp-si-badge-inactive { background: #fef1f1; color: #dc3545; }
.dp-section { border: 1px solid #e9ecef; border-radius: 6px; margin-bottom: 16px; overflow: hidden; }
.dp-section > .dp-section-header { border-radius: 0; border-left: 3px solid #1a73e8; }
.dp-section > .dp-form-group { border: none; border-radius: 0; margin-bottom: 0; }
#dp_first_view .panel-hdr { margin-bottom: 10px; }
#dp_second_view .panel-container > .p-3 { padding: 10px 16px !important; }
#dp_second_view .tab-pane.p-3 { padding: 12px 12px 6px !important; }
#dp_second_view .nav-tabs { margin-bottom: 0; }
.dp-form-group .form-label { font-size: 0.78rem; margin-bottom: 3px !important; }
.dp-form-group .form-row { margin-bottom: 0 !important; }
.dp-form-group .col-md-1, .dp-form-group .col-md-2, .dp-form-group .col-md-3,
.dp-form-group .col-md-4, .dp-form-group .col-md-5, .dp-form-group .col-md-12,
.dp-form-group .col { margin-bottom: 8px !important; }
.dp-field-computed { background-color: #f3f4f6 !important; border-color: #e2e5ea !important; cursor: default; }
.dp-field-editable { background-color: #fff !important; border-color: #80bdff !important; box-shadow: inset 0 0 0 1px rgba(26,115,232,.08); }
.dp-inner-label { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #b0b8c4; margin-bottom: 8px; }
.dp-inner-divider { border: none; border-top: 1px solid #f0f2f5; margin: 10px 0 14px; }
#dp_second_view input:disabled,
#dp_second_view textarea:disabled { background-color: #e9ecef !important; color: #6c757d; cursor: not-allowed; opacity: 1; }
#dp_second_view button:disabled { cursor: not-allowed; opacity: 0.5; }
#dp_second_view select2-my .s2m-holder[disabled],
#dp_second_view select2-my[disabled] .s2m-holder { background-color: #e9ecef !important; color: #6c757d !important; cursor: not-allowed; pointer-events: none; }

/* ── electronic-disbursement.css ───────────────────────────────────────────── */

.edf-id-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #f0f4ff; border: 0.5px solid #d6e0f5; border-radius: 6px; margin-bottom: 16px; font-size: 0.9rem; }
.edf-id-bar .edf-id-label { color: #6c757d; font-weight: 500; }
.edf-id-bar .edf-id-number { font-weight: 700; color: #1a73e8; font-size: 1rem; }
.edf-id-bar .edf-id-seq { font-size: 0.78rem; font-weight: 500; color: #8c919a; background: #e9ecef; padding: 2px 8px; border-radius: 4px; }
.edf-section { border: 0.5px solid #e9ecef; border-radius: 6px; margin-bottom: 16px; overflow: hidden; }
.edf-section > .edf-section-header { border-radius: 0; margin-bottom: 0; border-left: 3px solid #1a73e8; }
.edf-section > .edf-form-group { border: none; border-radius: 0; margin-bottom: 0; }
.edf-section-header { display: flex; align-items: center; background: #f8f9fa; border-left: 3px solid #1a73e8; border-radius: 0 4px 4px 0; padding: 8px 14px; margin-bottom: 16px; font-weight: 600; font-size: 0.82rem; color: #343a40; letter-spacing: 0.02em; text-transform: uppercase; }
.edf-section-header i { font-size: 0.9rem; color: #1a73e8; margin-right: 8px; }
.edf-form-group { border: 0.5px solid #e9ecef; border-radius: 6px; padding: 16px 20px 8px; margin-bottom: 20px; background: #fff; }
.edf-bank-info { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; padding: 6px 10px; background: #f0f4ff; border: 1px solid #d6e0f5; border-radius: 6px; font-size: 0.72rem; min-height: 30px; }
.edf-info-empty { color: #c4c8cc; font-style: italic; }
.edf-bank-info .edf-bi-item { display: flex; align-items: center; gap: 4px; }
.edf-bank-info .edf-bi-item i { color: #6c8ebf; font-size: 0.72rem; width: 12px; text-align: center; }
.edf-bank-info .edf-bi-label { color: #8c919a; }
.edf-bank-info .edf-bi-value { color: #1a1d21; font-weight: 600; }
.edf-detail-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.edf-detail-table thead th { padding: 10px 12px; font-size: 0.72rem; font-weight: 600; letter-spacing: .5px; color: #343a40; background: #eee; border-bottom: 1px solid #ccc; }
.edf-detail-table tbody td { padding: 6px 12px; vertical-align: middle; border-bottom: 1px solid #e9ecef; background: #fff; }
.edf-detail-table tbody tr:nth-child(even) td { background: #fafbfe; }
.edf-detail-table tbody tr:hover td { background: rgba(63,106,216,.04); }
.edf-details-empty { text-align: center; color: #adb5bd; padding: 24px !important; font-size: 0.82rem; }
.edf-remove-link, .edf-cancel-link { cursor: pointer; font-size: 0.82rem; transition: color .15s; display: inline-block; padding: 2px 4px; }
.edf-remove-link { color: #c4c8cc; }
.edf-remove-link:hover { color: #1a73e8; }
.edf-cancel-link { color: #c4c8cc; margin-left: 4px; }
.edf-cancel-link:hover { color: #dc3545; }
.edf-summary-panel { border: 0.5px solid #e9ecef; border-radius: 8px; background: #fff; margin-top: 16px; overflow: hidden; }
.edf-summary-header { display: flex; align-items: center; padding: 10px 20px; font-weight: 600; font-size: 0.78rem; color: #343a40; letter-spacing: .02em; text-transform: uppercase; background: #f8f9fa; border-bottom: 0.5px solid #e9ecef; border-left: 3px solid #1a73e8; }
.edf-summary-header i { font-size: 0.9rem; color: #1a73e8; margin-right: 8px; }
.edf-summary-body { display: flex; padding: 0; }
.edf-summary-item { flex: 1; display: flex; flex-direction: column; padding: 12px 16px; border-right: 0.5px solid #f0f1f3; }
.edf-summary-item:last-child { border-right: none; }
.edf-summary-label { font-size: 0.68rem; font-weight: 500; color: #8c919a; }
.edf-summary-value { font-size: 0.9rem; font-weight: 600; color: #1a1d21; margin-top: 2px; }
.edf-summary-item-total { background: #fafbfc; }
.edf-summary-item-total .edf-summary-label { font-weight: 700; color: #495057; }
.edf-summary-item-total .edf-summary-value { font-size: 1.05rem; font-weight: 700; color: #28a745; }
#edf_table_container .custom-row { cursor: pointer; transition: background .12s; }
#edf_table_container .custom-row:hover { background: rgba(26,115,232,.03); }
#edf_table_container .edf-row-expanded { background: #f0f4ff !important; border-left: 3px solid #1a73e8; }
.edf-sub-row { grid-column: 1 / -1; padding: 8px 20px 12px; background: #f8f9fb; border-bottom: 1px solid #e9ecef; animation: edfSlideDown .15s ease-out; }
@keyframes edfSlideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 500px; } }
.edf-sub-row .edf-detail-table { margin-bottom: 0; }
.edf-sub-row .edf-detail-table thead th { background: #eef1f5; font-size: 0.68rem; padding: 6px 10px; }
.edf-sub-row .edf-detail-table tbody td { padding: 5px 10px; font-size: 0.75rem; }
.edf-combo-option:hover { background: #f8f9fa; }
.edf-combo-option input[type="radio"] { accent-color: #1a73e8; }

/* ── payment.css ───────────────────────────────────────────────────────────── */

.pmt-section { border: 0.5px solid #e9ecef; border-radius: 6px; margin-bottom: 16px; overflow: hidden; }
.pmt-section > .pmt-section-header { border-radius: 0; margin-bottom: 0; border-left: 3px solid #1a73e8; }
.pmt-section > .pmt-form-group { border: none; border-radius: 0; margin-bottom: 0; }
.pmt-section-header { display: flex; align-items: center; background: #f8f9fa; border-left: 3px solid #1a73e8; border-radius: 0 4px 4px 0; padding: 8px 14px; margin-bottom: 16px; font-weight: 600; font-size: 0.82rem; color: #343a40; letter-spacing: 0.02em; text-transform: uppercase; }
.pmt-section-header i { font-size: 0.9rem; color: #1a73e8; margin-right: 8px; }
.pmt-form-group { border: 0.5px solid #e9ecef; border-radius: 6px; padding: 16px 20px 8px; margin-bottom: 20px; background: #ffffff; }
.pmt-readonly-auto, input.pmt-readonly-auto:disabled, textarea.pmt-readonly-auto:disabled { background-color: #f0f4ff !important; color: #495057; cursor: default; }
@keyframes pmt-autofill-flash { 0% { background-color: #d4edff; } 100% { background-color: #f0f4ff; } }
.pmt-autofilled { animation: pmt-autofill-flash 0.6s ease-out forwards; }
.pmt-details-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.82rem; margin-bottom: 0; }
.pmt-details-table thead th { background: #f8f9fa; border-bottom: 2px solid #dee2e6; padding: 6px 8px; font-weight: 600; color: #495057; white-space: nowrap; overflow: hidden; }
.pmt-details-table col.col-num       { width: 4%; }
.pmt-details-table col.col-invoice   { width: 22%; }
.pmt-details-table col.col-date      { width: 11%; }
.pmt-details-table col.col-balance   { width: 10%; }
.pmt-details-table col.col-amount    { width: 18%; }
.pmt-details-table col.col-discount  { width: 14%; }
.pmt-details-table col.col-neto      { width: 13%; }
.pmt-details-table col.col-actions   { width: 8%; }
.pmt-details-table tbody tr { border-bottom: 1px solid #f0f0f0; transition: background 0.15s; }
.pmt-details-table tbody tr:hover { background: #f8f9ff; }
.pmt-details-table tbody td { padding: 4px 6px; vertical-align: middle; overflow: hidden; }
.pmt-details-table .pmt-amount-input, .pmt-details-table .pmt-discount-input { min-width: 0; width: 100%; }
.pmt-details-table .pmt-amount-input { width: 110px; text-align: right; font-weight: 500; }
.pmt-details-table .pmt-balance-after { font-weight: 600; color: #28a745; }
.pmt-details-table .pmt-balance-after.negative { color: #dc3545; }
.pmt-details-table .pmt-remove-btn { background: none; border: none; color: #dc3545; cursor: pointer; padding: 2px 6px; border-radius: 3px; transition: background 0.15s; }
.pmt-details-table .pmt-remove-btn:hover { background: #ffeaea; }
.pmt-details-empty { text-align: center; color: #6c757d; padding: 20px 0; font-size: 0.85rem; }
.pmt-total-bar { display: flex; justify-content: flex-end; align-items: baseline; gap: 16px; padding: 12px 20px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0 0 6px 6px; margin-top: -1px; }
.pmt-total-bar .pmt-total-label { font-weight: 600; color: #343a40; font-size: 0.9rem; }
.pmt-total-bar .pmt-total-value { font-size: 1.3rem; font-weight: 700; color: #1a73e8; min-width: 120px; text-align: right; }
.pmt-id-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #eef3ff; border: 1px solid #c7d9f8; border-radius: 6px; margin-bottom: 20px; font-size: 0.9rem; }
.pmt-id-bar .pmt-id-label { color: #6c757d; font-weight: 500; }
.pmt-id-bar .pmt-id-number { font-weight: 700; color: #1a73e8; font-size: 1rem; }
.pmt-id-bar .pmt-id-seq { font-size: 0.78rem; font-weight: 500; color: #8c919a; background: #f0f1f3; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.02em; }
.pmt-add-row { background: #eef3ff !important; border-left: 3px solid #1a73e8; }
.pmt-add-row:hover { background: #e8f0fe !important; }
.pmt-add-row .pmt-add-doc-select { border-color: #c7d9f8; }
.pmt-add-row .pmt-add-doc-select:focus { border-color: #1a73e8; box-shadow: 0 0 0 0.15rem rgba(26,115,232,.2); }
.pmt-modal-search-bar { display: flex; justify-content: flex-end; padding: 8px 12px; background: #fff; }
.pmt-modal-search-bar .pmt-modal-search-group { border: 1px solid #ccc; border-radius: 4px; overflow: hidden; }
.pmt-modal-search-bar .pmt-modal-search-group .input-group-text { background: #fff; border: none; color: #666; font-size: 14px; }
.pmt-modal-search-bar .pmt-modal-search-group .form-control { border: none; box-shadow: none; font-size: 13px; }
.pmt-modal-search-bar .pmt-modal-search-group .form-control:focus { box-shadow: none; }
#dp_lst_cnt table tbody tr:nth-child(even) { background-color: #fafbfe; }
#dp_lst_cnt table tbody tr:hover { background-color: rgba(63,106,216,.04); }
#dp_lst_cnt table tbody tr.selected { background: #eef3ff !important; }
#dp_lst_cnt table input[type="checkbox"] { accent-color: #1a73e8; }
#pmt_details_table tfoot, #pmt_details_table tfoot td, #pmt_details_table tfoot strong, #pmt_details_table tfoot span { font-weight: 700 !important; }
#pmt_details_table tbody tr:nth-child(even) { background-color: #fafbfe; }
#pmt_details_table tbody tr:hover { background-color: rgba(63,106,216,.04); }
.pmt-doc-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1055; align-items: center; justify-content: center; }
.pmt-doc-modal-overlay.active { display: flex; }
.pmt-doc-modal { background: #fff; border-radius: 8px; width: 92%; max-width: 860px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.pmt-doc-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: none; background: linear-gradient(135deg, #1a73e8 0%, #0d5bbf 100%); border-radius: 8px 8px 0 0; }
.pmt-doc-modal-header h5 { margin: 0; font-size: 1rem; font-weight: 600; color: #ffffff; }
.pmt-doc-modal-header .btn-outline-danger { border-color: rgba(255,255,255,.6); color: rgba(255,255,255,.9); background: transparent; }
.pmt-doc-modal-header .btn-outline-danger:hover { background: rgba(255,255,255,.15); border-color: #fff; color: #fff; }
.pmt-doc-modal-body { flex: 1; overflow-y: auto; padding: 0; }
.pmt-doc-modal-footer { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid #dee2e6; background: #f8f9fa; border-radius: 0 0 8px 8px; }
.pmt-doc-modal-footer #pmt_doc_modal_selected_count { font-size: 0.82rem; color: #6c757d; flex: 1; }
.pmt-doc-modal-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.pmt-doc-modal-table thead th { background: #f0f4ff; border-bottom: 2px solid #c7d9f8; padding: 7px 10px; font-weight: 600; color: #343a40; white-space: nowrap; position: sticky; top: 0; }
.pmt-doc-modal-table tbody tr { border-bottom: 1px solid #f0f0f0; transition: background .12s; }
.pmt-doc-modal-table tbody tr:hover { background: #f5f8ff; }
.pmt-doc-modal-table tbody tr.selected { background: #e8f0fe; }
.pmt-doc-modal-table tbody td { padding: 6px 10px; vertical-align: middle; }
.pmt-doc-modal-table .pmt-modal-amount-input { width: 110px; text-align: right; }
.pmt-doc-modal-table .pmt-modal-discount-input { width: 80px; text-align: right; }
.pmt-details-table .pmt-action-btn { background: none; border: none; cursor: pointer; padding: 2px 5px; border-radius: 3px; font-size: 0.8rem; transition: background .15s; }
.pmt-details-table .pmt-edit-btn { color: #0d6efd; }
.pmt-details-table .pmt-edit-btn:hover { background: #e8f0fe; }
.pmt-details-table .pmt-neto-cell { font-weight: 600; color: #343a40; }
@keyframes pmt-row-enter { from { opacity: 0; transform: translateY(-6px); background: #d4edff; } 60% { background: #d4edff; } to { opacity: 1; transform: translateY(0); background: transparent; } }
.pmt-row-enter { animation: pmt-row-enter 0.4s ease-out forwards; }
@keyframes pmt-modal-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes pmt-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.pmt-doc-modal-overlay.active { animation: pmt-overlay-in 0.2s ease-out forwards; }
.pmt-doc-modal-overlay.active .pmt-doc-modal { animation: pmt-modal-in 0.22s ease-out forwards; }
.pmt-remove-link { cursor: pointer; color: #c4c8cc; font-size: 0.82rem; transition: color .15s; }
.pmt-remove-link:hover { color: #dc3545; }
.pmt-detail-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.pmt-detail-table thead th { padding: 10px 12px; font-size: 0.72rem; font-weight: 600; letter-spacing: .5px; color: #343a40; background: #eee; border-bottom: 1px solid #ccc; }
.pmt-detail-table tbody td { padding: 6px 12px; vertical-align: middle; border-bottom: 1px solid #e9ecef; background: #fff; }
.pmt-detail-table tbody tr:nth-child(even) td { background: #fafbfe; }
.pmt-detail-table tbody tr:hover td { background: rgba(63,106,216,.04); }
.pmt-detail-table tfoot td { padding: 0; background: transparent; border: none; }
.pmt-summary-panel { border: 0.5px solid #e9ecef; border-radius: 8px; background: #fff; margin-top: 16px; overflow: hidden; }
.pmt-summary-header { display: flex; align-items: center; padding: 10px 20px; font-weight: 600; font-size: 0.78rem; color: #343a40; letter-spacing: .02em; text-transform: uppercase; background: #f8f9fa; border-bottom: 0.5px solid #e9ecef; border-left: 3px solid #1a73e8; }
.pmt-summary-header i { font-size: 0.9rem; color: #1a73e8; margin-right: 8px; }
.pmt-footer-row { display: flex; gap: 0; }
.pmt-footer-col { min-width: 0; }
.pmt-footer-journal { flex: 7; border-right: 0.5px solid #dee2e6; margin-right: 12px; display: flex; flex-direction: column; }
.pmt-footer-journal #pmt_journal_body { flex: 1; display: flex; flex-direction: column; }
.pmt-footer-journal .pmt-journal-table { flex: 1; }
.pmt-footer-totals { flex: 3; display: flex; flex-direction: column; }
.pmt-footer-col-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8c919a; padding: 10px 14px 6px; }
.pmt-footer-totals-body { display: flex; flex-direction: column; flex: 1; padding: 6px 20px 0; }
.pmt-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 0.8rem; border-bottom: 1px dashed #f0f1f3; }
.pmt-summary-row:last-child { border-bottom: none; }
.pmt-summary-row .label { color: #8c919a; font-weight: 500; }
.pmt-summary-row .value { font-weight: 600; color: #1a1d21; font-size: 0.82rem; }
.pmt-footer-totals-body .pmt-summary-total { margin-top: auto; background: #fafbfc; padding: 8px 20px; margin-left: -20px; margin-right: -20px; border-top: 2px solid #dee2e6; border-bottom: none !important; }
.pmt-summary-total .label { font-weight: 700; color: #1a1d21; }
.pmt-summary-total .value { font-weight: 700; font-size: 0.92rem; }
.pmt-journal-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.pmt-journal-table thead th { padding: 6px 14px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8c919a; background: #fafbfc; border-bottom: 0.5px solid #e9ecef; }
.pmt-journal-table tbody td { padding: 7px 14px; vertical-align: middle; border-bottom: 0.5px solid #f3f4f6; }
.pmt-journal-table tbody tr:last-child td { border-bottom: none; }
.pmt-journal-account { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.74rem; color: #495057; white-space: nowrap; }
.pmt-journal-desc { color: #6c757d; }
.pmt-journal-amount { font-weight: 600; text-align: right; white-space: nowrap; }
.pmt-journal-table tfoot td { padding: 8px 14px; font-weight: 700; font-size: 0.8rem; border-top: 2px solid #dee2e6; background: #fafbfc; }
.pmt-balance-text { display: inline-flex; align-items: center; gap: 4px; padding: 6px 16px; border-radius: 20px; font-size: 0.76rem; font-weight: 600; }
.pmt-balance-ok    { background: #eefbf0; color: #1d8939; }
.pmt-balance-empty { background: #f7f8fa; color: #adb5bd; }
.pmt-supplier-info { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; padding: 6px 10px; background: #f7f8fa; border: 1px solid #eaedf1; border-radius: 6px; font-size: 0.72rem; min-height: 30px; }
.pmt-info-empty { color: #c4c8cc; font-style: italic; }
.pmt-supplier-info .pmt-si-item { display: flex; align-items: center; gap: 4px; }
.pmt-supplier-info .pmt-si-item i { color: #adb5bd; font-size: 0.72rem; width: 12px; text-align: center; }
.pmt-supplier-info .pmt-si-label { color: #8c919a; }
.pmt-supplier-info .pmt-si-value { color: #1a1d21; font-weight: 600; }
.pmt-supplier-info .pmt-si-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; }
.pmt-si-badge-active   { background: #eefbf0; color: #1d8939; }
.pmt-si-badge-inactive { background: #fef1f1; color: #dc3545; }
.pmt-discount-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 700; background: #FAEEDA; color: #854F0B; border: 1px solid #EF9F27; vertical-align: middle; margin-left: 8px; }
.pmt-dist-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #FEFAF3; border-bottom: 0.5px solid #f0e6c8; }
.pmt-dist-bar-label { font-size: 11px; font-weight: 600; color: #854F0B; display: flex; align-items: center; }
.pmt-dist-bar-controls { display: flex; align-items: center; gap: 8px; }
.pmt-dist-input { width: 150px !important; text-align: right; font-weight: 600; font-size: 12px; border: 0.5px solid #d6e0f5 !important; border-radius: 6px !important; }
.pmt-dist-input:focus { box-shadow: 0 0 0 2px rgba(26,115,232,.15) !important; border-color: #1a73e8 !important; }
.pmt-modal-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.pmt-modal-table thead th { padding: 8px 10px; font-size: 0.7rem; font-weight: 600; letter-spacing: .4px; color: #495057; background: #f8f9fa; border-bottom: 0.5px solid #e9ecef; }
.pmt-modal-table tbody td { padding: 6px 10px; vertical-align: middle; border-bottom: 0.5px solid #f0f1f3; }
.pmt-modal-table tbody tr:nth-child(even) td { background: #fafbfe; }
.pmt-modal-table tbody tr:hover td { background: rgba(26,115,232,.04); }
.pmt-modal-amount-input { width: 95px; display: inline-block; text-align: right; padding: 3px 8px; height: auto; line-height: 1.4; font-size: 0.78rem; font-weight: 600; color: #28a745; border: 0.5px solid #e9ecef; border-radius: 4px; outline: none; }
.pmt-modal-amount-input:focus { border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26,115,232,.12); }
.pmt-modal-amount-input:disabled { background: #f7f8fa; color: #adb5bd; cursor: default; }
.pmt-modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 0.5px solid #e9ecef; background: #fafbfc; }
.pmt-modal-footer-left { display: flex; align-items: center; gap: 12px; }
.pmt-modal-footer-right { display: flex; align-items: center; gap: 8px; }
.pmt-modal-footer-count { font-size: 11px; font-weight: 500; color: #6c757d; flex: 1; }
.pmt-modal-footer-total { display: flex; align-items: center; gap: 6px; }
.pmt-modal-footer-total-label { font-size: 11px; font-weight: 600; color: #495057; }
.pmt-modal-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all .15s; line-height: 1.4; }
.pmt-modal-btn-cancel { color: #6c757d; background: #fff; border-color: #dee2e6; }
.pmt-modal-btn-cancel:hover { background: #f0f1f3; border-color: #cdd1d6; }
.pmt-modal-btn-confirm { color: #28a745; background: #fff; border-color: #28a745; }
.pmt-modal-btn-confirm:hover { background: #28a745; color: #fff; }
.pmt-modal-btn-danger { color: #dc3545; background: #fff; border-color: #dc3545; }
.pmt-modal-btn-danger:hover { background: #dc3545; color: #fff; }
.pmt-modal-btn-dist { color: #17a2b8; background: #fff; border-color: #17a2b8; }
.pmt-modal-btn-dist:hover { background: #17a2b8; color: #fff; }
.pmt-modal-footer-total-value { font-size: 1rem; font-weight: 700; color: #28a745; min-width: 80px; text-align: right; }
.pmt-amount-green { color: #28a745; font-weight: 600; }
.pmt-details-table .pmt-amount-input.pmt-amount-green { color: #28a745; font-weight: 600; }
.pmt-modal-neto-label { font-size: 0.85rem; font-weight: 600; color: #343a40; }
.pmt-modal-neto-value { font-size: 1rem; font-weight: 700; color: #28a745; min-width: 90px; text-align: right; }
.pmt-bank-info { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; padding: 6px 10px; background: #f0f4ff; border: 1px solid #d6e0f5; border-radius: 6px; font-size: 0.72rem; min-height: 30px; }
.pmt-bank-info .pmt-bi-item { display: flex; align-items: center; gap: 4px; }
.pmt-bank-info .pmt-bi-item i { color: #6c8ebf; font-size: 0.72rem; width: 12px; text-align: center; }
.pmt-bank-info .pmt-bi-label { color: #8c919a; }
.pmt-bank-info .pmt-bi-value { color: #1a1d21; font-weight: 600; }

/* ── report-606.css ────────────────────────────────────────────────────────── */

.r606-toolbar { display: flex; align-items: flex-end; gap: 12px; padding: 16px 20px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; margin-bottom: 16px; }
.r606-toolbar .form-group { margin-bottom: 0; }
.r606-toolbar label { font-size: 0.78rem; font-weight: 600; color: #343a40; margin-bottom: 4px; display: block; }
.r606-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.r606-kpi { flex: 1; min-width: 160px; padding: 12px 16px; background: #fff; border: 1px solid #e9ecef; border-radius: 6px; border-left: 3px solid #1a73e8; }
.r606-kpi-label { font-size: 0.68rem; font-weight: 500; color: #8c919a; text-transform: uppercase; letter-spacing: 0.03em; }
.r606-kpi-value { font-size: 1rem; font-weight: 700; color: #1a1d21; margin-top: 2px; }
.r606-kpi-count .r606-kpi-value { color: #1a73e8; }
.r606-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.r606-table thead th { padding: 8px 6px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.4px; color: #495057; background: #f8f9fa; border-bottom: 1.5px solid #dee2e6; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.r606-table tbody td { padding: 5px 6px; vertical-align: middle; border-bottom: 1px solid #f0f1f3; }
.r606-table tbody tr:nth-child(even) td { background: #fafbfe; }
.r606-table tbody tr:hover td { background: rgba(26,115,232,.04); cursor: pointer; }
.r606-table .text-right  { text-align: right; }
.r606-table .text-center { text-align: center; }
.r606-table tfoot td { padding: 8px 6px; font-weight: 700; font-size: 0.78rem; border-top: 2px solid #dee2e6; background: #f8f9fa; }
.r606-empty { text-align: center; color: #adb5bd; padding: 40px; font-size: 0.85rem; }
.r606-empty i { font-size: 2rem; display: block; margin-bottom: 8px; }

/* ── supplier-account-statement.css ───────────────────────────────────────── */

.sas-supplier-bar { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; }
.sas-supplier-input-group { display: flex; max-width: 440px; }
.sas-supplier-input-group .form-control { border-radius: 8px 0 0 8px; background: #f7f8fa; font-size: .88rem; border-color: #e0e3e8; cursor: pointer; }
.sas-supplier-input-group .form-control:focus { background: #fff; }
.sas-supplier-input-group .btn { border-radius: 0 8px 8px 0; padding: 6px 16px; font-size: .88rem; }
.sas-skeleton { animation: sas-fade-in .3s ease; }
.sas-skel-card { background: #fff; border: 1px solid #eaedf1; border-radius: 14px; padding: 16px 24px; }
.sas-skel-line { background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 50%, #eef0f3 75%); background-size: 200% 100%; animation: sas-shimmer 1.5s ease-in-out infinite; border-radius: 6px; }
.sas-skel-circle { background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 50%, #eef0f3 75%); background-size: 200% 100%; animation: sas-shimmer 1.5s ease-in-out infinite; border-radius: 50%; flex-shrink: 0; }
@keyframes sas-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes sas-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sas-fade-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } }
.sas-skeleton-exit { animation: sas-fade-out .25s ease forwards; pointer-events: none; }
#sas_dashboard { animation: sas-fade-in .4s ease; }
.sas-supplier-info { margin-bottom: 16px; }
.sas-supplier-card { display: flex; flex-direction: row; background: #fff; border: 0.5px solid #e9ecef; border-radius: 12px; overflow: hidden; }
.sas-supplier-card-accent { width: 4px; flex-shrink: 0; background: #E8820C; }
.sas-supplier-card-body { flex: 1; padding: 14px 20px; }
.sas-supplier-card-header { margin-bottom: 0; }
.sas-supplier-card-name { font-size: 1.05rem; font-weight: 700; color: #1a1d21; line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.sas-supplier-card-code { font-size: 11px; font-weight: 500; color: #6c757d; margin-top: 2px; }
.sas-supplier-card-sep { height: 0.5px; background: #e9ecef; margin: 10px 0; }
.sas-supplier-card-grid { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.sas-supplier-card-item { display: flex; align-items: center; gap: 8px; }
.sas-supplier-card-item-icon { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; background: #f0f1f3; color: #6c757d; }
.sas-supplier-card-item-body { display: flex; flex-direction: column; }
.sas-supplier-card-item-label { font-size: 9px; font-weight: 500; color: #8c919a; }
.sas-supplier-card-item-value { font-size: 12px; font-weight: 600; color: #1a1d21; }
.sas-supplier-status { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.sas-supplier-status-active   { background: #EAF3DE; color: #3B6D11; }
.sas-supplier-status-inactive { background: #FCEBEB; color: #A32D2D; }
.sas-hero { display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid #eaedf1; border-radius: 14px; margin-bottom: 16px; overflow: hidden; }
.sas-hero-balance { flex-shrink: 0; width: 510px; display: flex; flex-direction: row; overflow: hidden; border-right: 1px solid #eaedf1; }
.sas-hero-balance-accent { width: 4px; flex-shrink: 0; background: #E8820C; }
.sas-hero-balance-body { flex: 1; padding: 18px 28px; }
.sas-hero-balance-label { font-size: 11px; font-weight: 500; color: #6c757d; margin-bottom: 8px; }
.sas-hero-balance-pill { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 8px 0; }
.sas-hero-balance-amount { font-size: 40px; font-weight: 700; color: #A32D2D; line-height: 1.1; }
.sas-hero-balance-decimals { font-size: 24px; font-weight: 500; }
.sas-hero-balance-currency { font-size: 14px; font-weight: 500; color: #791F1F; }
.sas-hero-balance-children { margin-top: 10px; }
.sas-hero-balance-sep { height: 0.5px; background: #e9ecef; margin-bottom: 8px; }
.sas-hero-balance-fork { display: flex; flex-direction: column; align-items: center; }
.sas-hero-balance-stem { width: 0.5px; height: 8px; background: #cdd1d6; }
.sas-hero-balance-bar { width: 60%; height: 0.5px; background: #cdd1d6; }
.sas-hero-balance-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 4px; }
.sas-bchild { padding: 4px 8px; text-align: center; }
.sas-bchild-label { font-size: 9px; font-weight: 600; margin-bottom: 2px; }
.sas-bchild-value { font-size: 22px; font-weight: 700; line-height: 1.2; }
.sas-bchild-transit .sas-bchild-label { color: #633806; }
.sas-bchild-transit .sas-bchild-value { color: #854F0B; }
.sas-bchild-available .sas-bchild-label { color: #0C447C; }
.sas-bchild-available .sas-bchild-value { color: #185FA5; }
.sas-hero-kpis { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; align-content: center; }
.sas-kpi { display: flex; flex-direction: row; border: 0.5px solid #e9ecef; border-radius: 12px; overflow: hidden; background: #fff; }
.sas-kpi-accent { width: 4px; flex-shrink: 0; background: #E8820C; }
.sas-kpi-body { flex: 1; padding: 10px 14px; }
.sas-kpi-header { display: flex; align-items: center; justify-content: space-between; }
.sas-kpi-label { font-size: 11px; font-weight: 500; color: #6c757d; line-height: 1.3; }
.sas-kpi-icon { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.sas-kpi-icon-invoiced { background: #FAEEDA; color: #854F0B; }
.sas-kpi-icon-paid     { background: #EAF3DE; color: #3B6D11; }
.sas-kpi-icon-ret      { background: #FCEBEB; color: #A32D2D; }
.sas-kpi-icon-count    { background: #E6F1FB; color: #185FA5; }
.sas-kpi-sep { height: 0.5px; background: #e9ecef; margin: 8px 0; }
.sas-kpi-value { font-size: 1.15rem; font-weight: 500; color: #1a1d21; line-height: 1.2; }
.sas-hero-gauge-area { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 16px 20px; }
.sas-hero-gauge { width: 76px; height: 76px; position: relative; flex-shrink: 0; }
.sas-hero-gauge svg { transform: rotate(-90deg); }
.sas-hero-gauge-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; }
.sas-hero-gauge-pct { font-size: 1rem; font-weight: 800; color: #1a1d21; line-height: 1; }
.sas-hero-gauge-label { font-size: .48rem; color: #adb5bd; text-transform: uppercase; letter-spacing: .04em; font-weight: 500; margin-top: 2px; }
.sas-hero-gauge-text { font-size: .68rem; color: #6c757d; max-width: 110px; line-height: 1.3; }
.sas-charts-row { display: flex; gap: 16px; margin-bottom: 16px; }
.sas-chart-card { background: #fff; border: 1px solid #eaedf1; border-radius: 14px; overflow: hidden; flex: 1; }
.sas-chart-pie  { flex: 0 0 510px; }
.sas-chart-bars { flex: 1; }
.sas-chart-header { padding: 12px 20px; border-bottom: 1px solid #eaedf1; border-left: 4px solid #E8820C; }
.sas-chart-title { font-size: .82rem; font-weight: 600; color: #1a1d21; }
#sas_pie_chart { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 16px; }
#sas_pie_chart .sas-pie-legend { display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
#sas_pie_chart .sas-pie-legend-item { display: flex; align-items: center; gap: 6px; }
#sas_pie_chart .sas-pie-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
#sas_pie_chart .sas-pie-legend-label { color: #8c919a; }
#sas_pie_chart .sas-pie-legend-value { font-weight: 700; color: #1a1d21; margin-left: auto; }
#sas_pie_chart .sas-pie-arc { transition: opacity .2s; }
#sas_pie_chart .sas-pie-arc:hover { opacity: .75; }
#sas_balance_chart { padding: 10px 16px 8px; }
#sas_balance_chart .bar-group text.bar-label { font-size: 11px; fill: #495057; font-weight: 500; }
#sas_balance_chart .bar-group text.bar-value { font-size: 10px; fill: #8c919a; font-weight: 600; }
#sas_balance_chart .bar-rect { rx: 4; transition: opacity .2s; }
#sas_balance_chart .bar-rect:hover { opacity: .8; }
.sas-table-card { background: #fff; border: 1px solid #eaedf1; border-radius: 14px; overflow: hidden; }
.sas-table-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #eaedf1; }
.sas-table-title { font-size: .92rem; font-weight: 700; color: #1a1d21; }
.sas-details-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sas-details-table thead th { background: #f7f8fa; padding: 11px 10px; font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #6c757d; border-bottom: 2px solid #dee2e6; white-space: nowrap; }
.sas-details-table tbody tr.sas-detail-row { border-bottom: 1px solid #eaedf1; cursor: pointer; background: #fff; }
.sas-details-table tbody tr.sas-detail-row:hover { background: #fffde7; }
.sas-details-table tbody tr.sas-detail-row td { padding: 6px 10px; vertical-align: middle; color: #1a1d21; font-weight: 700; font-size: 11px; }
.sas-details-table .text-right  { text-align: right; }
.sas-details-table .text-center { text-align: center; }
.sas-details-table .sas-cell-ncf { font-weight: 700; color: #1a1d21; font-size: 12.5px; }
.sas-details-table thead th:first-child,
.sas-details-table tbody td:first-child { text-align: right; padding-right: 4px; }
.sas-expand-btn { background: none; border: none; cursor: pointer; color: #adb5bd; padding: 3px 8px; border-radius: 4px; font-size: .88rem; transition: all .15s; }
.sas-expand-btn:hover { color: #1a73e8; background: #eef3ff; }
.sas-detail-row.sas-row-expanded .sas-expand-btn { color: #1a73e8; }
.sas-amount-green { color: #28a745; font-weight: 600; }
.sas-amount-red   { color: #dc3545; font-weight: 700; }
.sas-amount-amber { color: #e67e22; font-weight: 600; }
.sas-amount-blue  { color: #1a73e8; font-weight: 700; }
.sas-ncf-null     { color: #c0c4cc; font-style: italic; font-weight: 400; }
.sas-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.sas-badge-red    { background: #fef1f1; color: #dc3545; }
.sas-badge-yellow { background: #fffbeb; color: #d4a017; }
.sas-badge-orange { background: #fff4e5; color: #e67e22; }
.sas-badge-green  { background: #eefbf0; color: #1d8939; }
.sas-badge-blue   { background: #eef3ff; color: #1a73e8; }
.sas-badge-purple { background: #f5f0ff; color: #7c3aed; }
.sas-details-table tbody tr.sas-child-row { border-bottom: 1px solid #f3f4f6; cursor: default; background: #fafbfc; }
.sas-details-table tbody tr.sas-child-row:hover { background: #fffde7; }
.sas-details-table tbody tr.sas-child-row td { padding: 5px 10px; vertical-align: middle; color: #8c919a; font-weight: 400; font-size: 11px; }
.sas-details-table tbody tr.sas-child-transit { border-left: 2px solid #e67e22; }
.sas-details-table tbody tr.sas-child-transit:hover { background: #fffde7; }
.sas-child-arrow { color: #E8820C; font-size: 13px; }
.sas-child-arrow i { transform: scaleX(-1); display: inline-block; }
.sas-transit-note-cell { padding: 6px 14px !important; background: #fffbeb; font-size: 0.72rem; color: #8c6d1f; border-bottom: 1px solid #f0e6c8; }
.sas-aging-note { padding: 6px 12px; font-size: 0.72rem; color: #8c919a; border-top: 1px solid #f0f1f3; }
.sas-pagination { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-top: 1px solid #eaedf1; }
.sas-pagination-info { font-size: .8rem; color: #8c919a; }
.sas-pagination-btns { display: flex; gap: 6px; }
.sas-pagination-btns .btn { font-size: .8rem; padding: 4px 14px; border-radius: 6px; }
.sas-empty-state { text-align: center; color: #8c919a; padding: 48px 0; font-size: .88rem; }
.sas-empty-state i { display: block; margin-bottom: 8px; color: #c0c4cc; font-size: 2rem; }
.sas-print-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.35); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.sas-print-modal { background: #fff; border-radius: 12px; width: 420px; overflow: hidden; border: 0.5px solid #e9ecef; }
.sas-print-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 0.5px solid #e9ecef; border-left: 4px solid #E8820C; font-size: .88rem; font-weight: 600; color: #1a1d21; }
.sas-print-modal-close { background: none; border: none; cursor: pointer; color: #8c919a; font-size: 1rem; padding: 0; }
.sas-print-modal-close:hover { color: #dc3545; }
.sas-print-modal-body { padding: 16px 20px; }
.sas-print-modal-field { margin-bottom: 12px; }
.sas-print-modal-field label { display: block; font-size: 11px; font-weight: 500; color: #6c757d; margin-bottom: 4px; }
.sas-print-modal-row { display: flex; gap: 12px; }
.sas-print-modal-row .sas-print-modal-field { flex: 1; }
.sas-print-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 0.5px solid #e9ecef; background: #fafbfc; }
@media (max-width: 992px) {
    .sas-hero { flex-wrap: wrap; gap: 16px; padding: 20px; }
    .sas-hero-details { border-left: none; padding-left: 0; border-top: 1px solid #eaedf1; padding-top: 12px; flex-basis: 100%; }
    .sas-charts-row { flex-direction: column; }
    .sas-chart-pie { flex: unset; }
}
@media (max-width: 768px) {
    .sas-supplier-input-group { max-width: 100%; }
    .sas-details-table { font-size: 11px; }
}

/* ── generalAccountSettings.css ───────────────────────────────────────────── */

.gas-access-denied { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; color: #6c757d; }
.gas-access-denied__icon { font-size: 3.5rem; color: #dee2e6; margin-bottom: 20px; }
.gas-access-denied__title { font-size: 1.15rem; font-weight: 600; color: #495057; margin-bottom: 8px; }
.gas-access-denied__subtitle { font-size: 0.95rem; color: #868e96; margin: 0; }
.gas-tabs-nav { margin-bottom: 0; border-bottom: 2px solid #dee2e6; }
.gas-tabs { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.gas-tab { padding: 9px 18px; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: #6c757d; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; transition: color .15s, background-color .15s, border-color .15s; user-select: none; white-space: nowrap; }
.gas-tab:hover { color: #495057; background-color: #f8f9fa; border-color: #dee2e6 #dee2e6 transparent; }
.gas-tab--active { color: var(--primary-color, #007bff); background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; font-weight: 600; margin-bottom: -2px; border-bottom: 2px solid #fff; }
.gas-tab-content { padding: 20px 0; min-height: 200px; position: relative; }
.gas-module-content { display: flex; flex-wrap: wrap; gap: 24px; }
.gas-section { flex: 1 1 340px; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px 0 rgba(0,0,0,.06); }
.gas-section__title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; font-size: 0.875rem; font-weight: 600; color: #495057; background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; text-transform: uppercase; letter-spacing: 0.5px; }
.gas-section__icon { color: var(--primary-color, #007bff); font-size: 0.85rem; }
.gas-section__body { padding: 12px 16px; }
.gas-field-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f1f3f5; }
.gas-field-row:last-child { border-bottom: none; }
.gas-field-row__label { flex: 0 0 220px; max-width: 220px; font-size: 0.84rem; color: #495057; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.gas-field-row__controls { display: flex; align-items: center; gap: 6px; flex: 1; }
.gas-input { flex: 1; max-width: 140px; font-size: 0.875rem; height: 30px; padding: 4px 8px; }
.gas-input:focus { box-shadow: 0 0 0 0.18rem rgba(0,123,255,.25); }
.gas-save-btn { flex-shrink: 0; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 0.8rem; transition: opacity .15s; }
.gas-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gas-save-btn:not(:disabled):hover { opacity: 0.85; }
.gl-table-loader { position: absolute; inset: 0; background: rgba(255,255,255,.82); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: inherit; }
.gl-table-loader__inner { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #6c757d; }
.gl-table-loader__icon { font-size: 1.6rem; color: var(--primary-color, #007bff); }
.gl-table-loader__text { font-size: 0.8rem; font-weight: 500; }
@media (max-width: 768px) {
    .gas-module-content { flex-direction: column; }
    .gas-field-row { flex-wrap: wrap; }
    .gas-field-row__label { flex: 0 0 100%; max-width: 100%; }
    .gas-input { max-width: none; }
}

/* ── associate-loan.css ────────────────────────────────────────────────────── */

.asc-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background-color: var(--primary, #1e88e5); color: #fff; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; }
.asc-summary-cards { display: flex; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.asc-card { flex: 1 1 140px; background: #fff; border-radius: 8px; border: 1px solid #e4e7eb; padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 130px; }
.asc-card__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; font-weight: 600; }
.asc-card__value { font-size: 1.35rem; font-weight: 700; color: #1f2937; }
.asc-card--active   .asc-card__value { color: #16a34a; }
.asc-card--inactive .asc-card__value { color: #dc2626; }
.asc-card--suspend  .asc-card__value { color: #d97706; }
.asc-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.asc-toolbar .form-control { max-width: 260px; }
.asc-record-count { font-size: 0.78rem; color: #6b7280; margin-left: auto; white-space: nowrap; }
#asc_table_loader { text-align: center; padding: 1rem; color: #6b7280; font-size: 0.85rem; }
.asc-form-section { border-top: 1px solid #e5e7eb; padding-top: 1rem; margin-top: 1rem; }
.asc-form-section__title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin-bottom: 0.85rem; }
/* textarea.form-control { resize: vertical; min-height: 72px; } */
.req { color: #dc3545; margin-left: 2px; }
.badge-warning { background-color: #fef3c7; color: #92400e; border-radius: 4px; padding: 2px 8px; font-size: 0.72rem; font-weight: 600; }
.content-second-view.show-form { animation: slideInUp 0.25s ease; }
@keyframes slideInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── reporting-service.css ─────────────────────────────────────────────────── */

:root {
    --gray-hover: #00000014;
    --gray: #80808063;
    --secondary-color: #f8942f;
}
.content-report { position: relative; }
.transparent-layer { opacity: 0; display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgb(0 0 0 / 53%); z-index: 9999; transition: 0.4s; }
.cnt_rtn_src { position: relative; display: flex; flex-direction: row; min-height: 70vh; }
.cnt-mdl { margin-top: 28px; }
.cnt_rts { width: 100%; min-height: 70vh; padding: 0 5px; position: relative; }
.tle_fml { font-weight: 600; color: var(--primary-color); font-size: 18px; }
.inf_rpt span { font-weight: 300; }
.cnt_frm_rtn { background-color: #ffffff; width: 0%; min-height: 70vh; max-height: 100vh; position: absolute; right: 0; top: 0; bottom: 0; transition: 0.4s; box-shadow: -4px 0 10px rgba(0,0,0,.05); z-index: 99999; display: flex; flex-direction: column; }
#rpt_empty_state { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.cnt_mdl_bdy { column-gap: 20px; row-gap: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
@keyframes rpt-msg-shake { 0% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-5px); } 60% { transform: translateX(5px); } 75% { transform: translateX(-3px); } 90% { transform: translateX(3px); } 100% { transform: translateX(0); } }
.form_panel .msg-inf { display: none; align-items: center; opacity: 0; transition: 0.4s; border-left: 3px solid; padding: 6px 10px; border-radius: 0 4px 4px 0; margin: 0 16px 8px; }
.form_panel .msg-inf.msg-shake { animation: rpt-msg-shake 0.45s ease; }
.form_panel .msg-inf p { font-size: 13px; font-weight: 600; margin: 0; }
.form_panel .msg-inf.msg-error { border-color: #dc3545; background-color: #fff5f5; }
.form_panel .msg-inf.msg-error p { color: #dc3545; }
.form_panel .msg-inf.msg-warning { border-color: #f59e0b; background-color: #fffbeb; }
.form_panel .msg-inf.msg-warning p { color: #b45309; }
.form_panel .title { display: flex; gap: 2px; height: 67px; border-bottom: 1px solid var(--primary-color); align-items: center; width: 100%; padding: 0 16px; margin: 0; }
.form_panel .title .txt { display: flex; align-items: center; flex: 1; min-width: 0; }
.form_panel .title .burger-menu { position: static; right: auto; left: auto; margin-left: auto; flex-shrink: 0; background: none; border: none; outline: none; padding: 6px 8px; border-radius: 6px; color: #6c757d; font-size: 1.1rem; cursor: pointer; line-height: 1; transition: background .15s, color .15s; }
.form_panel .title .burger-menu:hover { background: rgba(0,0,0,.06); color: #343a40; }
.form_panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.form_panel #cnt_mdl_bdy { flex: 1; min-height: 0; overflow-y: auto; }
.form_panel .cnt_btn_frm { flex-shrink: 0; padding: 8px 16px 16px; }
.form_panel .cnt_btn_frm button { background-color: #4679cc; border: 1px solid gray; border-radius: 4px; font-size: 16px; color: white; padding: 4px 12px; width: 100%; height: 34px; }
.cnt_mdl_bdy_cnt { min-height: 120px; box-shadow: 0 2px 6px rgb(0 0 0 / 21%); border-radius: 4px; position: relative; }
.cnt_mdl_bdy_cnt .loader-circle { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; background-color: rgb(0 0 0 / 52%); display: none; justify-content: center; align-items: center; transition: 0.4s; }
.cnt_mdl_bdy_cnt .loader-circle.active { display: flex; opacity: 1; }
.cnt_mdl_bdy_cnt .loader-circle img { width: 80px; height: 80px; }
.cnt_mdl_bdy_cnt .hover-card { position: absolute; left: 0; top: 0; right: 0; bottom: 0; transition: 0.4s; cursor: pointer; }
.hover-active { background-color: var(--gray-hover); }
.cnt_mdl_bdy_cnt .hover-card:hover { background-color: var(--gray-hover); }
.burger-menu { right: 16px !important; position: absolute; left: initial; }
.crd_hrd { display: flex; gap: 6px; height: 40%; border-bottom: 1px solid var(--primary-color); justify-content: center; width: 94%; margin: auto; }
.cnt_mdl_hdr { width: fit-content; padding: 2px 12px; background-color: #2b52881c; border-radius: 8px; margin-bottom: 8px; border: 1px solid #2b528838; }
.cnt_mdl_hdr h4 { font-weight: 500; color: var(--primary-color); font-size: 14px; margin: 0; }
.crd_hrd .icon { width: 10%; display: flex; justify-content: center; align-items: center; }
.crd_inf { padding: 8px; font-weight: 400; font-size: 12px; }
.icon i { font-size: 24px; color: var(--secondary-color); }
.rpr_nm { width: 90%; align-items: center; display: flex; }
.rpr_nm h4 { margin: 0; font-weight: 500; color: var(--primary-color); font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; }
.disabled-loader { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgb(255 255 255 / 52%); display: none; opacity: 0; justify-content: center; align-items: center; transition: 0.4s; }
.loader-login { position: absolute; height: 6px; width: 98%; margin: 0 9px; opacity: 0; --c: no-repeat linear-gradient(#264e72 0 0); background: var(--c), var(--c), #7a93a9; background-size: 60% 100%; animation: l16 4s infinite; z-index: 999; border-radius: 25px 25px 0 0; transition: 0.4s; }
@keyframes l16 { 0% { background-position: -150% 0, -150% 0; } 66% { background-position: 250% 0, -150% 0; } 100% { background-position: 250% 0, 250% 0; } }
.rpt-picker-wrap { display: flex; align-items: center; gap: 6px; }
.rpt-picker-wrap .input-group { flex: 1; min-width: 0; }
.rpt-clr-btn { flex-shrink: 0; background: none; border: none; padding: 0 4px; color: #aaa; font-size: 1.1rem; cursor: pointer; line-height: 1; transition: color .2s; }
.rpt-clr-btn:hover { color: #dc3545; }
.inf_rpt { display: flex; align-items: center; justify-content: space-between; }
.rpt-clr-all-btn { background: none; border: 1px solid #ccc; border-radius: 4px; color: #888; font-size: .85rem; padding: 3px 8px; margin-right: 12px; cursor: pointer; line-height: 1; transition: color .2s, border-color .2s; }
.rpt-clr-all-btn:hover { color: #dc3545; border-color: #dc3545; }

/* ── reporting-service.hbs inline overrides (placed after CSS file to win cascade) ── */

.rpt-filter-bar { display: flex; align-items: center; gap: 10px; }
.rpt-filter-bar__select { flex: 0 0 200px; }
.rpt-filter-bar__search { flex: 1; }
.cnt_mdl_hdr {
    width: 100%;
    background: #f8f9fa;
    border-radius: 0 4px 4px 0;
    border: none;
    border-left: 3px solid #1a73e8;
    padding: 8px 14px;
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
}
.cnt_mdl_hdr:hover { background: #edf2fb; }
.rpt-toggle-icon { margin-left: auto; font-size: .9rem; color: #1a73e8; transition: transform .25s ease; }
.cnt-mdl:not(.rpt-expanded) .rpt-toggle-icon { transform: rotate(-90deg); }
.cnt_mdl_bdy { overflow: hidden; transition: max-height .3s ease, padding-top .3s ease, padding-bottom .3s ease; padding: 10px 4px; }
.cnt-mdl:not(.rpt-expanded) .cnt_mdl_bdy { padding-top: 0; padding-bottom: 0; }
.cnt_mdl_bdy_cnt { border-radius: 8px !important; transition: box-shadow .2s ease, transform .15s ease !important; }
.cnt_mdl_bdy_cnt:hover { box-shadow: 0 4px 16px rgba(0,0,0,.13) !important; transform: translateY(-2px); }
.crd_hrd .icon i { font-size: 1rem; color: #1a73e8; }
.icon i { font-size: 1rem !important; }
#rpt_period_picker { background: #fff; border: 1px solid #dee2e6; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.15); padding: 10px; width: 186px; }
.rpt-pp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 600; font-size: .9rem; }
.rpt-pp-header button { background: none; border: none; cursor: pointer; color: #1a73e8; padding: 2px 6px; border-radius: 4px; }
.rpt-pp-header button:hover { background: #e8f0fe; }
.rpt-pp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rpt-pp-month { background: none; border: 1px solid #dee2e6; border-radius: 4px; cursor: pointer; padding: 5px 2px; font-size: .82rem; transition: background .15s, border-color .15s; }
.rpt-pp-month:hover { background: #e8f0fe; border-color: #1a73e8; }

/* ── note-base.css sub-classes only (base .asc-summary-card kept from ds-site.css) ── */

.asc-summary-card__inner { display: flex; align-items: flex-start; gap: 16px; padding: 16px; }
.asc-summary-card__avatar { flex-shrink: 0; color: #6c757d; }
.asc-summary-card__body { flex: 1; min-width: 0; }
.asc-summary-card__name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.asc-summary-card__name { font-size: 1rem; font-weight: 600; color: #343a40; }
.asc-summary-card__row { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; color: #495057; margin-bottom: 4px; }
.asc-summary-card__label { color: #6c757d; white-space: nowrap; }
.asc-summary-card__value { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-form-card { border: 1px solid #e9ecef; border-radius: 6px; padding: 20px; background: #fff; }
.note-form-card h6.card-section-title { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6c757d; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #e9ecef; }
#note_inp_amount { font-size: 1.05rem; font-weight: 600; }
@media (max-width: 768px) {
    .asc-summary-card__inner { flex-direction: column; align-items: center; text-align: center; padding: 12px; }
    .asc-summary-card__name-row { justify-content: center; }
}

/* ── savings-withdrawal.css — .wd-* and .asc-modal-* ──────────────────────── */

.wd-distrib-column { min-height: 300px; padding: 12px !important; }
.wd-distrib-column__title { font-size: 0.9rem; font-weight: 600; color: #495057; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #dee2e6; }
.wd-distrib-column__content { display: flex; flex-direction: column; gap: 8px; }
.wd-distrib-empty { color: #adb5bd; }
.wd-distrib-section { margin-bottom: 4px; }
.wd-distrib-section__title { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6c757d; padding: 4px 0 6px; border-bottom: 1px dashed #dee2e6; margin-bottom: 8px; }
.wd-distrib-card { border: 1px solid #dee2e6; border-radius: 6px; background: #fff; overflow: hidden; transition: box-shadow 0.15s; }
.wd-distrib-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.wd-distrib-card[data-zone="assigned"] { border-left: 3px solid #28a745; background: #f9fffe; }
.wd-distrib-card__header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; cursor: pointer; user-select: none; background: #f8f9fa; gap: 8px; }
.wd-distrib-card__header:hover { background: #e9ecef; }
.wd-distrib-card__title { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; flex: 1; min-width: 0; flex-wrap: wrap; }
.wd-distrib-card__meta { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.wd-distrib-card__body { padding: 10px 12px; border-top: 1px solid #dee2e6; font-size: 0.85rem; }
.wd-distrib-card__body.collapse { display: none; }
.wd-distrib-card__body.show { display: block; }
.wd-chevron { transition: transform 0.2s ease; color: #6c757d; font-size: 0.75rem; }
.wd-distrib-card .badge-info { background-color: #e3f2fd; color: #0277bd; border: 1px solid #b3d9f7; }
.wd-distrib-card .badge-primary { background-color: #e8eaf6; color: #3949ab; border: 1px solid #c5cae9; }
.wd-assigned-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #f0faf3; gap: 8px; border-radius: 4px; }
.wd-assigned-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wd-assigned-name { font-size: 0.82rem; font-weight: 600; color: #343a40; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-assigned-amount { font-size: 0.82rem; font-weight: 700; color: #1a7a3c; white-space: nowrap; margin-left: 8px; }
.btn-xs { padding: 1px 6px; font-size: 0.72rem; line-height: 1.4; border-radius: 3px; }
.wd-loan-fields .form-group label { font-size: 0.78rem; color: #6c757d; margin-bottom: 2px; }
.wd-invoice-fields { padding: 8px 12px 10px; }
.badge-purple { background-color: #ede7f6; color: #6a1b9a; border: 1px solid #d1c4e9; }
.badge-blue   { background-color: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
.badge-green  { background-color: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.badge-yellow { background-color: #fff8e1; color: #f57f17; border: 1px solid #ffecb3; }
.badge-red    { background-color: #fce4ec; color: #c62828; border: 1px solid #f8bbd0; }
.custom-cell > .badge { /* min-width: 80px; */ display: inline-block; text-align: center; font-size: .72rem; padding: 3px 8px; border-radius: 4px; }
.wd-totals-bar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-end; gap: 12px; background: #fff; border: 1px solid #dee2e6; border-top: 2px solid #c8ced3; border-radius: 0 0 6px 6px; padding: 12px 20px; flex-wrap: wrap; box-shadow: 0 -2px 8px rgba(0,0,0,.06); }
.wd-totals-bar__item { display: flex; flex-direction: column; align-items: flex-end; }
.wd-totals-bar__label { font-size: 0.75rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.03em; }
.wd-totals-bar__value { font-size: 1.1rem; font-weight: 700; color: #343a40; }
.wd-totals-bar__separator { font-size: 1.3rem; color: #adb5bd; font-weight: 300; padding: 0 4px; }
#wd_tbody_savings td { vertical-align: middle; font-size: 0.875rem; }
.asc-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: asc-fade-in 0.15s ease; }
@keyframes asc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.asc-modal-dialog { background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.18); width: 680px; max-width: 95vw; max-height: 80vh; display: flex; flex-direction: column; animation: asc-slide-up 0.18s ease; }
@keyframes asc-slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.asc-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; border-bottom: 1px solid #dee2e6; flex-shrink: 0; }
.asc-modal-title { font-size: 1rem; font-weight: 600; color: #343a40; margin: 0; }
.asc-modal-close { background: none; border: none; font-size: 1.4rem; line-height: 1; color: #6c757d; cursor: pointer; padding: 0 4px; transition: color .15s; }
.asc-modal-close:hover { color: #343a40; }
.asc-modal-search { padding: 12px 18px 10px; flex-shrink: 0; }
.asc-modal-body { overflow-y: auto; flex: 1; padding: 0; }
.asc-modal-table-wrap { min-height: 160px; padding-left: 18px; padding-right: 18px; }
.asc-modal-footer { padding: 10px 18px; border-top: 1px solid #dee2e6; display: flex; justify-content: flex-end; flex-shrink: 0; }
.asc-modal-row { cursor: pointer; transition: background 0.1s; }
.asc-modal-row:hover { background: #e8f4fd !important; }
@media (max-width: 768px) {
    .wd-totals-bar { justify-content: center; padding: 10px; }
    .wd-distrib-card__header { flex-wrap: wrap; }
    .asc-modal-dialog { max-height: 90vh; }
}

/* ── saving-types.css — non-.st-section-header rules ──────────────────────── */

.st-form-group { border: 1px solid #e9ecef; border-radius: 6px; padding: 16px 20px 8px; margin-bottom: 20px; background: #ffffff; }
select.form-control:disabled { background-color: #e9ecef; cursor: not-allowed; opacity: 0.75; }
.st-account-wrapper .help-block { display: block; font-size: 0.78rem; color: #6c757d; margin-top: 3px; }

/* ── Accounting account input: description badge (global) ──────────────────── */

/* Rows containing the editable account input: align all cells from the top
   so the account input is at the same level as adjacent inputs.
   NOTE: .custom-row uses display:contents (site.css), so align-items must be
   set on .custom-cell (the actual flex container), not on .custom-row. */
.custom-row:has([input_accounting_account]) .custom-cell {
    align-items: flex-start;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Only the editable form row cells need isolation to prevent Bootstrap's
   z-index:2 button from bleeding into adjacent cells. Applying isolation
   globally to .custom-cell would trap position:fixed menus inside stacking
   contexts and hide them behind subsequent rows. */
.custom-row:has([input_accounting_account]) .custom-cell { isolation: isolate; }

/* remove Bootstrap form-group bottom margin inside accounting account wrapper */
.content-accounting-account.form-group { margin-bottom: 0; }

.content-accounting-account .help-block {
    display: inline-block;
    margin-top: 5px;
    max-width: calc(100% - 46px); /* match the input width, excluding the append button */
    font-size: 0.7rem;
    font-weight: 500;
    color: #0068b4;
    background: rgba(0, 104, 180, 0.07);
    border: 1px solid rgba(0, 104, 180, 0.16);
    padding: 3px 12px;
    border-radius: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
.content-accounting-account .help-block:empty { display: none; }

/* ── banks-branch.css ──────────────────────────────────────────────────────── */

@keyframes bb-fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
#bb_banks_container { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 4px 0; }
.bb-bank-card { border: 1px solid #e9ecef; border-radius: 12px; background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .15s ease; animation: bb-fade-in .22s ease both; }
.bb-bank-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.09); transform: translateY(-2px); }
.bb-logo-area { height: 160px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-bottom: 1px solid #e9ecef; overflow: hidden; position: relative; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.bb-logo-area:hover { background: #f1f3f5; }
.bb-logo-area.bb-drag-over { background: #e8f0fe; border-color: #1a73e8; border-style: dashed; border-width: 2px; }
.bb-logo-img { max-width: 85%; max-height: 130px; object-fit: contain; animation: bb-fade-in .25s ease; }
.bb-preview-active { border-radius: 4px; box-shadow: 0 0 0 3px #1a73e833; }
.bb-logo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; background: repeating-conic-gradient(#e9ecef 0% 25%, #f8f9fa 0% 50%) 0 0 / 16px 16px; user-select: none; }
.bb-logo-placeholder i { font-size: 2.4rem; color: #adb5bd; opacity: .6; filter: drop-shadow(1px 1px 0 #fff); }
.bb-logo-placeholder span { font-size: 0.7rem; color: #adb5bd; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(255,255,255,.7); padding: 2px 8px; border-radius: 20px; }
.bb-bank-info { padding: 12px 14px 6px; flex: 1; }
.bb-bank-name { font-weight: 600; font-size: 0.88rem; color: #212529; margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-bank-code { font-size: 0.72rem; color: #adb5bd; margin: 0; letter-spacing: 0.04em; }
.bb-card-footer { padding: 8px 14px 12px; display: flex; align-items: center; gap: 6px; }
.bb-save-actions { display: flex; gap: 6px; animation: bb-fade-in .2s ease; }
.bb-save-actions:not([hidden]) { display: flex; }
.bb-empty { grid-column: 1 / -1; text-align: center; padding: 56px 24px; color: #adb5bd; }
.bb-empty i { font-size: 3rem; display: block; margin-bottom: 12px; }
.bb-empty p { font-size: 0.9rem; margin: 0; }

/* ── filter-global.css ─────────────────────────────────────────────────────── */

.content-filter { position: absolute; top: 55px; right: -15px; bottom: 0; width: 0; background-color: white; border-radius: 4px; z-index: 999; transition: 0.2s; overflow-y: auto; min-height: 65vh; max-height: 65vh; }
.content-filter .content-btn { display: flex; gap: 8px; margin: 14px; }
.content-filter .content-btn button { height: 30px; width: 30px; display: flex; justify-content: center; align-items: center; border-radius: 4px; border: 1px solid gray; transition: 0.2s; }
.content-filter .content-btn button i { font-size: 20px; }
.content-filter .content-btn .contract-extensor { border: 1px solid #4679cc; }
.content-filter .content-btn .contract-extensor:hover { background-color: #5496ff45; }
.content-filter .content-btn .clear-field { border: 1px solid #df0000; }
.content-filter .content-btn .clear-field:hover { background-color: #ff000021; }
.content-filter .container { height: 90%; overflow: auto; scroll-behavior: smooth; }
.content-filter .filter-footer { padding: 0 14px; position: absolute; bottom: 14px; width: 90%; }
.content-filter .burger-menu { left: initial; right: 14px; }
.content-filter .filter-footer button { background-color: #4679cc; border: 1px solid gray; border-radius: 4px; font-size: 16px; color: white; padding: 4px 12px; width: 100%; height: 34px; }
.content-filter .filter-added { margin: 0 14px; display: flex; gap: 4px; width: 85%; flex-wrap: wrap; margin-bottom: 14px; }
.content-filter .filter { transition: 0.2s; display: flex; align-items: center; font-size: 14px; gap: 4px; padding: 4px 8px; background-color: #4679cc21; border-radius: 4px; font-weight: 600; cursor: pointer; }
.content-filter .filter:hover { background-color: #4679cc; color: white; }
.content-filter .text { margin: 0; cursor: pointer; }
.content-filter .delete-added { font-weight: 600; margin-bottom: 2px; }
.content-filter .elements-filter { margin: 0 14px; }
.content-filter .content-field { font-size: 16px; margin-bottom: 16px; }
.content-filter .check-filter { display: flex; align-items: center; gap: 4px; }
.content-filter .check-filter .input-check { cursor: pointer; }
.content-filter .check-filter .label-filter { margin: 0; cursor: pointer; }
.content-filter .filter-field { margin: 4px 18px; width: 87%; }
.content-filter .filter-field .input-filter { width: 100%; height: 34px; border-radius: 4px; padding: 0 8px; border: 1px solid gray; outline: none; }
.filter-active { box-shadow: -1px 1px 4px 2px #c6c6c6; width: 400px; }
.relative span { position: absolute; top: -19px; left: 18px; font-size: 16px; background: #e8930e; width: 20px; height: 20px; border-radius: 50px; display: flex; color: white; align-items: center; justify-content: center; }
.content-filter .title { margin: 14px; }
.content-filter .title h4 { font-size: 16px; font-weight: 600; }
.table-header { width: 100%; height: auto; display: flex; justify-content: end; font-size: 1rem; margin-bottom: 12px; }
.table-header .content-search { display: flex; align-items: center; padding: 0; gap: 10px; }
.table-header .content-search .btn-filter { cursor: pointer; padding: 4px 12px; border: 1px solid gray; border-radius: 4px; background-color: #4679cc; color: white; height: 40px; display: flex; justify-content: center; align-items: center; width: 120px; gap: 8px; position: relative; }
.btn-filter .filter-active { position: absolute; left: -15px; top: -15px; width: 28px; background-color: white; display: flex; justify-content: center; align-items: center; height: 28px; border-radius: 50%; box-shadow: 0 0 3px 1px red; }
.btn-filter .filter-active p { color: #f40000; font-weight: 600; font-size: 22px; }
.table-header .content-search .btn-filter label { margin: 0; cursor: pointer; font-size: 18px; font-weight: 300; }
.table-header .content-search .input { max-width: 214px; }
.table-header .content-search p { margin: 0; }
.table-header .content-search input { font-size: 0.9rem; height: 24px; border-radius: 6px; border: 1px solid gray; padding: 14px 12px; width: 100%; }
.table-header .content-search select { font-size: 0.9rem; height: 30px; border-radius: 6px; border: 1px solid gray; padding: 2px 12px; cursor: pointer; width: 100%; }
.append-button { border-radius: 4px 0 0 4px !important; }
.cursor-pointer { cursor: pointer; }

/* ── select2my.css ─────────────────────────────────────────────────────────── */

select2-my { display: block; box-sizing: border-box; width: 100%; position: relative; }
select2-my *, select2-my *::before, select2-my *::after { box-sizing: border-box; }
select2-my.s2m-open { z-index: 80; }
select2-my .s2m-holder { width: 100%; height: 34px; border: 1px solid #94949478; display: flex; position: relative; padding: 0 0.875rem; cursor: pointer; color: #495057; background-color: #fff; background-clip: padding-box; border-radius: 4px; }
select2-my .s2m-holder.s2m-disabled { opacity: 0.5; cursor: not-allowed; }
select2-my .s2m-show { width: 90%; overflow: hidden; display: flex; align-items: center; font-weight: 400; line-height: 1.47; }
select2-my p { margin: 0; }
select2-my .s2m-drop { width: 10%; display: flex; justify-content: center; align-items: center; transition: transform 0.2s; }
select2-my.s2m-open .s2m-holder { border-color: #4679cc; }
select2-my.s2m-open .s2m-holder i { color: #4679cc; }
select2-my.s2m-open .s2m-drop { transform: rotate(180deg); }
.s2m-dropdown { display: none; flex-direction: column; align-items: center; gap: 10px; padding: 10px 10px 5px; position: fixed; z-index: 9999; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; overflow: hidden; box-shadow: 0 3px 4px rgba(0,0,0,.2); }
.s2m-dropdown.s2m-active { display: flex; border-color: #4679cc; }
.s2m-dropdown .s2m-search { width: 100%; display: flex; color: #495057; background-color: #fff; border: 2px solid #E5E5E5; border-radius: 4px; overflow: hidden; }
.s2m-dropdown.s2m-active .s2m-search { border-color: #4679cc; }
.s2m-dropdown .s2m-search i { width: 20%; display: flex; justify-content: center; align-items: center; }
.s2m-dropdown .s2m-search-input { width: 80%; color: #495057; background-color: #fff; border: 0; height: calc(1.47em + 1rem + 2px); padding: 0.5rem 0.875rem; font-weight: 400; line-height: 1.47; appearance: none; }
.s2m-dropdown .s2m-search-input:focus { outline: 0; border: 0; }
.s2m-dropdown .s2m-options { overflow-x: hidden; overflow-y: auto; max-height: 200px; display: flex; flex-direction: column; gap: 8px; width: 100%; padding-right: 5px; padding-bottom: 10px; }
.s2m-dropdown .s2m-options::-webkit-scrollbar { width: 8px; }
.s2m-dropdown .s2m-options::-webkit-scrollbar-thumb { background-color: #4679cc; border-radius: 4px; }
.s2m-dropdown .s2m-option { border: 1px solid #ccc; width: 100%; padding: 8px 14px; border-radius: 5px; user-select: none; cursor: pointer; }
.s2m-dropdown .s2m-option p { margin: 0; }
.s2m-dropdown .s2m-option:hover,
.s2m-dropdown .s2m-option.s2m-selected { color: #fff; font-weight: 500; background-color: #4679cc; border-color: #2016ff; transition: background-color 0.2s; }
.s2m-dropdown .s2m-option:active { transform: scale(.98); transition: transform 0.2s; }
select2-my.validate-input .s2m-holder { border-color: #dc3545; }
input.validate-input, textarea.validate-input { border-color: #dc3545 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   INLINE HBS STYLES (extracted from <style> blocks in template files)
═══════════════════════════════════════════════════════════════════════════ */

/* ── supplier-maintenance-cxp.hbs ──────────────────────────────────────────── */

.spl-param-info { margin-top: 4px; padding: 4px 8px; background: #f0f4ff; border: 1px solid #d6e0f5; border-radius: 4px; font-size: 0.72rem; color: #495057; }
.spl-param-info i { color: #1a73e8; margin-right: 4px; font-size: 0.72rem; }
.spl-param-info .spl-pi-label { color: #8c919a; }
.spl-param-info .spl-pi-value { font-weight: 600; color: #1a1d21; }
.param-form-row .custom-row { background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%) !important; border-left: 3px solid #1a73e8; border-bottom: 1.5px solid #d6e0f5; }
.param-form-row .param-seq-badge { display: inline-flex; align-items: center; gap: 4px; background: #e8f0fe; color: #1a73e8; font-size: 0.72rem; font-weight: 600; padding: 5px 14px; border-radius: 4px; letter-spacing: 0.02em; border: 1px solid #d0dff8; }

/* ── retentions-type-cxp.hbs ───────────────────────────────────────────────── */

.rt-cell-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.param-row-inactive { opacity: 0.5; }
.param-row-inactive .custom-cell { color: #adb5bd !important; }

/* ── fiscal-year-management.hbs ────────────────────────────────────────────── */

#fym_t1_modal_table .custom-row:hover { background: #f0f4ff; }
#fym_t1_modal_table .custom-row { transition: background .15s; }
.fym-summary { margin-bottom: 1rem; }
.fym-summary__card { background: #ffffff; border: 1px solid #e9ecef; border-radius: 8px; padding: 1rem; text-align: center; margin-bottom: .5rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.fym-summary__label { display: block; font-size: .78rem; color: #6c757d; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.fym-summary__value { display: block; font-size: 1.4rem; font-weight: 600; color: #343a40; }

/* ── news.hbs ───────────────────────────────────────────────────────────────── */

.nf-section-hdr { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #8a96a3; padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid #f0f1f3; }
.nf-section-hdr i { font-size: .85rem; color: #b8c0cc; }
.news-img-card { position: relative; width: 100%; height: 240px; border: 2px dashed #d0d6de; border-radius: 10px; overflow: hidden; cursor: pointer; background: #f8f9fb; display: flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s, box-shadow .2s; }
.news-img-card:hover { border-color: #4679cc; background: #eef2fb; box-shadow: 0 0 0 4px rgba(70,121,204,.08); }
.news-img-card input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 3; }
.news-img-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 1; text-align: center; padding: 0 24px; }
.news-img-empty .ni-icon { width: 52px; height: 52px; border-radius: 50%; background: #e8ecf2; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.news-img-empty .ni-icon i { font-size: 1.4rem; color: #9aaab8; }
.news-img-empty .ni-title { font-size: .84rem; font-weight: 600; color: #5a6473; }
.news-img-empty .ni-hint  { font-size: .73rem; color: #adb5bd; }
#news_main_preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; z-index: 1; }
.news-img-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; display: none; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px 8px; font-size: .78rem; font-weight: 500; z-index: 2; pointer-events: none; }
.news-img-card.has-image { border-style: solid; border-color: #4679cc; }
.news-img-card.has-image .news-img-empty  { display: none; }
.news-img-card.has-image #news_main_preview { display: block; }
.news-img-card.has-image .news-img-overlay { display: flex; }
.news-img-card.is-invalid { border-style: solid; border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220,53,69,.1); }
.news-sec-drop { border: 2px dashed #d0d6de; border-radius: 10px; background: #f8f9fb; padding: 20px 16px; text-align: center; cursor: pointer; position: relative; transition: border-color .2s, background .2s; min-height: 72px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.news-sec-drop:hover { border-color: #4679cc; background: #eef2fb; }
.news-sec-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.news-sec-drop i    { font-size: 1.1rem; color: #9aaab8; pointer-events: none; }
.news-sec-drop span { font-size: .8rem; color: #6c757d; pointer-events: none; }
.news-sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 12px; }
.news-sec-item { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4/3; background: #f0f1f3; }
.news-sec-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-sec-item .nsi-remove { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; border: none; font-size: .6rem; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; z-index: 2; }
.news-sec-item:hover .nsi-remove { opacity: 1; }
.news-editor-wrap { border: 1px solid #d0d6de; border-radius: 10px; background: #fff; overflow: hidden; }
.news-editor-toolbar { background: #f8f9fb; border-bottom: 1px solid #eaecef; padding: 8px 16px; display: flex; align-items: center; gap: 8px; }
.news-editor-toolbar span { font-size: .73rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #9aaab8; }
.news-editor-toolbar i { color: #b8c0cc; }
#news_editor { min-height: 340px; padding: 16px 24px; }
.codex-editor__redactor { padding-bottom: 60px !important; }
.nf-label { font-size: .8rem; font-weight: 600; color: #4a5568; margin-bottom: 6px; display: block; }

/* ── members.hbs ────────────────────────────────────────────────────────────── */

.member-img-card { position: relative; width: 100%; height: 160px; border: 2px dashed #d0d6de; border-radius: 10px; overflow: hidden; cursor: pointer; background: #f8f9fb; display: flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s, box-shadow .2s; }
.member-img-card:hover { border-color: #4679cc; background: #eef2fb; box-shadow: 0 0 0 4px rgba(70,121,204,.08); }
.member-img-card input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 3; }
.member-img-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 1; text-align: center; padding: 0 24px; }
.member-img-empty .mi-icon { width: 52px; height: 52px; border-radius: 50%; background: #e8ecf2; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.member-img-empty .mi-icon i { font-size: 1.4rem; color: #9aaab8; }
.member-img-empty .mi-title { font-size: .84rem; font-weight: 600; color: #5a6473; }
.member-img-empty .mi-hint  { font-size: .73rem; color: #adb5bd; }
#member_main_preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; z-index: 1; }
.member-img-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; display: none; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px 8px; font-size: .78rem; font-weight: 500; z-index: 2; pointer-events: none; }
.member-img-card.has-image { border-style: solid; border-color: #4679cc; }
.member-img-card.has-image .member-img-empty   { display: none; }
.member-img-card.has-image #member_main_preview { display: block; }
.member-img-card.has-image .member-img-overlay  { display: flex; }
.member-img-card.is-invalid { border-style: solid; border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220,53,69,.1); }

/* ── loan-credit-note.view.hbs ──────────────────────────────────────────────── */

.lcn-section-header { display: flex; align-items: center; background: #f8f9fa; border-left: 3px solid #1a73e8; border-radius: 3px; padding: 8px 14px; margin-bottom: 16px; font-size: .82rem; font-weight: 600; color: #343a40; text-transform: uppercase; letter-spacing: .04em; }
.lcn-section-header i { font-size: .95rem; color: #1a73e8; margin-right: 8px; }
.lcn-form-group { border: 1px solid #e9ecef; border-radius: 6px; padding: 16px 20px 12px; margin-bottom: 20px; background: #ffffff; }
.lcn-preview-bar { display: flex; align-items: center; gap: 8px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 4px; padding: 5px 10px; min-height: 30px; }
.lcn-preview-bar__icon        { font-size: .85rem; color: #adb5bd; flex-shrink: 0; }
.lcn-preview-bar__placeholder { font-size: .82rem; color: #adb5bd; font-style: italic; }
.lcn-preview-bar__text        { font-size: .82rem; color: #495057; font-weight: 500; }
.lcn-dist-wrapper { display: flex; gap: 12px; align-items: flex-start; }
.lcn-dist-current { flex: 0 0 240px; background: #eef2fc; border: 1px solid #c9d8f5; border-radius: 6px; padding: 12px 16px; }
.lcn-dist-separator { display: flex; align-items: center; color: #adb5bd; padding-top: 48px; font-size: 1rem; flex-shrink: 0; }
.lcn-dist-apply { flex: 0 0 250px; background: #ffffff; border: 1px solid #e9ecef; border-radius: 6px; padding: 12px 16px; }
.lcn-dist-panel-header { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6c757d; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,.08); }
.lcn-dist-item { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,.04); }
.lcn-dist-item:last-child { border-bottom: none; }
.lcn-dist-item--separator { border-top: 1px solid #c9d8f5; margin-top: 4px; padding-top: 8px; }
.lcn-dist-label { font-size: .8rem; color: #6c757d; }
.lcn-dist-value { font-size: .85rem; font-weight: 600; color: #343a40; }
.lcn-dist-value--total   { color: #1a73e8; }
.lcn-dist-value--overdue { color: #dc3545; }
.lcn-dist-apply__rows { display: flex; flex-direction: column; gap: 6px; }
.lcn-apply-row { display: flex; align-items: center; gap: 10px; }
.lcn-apply-row__label { font-size: 0.82rem; color: #6c757d; width: 58px; min-width: 58px; text-align: right; flex-shrink: 0; }
.lcn-apply-row .form-control { flex: 1; }
.lcn-apply-row--total { border-top: 1px solid #dee2e6; padding-top: 6px; margin-top: 2px; }
.lcn-schedule-header { font-size: .8rem; font-weight: 600; color: #495057; text-transform: uppercase; letter-spacing: .03em; }
.lcn-schedule-totals { display: flex; flex-wrap: wrap; gap: 6px 24px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 4px; padding: 8px 14px; font-size: .82rem; }
.lcn-schedule-totals__item  { display: flex; gap: 6px; align-items: baseline; }
.lcn-schedule-totals__label { color: #6c757d; }
.lcn-schedule-totals__value { font-weight: 700; color: #343a40; }
#lcn_loan_modal_table .custom-row       { cursor: pointer; transition: background .15s; }
#lcn_loan_modal_table .custom-row:hover { background: #f0f4ff; }

/* ── debit-note-loan.hbs ────────────────────────────────────────────────────── */

.dn-section-header { display: flex; align-items: center; background: #f8f9fa; border-left: 3px solid #1a73e8; border-radius: 3px; padding: 8px 14px; font-size: .82rem; font-weight: 600; color: #343a40; text-transform: uppercase; letter-spacing: .04em; }
.dn-section-header i { font-size: .95rem; color: #1a73e8; margin-right: 8px; }
.dn-form-group { border: 1px solid #e9ecef; border-radius: 6px; padding: 16px 20px 8px; margin-bottom: 20px; background: #ffffff; }
.dn-preview-bar { display: flex; align-items: center; gap: 8px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 4px; padding: 5px 10px; min-height: 30px; }
.dn-preview-bar__icon        { font-size: .85rem; color: #adb5bd; flex-shrink: 0; }
.dn-preview-bar__placeholder { font-size: .82rem; color: #adb5bd; font-style: italic; }
.dn-preview-bar__text        { font-size: .82rem; color: #495057; font-weight: 500; }
#dn_loan_modal_table .custom-row       { transition: background .15s; cursor: pointer; }
#dn_loan_modal_table .custom-row:hover { background: #f0f4ff; }

/* ── config-loan-saving.hbs ─────────────────────────────────────────────────── */

.cfg-section-card { border: 1px solid #e4e7ea; border-radius: 6px; background: #fff; padding: 1.25rem; height: 100%; }
.cfg-section-card__title { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid #f0f0f0; }
.cfg-section-card__add { display: flex; gap: .5rem; margin-bottom: 1rem; }
.cfg-section-card__add select2-my { flex: 1; }
.cfg-item { padding: .35rem .5rem; border-radius: 4px; margin-bottom: .3rem; background: #f8f9fa; }
.cfg-item__badge { font-size: .8rem; padding: .3em .7em; }
.cfg-item + .cfg-item { margin-top: .25rem; }

/* ── company-configuration.hbs ──────────────────────────────────────────────── */

.cc-steps-bar { display: flex; align-items: center; gap: 0; padding: .75rem 1.5rem; background: #f8f9fa; border-bottom: 1px solid #e4e7ea; }
.cc-step { display: flex; align-items: center; gap: .5rem; color: #adb5bd; font-size: .85rem; padding: .3rem .9rem; border-radius: 20px; transition: background .2s, color .2s; user-select: none; }
.cc-step.active    { background: #d4edda; color: #155724; font-weight: 600; }
.cc-step.completed { color: #28a745; cursor: pointer; }
.cc-step.completed:hover { background: #f0fdf4; }
.cc-step__num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: currentColor; color: #fff; font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.cc-step.active    .cc-step__num { background: #155724; }
.cc-step.completed .cc-step__num { background: #28a745; }
.cc-step + .cc-step::before { content: '›'; margin-right: .9rem; color: #ced4da; font-size: 1.1rem; }
.cc-summary-strip { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; background: #eef2f7; border: 1px solid #c8d6e5; border-radius: 6px; padding: .45rem 1rem; font-size: .8rem; margin-bottom: 1.5rem; }
.cc-summary-item  { display: flex; align-items: center; gap: .3rem; }
.cc-summary-label { color: #6c757d; font-weight: 500; }
.cc-summary-value { color: #1a202c; font-weight: 700; }
.cc-summary-sep   { color: #ced4da; font-weight: 300; }
.cc-summary-badge { display: inline-block; padding: .1rem .45rem; border-radius: 12px; font-size: .75rem; font-weight: 600; line-height: 1.4; }
.cc-summary-badge--green { background: #d4edda; color: #155724; }
.cc-summary-badge--red   { background: #f8d7da; color: #721c24; }
.cc-param-row { background: #f8f9fa; border-radius: 4px; }
.cc-param-row:hover { background: #e9ecef; }
.cc-param-row--editing { background: #fff8e1; border: 1px solid #ffe082; }
.cc-section-title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; margin-bottom: 1rem; }
.cc-form-section { padding: 1.25rem 1.5rem; background: #fff; border: 1px solid #e9ecef; border-radius: 6px; margin-bottom: 1.25rem; }
#cc_editor_container { height: 320px; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; }
.cc-editor-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.cc-editor-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #4a5568; display: flex; align-items: center; gap: .35rem; }
.cc-editor-label i { color: #718096; }
#cc_params_chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-height: 28px; margin-bottom: .5rem; }
#cc_params_chips:empty { display: none; }
.cc-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 20px; font-size: .75rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; cursor: pointer; border: 1px solid transparent; transition: background .15s, transform .1s, box-shadow .15s; line-height: 1.3; white-space: nowrap; background: none; }
.cc-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.cc-chip:active { transform: translateY(0); }
.cc-chip--param { background: #e3f8f5; border-color: #81e6d9; color: #234e52; }
.cc-chip--param:hover { background: #b2f5ea; border-color: #4fd1c5; }
.cc-chip__name { font-weight: 600; }
.cc-chip__type { font-size: .65rem; background: rgba(0,0,0,.08); border-radius: 10px; padding: .1rem .35rem; opacity: .8; }
.cc-chips-empty-hint { font-size: .75rem; color: #adb5bd; font-style: italic; }
#cc_dynamic_inputs { margin-top: .75rem; }
.cc-inputs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem .75rem; }
.cc-input-cell label { font-size: .75rem; color: #4a5568; margin-bottom: .25rem; display: flex; align-items: center; gap: .3rem; }
.cc-input-key { font-size: .68rem; font-family: monospace; background: #edf2f7; border-radius: 4px; padding: .1rem .3rem; color: #4a5568; }
.cc-action-bar { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
#cc_test_result { font-family: monospace; }
.cc-context-panel { background: #1e2433; border-radius: 8px; border: 1px solid #2d3748; height: 100%; min-height: 420px; display: flex; flex-direction: column; overflow: hidden; }
.cc-context-panel__header { padding: .6rem .9rem; background: #2d3748; border-bottom: 1px solid #4a5568; flex-shrink: 0; }
.cc-context-panel__title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #a0aec0; margin: 0; display: flex; align-items: center; gap: .4rem; }
.cc-context-panel__body { flex: 1; overflow-y: auto; padding: .5rem .25rem; }
.cc-context-panel__body::-webkit-scrollbar       { width: 5px; }
.cc-context-panel__body::-webkit-scrollbar-track  { background: #1e2433; }
.cc-context-panel__body::-webkit-scrollbar-thumb  { background: #4a5568; border-radius: 4px; }
.cc-ctx-row { display: flex; align-items: center; justify-content: space-between; padding: .3rem .65rem; border-radius: 5px; cursor: pointer; transition: background .12s; gap: .5rem; }
.cc-ctx-row:hover { background: #2d3748; }
.cc-ctx-row:hover .cc-ctx-key { color: #63b3ed; }
.cc-ctx-key { font-family: 'SFMono-Regular', Consolas, monospace; font-size: .78rem; color: #90cdf4; white-space: nowrap; transition: color .12s; }
.cc-ctx-eq  { font-family: monospace; font-size: .75rem; color: #4a5568; flex-shrink: 0; }
.cc-ctx-val { font-family: 'SFMono-Regular', Consolas, monospace; font-size: .78rem; color: #68d391; text-align: right; white-space: nowrap; }
.cc-ctx-insert-hint { display: none; font-size: .65rem; color: #4a5568; margin-left: .5rem; }
.cc-ctx-row:hover .cc-ctx-insert-hint { display: inline; }
.param-form-row .custom-cell {
    background: #f4f8ff !important;
    border-bottom: none !important;
}
.param-form-row .custom-cell:first-child {
    border-left: 3px solid #1a73e8;
}

/* ── Budget card chevron ───────────────────────────────────────────────────── */
.budget-chevron-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}
.budget-chevron-btn:hover {
    background-color: rgba(0, 0, 0, 0.08);
}
.budget-chevron {
    transition: transform 0.25s ease;
    font-size: 0.95rem;
    color: #6c757d;
}
.card-title:not(.collapsed) .budget-chevron {
    transform: rotate(180deg);
}

/* ─── Parameter screens shared styles ─────────────────────────────────────── */
.param-form-row .custom-row {
    background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%) !important;
    border-left: 3px solid #1a73e8;
    border-bottom: 1.5px solid #d6e0f5;
}
.param-form-row .param-seq-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e8f0fe;
    color: #1a73e8;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    border: 1px solid #d0dff8;
}
.param-row-inactive { opacity: 0.5; }
.param-row-inactive .custom-cell { color: #adb5bd !important; }

.char-counter {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    text-align: right;
    margin-top: 2px;
    line-height: 1;
}

.btn:disabled { cursor: not-allowed; }

/* ─── Inventory: Label templates ──────────────────────────────────────────── */
#lt_list_table .custom-header,
#lt_list_table .custom-tbody {
    grid-template-columns: 0.6fr 0.8fr 1.2fr 0.8fr 0.8fr 0.6fr 0.6fr 0.6fr;
}
.lt-field-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.lt-field-table thead th {
    padding: 6px 8px; font-size: 0.7rem; font-weight: 600;
    background: #f8f9fa; border-bottom: 1px solid #dee2e6; color: #495057;
}
.lt-field-table tbody td {
    padding: 4px 6px; vertical-align: middle; border-bottom: 1px solid #f0f1f3;
}
.lt-field-table tbody td input,
.lt-field-table tbody td select {
    font-size: 0.75rem; padding: 2px 6px; height: auto;
}
.lt-field-table .lt-remove-btn {
    background: none; border: none; color: #dc3545; cursor: pointer; font-size: 0.8rem;
}
.lt-field-table .lt-remove-btn:hover { color: #a71d2a; }
.lt-preview-area {
    border: 2px dashed #dee2e6; border-radius: 6px; position: relative;
    background: #fff; overflow: hidden; margin: 0 auto;
}
.lt-preview-field {
    position: absolute; white-space: nowrap; font-family: Arial, sans-serif;
}
.lt-preview-barcode {
    position: absolute; font-family: 'Libre Barcode 128', monospace;
    letter-spacing: 2px;
}
.badge-gondola { background-color: #10b981; color: #fff; }
.badge-colgante { background-color: #f59e0b; color: #fff; }
.badge-personalizada { background-color: #6b7280; color: #fff; }

/* ─── Inventory: Print history ────────────────────────────────────────────── */
#ph_list_table .custom-header,
#ph_list_table .custom-tbody {
    grid-template-columns: 1.2fr 1fr 0.8fr 0.7fr 0.8fr 0.8fr;
}
.badge-procesando { background-color: #3b82f6; color: #fff; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.badge-completado { background-color: #10b981; color: #fff; }
.badge-error { background-color: #ef4444; color: #fff; }
.badge-pendiente { background-color: #6b7280; color: #fff; }

/* ─── Inventory: Product base ─────────────────────────────────────────────── */
#pb_list_table .custom-thead,
#pb_list_table .custom-tbody .custom-tr {
    grid-template-columns: 0.7fr 1.3fr 0.8fr 0.8fr 0.8fr 0.7fr 0.7fr 0.5fr 0.5fr;
}
#pb_var_table .custom-thead,
#pb_var_table .custom-tbody .custom-tr {
    grid-template-columns: 0.8fr 1fr 1.8fr 0.7fr 0.7fr 0.5fr 0.5fr;
}
#pb_pkg_table .custom-thead,
#pb_pkg_table .custom-tbody .custom-tr {
    grid-template-columns: 1.2fr 0.6fr 1fr 0.8fr 0.6fr 0.6fr 0.6fr;
}
.pb-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: .82rem;
    color: #6c757d;
}
.pb-img-card {
    position: relative;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    overflow: hidden;
    width: 140px;
    text-align: center;
    background: #fafafa;
}
.pb-img-card img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}
.pb-attr-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
}
.pb-var-chip {
    display: inline-block;
    background: #e8f0fe;
    color: #1a73e8;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 500;
}
.pb-var-price-own {
    color: #28a745;
    font-weight: 600;
}
.pb-var-price-inh {
    color: #6c757d;
    font-style: italic;
}
.pb-var-attr-ro {
    background: #f5f5f5;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: .85rem;
    color: #495057;
}
.pb-pkg-base-row {
    background: #f8f9fa;
    border-left: 3px solid #1a73e8;
}
.pb-stock-branch {
    border: 1px solid #e9ecef; border-radius: 6px;
    margin-bottom: 12px; overflow: hidden;
}
.pb-stock-branch-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; background: #f8f9fa; cursor: pointer;
    border-bottom: 1px solid #e9ecef;
}
.pb-stock-branch-header:hover { background: #f0f4ff; }
.pb-stock-branch-title {
    font-size: 0.82rem; font-weight: 600; color: #343a40;
}
.pb-stock-branch-title i { color: #1a73e8; margin-right: 6px; }
.pb-stock-wh {
    padding: 8px 14px; border-bottom: 1px solid #f0f1f3;
}
.pb-stock-wh:last-child { border-bottom: none; }
.pb-stock-wh-name {
    font-size: 0.78rem; font-weight: 600; color: #495057;
    margin-bottom: 6px;
}
.pb-stock-wh-name i { color: #6c757d; margin-right: 4px; }
.pb-stock-table {
    width: 100%; border-collapse: collapse; font-size: 0.76rem;
}
.pb-stock-table thead th {
    padding: 4px 8px; font-weight: 600; color: #8c919a;
    border-bottom: 1px solid #dee2e6; font-size: 0.68rem;
    text-transform: uppercase; letter-spacing: .03em;
}
.pb-stock-table tbody td {
    padding: 4px 8px; border-bottom: 1px solid #f3f4f6;
}
.pb-stock-low { color: #dc3545; font-weight: 600; }
#pb_var_table .custom-tbody .custom-cell,
#pb_pkg_table .custom-tbody .custom-cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ─── Inventory: Purchase order ───────────────────────────────────────────── */
#po_list_table .custom-header,
#po_list_table .custom-tbody {
    grid-template-columns: 0.3fr 0.7fr 0.6fr 1fr 0.6fr 0.4fr 0.4fr 0.5fr 0.6fr 0.4fr 0.3fr;
}
#po_detail_table .custom-header,
#po_detail_table .custom-tbody {
    grid-template-columns: 0.7fr 1.2fr 0.8fr 0.7fr 0.5fr 0.6fr 0.6fr 0.3fr;
}
#po_prod_modal_table .custom-header,
#po_prod_modal_table .custom-tbody {
    grid-template-columns: 0.7fr 1.3fr 1fr 1fr 0.7fr 0.5fr;
}
#po_recv_table .custom-header,
#po_recv_table .custom-tbody {
    grid-template-columns: 1.2fr 0.9fr 0.6fr 0.6fr 0.6fr 0.7fr 0.5fr;
}
#po_reorder_table .custom-header,
#po_reorder_table .custom-tbody {
    grid-template-columns: 0.7fr 1fr 0.8fr 0.5fr 0.5fr 0.5fr 0.5fr 0.6fr 0.8fr 0.3fr;
}
.badge-borrador  { background: #f59e0b; color: #fff; }
.badge-enviado   { background: #3b82f6; color: #fff; }
.badge-parcial   { background: #f97316; color: #fff; }
.badge-recibido  { background: #10b981; color: #fff; }
.badge-anulado   { background: #ef4444; color: #fff; }
.badge-dop       { background: #3b82f6; color: #fff; }
.badge-usd       { background: #10b981; color: #fff; }
.po-pagination {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; font-size: .82rem; color: #6c757d;
}
.po-pagination-controls { display: flex; gap: 4px; }
.po-pagination-controls button {
    border: 1px solid #dee2e6; background: #fff; border-radius: 4px;
    padding: 3px 10px; font-size: .78rem; cursor: pointer; color: #495057; transition: background .15s;
}
.po-pagination-controls button:hover:not(:disabled) { background: #e9ecef; }
.po-pagination-controls button:disabled { opacity: .4; cursor: default; }
.po-pagination-controls button.active { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.po-progress-bar {
    width: 100%; height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden;
}
.po-progress-bar-fill {
    height: 100%; background: #10b981; border-radius: 3px; transition: width .3s;
}
.po-progress-text { font-size: 0.7rem; color: #6c757d; text-align: center; }

/* ─── Inventory: Stock entry ──────────────────────────────────────────────── */
#se_list_table .custom-header,
#se_list_table .custom-tbody {
    grid-template-columns: 0.4fr 0.7fr 0.8fr 0.9fr 0.7fr 0.4fr 0.6fr 0.5fr 0.6fr 0.6fr 0.4fr;
}
#se_detail_table .custom-header,
#se_detail_table .custom-tbody {
    grid-template-columns: 1.2fr 0.8fr 0.7fr 0.7fr 0.4fr 0.5fr 0.4fr 0.5fr 0.5fr 0.4fr 0.5fr 0.5fr 0.25fr;
}
#se_prod_modal_table .custom-header,
#se_prod_modal_table .custom-tbody {
    grid-template-columns: 0.7fr 1.3fr 1fr 1fr 0.7fr 0.5fr;
}
.badge-posteado { background: #10b981; color: #fff; }
.se-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: .82rem;
    color: #6c757d;
}
.se-pagination-controls {
    display: flex;
    gap: 4px;
}
.se-pagination-controls button {
    border: 1px solid #dee2e6;
    background: #fff;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: .78rem;
    cursor: pointer;
    color: #495057;
    transition: background .15s;
}
.se-pagination-controls button:hover:not(:disabled) {
    background: #e9ecef;
}
.se-pagination-controls button:disabled {
    opacity: .4;
    cursor: default;
}
.se-pagination-controls button.active {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
}
.se-summary-row {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    padding: 10px 16px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    font-size: .82rem;
    font-weight: 600;
    color: #495057;
}
.se-summary-row span.value {
    color: #1a73e8;
    margin-left: 6px;
}

/* ─── Inventory: Discount ─────────────────────────────────────────────────── */
#disc_list_table .custom-header,
#disc_list_table .custom-tbody {
    grid-template-columns: 0.4fr 0.6fr 1.2fr 0.7fr 0.5fr 1fr 1fr 0.8fr 0.4fr 0.4fr;
}
#disc_prod_modal_table .custom-header,
#disc_prod_modal_table .custom-tbody {
    grid-template-columns: 0.7fr 1.3fr 1fr 1fr 0.7fr 0.5fr;
}
#disc_var_modal_table .custom-header,
#disc_var_modal_table .custom-tbody {
    grid-template-columns: 0.8fr 1.2fr 1.2fr 0.7fr 0.6fr 0.5fr;
}
.disc-row-inactive { opacity: 0.5; }
.disc-row-inactive .custom-cell { color: #adb5bd !important; }
.disc-target-field { display: none; }
.disc-duration { font-size: 0.78rem; color: #6b7280; margin-top: 4px; }

/* ─── Inventory params: param-table layouts ──────────────────────────────── */
#at_param_table .custom-header,
#at_param_table .custom-tbody {
    grid-template-columns: 0.6fr 0.8fr 1.2fr 1.5fr 0.9fr 0.7fr 1fr;
}
#av_param_table .custom-header,
#av_param_table .custom-tbody {
    grid-template-columns: 0.6fr 1.2fr 0.8fr 1.2fr 0.6fr 0.7fr 1.1fr;
}
#br_list_table .custom-header, #br_list_table .custom-tbody {
    grid-template-columns: 0.6fr 0.8fr 1.2fr 0.8fr 1.2fr 0.8fr 0.6fr 0.6fr 0.6fr;
}
#wh_list_table .custom-header, #wh_list_table .custom-tbody {
    grid-template-columns: 0.8fr 1.2fr 0.8fr 0.6fr 0.6fr 0.6fr 0.6fr;
}
#brd_param_table .custom-header,
#brd_param_table .custom-tbody {
    grid-template-columns: 0.6fr 0.8fr 1.2fr 1.5fr 1fr 0.7fr 1fr;
}
#dep_param_table .custom-header,
#dep_param_table .custom-tbody {
    grid-template-columns: 0.6fr 0.8fr 1.2fr 1.8fr 0.8fr 0.7fr 1.1fr;
}
#fam_param_table .custom-header,
#fam_param_table .custom-tbody {
    grid-template-columns: 0.6fr 0.8fr 1.2fr 1.2fr 0.8fr 0.7fr 1.1fr;
}
#it_list_table .custom-header,
#it_list_table .custom-tbody {
    grid-template-columns: 0.6fr 0.8fr 1.2fr 2fr 0.7fr 0.8fr;
}
#ita_config_table .custom-header,
#ita_config_table .custom-tbody {
    grid-template-columns: 0.5fr 1.5fr 0.8fr 2.5fr 0.7fr;
}
#uom_param_table .custom-header,
#uom_param_table .custom-tbody {
    grid-template-columns: 0.8fr 1fr 1.5fr 0.8fr 1fr 0.8fr 1.3fr;
}

/* ─── Inventory params: misc ─────────────────────────────────────────────── */
.at-note { font-size: 0.72rem; color: #6c757d; font-style: italic; margin-top: 2px; }
.badge-bodega { background-color: #10b981; color: #fff; }
.badge-venta { background-color: #10b981; color: #fff; }
.badge-almacenamiento { background-color: #3b82f6; color: #fff; }
.badge-danados { background-color: #ef4444; color: #fff; }
.badge-cuarentena { background-color: #f59e0b; color: #fff; }
.badge-devolucion { background-color: #7c3aed; color: #fff; }
.ita-chip {
    display: inline-block; padding: 2px 10px; margin: 2px 3px;
    border-radius: 12px; font-size: 0.72rem; font-weight: 500;
    background: #e8f0fe; color: #1a73e8; border: 1px solid #d0dff8;
}
.ita-values-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.ita-empty {
    text-align: center; padding: 20px; color: #6c757d; font-size: 0.82rem;
}

/* Account Catalog — proportional columns, Actions always visible */
#cc_catalog_table .custom-header,
#cc_catalog_table .custom-tbody {
    grid-template-columns:
        minmax(0, 1fr)      /* Account        */
        minmax(0, 2fr)    /* Description    */
        minmax(0, 0.75fr)   /* Type           */
        minmax(0, 0.75fr)   /* Origin         */
        minmax(0, 1fr)      /* Control Account */
        minmax(0, 0.75fr)   /* Status         */
        150px                /* Actions        */
        !important;
}
.ita-empty p { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   DS-AUTH — Login screens (multi-step)
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-auth-body {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #060b1d;
    color: #0f172a;
    min-height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11" on, "ss01" on, "ss03" on;
}

.ds-auth-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(1100px 640px at 16% 18%, rgba(56, 132, 255, 0.18), transparent 60%),
        radial-gradient(900px 540px at 88% 82%, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(600px 360px at 50% 110%, rgba(14, 165, 233, 0.10), transparent 55%),
        linear-gradient(160deg, #050a1c 0%, #081230 50%, #0a1a44 100%);
}

.ds-auth-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 197, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 197, 255, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 50% 45%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 45%, black 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

/* ─── 3D scene ──────────────────────────────────────────────────────── */
.ds-auth-scene {
    position: absolute;
    inset: 0;
    perspective: 1400px;
    perspective-origin: 50% 50%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ds-auth-stage {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    --mx: 0;
    --my: 0;
    transform:
        rotateY(calc(var(--mx) * 12deg))
        rotateX(calc(var(--my) * -12deg))
        translateZ(0);
    will-change: transform;
}

.ds-auth-cube {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    transform-style: preserve-3d;
    animation: dsAuthCubeFloat var(--dur, 50s) linear infinite;
    will-change: transform;
}

@keyframes dsAuthCubeFloat {
    0%   { transform: translate3d(-50%, -50%, var(--depth, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
    50%  { transform: translate3d(-50%, calc(-50% - 14px), var(--depth, 0)) rotateX(calc(var(--rx, 0deg) + 180deg)) rotateY(calc(var(--ry, 0deg) + 180deg)); }
    100% { transform: translate3d(-50%, -50%, var(--depth, 0)) rotateX(calc(var(--rx, 0deg) + 360deg)) rotateY(calc(var(--ry, 0deg) + 360deg)); }
}

.ds-auth-cube__face {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid hsla(var(--hue, 212), 90%, 72%, 0.34);
    background: linear-gradient(135deg,
        hsla(var(--hue, 212), 90%, 60%, 0.10),
        hsla(var(--hue, 212), 90%, 60%, 0.02));
    box-shadow:
        inset 0 0 22px hsla(var(--hue, 212), 95%, 72%, 0.10),
        0 0 14px hsla(var(--hue, 212), 95%, 60%, 0.05);
    backface-visibility: visible;
}

.ds-auth-cube__face--front  { transform: translateZ(calc(var(--size) / 2)); }
.ds-auth-cube__face--back   { transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
.ds-auth-cube__face--right  { transform: rotateY(90deg)  translateZ(calc(var(--size) / 2)); }
.ds-auth-cube__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
.ds-auth-cube__face--top    { transform: rotateX(90deg)  translateZ(calc(var(--size) / 2)); }
.ds-auth-cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); }

@media (prefers-reduced-motion: reduce) {
    .ds-auth-cube { animation: none; }
    .ds-auth-stage { transition: none; }
}

/* ─── Main / card ───────────────────────────────────────────────────── */
.ds-auth-main {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 32px 20px;
}

.ds-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-auth-brand__logo {
    height: 38px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.ds-auth-footer {
    color: rgba(226, 232, 240, 0.55);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.ds-auth-shell input,
.ds-auth-shell button,
.ds-auth-shell a,
.ds-auth-shell select,
.ds-auth-shell textarea,
.ds-auth-shell input:focus,
.ds-auth-shell input:focus-visible,
.ds-auth-shell input:active,
.ds-auth-shell button:focus,
.ds-auth-shell button:focus-visible,
.ds-auth-shell a:focus,
.ds-auth-shell a:focus-visible,
.ds-auth-shell select:focus,
.ds-auth-shell textarea:focus {
    outline: none !important;
    outline-offset: 0 !important;
    -webkit-tap-highlight-color: transparent;
}

/* Wipe any rectangular focus shadow on the bare <input> — our halo lives on
   the rounded wrapper (.ds-auth-input:focus-within). */
.ds-auth-shell input,
.ds-auth-shell input:focus,
.ds-auth-shell input:focus-visible,
.ds-auth-shell input:active {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-color: transparent !important;
}

/* The submit button keeps its glow shadow; we only need to ensure no
   rectangular browser ring is added. The rules above already kill outline. */

/* Autofill (Chrome) — keep input transparent so wrapper background shows */
.ds-auth-shell input:-webkit-autofill,
.ds-auth-shell input:-webkit-autofill:hover,
.ds-auth-shell input:-webkit-autofill:focus,
.ds-auth-shell input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #f6f8fc inset !important;
    -webkit-text-fill-color: #0a0f1f !important;
    caret-color: #0a0f1f;
    transition: background-color 5000s ease-in-out 0s;
}

.ds-auth-input:focus-within input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
}

.ds-auth-card {
    width: 100%;
    max-width: 440px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 100%);
    border-radius: 22px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 24px 60px -12px rgba(2, 8, 32, 0.55),
        0 8px 24px -8px rgba(2, 8, 32, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 44px 40px 36px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.ds-auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26, 115, 232, 0.45), transparent);
    pointer-events: none;
}

.ds-auth-step {
    display: none;
    animation: dsAuthFadeIn .35s cubic-bezier(.2, .7, .2, 1);
}

.ds-auth-step[data-active] { display: block; }
.ds-auth-step--center { text-align: center; }

@keyframes dsAuthFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ds-auth-step__header {
    margin-bottom: 30px;
}

.ds-auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1a73e8;
    background: linear-gradient(180deg, rgba(26, 115, 232, 0.12), rgba(26, 115, 232, 0.06));
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(26, 115, 232, 0.18);
    margin-bottom: 18px;
    font-feature-settings: "ss01" on, "cv11" on;
}

.ds-auth-eyebrow--warn {
    color: #b45309;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.08));
    border-color: rgba(245, 158, 11, 0.22);
}

.ds-auth-step__header h1 {
    margin: 0 0 8px;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 1.85rem;
    font-weight: 600;
    color: #0a0f1f;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.ds-auth-step__header p {
    margin: 0;
    color: #5b6478;
    font-size: 0.92rem;
    line-height: 1.55;
    letter-spacing: -0.005em;
}

.ds-auth-step__header strong {
    color: #0f172a;
    font-weight: 600;
}

/* ─── Form fields ───────────────────────────────────────────────────── */
.ds-auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ds-auth-field { display: flex; flex-direction: column; gap: 7px; }

.ds-auth-field label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #475569;
    letter-spacing: -0.005em;
}

.ds-auth-input {
    position: relative;
    display: flex;
    align-items: center;
    background: #f6f8fc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    transition: border-color .2s, box-shadow .2s, background .2s, transform .12s;
}

.ds-auth-input:hover {
    border-color: rgba(15, 23, 42, 0.14);
    background: #f3f6fb;
}

.ds-auth-input:focus-within {
    background: #ffffff;
    border-color: #1a73e8;
    box-shadow:
        0 0 0 4px rgba(26, 115, 232, 0.12),
        0 1px 2px rgba(15, 23, 42, 0.04);
}

.ds-auth-input > i:first-child {
    position: absolute;
    left: 15px;
    color: #94a3b8;
    font-size: 0.95rem;
    pointer-events: none;
    transition: color .18s;
}

.ds-auth-input:focus-within > i:first-child {
    color: #1a73e8;
}

.ds-auth-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    border-radius: inherit;
    padding: 14px 14px 14px 44px;
    font-size: 0.95rem;
    color: #0a0f1f;
    font-family: inherit;
    font-feature-settings: "cv11" on, "ss01" on;
    letter-spacing: -0.01em;
}

.ds-auth-input input::placeholder {
    color: #a3acbc;
    font-weight: 400;
}

.ds-auth-toggle-pwd {
    background: transparent;
    border: 0;
    padding: 0 14px;
    color: #94a3b8;
    cursor: pointer;
    height: 100%;
    display: inline-flex;
    align-items: center;
    transition: color .15s;
}

.ds-auth-toggle-pwd:hover { color: #1a73e8; }

.ds-auth-hint {
    margin: 0;
    font-size: 0.78rem;
    color: #94a3b8;
}

/* ─── Feedback / error ──────────────────────────────────────────────── */
.ds-auth-feedback {
    display: none;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #b91c1c;
    font-size: 0.85rem;
    line-height: 1.4;
}

.ds-auth-feedback[data-visible] { display: block; }

/* ─── Info banner (admin code, etc.) ────────────────────────────────── */
.ds-auth-info {
    display: none;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(26, 115, 232, 0.06);
    border: 1px solid rgba(26, 115, 232, 0.18);
    color: #155cb8;
    font-size: 0.84rem;
    line-height: 1.45;
}

.ds-auth-info[data-visible] { display: block; }

/* ─── Admin toggle (switch) ────────────────────────────────────────── */
.ds-auth-switch {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #f6f8fc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: background .18s, border-color .18s;
    user-select: none;
}

.ds-auth-switch:hover {
    background: #f1f4fa;
    border-color: rgba(15, 23, 42, 0.10);
}

.ds-auth-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ds-auth-switch__track {
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    position: relative;
    transition: background .22s cubic-bezier(.2, .7, .2, 1);
    margin-top: 2px;
}

.ds-auth-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    transition: transform .22s cubic-bezier(.2, .7, .2, 1);
}

.ds-auth-switch__input:checked + .ds-auth-switch__track {
    background: linear-gradient(180deg, #2b85ff 0%, #1361d8 100%);
}

.ds-auth-switch__input:checked + .ds-auth-switch__track .ds-auth-switch__thumb {
    transform: translateX(16px);
}

.ds-auth-switch__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ds-auth-switch__title {
    font-size: 0.86rem;
    font-weight: 500;
    color: #0a0f1f;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ds-auth-switch__title i {
    color: #1a73e8;
    font-size: 0.92rem;
}

.ds-auth-switch__hint {
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.4;
}

/* ─── OTP — 6-digit code input ─────────────────────────────────────── */
.ds-auth-otp {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 4px;
}

.ds-auth-otp__digit {
    width: 100%;
    aspect-ratio: 1 / 1.18;
    border: 1.5px solid rgba(15, 23, 42, 0.16);
    background: #eef2f8;
    border-radius: 12px;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #0a0f1f;
    text-align: center;
    letter-spacing: -0.02em;
    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.6);
    transition: border-color .18s, box-shadow .18s, background .18s, transform .12s;
    -moz-appearance: textfield;
}

.ds-auth-otp__digit::-webkit-outer-spin-button,
.ds-auth-otp__digit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ds-auth-otp__digit:hover {
    border-color: rgba(15, 23, 42, 0.26);
    background: #e6ebf3;
}

.ds-auth-shell input.ds-auth-otp__digit:focus,
.ds-auth-shell input.ds-auth-otp__digit:focus-visible {
    background: #ffffff;
    border-color: #1a73e8 !important;
    box-shadow:
        0 0 0 4px rgba(26, 115, 232, 0.14),
        inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    -webkit-box-shadow:
        0 0 0 4px rgba(26, 115, 232, 0.14),
        inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transform: translateY(-1px);
}

.ds-auth-otp__digit[data-filled] {
    background: #ffffff;
    border-color: rgba(26, 115, 232, 0.55);
    color: #1361d8;
    box-shadow:
        0 0 0 1px rgba(26, 115, 232, 0.10),
        0 2px 6px -2px rgba(26, 115, 232, 0.20);
}

.ds-auth-otp-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 12px;
}

.ds-auth-otp-actions .ds-auth-back {
    margin-top: 0;
}

.ds-auth-link--btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    padding: 8px 4px;
}

.ds-auth-link--btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── Buttons ───────────────────────────────────────────────────────── */
.ds-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 0;
    background:
        linear-gradient(180deg, #2b85ff 0%, #1361d8 100%);
    color: #fff;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 1px 2px rgba(2, 8, 32, 0.30),
        0 8px 22px -6px rgba(26, 115, 232, 0.55);
    transition: transform .15s cubic-bezier(.2, .7, .2, 1), box-shadow .2s, opacity .18s, filter .2s;
}

.ds-auth-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 45%);
    pointer-events: none;
}

.ds-auth-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 1px 2px rgba(2, 8, 32, 0.30),
        0 12px 28px -8px rgba(26, 115, 232, 0.65);
}

.ds-auth-submit:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.96);
}

.ds-auth-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.ds-auth-submit i {
    font-size: 0.9rem;
    transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}

.ds-auth-submit:hover:not(:disabled) i { transform: translateX(2px); }

.ds-auth-back {
    margin-top: 16px;
    background: transparent;
    border: 0;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    cursor: pointer;
    transition: color .15s, gap .15s;
}

.ds-auth-back:hover {
    color: #1a73e8;
    gap: 10px;
}

.ds-auth-meta {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.ds-auth-link {
    font-size: 0.82rem;
    color: #1a73e8;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: color .15s;
}

.ds-auth-link:hover {
    color: #155cb8;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── Companies list ────────────────────────────────────────────────── */
.ds-auth-companies {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
}

.ds-auth-companies__empty {
    padding: 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
    background: #f8fafc;
    border-radius: 10px;
}

.ds-auth-company {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s, transform .12s, box-shadow .18s;
    font-family: inherit;
}

.ds-auth-company:hover {
    border-color: #1a73e8;
    background: #f5f9ff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.ds-auth-company__avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e0ecff 0%, #c5dbff 100%);
    color: #1a73e8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.92rem;
    overflow: hidden;
    flex-shrink: 0;
}

.ds-auth-company__logo { width: 100%; height: 100%; object-fit: cover; }

.ds-auth-company__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ds-auth-company__name {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    color: #0a0f1f;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-auth-company__meta {
    color: #64748b;
    font-size: 0.76rem;
    letter-spacing: -0.005em;
}

.ds-auth-company__chevron {
    color: #cbd5e1;
    font-size: 0.85rem;
    transition: color .15s, transform .15s;
}

.ds-auth-company:hover .ds-auth-company__chevron {
    color: #1a73e8;
    transform: translateX(2px);
}

/* ─── Success state ─────────────────────────────────────────────────── */
.ds-auth-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 0 8px;
}

.ds-auth-success__ring svg {
    width: 84px;
    height: 84px;
}

.ds-auth-success__circle {
    fill: none;
    stroke: #10b981;
    stroke-width: 2.4;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    transform-origin: center;
    animation: dsAuthCircle .55s ease-out forwards;
}

.ds-auth-success__check {
    stroke: #10b981;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: dsAuthCheck .35s .55s ease-out forwards;
}

@keyframes dsAuthCircle { to { stroke-dashoffset: 0; } }
@keyframes dsAuthCheck { to { stroke-dashoffset: 0; } }

.ds-auth-success h2 {
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #0a0f1f;
    letter-spacing: -0.02em;
}

.ds-auth-success p {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
}

/* ─── Modern loader overlay ─────────────────────────────────────────── */
.ds-auth-loader {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: rgba(8, 17, 38, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    opacity: 1;
    transition: opacity .22s ease;
}

.ds-auth-loader[data-hidden] {
    opacity: 0;
    pointer-events: none;
}

.ds-auth-loader__core {
    position: relative;
    width: 78px;
    height: 78px;
}

.ds-auth-loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.95);
    border-right-color: rgba(96, 165, 250, 0.85);
    animation: dsAuthSpin 1.05s cubic-bezier(.55, .15, .45, .85) infinite;
}

.ds-auth-loader__ring--2 {
    inset: 10px;
    border-top-color: rgba(96, 165, 250, 0.95);
    border-right-color: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.7);
    animation-duration: 1.6s;
    animation-direction: reverse;
}

.ds-auth-loader__ring--3 {
    inset: 22px;
    border-top-color: rgba(255, 255, 255, 0.4);
    border-left-color: rgba(96, 165, 250, 0.7);
    animation-duration: 0.85s;
}

.ds-auth-loader__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
    animation: dsAuthPulse 1.6s ease-out infinite;
}

@keyframes dsAuthSpin {
    to { transform: rotate(360deg); }
}

@keyframes dsAuthPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
    70%  { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.ds-auth-loader__label {
    margin: 0;
    color: #f1f5f9;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DS-ADMIN — Admin shell (sidebar + content)
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-admin-body {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #f5f7fb;
    color: #0a0f1f;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11" on, "ss01" on, "ss03" on;
}

.ds-admin-shell {
    --ds-admin-sidebar-w: 280px;
    --ds-admin-sidebar-w-min: 200px;
    --ds-admin-sidebar-w-max: 500px;
    display: grid;
    grid-template-columns: var(--ds-admin-sidebar-w) 1fr;
    height: 100vh;
    overflow: hidden;
}
.ds-admin-shell.is-resizing {
    cursor: col-resize;
    user-select: none;
}
.ds-admin-shell.is-resizing * { pointer-events: none; }
.ds-admin-shell.is-resizing #ds_admin_sidebar_resizer { pointer-events: auto; }

@media (max-width: 980px) {
    .ds-admin-shell { grid-template-columns: 1fr; }
    .ds-admin-sidebar__resizer { display: none; }
}

/* ─── Sidebar ───────────────────────────────────────────────────────── */
.ds-admin-sidebar {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0a132e 0%, #0b1730 100%);
    color: #d8e2f5;
    border-right: 1px solid rgba(148, 197, 255, 0.06);
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Handle de resize en el borde derecho del sidebar */
.ds-admin-sidebar__resizer {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 2;
    transition: background-color 0.15s ease;
}
.ds-admin-sidebar__resizer:hover,
.ds-admin-sidebar__resizer.is-active {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(43, 133, 255, 0.55) 50%,
        transparent
    );
}

.ds-admin-sidebar__brand {
    padding: 22px 22px 18px;
    border-bottom: 1px solid rgba(148, 197, 255, 0.08);
    flex-shrink: 0;
}

.ds-admin-sidebar__logo {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.ds-admin-sidebar__nav {
    flex: 1 1 auto;
    min-height: 0;                  /* requerido para que overflow-y funcione en flex column */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 197, 255, 0.2) transparent;
}

.ds-admin-sidebar__nav::-webkit-scrollbar { width: 6px; }
.ds-admin-sidebar__nav::-webkit-scrollbar-thumb {
    background: rgba(148, 197, 255, 0.18);
    border-radius: 999px;
}

.ds-admin-sidebar__user {
    border-top: 1px solid rgba(148, 197, 255, 0.08);
    padding: 14px 16px 18px;
    background: rgba(0, 0, 0, 0.20);
    flex-shrink: 0;
}

.ds-admin-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ds-admin-user__avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #2b85ff, #1361d8);
    color: #fff;
    font-weight: 600;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.ds-admin-user__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ds-admin-user__email {
    font-size: 0.84rem;
    color: #f1f5fc;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-admin-user__role {
    font-size: 0.72rem;
    color: rgba(216, 226, 245, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ds-admin-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #d8e2f5;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.ds-admin-logout:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.30);
    color: #fecaca;
}

.ds-admin-logout:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Sidebar menu tree ─────────────────────────────────────────────── */
.ds-menu-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ds-menu-module {
    display: flex;
    flex-direction: column;
}

.ds-menu-module__head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: #d8e2f5;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background .15s, color .15s;
}

.ds-menu-module__head:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

.ds-menu-module__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(96, 165, 250, 0.10);
    color: #93c5fd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    flex-shrink: 0;
}

.ds-menu-module__name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-menu-module__chevron {
    color: rgba(216, 226, 245, 0.45);
    font-size: 0.72rem;
    transition: transform .22s cubic-bezier(.2, .7, .2, 1);
}

.ds-menu-module[data-collapsed] .ds-menu-module__chevron {
    transform: rotate(-90deg);
}

.ds-menu-module__body {
    overflow: hidden;
    max-height: 1200px;
    transition: max-height .25s ease;
}

.ds-menu-module[data-collapsed] .ds-menu-module__body {
    max-height: 0;
}

.ds-menu-sections {
    list-style: none;
    margin: 4px 0 8px;
    padding: 0 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 1px solid rgba(148, 197, 255, 0.08);
    margin-left: 22px;
}

.ds-menu-section__title {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(216, 226, 245, 0.40);
    padding: 6px 10px 4px;
}

.ds-menu-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ds-menu-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: rgba(216, 226, 245, 0.78);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    transition: background .15s, color .15s;
}

.ds-menu-option:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

.ds-menu-option__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(148, 197, 255, 0.30);
    flex-shrink: 0;
    transition: background .15s, transform .15s;
}

.ds-menu-option[data-active] {
    background: linear-gradient(180deg, rgba(43, 133, 255, 0.18), rgba(19, 97, 216, 0.10));
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(43, 133, 255, 0.25);
}

.ds-menu-option[data-active] .ds-menu-option__dot {
    background: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
    transform: scale(1.2);
}

.ds-menu-option__name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Main area / topbar / content ──────────────────────────────────── */
.ds-admin-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
    background: #f5f7fb;
}

.ds-admin-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 32px;
    background: #ffffff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.ds-admin-topbar__title {
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #0a0f1f;
}

.ds-admin-topbar__subtitle {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: #64748b;
}

.ds-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.22);
    color: #047857;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.ds-admin-content {
    flex: 1;
    min-height: 0;
    padding: 32px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ─── Welcome / placeholder cards ──────────────────────────────────── */
.ds-admin-welcome,
.ds-admin-placeholder {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    padding: 36px 36px 32px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 6px 24px -8px rgba(2, 8, 32, 0.08);
    max-width: 720px;
}

.ds-admin-welcome__eyebrow,
.ds-admin-placeholder__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1a73e8;
    background: linear-gradient(180deg, rgba(26, 115, 232, 0.12), rgba(26, 115, 232, 0.06));
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(26, 115, 232, 0.18);
    margin-bottom: 16px;
}

.ds-admin-placeholder__eyebrow {
    color: #b45309;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.08));
    border-color: rgba(245, 158, 11, 0.22);
}

.ds-admin-welcome h2,
.ds-admin-placeholder h2 {
    margin: 0 0 8px;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #0a0f1f;
}

.ds-admin-welcome p,
.ds-admin-placeholder p {
    margin: 0;
    color: #5b6478;
    font-size: 0.95rem;
    line-height: 1.55;
}

.ds-admin-placeholder__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin: 22px 0 0;
}

.ds-admin-placeholder__meta div {
    background: #f6f8fc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
}

.ds-admin-placeholder__meta dt {
    margin: 0 0 4px;
    font-size: 0.72rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.ds-admin-placeholder__meta dd {
    margin: 0;
    font-size: 0.9rem;
    color: #0a0f1f;
    font-weight: 500;
}

.ds-admin-placeholder__meta code {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.84rem;
    color: #1361d8;
    background: rgba(26, 115, 232, 0.08);
    padding: 2px 6px;
    border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DS-MODULES — Modules catalog (mirrors ds-company visual language)
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-modules { display: block; }
.ds-modules__view { display: none; }
.ds-modules__view[data-active] { display: block; animation: dsCompanyFade .25s cubic-bezier(.2, .7, .2, 1); }

.ds-modules__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.ds-modules__head-back { display: flex; align-items: center; gap: 14px; }
.ds-modules__title {
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #0a0f1f;
}
.ds-modules__subtitle {
    margin: 4px 0 0;
    color: #5b6478;
    font-size: 0.86rem;
    max-width: 640px;
}
.ds-modules__head-actions { display: flex; align-items: center; gap: 8px; }

.ds-modules__panel {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    box-shadow: 0 6px 24px -8px rgba(2, 8, 32, 0.08);
    overflow: hidden;
}

.ds-modules__search {
    position: relative;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ds-modules__search i {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.ds-modules__search input {
    width: 100%;
    padding: 11px 14px 11px 44px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 11px;
    background: #f6f8fc;
    font-size: 0.9rem;
    outline: none;
    transition: border-color .18s, background .18s, box-shadow .18s;
}
.ds-modules__search input:focus {
    background: #ffffff;
    border-color: #1a73e8;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.10);
}

.ds-modules__table { padding: 8px 8px 16px; }

.ds-modules__empty {
    padding: 60px 20px;
    text-align: center;
    color: #94a3b8;
}
.ds-modules__empty i { font-size: 2rem; color: #cbd5e1; display: block; margin-bottom: 10px; }

.ds-modules .custom-header {
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}
.ds-modules .custom-header .custom-cell { padding: 12px 14px; min-width: 0; }
.ds-modules .custom-row { border-bottom: 1px solid rgba(15, 23, 42, 0.05); transition: background .12s; }
.ds-modules .custom-row:hover { background: rgba(26, 115, 232, 0.03); }
.ds-modules .custom-row .custom-cell {
    padding: 14px 14px;
    font-size: 0.86rem;
    color: #0a0f1f;
    min-width: 0;
}

.ds-modules .custom-row .custom-cell.ds-modules-row-icon {
    color: #1a73e8;
    font-size: 1.1rem;
    padding: 10px 14px;
}
.ds-modules-row-icon__missing { color: #cbd5e1; font-size: 0.85rem; }

/* Tab bar tipo pill, integrado con ds-modules */
.ds-tab-bar {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 12px;
    margin-bottom: 18px;
    width: fit-content;
}
.ds-tab-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.ds-tab-bar__btn:hover { color: #1a73e8; }
.ds-tab-bar__btn[data-active] {
    background: #fff;
    color: #1a73e8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Sub-header del panel (título + acciones) */
.ds-modules__panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 20px 0;
}
.ds-modules__panel-head h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #0a0f1f;
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
.ds-modules__panel-head .ds-modules__head-actions { flex-shrink: 0; }

/* Panel pane: agrupar filtros inline */
.ds-modules__panel-filters {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 14px 20px 0;
}
.ds-modules__panel-filters .ds-modules-field { min-width: 180px; flex: 0 1 220px; }

/* Detail key-value list para modales de detalle */
.ds-modules__kv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    padding: 4px 0 14px;
}
.ds-modules__kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ds-modules__kv dt {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin: 0;
    font-weight: 600;
}
.ds-modules__kv dd {
    margin: 0;
    font-size: 0.9rem;
    color: #0a0f1f;
    font-weight: 500;
    word-break: break-word;
}

/* Variantes de ancho para ds-company-modal__panel.
   Doble clase para mayor especificidad que la regla base (que vive más
   abajo en el archivo y por cascade order ganaría con single-class). */
/* AcceptRejectModal (shared/helpers): asegurar que aparezca POR ENCIMA de
   los modales ds-company-modal (z-index 2000) cuando se invoca encima de
   uno (ej. revocar desde el modal de detalle). */
.accept-reject-content { z-index: 2100 !important; }
.accept-reject-content.show-content-modal { z-index: 12000 !important; }

/* Layout vertical con separación uniforme — scoped a los módulos que
   tienen wrapper raíz + dashboard interno (Licencias por compañía,
   Usuarios únicos). Otros consumers de .ds-modules no se ven afectados. */
#drm_lbc_root,
#drm_lbc_dashboard,
#otu_mgmt_root,
#otu_dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Margen inferior al select de compañía para separarlo del borde del panel. */
#select_drm_lbc_company,
#select_otu_company { margin-bottom: 14px; }

/* KPI grid: cards de métricas (dashboards) */
.ds-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    padding: 14px 20px 20px;
}
.ds-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 4px solid #94a3b8;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ds-kpi-card:hover {
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.10);
    transform: translateY(-1px);
}
.ds-kpi-card__label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
.ds-kpi-card__value {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: #0a0f1f;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.ds-kpi-card__hint {
    font-size: 0.74rem;
    color: #94a3b8;
}

/* Variantes por intent */
.ds-kpi-card--neutral { border-left-color: #94a3b8; }
.ds-kpi-card--green   { border-left-color: #16a34a; }
.ds-kpi-card--green   .ds-kpi-card__label { color: #15803d; }
.ds-kpi-card--yellow  { border-left-color: #ca8a04; }
.ds-kpi-card--yellow  .ds-kpi-card__label { color: #a16207; }
.ds-kpi-card--red     { border-left-color: #dc2626; }
.ds-kpi-card--red     .ds-kpi-card__label { color: #b91c1c; }
.ds-kpi-card--blue    { border-left-color: #1a73e8; }
.ds-kpi-card--blue    .ds-kpi-card__label { color: #1e40af; }
.ds-kpi-card--mode    { border-left-color: #6366f1; }
.ds-kpi-card--mode    .ds-kpi-card__label { color: #4338ca; }

/* GlobalCustomTable tooltip menu — entrada animada (fade + scale) y
   transición suave en los items. Aditivo: no toca el helper compartido. */
.gct-tooltip-menu {
    transform-origin: top right;
    animation: gctTooltipIn 0.16s cubic-bezier(0.2, 0.7, 0.2, 1);
    box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.18),
                0 2px 6px -2px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}
.gct-tooltip-menu .text-menu-option {
    transition: background-color 0.14s ease, color 0.14s ease;
}
.gct-tooltip-menu .text-menu-option:hover:not(.disabled) {
    background-color: rgba(26, 115, 232, 0.08);
}
@keyframes gctTooltipIn {
    from { opacity: 0; transform: scale(0.94) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.ds-company-modal__panel.ds-company-modal__panel--md { max-width: 620px; }
.ds-company-modal__panel.ds-company-modal__panel--lg { max-width: 860px; }
.ds-company-modal__panel.ds-company-modal__panel--xl {
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.ds-company-modal__panel.ds-company-modal__panel--xl > .ds-company-modal__head { flex-shrink: 0; }
.ds-company-modal__panel.ds-company-modal__panel--xl > .ds-company-modal__footer { flex-shrink: 0; }
.ds-company-modal__panel.ds-company-modal__panel--xl > .ds-company-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0 -8px;
    padding: 0 8px;
}

/* Checkboxes inline para forms ds-modules */
.ds-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    padding: 6px 0 2px;
}
.ds-checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: #334155;
    cursor: pointer;
    margin: 0;
}
.ds-checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #1a73e8;
    cursor: pointer;
}

/* Footer de acciones dentro de ds-company-modal */
.ds-company-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.ds-company-modal__footer--between { justify-content: space-between; }

/* Form */
.ds-modules__form {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    padding: 28px 28px 24px;
    box-shadow: 0 6px 24px -8px rgba(2, 8, 32, 0.08);
}

.ds-modules__feedback {
    display: none;
    padding: 10px 14px;
    border-radius: 11px;
    font-size: 0.86rem;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.20);
    color: #b91c1c;
    margin-bottom: 18px;
}
.ds-modules__feedback[data-visible] { display: block; }

.ds-modules-section {
    padding: 4px 0 14px;
}

.ds-modules-section--with-icon {
    display: flex;
    gap: 26px;
    align-items: flex-start;
}

.ds-modules-icon-block {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ds-modules-icon-preview {
    width: 120px;
    height: 120px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.10), rgba(26, 115, 232, 0.04));
    border: 1px solid rgba(26, 115, 232, 0.18);
    color: #1a73e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.ds-modules-icon-caption { margin: 0; font-size: 0.74rem; color: #94a3b8; }

.ds-modules-section__body { flex: 1; min-width: 0; }

.ds-modules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 16px;
}
@media (max-width: 600px) { .ds-modules-grid { grid-template-columns: 1fr; } }

.ds-modules-field { display: flex; flex-direction: column; gap: 5px; }
.ds-modules-field--span2 { grid-column: span 2; }
@media (max-width: 600px) { .ds-modules-field--span2 { grid-column: span 1; } }

.ds-modules-field label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #475569;
}
.ds-modules-field label .req { color: #ef4444; margin-left: 2px; }
.ds-modules-field__hint {
    font-size: 0.72rem;
    color: #94a3b8;
    line-height: 1.35;
    margin-top: -2px;
}

.ds-modules-field > input,
.ds-modules-field > textarea {
    padding: 11px 13px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 11px;
    background: #f8fafc;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0a0f1f;
    outline: none;
    transition: border-color .18s, background .18s, box-shadow .18s;
    resize: vertical;
}
.ds-modules-field > input:hover:not(:disabled),
.ds-modules-field > textarea:hover:not(:disabled) {
    border-color: rgba(15, 23, 42, 0.16);
    background: #f3f6fb;
}
.ds-modules-field > input:focus,
.ds-modules-field > textarea:focus {
    background: #ffffff;
    border-color: #1a73e8;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.12);
}

.ds-modules-field > select {
    width: 100%;
    padding: 11px 36px 11px 13px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 11px;
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.5L6 6L10.5 1.5' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0a0f1f;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.ds-modules-field > select:hover:not(:disabled) {
    border-color: rgba(15, 23, 42, 0.18);
    background-color: #f3f6fb;
}
.ds-modules-field > select:focus {
    background-color: #ffffff;
    border-color: #1a73e8;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.12);
}

@media (max-width: 720px) {
    .ds-modules-section--with-icon { flex-direction: column; }
    .ds-modules-icon-block { align-self: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DS-VERSION — Option detail + version form (sub-styles, mounts on .ds-modules)
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-version-detail {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    padding: 24px 28px;
    box-shadow: 0 6px 24px -8px rgba(2, 8, 32, 0.08);
}

.ds-version-detail__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    padding: 16px;
    background: #f6f8fc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    margin: 0 0 22px;
}
.ds-version-detail__meta div { display: flex; flex-direction: column; gap: 3px; }
.ds-version-detail__meta dt {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ds-version-detail__meta dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: #0a0f1f;
}

.ds-version-detail__list { display: flex; flex-direction: column; gap: 12px; }

/* Banner inline arriba del listado de versiones */
.ds-version-detail__banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.86rem;
    line-height: 1.45;
    margin: 0 0 18px;
}
.ds-version-detail__banner i { font-size: 1rem; flex-shrink: 0; }
.ds-version-detail__banner--warn {
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.24);
    color: #b45309;
}
.ds-version-detail__banner--info {
    background: rgba(26, 115, 232, 0.08);
    border: 1px solid rgba(26, 115, 232, 0.20);
    color: #155cb8;
}

/* Status badge dentro del meta */
.ds-version-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ds-version-status-badge--s1 { background: rgba(16, 185, 129, 0.12); color: #047857; border: 1px solid rgba(16, 185, 129, 0.26); }
.ds-version-status-badge--s2 { background: rgba(148, 163, 184, 0.18); color: #475569; border: 1px solid rgba(148, 163, 184, 0.30); }
.ds-version-status-badge--s4 { background: rgba(245, 158, 11, 0.14); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.26); }

.ds-version-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 16px 18px;
    transition: border-color .15s, box-shadow .15s;
}
.ds-version-card:hover {
    border-color: rgba(26, 115, 232, 0.30);
    box-shadow: 0 4px 14px -6px rgba(26, 115, 232, 0.18);
}
.ds-version-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.ds-version-card__tag {
    display: inline-block;
    padding: 4px 10px;
    margin-right: 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(26, 115, 232, 0.14), rgba(26, 115, 232, 0.06));
    border: 1px solid rgba(26, 115, 232, 0.22);
    color: #1361d8;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 600;
}
.ds-version-card__href {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.82rem;
    color: #475569;
    background: #f6f8fc;
    padding: 3px 8px;
    border-radius: 6px;
}
.ds-version-card__remove {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    color: #ef4444;
}
.ds-version-card__remove:hover {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.20);
}
.ds-version-card__meta {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    margin: 0;
}
.ds-version-card__meta div { display: flex; flex-direction: column; gap: 2px; }
.ds-version-card__meta dt {
    margin: 0;
    font-size: 0.68rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ds-version-card__meta dd {
    margin: 0;
    font-size: 0.84rem;
    color: #334155;
}
.ds-version-card__meta code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    color: #1361d8;
}

/* ── Version form: dynamic row sections ──────────────────────────── */
.ds-version-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.ds-version-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.ds-version-section__head h3 {
    display: flex; align-items: center; gap: 8px;
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.96rem;
    font-weight: 600;
    color: #0a0f1f;
    letter-spacing: -0.01em;
}
.ds-version-section__head h3 i { color: #1a73e8; }

.ds-version-rows { display: flex; flex-direction: column; gap: 8px; overflow: visible; }

.ds-version-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    padding: 12px;
    background: #f6f8fc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 11px;
    position: relative;
}
.ds-version-row__num {
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1a73e8;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}
.ds-version-row__fields {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.ds-version-row--endpoint .ds-version-row__fields {
    grid-template-columns: 90px 1.4fr 1fr 1fr 1.4fr;
}
@media (max-width: 980px) {
    .ds-version-row__fields { grid-template-columns: 1fr 1fr; }
    .ds-version-row--endpoint .ds-version-row__fields { grid-template-columns: 1fr 1fr; }
}

.ds-version-row__field { display: flex; flex-direction: column; gap: 3px; }
.ds-version-row__field label {
    font-size: 0.68rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ds-version-row__field input,
.ds-version-row__field select {
    padding: 8px 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.84rem;
    color: #0a0f1f;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.ds-version-row__field input:focus,
.ds-version-row__field select:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.10);
}

.ds-version-row__remove {
    flex-shrink: 0;
    align-self: flex-end;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ds-version-row__remove:hover {
    background: rgba(239, 68, 68, 0.10);
    color: #ef4444;
}

/* Inline toggle switch for endpoint flags (e.g. authorizerRequired) */
.ds-version-row__field--toggle { align-items: flex-start; }
.ds-version-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    cursor: pointer;
}
.ds-version-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ds-version-toggle__track {
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: #cbd5e1;
    position: relative;
    transition: background .22s cubic-bezier(.2, .7, .2, 1);
}
.ds-version-toggle__thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    transition: transform .22s cubic-bezier(.2, .7, .2, 1);
}
.ds-version-toggle input:checked + .ds-version-toggle__track {
    background: linear-gradient(180deg, #2b85ff, #1361d8);
}
.ds-version-toggle input:checked + .ds-version-toggle__track .ds-version-toggle__thumb {
    transform: translateX(14px);
}
.ds-version-toggle--inline { margin-top: 0; flex-shrink: 0; }

/* Mobile-optimized flag row (sits between version/href grid and files) */
.ds-version-mobile-flag {
    margin-top: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(52, 199, 89, 0.06);
    border: 1px solid rgba(52, 199, 89, 0.18);
    border-radius: 10px;
}
.ds-version-mobile-flag__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.ds-version-mobile-flag__text strong {
    font-size: 0.82rem;
    color: #166f3a;
    font-weight: 600;
}
.ds-version-mobile-flag__text strong i { margin-right: 6px; color: #34c759; }
.ds-version-mobile-flag__text small {
    font-size: 0.72rem;
    color: #5b6b73;
}
.ds-version-mobile-flag .ds-version-toggle input:checked + .ds-version-toggle__track {
    background: linear-gradient(180deg, #34c759, #1f9d44);
}

/* Badge "Móvil" en la lista de versiones */
.ds-version-mobile-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(52, 199, 89, 0.14);
    color: #1f9d44;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ds-version-mobile-badge i { font-size: 0.78rem; }

/* Inline switch (for option form's isConfig toggle) */
.ds-company-switch--inline {
    width: 100%;
}

/* ── Version block inside option-create form ──────────────────────── */
.ds-version-block {
    margin-top: 24px;
    padding: 22px;
    background: linear-gradient(180deg, rgba(26, 115, 232, 0.04), rgba(26, 115, 232, 0.01));
    border: 1px solid rgba(26, 115, 232, 0.14);
    border-radius: 16px;
}
.ds-version-block[hidden] { display: none; }
.ds-version-block__head {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.ds-version-block__head > div { flex: 1; min-width: 0; }
.ds-version-block--edit { padding-top: 18px; }
.ds-version-block__head h3 {
    margin: 0 0 4px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #0a0f1f;
    display: flex; align-items: center; gap: 8px;
}
.ds-version-block__head h3 i { color: #1a73e8; }
.ds-version-block__head p {
    margin: 0;
    font-size: 0.84rem;
    color: #5b6478;
}

/* ── File picker (hbs + scripts) ──────────────────────────────────── */
.ds-version-files {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
}
.ds-version-files__row { display: flex; flex-direction: column; gap: 6px; }
.ds-version-files__label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #475569;
}
.ds-version-files__hint {
    margin: 0;
    font-size: 0.74rem;
    color: #94a3b8;
}
.ds-version-files__hint code {
    background: rgba(26, 115, 232, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    color: #1361d8;
}

.ds-file-picker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px dashed rgba(15, 23, 42, 0.16);
    border-radius: 12px;
    background: #f6f8fc;
    cursor: pointer;
    text-align: left;
    color: #475569;
    font-family: inherit;
    font-size: 0.86rem;
    transition: border-color .18s, background .18s, color .18s;
}
.ds-file-picker:hover:not(:disabled) {
    border-color: #1a73e8;
    background: rgba(26, 115, 232, 0.04);
    color: #1a73e8;
}
.ds-file-picker:disabled { opacity: 0.6; cursor: not-allowed; }
.ds-file-picker > i {
    color: #94a3b8;
    font-size: 1.05rem;
}
.ds-file-picker:hover:not(:disabled) > i,
.ds-file-picker[data-has-file] > i { color: #1a73e8; }
.ds-file-picker[data-has-file] {
    border-style: solid;
    border-color: rgba(26, 115, 232, 0.40);
    background: rgba(26, 115, 232, 0.06);
    color: #155cb8;
    font-weight: 500;
}
.ds-file-picker > span { flex: 1; min-width: 0; word-break: break-word; }
.ds-file-picker__clear {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ds-file-picker__clear:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* ── Selected scripts as chips ───────────────────────────────────── */
.ds-version-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.ds-version-files-empty {
    margin: 0;
    font-size: 0.78rem;
    color: #94a3b8;
    font-style: italic;
}
.ds-version-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 6px 10px;
    background: #ffffff;
    border: 1px solid rgba(26, 115, 232, 0.20);
    border-radius: 999px;
    font-size: 0.78rem;
    color: #155cb8;
    max-width: 100%;
}
.ds-version-chip > span {
    word-break: break-all;
}
.ds-version-chip > i {
    color: #1a73e8;
    font-size: 0.86rem;
}
.ds-version-chip__remove {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: background .15s, color .15s;
}
.ds-version-chip__remove:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DS-PROFILES — Grant matrix + add-detail block
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   DS-CONFIRM — Reusable confirm modal (replaces window.confirm)
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-confirm {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ds-confirm[hidden] { display: none; }

.ds-confirm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 18, 41, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: dsConfirmBackdropIn .18s ease-out;
}
@keyframes dsConfirmBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ds-confirm__panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 24px 60px -12px rgba(2, 8, 32, 0.50);
    padding: 24px 24px 20px;
    animation: dsConfirmPanelIn .22s cubic-bezier(.2, .7, .2, 1);
}
@keyframes dsConfirmPanelIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ds-confirm__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}
.ds-confirm__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.ds-confirm__icon--primary {
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.18), rgba(26, 115, 232, 0.06));
    color: #1a73e8;
}
.ds-confirm__icon--warn {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(245, 158, 11, 0.08));
    color: #b45309;
}
.ds-confirm__icon--danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.08));
    color: #b91c1c;
}

.ds-confirm__copy h3 {
    margin: 0 0 4px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    color: #0a0f1f;
    letter-spacing: -0.015em;
}
.ds-confirm__copy p {
    margin: 0;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.5;
}

.ds-confirm__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ds-confirm__primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 11px;
    border: 0;
    color: #ffffff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter .15s, transform .12s, box-shadow .18s;
}
.ds-confirm__primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ds-confirm__primary:active { transform: translateY(0); }

.ds-confirm__primary--primary {
    background: linear-gradient(180deg, #2b85ff 0%, #1361d8 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 6px 16px -4px rgba(26, 115, 232, 0.50);
}
.ds-confirm__primary--warn {
    background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 6px 16px -4px rgba(245, 158, 11, 0.45);
}
.ds-confirm__primary--danger {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 6px 16px -4px rgba(239, 68, 68, 0.50);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DS-CPROFILE — Company profile rows (assign + remove + status)
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-cprofile-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 16px;
}
.ds-cprofile-row {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color .15s, box-shadow .15s;
}
.ds-cprofile-row:hover { border-color: rgba(26, 115, 232, 0.20); }

.ds-cprofile-row__main {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ds-cprofile-row__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.10), rgba(26, 115, 232, 0.04));
    color: #1361d8;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.86rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.ds-cprofile-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ds-cprofile-row__head {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.ds-cprofile-row__head strong {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #0a0f1f;
    letter-spacing: -0.01em;
}
.ds-cprofile-row__rnc {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.74rem;
    color: #94a3b8;
}
.ds-cprofile-row__actions { display: flex; gap: 6px; flex-shrink: 0; }

.ds-cprofile__profile {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    color: #475569;
}
.ds-cprofile__profile-name { font-weight: 500; color: #155cb8; }
.ds-cprofile__profile--empty { color: #94a3b8; font-style: italic; }
.ds-cprofile__details-count {
    font-size: 0.74rem;
    color: #64748b;
    background: #f6f8fc;
    padding: 2px 8px;
    border-radius: 999px;
}
.ds-cprofile__remove:hover { color: #ef4444; border-color: rgba(239, 68, 68, 0.30); }

.ds-cprofile__assign {
    margin-top: 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(26, 115, 232, 0.06), rgba(26, 115, 232, 0.02));
    border: 1px solid rgba(26, 115, 232, 0.18);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ds-cprofile__assign select {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 9px;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.86rem;
    color: #0a0f1f;
    outline: none;
}
.ds-cprofile__assign select:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}

.ds-cprofile-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(148, 163, 184, 0.16);
    color: #475569;
    border: 1px solid rgba(148, 163, 184, 0.26);
}

.ds-uprofile__assigned {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #047857;
    font-weight: 500;
}
.ds-uprofile__assigned i { font-size: 0.86rem; }
.ds-cprofile-pill--custom {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.30);
}

/* ─── Wizard stepper (profile create) ──────────────────────────────── */
.ds-stepper {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #f8fafc, #f6f8fc);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    margin-bottom: 22px;
}
.ds-stepper[hidden] { display: none; }

.ds-stepper__step {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 11px;
    background: transparent;
    transition: background .15s, box-shadow .15s;
}
.ds-stepper__step[data-active] {
    background: rgba(26, 115, 232, 0.06);
    box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.20);
}

.ds-stepper__num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background .15s, color .15s;
}
.ds-stepper__step[data-active] .ds-stepper__num {
    background: linear-gradient(180deg, #2b85ff, #1361d8);
    color: #ffffff;
    box-shadow: 0 4px 10px -3px rgba(26, 115, 232, 0.45);
}
.ds-stepper__step[data-complete] .ds-stepper__num {
    background: rgba(16, 185, 129, 0.18);
    color: #047857;
    font-size: 0;
}
.ds-stepper__step[data-complete] .ds-stepper__num::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    font-size: 0.95rem;
}

.ds-stepper__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ds-stepper__label strong {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    color: #0a0f1f;
    letter-spacing: -0.01em;
}
.ds-stepper__label span {
    font-size: 0.72rem;
    color: #64748b;
}
.ds-stepper__step[data-active] .ds-stepper__label strong { color: #155cb8; }

.ds-stepper__line {
    flex-shrink: 0;
    width: 60px;
    align-self: center;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.04));
    border-radius: 1px;
}

@media (max-width: 700px) {
    .ds-stepper { flex-direction: column; }
    .ds-stepper__line { width: 1.5px; height: 24px; align-self: stretch; }
}

/* Filtros del listado de details (búsqueda + módulo + sección) */
.ds-detail-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    margin: 8px 0 12px;
    flex-wrap: wrap;
}
.ds-detail-filters__search {
    position: relative;
    flex: 1 1 240px;
    min-width: 200px;
}
.ds-detail-filters__search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.ds-detail-filters__search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 9px;
    background: #fff;
    font-size: 0.86rem;
    color: #0a0f1f;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-detail-filters__search input:focus {
    outline: none;
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.10);
}
.ds-detail-filters__select {
    padding: 9px 28px 9px 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 9px;
    background: #fff;
    font-size: 0.86rem;
    color: #334155;
    min-width: 160px;
    cursor: pointer;
}
.ds-detail-filters__select:focus {
    outline: none;
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.10);
}

/* Cartas detalladas del listado de details (con nombres en lugar de IDs) */
.ds-detail-row--rich {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #fff;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-detail-row--rich:hover {
    border-color: rgba(26, 115, 232, 0.30);
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.08);
}
.ds-detail-row--rich[data-disabled] {
    opacity: 0.65;
    background: #f8fafc;
}
.ds-detail-row__main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}
.ds-detail-row__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.18), rgba(26, 115, 232, 0.06));
    color: #1a73e8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.ds-detail-row__text {
    flex: 1 1 auto;
    min-width: 0;
}
.ds-detail-row__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.ds-detail-row__title strong {
    font-size: 0.96rem;
    color: #0a0f1f;
    font-weight: 600;
}
.ds-detail-row__version {
    font-size: 0.74rem;
    font-weight: 600;
    color: #1a73e8;
    background: rgba(26, 115, 232, 0.10);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.ds-detail-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
}
.ds-detail-row__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.06);
    padding: 3px 9px;
    border-radius: 999px;
}
.ds-detail-row__chip i {
    font-size: 0.78rem;
    color: #64748b;
}
.ds-detail-row__chip--module {
    background: rgba(99, 102, 241, 0.08);
    color: #4338ca;
    border-color: rgba(99, 102, 241, 0.18);
}
.ds-detail-row__chip--module i { color: #4338ca; }
.ds-detail-row__chip--section {
    background: rgba(20, 184, 166, 0.08);
    color: #0f766e;
    border-color: rgba(20, 184, 166, 0.18);
}
.ds-detail-row__chip--section i { color: #0f766e; }

/* Add-detail inline block */
.ds-detail-add-block {
    background: linear-gradient(180deg, rgba(26, 115, 232, 0.06), rgba(26, 115, 232, 0.02));
    border: 1px solid rgba(26, 115, 232, 0.20);
    border-radius: 14px;
    padding: 18px 20px;
    margin: 14px 0;
}
.ds-detail-add-block[hidden] { display: none; }
.ds-detail-add-block > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.ds-detail-add-block > header h4 {
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.96rem;
    font-weight: 600;
    color: #155cb8;
    display: flex; align-items: center; gap: 8px;
}
.ds-detail-add-block > header h4 i { color: #1a73e8; }
.ds-detail-add-block__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.ds-grant-block {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.ds-grant-block__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 10px;
}

.ds-grant-toggles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
@media (max-width: 720px) { .ds-grant-toggles { grid-template-columns: repeat(2, 1fr); } }

.ds-grant-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 11px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.ds-grant-toggle:hover { border-color: rgba(26, 115, 232, 0.30); }
.ds-grant-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ds-grant-toggle__indicator {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #f6f8fc;
    border: 1px solid rgba(15, 23, 42, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.78rem;
    transition: background .15s, color .15s, border-color .15s;
}
.ds-grant-toggle__label {
    font-size: 0.82rem;
    color: #334155;
    font-weight: 500;
}
.ds-grant-toggle input:checked ~ .ds-grant-toggle__indicator {
    background: linear-gradient(180deg, #2b85ff, #1361d8);
    border-color: #1361d8;
    color: #ffffff;
}
.ds-grant-toggle input:checked ~ .ds-grant-toggle__label { color: #155cb8; }
.ds-grant-toggle:has(input:checked) {
    background: rgba(26, 115, 232, 0.06);
    border-color: rgba(26, 115, 232, 0.30);
}
.ds-grant-toggle input:disabled ~ .ds-grant-toggle__indicator {
    opacity: 0.5;
    cursor: not-allowed;
}

.ds-grant-toggle--inline {
    padding: 6px 10px;
    background: transparent;
    border-color: transparent;
}
.ds-grant-toggle--inline .ds-grant-toggle__indicator {
    width: 22px; height: 22px;
    font-size: 0.72rem;
}
.ds-grant-toggle--inline .ds-grant-toggle__label { font-size: 0.78rem; }

/* Detail row */
.ds-detail-row {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 10px;
    transition: border-color .15s, opacity .15s;
}
.ds-detail-row[data-disabled] { opacity: 0.6; }
.ds-detail-row:hover { border-color: rgba(26, 115, 232, 0.24); }

.ds-detail-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.ds-detail-row__ids {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.82rem;
    color: #475569;
}
.ds-detail-row__ids span strong {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-right: 4px;
}
.ds-detail-row__actions { display: flex; gap: 4px; }
.ds-detail-row__actions .ds-btn {
    width: 32px;
    padding: 0;
    height: 32px;
}
.ds-detail-row__remove:hover { color: #ef4444; border-color: rgba(239, 68, 68, 0.30); }

.ds-detail-row__grants {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 4px;
    justify-content: start;
}
@media (max-width: 720px) { .ds-detail-row__grants { grid-template-columns: repeat(2, 1fr); } }

/* ─── Admin loading state ──────────────────────────────────────────── */
.ds-admin-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: #64748b;
    font-size: 0.92rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DS-COMPANY — Company management screen
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-company { display: block; }

.ds-company__view { display: none; }
.ds-company__view[data-active] { display: block; animation: dsCompanyFade .25s cubic-bezier(.2, .7, .2, 1); }

@keyframes dsCompanyFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.ds-company__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.ds-company__head-back {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ds-company__title {
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #0a0f1f;
}

.ds-company__subtitle {
    margin: 4px 0 0;
    color: #5b6478;
    font-size: 0.86rem;
}

.ds-company__head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── Buttons (admin shell-scoped) ──────────────────────────────────── */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .18s, opacity .15s;
}

.ds-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.ds-btn--primary {
    background: linear-gradient(180deg, #2b85ff 0%, #1361d8 100%);
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 4px 14px -4px rgba(26, 115, 232, 0.45);
}

.ds-btn--primary:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 6px 18px -4px rgba(26, 115, 232, 0.55);
}

.ds-btn--ghost {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.10);
    color: #334155;
}

.ds-btn--ghost:hover:not(:disabled) {
    border-color: rgba(15, 23, 42, 0.20);
    color: #0a0f1f;
}

.ds-btn.is-busy { pointer-events: none; opacity: 0.7; }

/* ─── Panel + search + table ───────────────────────────────────────── */
.ds-company__panel {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    box-shadow: 0 6px 24px -8px rgba(2, 8, 32, 0.08);
    overflow: hidden;
}

.ds-company__search {
    position: relative;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.ds-company__search i {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.95rem;
    pointer-events: none;
}

.ds-company__search input {
    width: 100%;
    padding: 11px 14px 11px 44px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 11px;
    background: #f6f8fc;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0a0f1f;
    transition: border-color .18s, background .18s, box-shadow .18s;
    outline: none;
}

.ds-company__search input:focus {
    background: #ffffff;
    border-color: #1a73e8;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.10);
}

.ds-company__table {
    padding: 8px 8px 16px;
}

.ds-company__empty {
    padding: 60px 20px;
    text-align: center;
    color: #94a3b8;
}

.ds-company__empty i {
    font-size: 2rem;
    color: #cbd5e1;
    display: block;
    margin-bottom: 10px;
}

/* Override custom-table inside admin company panel for cleaner look */
.ds-company .custom-table {
    border-radius: 0;
}

.ds-company .custom-header {
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.ds-company .custom-header .custom-cell {
    padding: 12px 14px;
    min-width: 0;
}

.ds-company .custom-row {
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    transition: background .12s;
}

.ds-company .custom-row:hover {
    background: rgba(26, 115, 232, 0.03);
}

.ds-company .custom-row .custom-cell {
    padding: 14px 14px;
    font-size: 0.86rem;
    color: #0a0f1f;
    min-width: 0;
}

.ds-company .custom-row .custom-cell.ds-company-cell-users {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.84rem;
    color: #0a0f1f;
    letter-spacing: -0.01em;
}

.ds-company .custom-row .custom-cell.ds-company-cell-storage {
    font-size: 0.78rem;
    color: #475569;
    letter-spacing: -0.005em;
}

/* ─── Form ─────────────────────────────────────────────────────────── */
.ds-company__form {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    padding: 28px 28px 24px;
    box-shadow: 0 6px 24px -8px rgba(2, 8, 32, 0.08);
}

.ds-company__feedback,
.ds-company__notice {
    display: none;
    padding: 10px 14px;
    border-radius: 11px;
    font-size: 0.86rem;
    line-height: 1.45;
    margin-bottom: 18px;
}

.ds-company__feedback {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.20);
    color: #b91c1c;
}

.ds-company__notice {
    background: rgba(26, 115, 232, 0.06);
    border: 1px solid rgba(26, 115, 232, 0.18);
    color: #155cb8;
}

.ds-company__feedback[data-visible],
.ds-company__notice[data-visible] { display: block; }

.ds-company-section {
    padding: 18px 0 22px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.ds-company-section:last-of-type { border-bottom: 0; padding-bottom: 6px; }

.ds-company-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #0a0f1f;
    letter-spacing: -0.01em;
}

.ds-company-section h3 i {
    color: #1a73e8;
    font-size: 0.92rem;
}

.ds-company-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

@media (max-width: 880px) { .ds-company-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ds-company-grid { grid-template-columns: 1fr; } }

.ds-company-field { display: flex; flex-direction: column; gap: 5px; }
.ds-company-field--span2 { grid-column: span 2; }
.ds-company-field--span3 { grid-column: span 3; }
@media (max-width: 880px) { .ds-company-field--span3 { grid-column: span 2; } }
@media (max-width: 600px) {
    .ds-company-field--span2,
    .ds-company-field--span3 { grid-column: span 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   <ds-date-input> — Custom date picker
   ═══════════════════════════════════════════════════════════════════════════ */

ds-date-input {
    position: relative;
    display: block;
    width: 100%;
    font-family: 'Inter', system-ui, sans-serif;
}

ds-date-input.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.ds-date-input__field {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 11px;
    transition: border-color .18s, background .18s, box-shadow .18s;
    overflow: hidden;
}

.ds-date-input__field:hover:not(:focus-within) {
    border-color: rgba(15, 23, 42, 0.18);
    background: #f3f6fb;
}

.ds-date-input__field:focus-within {
    background: #ffffff;
    border-color: #1a73e8;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.12);
}

ds-date-input.is-invalid .ds-date-input__field {
    border-color: #ef4444;
}

ds-date-input.is-invalid .ds-date-input__field:focus-within {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}

ds-date-input .ds-date-input__input {
    flex: 1;
    min-width: 0;
    padding: 11px 13px;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0a0f1f;
    outline: none !important;
    letter-spacing: 0.02em;
}

.ds-date-input__input::placeholder {
    color: #94a3b8;
    letter-spacing: 0;
}

.ds-date-input__input:disabled { cursor: not-allowed; }

.ds-date-input__btn {
    flex-shrink: 0;
    width: 40px;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(15, 23, 42, 0.06);
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: background .15s, color .15s;
}

.ds-date-input__btn:hover:not(:disabled) {
    background: rgba(26, 115, 232, 0.08);
    color: #1a73e8;
}

.ds-date-input__btn:disabled { cursor: not-allowed; opacity: 0.5; }

/* Popup */
.ds-date-input__popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;
    min-width: 280px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 12px 32px -10px rgba(2, 8, 32, 0.30),
        0 4px 12px -4px rgba(2, 8, 32, 0.12);
    padding: 12px;
    animation: dsDateFadeIn .15s cubic-bezier(.2, .7, .2, 1);
}

@keyframes dsDateFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.ds-date-input__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 10px;
}

.ds-date-input__nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: transparent;
    border: 0;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    transition: background .15s, color .15s;
}

.ds-date-input__nav-btn:hover {
    background: rgba(26, 115, 232, 0.10);
    color: #1a73e8;
}

.ds-date-input__month-label {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 0.94rem;
    font-weight: 600;
    color: #0a0f1f;
    letter-spacing: -0.01em;
}

.ds-date-input__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 0 4px 6px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    margin-bottom: 6px;
}

.ds-date-input__weekdays span {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 0;
}

.ds-date-input__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.ds-date-day {
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #334155;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s, transform .12s;
}

.ds-date-day:hover:not(:disabled) {
    background: rgba(26, 115, 232, 0.08);
    color: #1a73e8;
}

.ds-date-day--blank { visibility: hidden; pointer-events: none; }

.ds-date-day--today {
    color: #1a73e8;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.30);
}

.ds-date-day--selected {
    background: linear-gradient(180deg, #2b85ff 0%, #1361d8 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 4px 10px -3px rgba(26, 115, 232, 0.45);
}

.ds-date-input__footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.ds-date-input__action {
    flex: 1;
    padding: 8px 12px;
    border-radius: 9px;
    border: 0;
    background: linear-gradient(180deg, #2b85ff 0%, #1361d8 100%);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter .15s, transform .12s;
}

.ds-date-input__action:hover { filter: brightness(1.05); }
.ds-date-input__action:active { transform: translateY(0.5px); }

.ds-date-input__action--ghost {
    background: transparent;
    color: #64748b;
    border: 1px solid rgba(15, 23, 42, 0.10);
}

.ds-date-input__action--ghost:hover {
    background: #f6f8fc;
    color: #0a0f1f;
    filter: none;
}

/* ─── Taxpayer modal (RNC autocompletion) ──────────────────────────── */
.ds-company-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ds-company-modal[hidden] { display: none; }

.ds-company-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 18, 41, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: dsCompanyModalFade .18s ease-out;
}

.ds-company-modal__panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 24px 60px -12px rgba(2, 8, 32, 0.45);
    padding: 24px 24px 22px;
    animation: dsCompanyModalIn .22s cubic-bezier(.2, .7, .2, 1);
}

@keyframes dsCompanyModalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dsCompanyModalIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ds-company-modal__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

/* Botón de cerrar (X) del header: pegado a la derecha siempre. */
.ds-company-modal__head > [data-modal-close]:last-child {
    margin-left: auto;
    flex-shrink: 0;
    align-self: flex-start;
}

.ds-company-modal__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.18), rgba(26, 115, 232, 0.06));
    color: #1a73e8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.ds-company-modal__head h3 {
    margin: 0 0 2px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #0a0f1f;
}

.ds-company-modal__head p {
    margin: 0;
    color: #5b6478;
    font-size: 0.85rem;
}

.ds-company-modal__body {
    margin-bottom: 18px;
}

.ds-company-modal__rows {
    margin: 0 0 14px;
    padding: 14px 16px;
    background: #f6f8fc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ds-company-modal__rows > div {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px;
    align-items: baseline;
}

.ds-company-modal__rows dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ds-company-modal__rows dd {
    margin: 0;
    font-size: 0.92rem;
    color: #0a0f1f;
    font-weight: 500;
    word-break: break-word;
}

.ds-company-modal__question {
    margin: 0;
    color: #334155;
    font-size: 0.9rem;
}

.ds-company-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Section that combines the logo block with a body (e.g. identification) */
.ds-company-section--with-logo {
    display: flex;
    gap: 26px;
    align-items: flex-start;
}

.ds-company-section--with-logo > .ds-company-logo-block {
    flex-shrink: 0;
    border-bottom: 0;
    padding: 0;
    margin: 0;
    align-items: flex-start;
}

.ds-company-section--with-logo > .ds-company-section__body {
    flex: 1;
    min-width: 0;
}

.ds-company-section--with-logo > .ds-company-section__body h3 {
    margin-top: 0;
}

@media (max-width: 720px) {
    .ds-company-section--with-logo {
        flex-direction: column;
    }
    .ds-company-section--with-logo > .ds-company-logo-block {
        align-self: center;
    }
}

/* Select styling matches inputs */
.ds-company-field > select {
    width: 100%;
    padding: 11px 36px 11px 13px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 11px;
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.5L6 6L10.5 1.5' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0a0f1f;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color .18s, background-color .18s, box-shadow .18s;
}

.ds-company-field > select:hover:not(:disabled) {
    border-color: rgba(15, 23, 42, 0.18);
    background-color: #f3f6fb;
}

.ds-company-field > select:focus {
    background-color: #ffffff;
    border-color: #1a73e8;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.12);
}

.ds-company-field > select:disabled {
    background-color: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.ds-company-field label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #475569;
}

.ds-company-field label .req { color: #ef4444; margin-left: 2px; }

.ds-company-field > input {
    padding: 11px 13px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 11px;
    background: #f8fafc;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0a0f1f;
    outline: none;
    transition: border-color .18s, background .18s, box-shadow .18s;
}

.ds-company-field > input:hover:not(:disabled) {
    border-color: rgba(15, 23, 42, 0.16);
    background: #f3f6fb;
}

.ds-company-field > input:focus {
    background: #ffffff;
    border-color: #1a73e8;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.12);
}

.ds-company-field > input:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.ds-company-hint {
    margin: 0;
    font-size: 0.74rem;
    color: #94a3b8;
}

/* ─── Logo block (top of form, click-to-upload) ────────────────────── */
.ds-company-logo-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 6px 0 22px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    margin-bottom: 22px;
}

.ds-company-logo-drop {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 24px;
    background: #f1f5f9;
    border: 2px dashed rgba(15, 23, 42, 0.14);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    transition: border-color .18s, background .18s, transform .15s, box-shadow .22s;
    isolation: isolate;
}

.ds-company-logo-drop:hover:not(:disabled) {
    border-color: #1a73e8;
    background: rgba(26, 115, 232, 0.04);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(26, 115, 232, 0.30);
}

.ds-company-logo-drop:disabled,
.ds-company-logo-drop[data-busy] {
    cursor: not-allowed;
    opacity: 0.7;
}

.ds-company-logo-drop[data-has-logo] {
    border-style: solid;
    border-color: rgba(15, 23, 42, 0.10);
}

.ds-company-logo-drop__preview {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 2rem;
    transition: transform .25s;
}

.ds-company-logo-drop__preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    background: #ffffff;
}

.ds-company-logo-drop__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(7, 18, 41, 0);
    color: rgba(255, 255, 255, 0);
    transition: background .2s, color .2s;
    pointer-events: none;
    font-family: 'Inter', system-ui, sans-serif;
}

.ds-company-logo-drop:hover:not(:disabled) .ds-company-logo-drop__overlay {
    background: rgba(7, 18, 41, 0.55);
    color: #ffffff;
}

.ds-company-logo-drop[data-busy] .ds-company-logo-drop__overlay {
    background: rgba(7, 18, 41, 0.55);
    color: #ffffff;
}

.ds-company-logo-drop[data-busy] [data-overlay-icon]::before {
    content: '\f3f4'; /* fa-spinner-third */
    animation: dsCompanySpin 0.8s linear infinite;
}

@keyframes dsCompanySpin {
    to { transform: rotate(360deg); }
}

.ds-company-logo-drop__overlay i {
    font-size: 1.7rem;
    display: inline-block;
}

.ds-company-logo-drop__overlay span {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.ds-company-logo-block__caption {
    margin: 0;
    font-size: 0.74rem;
    color: #94a3b8;
}

.ds-company-logo-block__filename {
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(26, 115, 232, 0.08);
    border: 1px solid rgba(26, 115, 232, 0.16);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    color: #1361d8;
}

/* ─── Switches (form-level, distinct from auth) ────────────────────── */
.ds-company-toggle {
    margin: 8px 0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ds-company-toggle--with-input {
    align-items: stretch;
}

.ds-company-toggle--with-input .ds-company-field {
    flex: 0 0 200px;
}

.ds-company-switch {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    cursor: pointer;
    user-select: none;
    padding: 10px 14px;
    background: #f6f8fc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 13px;
    transition: background .15s, border-color .15s;
}

.ds-company-switch:hover {
    background: #f1f4fa;
    border-color: rgba(15, 23, 42, 0.10);
}

.ds-company-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ds-company-switch__track {
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #cbd5e1;
    position: relative;
    transition: background .22s cubic-bezier(.2, .7, .2, 1);
    margin-top: 2px;
}

.ds-company-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    transition: transform .22s cubic-bezier(.2, .7, .2, 1);
}

.ds-company-switch input:checked + .ds-company-switch__track {
    background: linear-gradient(180deg, #2b85ff, #1361d8);
}

.ds-company-switch input:checked + .ds-company-switch__track .ds-company-switch__thumb {
    transform: translateX(16px);
}

.ds-company-switch__body { display: flex; flex-direction: column; gap: 2px; }
.ds-company-switch__title { font-size: 0.86rem; font-weight: 500; color: #0a0f1f; }
.ds-company-switch__hint { font-size: 0.76rem; color: #64748b; line-height: 1.4; }

/* ─── Admin fatal (existing) ───────────────────────────────────────── */
.ds-admin-fatal {
    margin: 80px auto;
    max-width: 420px;
    padding: 24px;
    text-align: center;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 0.92rem;
}

/* ─── Fatal fallback (auth) ─────────────────────────────────────────── */
.ds-auth-fatal {
    margin: 80px auto;
    max-width: 420px;
    padding: 24px;
    text-align: center;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 0.92rem;
}

/* ─── Option Trigger (button replacing native <select> for option picker) ── */
.ds-option-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.92rem;
    color: #1f2937;
    text-align: left;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.ds-option-trigger:hover:not(:disabled) {
    border-color: #9ca3af;
    background: #f9fafb;
}
.ds-option-trigger:focus-visible {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.ds-option-trigger:disabled { opacity: .55; cursor: not-allowed; }
.ds-option-trigger__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    font-size: 0.95rem;
}
.ds-option-trigger__text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-option-trigger__chev {
    flex: 0 0 auto;
    color: #9ca3af;
    font-size: 0.78rem;
}

/* ─── Option Picker modal (extends ds-company-modal) ────────────────────── */
.ds-option-picker__panel {
    max-width: 560px;
    padding: 20px 0 0;
    display: flex;
    flex-direction: column;
    max-height: min(82vh, 720px);
}
.ds-option-picker__panel > .ds-company-modal__head {
    padding: 0 24px 14px;
    margin: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ds-option-picker__close {
    margin-left: auto;
    padding: 6px 10px;
}
.ds-option-picker__search {
    position: relative;
    padding: 14px 24px 10px;
}
.ds-option-picker__search i {
    position: absolute;
    left: 36px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.92rem;
    pointer-events: none;
}
.ds-option-picker__search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.92rem;
    transition: border-color .15s, box-shadow .15s;
}
.ds-option-picker__search input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.ds-option-picker__list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ds-option-picker__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background .12s, border-color .12s;
}
.ds-option-picker__item:hover,
.ds-option-picker__item:focus-visible {
    background: #f3f4f6;
    border-color: rgba(15, 23, 42, 0.08);
    outline: none;
}
.ds-option-picker__item-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #eef2ff;
    color: #4338ca;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.ds-option-picker__item-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ds-option-picker__item-name {
    font-weight: 600;
    color: #111827;
    font-size: 0.94rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ds-option-picker__item-desc {
    font-size: 0.82rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-option-picker__badge {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
}
.ds-option-picker__item-chev {
    flex: 0 0 auto;
    color: #9ca3af;
    font-size: 0.8rem;
}
.ds-option-picker__empty {
    text-align: center;
    padding: 28px 20px;
    color: #6b7280;
}
.ds-option-picker__empty i {
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: #9ca3af;
}
.ds-option-picker__empty p { margin: 0; font-size: 0.92rem; }

/* ═══════════════════════════════════════════════════════════════════════
   Shell topbar pill — rediseño visual post-login
   Aplica sobre `.page-header` del home.hbs sin tocar el HTML.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --ds-topbar-gap: 16px;
    --ds-topbar-radius: 22px;
    --ds-topbar-bg: #ffffff;
    --ds-topbar-bg-dark: #0f1628;
    --ds-shell-bg: #f5f6fa;
    --ds-shell-bg-dark: #050811;
    --ds-topbar-shadow: 0 10px 28px -6px rgba(2, 8, 32, 0.12),
                        0 2px 8px -2px rgba(2, 8, 32, 0.08);
    --ds-topbar-btn-size: 44px;
    --ds-topbar-btn-hover: rgba(15, 22, 40, 0.06);
    --ds-topbar-height: 60px;
}

/* Fondo del shell post-login: gradientes del login (sin cubos 3D ni grid).
   Aplicar solo al body del home — `.ds-auth-body` y `.ds-admin-body` mantienen
   sus fondos propios por mayor especificidad. */
body {
    background:
        radial-gradient(1100px 640px at 16% 18%, rgba(56, 132, 255, 0.18), transparent 60%),
        radial-gradient(900px 540px at 88% 82%, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(600px 360px at 50% 110%, rgba(14, 165, 233, 0.10), transparent 55%),
        linear-gradient(160deg, #050a1c 0%, #081230 50%, #0a1a44 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* El wrapper queda como una "card" glassmorphic del mismo ancho que el topbar,
   con bordes redondeados, para enmarcar el contenido del shell.
   El gap con el header viene del `gap` del contenedor `<partial>`. */
.page-wrapper.container-general {
    /* Misma estética que el topbar para que ambos parezcan a la misma
       profundidad — mismo background, mismo box-shadow, mismo borde. */
    background: var(--ds-topbar-bg);
    border: 1px solid rgba(15, 22, 40, 0.06);
    border-radius: var(--ds-topbar-radius);
    box-shadow: var(--ds-topbar-shadow);
    max-width: calc(1800px - var(--ds-topbar-gap) * 2);
    width: calc(100% - var(--ds-topbar-gap) * 2);
    /* margin-top amplificado: var(--ds-topbar-gap) base + 14px extra para
       darle aire al handle de colapso. `!important` necesario porque
       `.container-general { margin: 0 auto }` en site.css con menor
       specificity podía neutralizar el top en algunos browsers. */
    margin: calc(var(--ds-topbar-gap) + 14px) auto 0 !important;
    transition: margin-top 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Home shell: body NO scrollea para que el page-content quede dentro
   del wrapper sin que el body-scroll empuje al wrapper detrás del
   header sticky (lo que hacía desaparecer el gap visible). El scroll
   del contenido vive dentro de `#js-page-content`
   (`overflow: scroll; height: 88vh` de SmartAdmin). El bug de popup
   anterior NO era causado por esto — fue por el `menuContent.innerHTML
   = ''` del tree renderer que arrasaba el markup hardcodeado de
   `sidebar.hbs` (ya arreglado en el hotfix con `data-dynamic`). */
body:has(> partial[name="_ScriptsLoadingSaving"]) {
    height: 100vh;
    overflow: hidden;
}

/* SmartAdmin fuerza `min-height: 100vh` en `.page-inner` lo que sumaba
   100vh + header (~92px) + wrapper margin (30px) ≈ 122px de overflow
   del body. Override a 0 — el `#js-page-content` interno controla su
   propio scroll. */
.page-wrapper.container-general .page-inner {
    min-height: 0 !important;
}

/* Contenedor del shell que agrupa header + wrapper. El `<partial>` es un
   elemento desconocido en el browser (default inline) — lo forzamos a
   block. Probamos antes flex column con `flex: 1` y luego min-height calc
   para crecer el wrapper, pero ambos creaban issues de stacking/scroll
   donde el `#js-page-content` colisionaba con el header sticky. La
   versión actual usa solo block + margin transitions: el wrapper toma su
   altura natural y al colapsar el header sólo cambia su margin-top
   (header pasa a 14px de alto, margin del wrapper pasa a 0 ⇒ ~92px de
   espacio ganado visible). */
partial[name="_ScriptsLoadingSaving"] {
    display: block;
}

/* (Removida la regla que hacía el wrapper transparente en modo `solid`:
    ahora el wrapper es opaco blanco igual que el topbar — el color elegido
    se ve en los gaps alrededor de ambas cards, no a través de ellas.) */

.page-header {
    /* En flujo dentro de `<partial>` con sticky para mantener el topbar
       visible al hacer scroll. Antes era `position: fixed` lo que forzaba
       al wrapper a llevar un `margin-top` ad-hoc para no quedar tapado. */
    position: sticky;
    top: var(--ds-topbar-gap);
    margin: var(--ds-topbar-gap) auto 0;
    max-width: calc(1800px - var(--ds-topbar-gap) * 2);
    width: calc(100% - var(--ds-topbar-gap) * 2);
    height: auto;
    min-height: var(--ds-topbar-height);
    padding: 8px 16px;

    background: var(--ds-topbar-bg);
    border: 1px solid rgba(15, 22, 40, 0.06);
    border-bottom: 1px solid rgba(15, 22, 40, 0.06);
    border-radius: var(--ds-topbar-radius);
    box-shadow: var(--ds-topbar-shadow);
    /* `!important` necesario: SmartAdmin o algún wrapper interno del
       `#js-page-content` puede crear stacking contexts con z-index propio.
       Como el header es sticky, debe ganar siempre el stacking para no
       quedar tapado por el contenido scrolleable. */
    z-index: 1000 !important;
    gap: 12px;
    /* Display flex para alinear hijos horizontalmente. SmartAdmin ya pone
       display:flex pero con `height: 4.125rem` que rompe nuestro min-height
       auto. Re-declaramos para asegurar layout correcto. */
    display: flex;
    align-items: center;
    /* overflow:visible para que el handle de colapso pueda extender por
       debajo del borde inferior del header. Transición coordinada con el
       estado colapsado más abajo. */
    overflow: visible;
    transition:
        min-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

/* ── Handle de colapso del header (barra gris inferior-centro) ─────────
   El handle "flota" en el gap entre header y wrapper. Lo desplazamos lo
   suficiente para que el pill visible quede totalmente fuera del header
   (no superpuesto al borde inferior) y el wrapper lleva un margin-top
   ampliado para darle espacio. */
.ds-header-toggle-bar {
    position: absolute;
    bottom: 0px;     /* despega el handle del borde inferior del header */
    left: 50%;
    transform: translateX(-50%);
    /* Hitbox amplio para mejor tap target — el pill visible es más pequeño. */
    width: 80px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
.ds-header-toggle-bar:focus { outline: none; }
.ds-header-toggle-bar:focus-visible .ds-header-toggle-bar__pill {
    box-shadow: 0 0 0 2px rgba(43, 133, 255, 0.45);
}

.ds-header-toggle-bar__pill {
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(15, 22, 40, 0.20);
    transition:
        background 0.18s ease,
        width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.18s ease;
}
.ds-header-toggle-bar:hover .ds-header-toggle-bar__pill {
    background: rgba(15, 22, 40, 0.36);
    width: 52px;
}
.ds-header-toggle-bar:active .ds-header-toggle-bar__pill {
    transform: scaleY(0.85);
}

/* ── Estado colapsado: el header se reduce a sólo la barra del handle ── */
body.ds-header-collapsed .page-header {
    min-height: 14px;
    height: 14px;
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
}

/* Estado base (header visible): preparar transición para los hijos. Sin
   esto el slide-up no anima en la ida (sólo al volver). */
.page-header > *:not(.ds-header-toggle-bar) {
    transition:
        opacity 0.22s ease,
        transform 0.30s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

/* Ocultamos todos los hijos del header excepto el handle. `!important` en
   opacity + visibility para vencer reglas inline o de SmartAdmin que pudieran
   forzar visibilidad (img con style attr, components con position absolute,
   etc). Slide-up + fade combinados crean el efecto de "irse arriba". */
body.ds-header-collapsed .page-header > *:not(.ds-header-toggle-bar) {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-24px) !important;
    pointer-events: none !important;
}
body.ds-header-collapsed .ds-header-toggle-bar {
    pointer-events: auto;
    bottom: -6px;  /* se asienta más cerca cuando el header está compacto */
}
body.ds-header-collapsed .ds-header-toggle-bar__pill {
    /* Pista visual: en estado colapsado el pill cambia a tono blanco/azul
       sobre el fondo del shell. */
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 3px rgba(2, 8, 32, 0.25);
}
body.ds-header-collapsed .ds-header-toggle-bar:hover .ds-header-toggle-bar__pill {
    background: rgba(255, 255, 255, 0.85);
}

/* Cuando el header está colapsado, el wrapper sube y crece para llenar el
   espacio que dejó libre. La transición vive en la regla base del wrapper
   (más arriba) y cubre tanto margin-top como height.
   `!important` para vencer el `!important` que también lleva la regla
   base (necesario por especificidad de site.css). */
body.ds-header-collapsed .page-wrapper.container-general {
    margin-top: 0 !important;
}

.page-header #burgerMenu,
.page-header .header-icon,
.page-header .profile-image {
    width: var(--ds-topbar-btn-size);
    height: var(--ds-topbar-btn-size);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease;
    padding: 0;
    margin: 0 4px;
    position: relative;
}

/* Hover gris solo para la campana (.header-icon) — el burger y el avatar
   tienen su propio look azul gradiente. */
.page-header .header-icon:hover {
    background: var(--ds-topbar-btn-hover);
}

.page-header #burgerMenu i,
.page-header .header-icon i {
    font-size: 1.1rem;
    line-height: 1;
}

/* Tipografía del avatar (los visuales — background/shadow/hover — vienen del
   bloque unificado más abajo que comparte con #burgerMenu). */
.page-header .profile-image[data-initial-user-name] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
}

.page-header .greeting-message {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #0a0f1f;
    margin: 0 12px 0 4px;
    white-space: nowrap;
}

.page-header .greeting-message #userNameToSayHi {
    font-weight: 600;
}

.page-header .badge.badge-icon {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    padding: 0 5px;
    box-shadow: 0 0 0 2px var(--ds-topbar-bg);
}

/* Antes el header era `position: fixed` y este padding compensaba ese
   solapamiento. Ahora el header vive dentro de `<partial>` en flujo
   sticky, así que el wrapper ya queda naturalmente por debajo. No hace
   falta padding-top extra. */

/* Esquinas redondeadas del área de contenido (mismo radio que el topbar).
   `!important` necesario para vencer las reglas de SmartAdmin que aplican
   `border-radius: 5px` + `overflow: hidden` al `.page-inner` (abuelo) que
   recorta cualquier corner mayor del hijo. */
.page-wrapper.container-general .page-inner,
.page-wrapper.container-general .page-content-wrapper,
main#js-page-content.page-content,
.page-content.bg-white {
    border-radius: 22px !important;
}

main#js-page-content.page-content,
.page-content.bg-white {
    /* `overflow-y: auto` permite scroll vertical cuando el módulo cargado
       excede el alto disponible (ej. árbol grande de perfiles). Mantenemos
       `overflow-x: hidden` para que el border-radius del corner siga
       recortando los hijos y no aparezca scrollbar horizontal accidental. */
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* El SPA inserta `<div id="module_opened">` que llena el page-content y
   puede tener fondo propio. Le forzamos también el corner para que el
   recorte se vea limpio. */
#js-page-content > #module_opened {
    border-radius: 22px;
}

/* Quitar el ripple/waves de Material en los botones del topbar.
   El "círculo blanco que se aleja" del avatar/burger es `.waves-ripple` de SmartAdmin. */
.page-header .waves-ripple,
.page-header a.header-icon .waves-ripple {
    display: none !important;
}

.page-header .header-icon,
.page-header .header-icon:focus,
.page-header .header-icon:active {
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

/* ─── Dropdowns del topbar: animación smooth + estilo moderno ─── */
.page-header .dropdown-menu.dropdown-menu-animated {
    border-radius: 18px;
    box-shadow:
        0 20px 48px -12px rgba(2, 8, 32, 0.22),
        0 4px 16px -4px rgba(2, 8, 32, 0.10);
    border: 1px solid rgba(15, 22, 40, 0.06);
    margin-top: 12px;
    padding: 6px;
    overflow: hidden;
    /* Anclar al botón origen y override de la transición agresiva (bouncy) por una smooth ease-out */
    transform-origin: top right !important;
    transition:
        opacity 260ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 260ms !important;
    /* Estado oculto más sutil: scale 0.94 + slight slide-up (antes era 0.8 puro) */
    transform: scale(0.94) translateY(-6px) !important;
}

.show > .page-header .dropdown-menu.dropdown-menu-animated,
.page-header .show > .dropdown-menu.dropdown-menu-animated {
    transform: scale(1) translateY(0) !important;
}

/* SmartAdmin posiciona el dropdown con top: 4.0625rem !important (~65px),
   pensando en un topbar fijo de altura standard pegado al borde. Como el
   topbar ahora flota y mide 60px+padding, ese top deja el menú flotando
   demasiado lejos. Override: justo debajo del topbar con un gap visual. */
.page-header .header-icon:not(.btn)[data-toggle="dropdown"] + .dropdown-menu {
    top: calc(100% + 8px) !important;
    right: var(--ds-topbar-gap) !important;
    left: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Menú de cuenta (avatar del topbar) — estilo "Google account"
   ═══════════════════════════════════════════════════════════════════════ */

/* `!important` necesario para vencer al SmartAdmin
   `.header-icon[data-toggle="dropdown"] + .dropdown-menu { padding: 0 }`
   que tiene mayor especificidad. */
.page-header .dropdown-menu.ds-account-menu {
    width: min(400px, calc(100vw - 32px));
    padding: 28px 28px 24px !important;
    background: #ffffff;
    border: 1px solid rgba(15, 22, 40, 0.06);
    border-radius: 24px;
    box-shadow:
        0 24px 64px -16px rgba(2, 8, 32, 0.22),
        0 8px 24px -8px rgba(2, 8, 32, 0.10);
    color: #0a0f1f;
    font-family: 'Inter', system-ui, sans-serif;
    /* En pantallas de poca altura el panel se desborda; se acota a la altura
       disponible y se hace scrollable en vertical (la barra de header ronda los
       ~80px). El eje X se mantiene oculto para preservar el redondeo. */
    max-height: calc(100vh - 96px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Firefox: barra fina. */
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.22) transparent;
}

/* Scrollbar fina que NO invade las esquinas redondeadas del panel: el track
   lleva un margen vertical igual al radio (24px) para terminar antes de la
   curva, y el thumb queda insertado desde el borde derecho. */
.page-header .dropdown-menu.ds-account-menu::-webkit-scrollbar {
    width: 11px;
}
.page-header .dropdown-menu.ds-account-menu::-webkit-scrollbar-track {
    background: transparent;
    margin: 24px 0;
}
.page-header .dropdown-menu.ds-account-menu::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.20);
    border-radius: 999px;
    border: 3px solid transparent;     /* separa el thumb del borde */
    background-clip: content-box;
}
.page-header .dropdown-menu.ds-account-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.32);
    background-clip: content-box;
}

.ds-account-menu__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.ds-account-menu__email {
    text-align: center;
    font-size: 0.88rem;
    font-weight: 500;
    color: #475569;
    grid-column: 1 / 3;
    grid-row: 1;
    padding: 0 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-account-menu__close {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ds-account-menu__close:hover {
    background: #f5f6fa;
    border-color: rgba(15, 23, 42, 0.20);
    color: #0a0f1f;
}

.ds-account-menu__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 0 22px;
}

.ds-account-menu .ds-account-menu__avatar {
    width: 76px !important;
    height: 76px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #2b85ff 0%, #1361d8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.7rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 8px 22px -6px rgba(26, 115, 232, 0.55);
}

.ds-account-menu__hello {
    margin: 6px 0 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #0a0f1f;
}

.ds-account-menu__primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(43, 133, 255, 0.45);
    background: #ffffff;
    color: #1361d8;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ds-account-menu__primary:hover {
    background: rgba(43, 133, 255, 0.06);
    border-color: rgba(43, 133, 255, 0.85);
    color: #0d4ea8;
    text-decoration: none;
}

.ds-account-menu__section-label {
    margin: 20px 6px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.02em;
}

.ds-account-menu__card {
    background: #f5f6fa;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
}

.ds-account-menu__card--danger {
    background: #fef2f2;
    border-color: rgba(220, 38, 38, 0.10);
}

.ds-account-menu__row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    color: #0a0f1f;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.ds-account-menu__row:first-child { border-top: 0; }

.ds-account-menu__row:hover {
    background: rgba(15, 23, 42, 0.04);
    color: #0a0f1f;
    text-decoration: none;
}

.ds-account-menu__card--danger .ds-account-menu__row {
    color: #b91c1c;
    border-top-color: rgba(220, 38, 38, 0.10);
}

.ds-account-menu__card--danger .ds-account-menu__row:hover {
    background: rgba(220, 38, 38, 0.08);
    color: #991b1b;
}

.ds-account-menu__row-icon {
    font-size: 1.1rem;
    color: #475569;
}

.ds-account-menu__card--danger .ds-account-menu__row-icon {
    color: #dc2626;
}

/* Row "Modo móvil" cuando el filtro está efectivamente activo. */
.ds-account-menu__row--mobile-active {
    background: rgba(52, 199, 89, 0.08);
}
.ds-account-menu__row--mobile-active .ds-account-menu__row-icon {
    color: #1f9d44;
}
.ds-account-menu__row--mobile-active .ds-account-menu__row-meta {
    color: #1f9d44;
    font-weight: 600;
}

.ds-account-menu__row-label {
    font-size: 0.92rem;
    font-weight: 500;
}

.ds-account-menu__row-meta {
    font-size: 0.78rem;
    color: #64748b;
    display: inline-flex;
    align-items: center;
}

.ds-account-menu__row-meta .fa-chevron-right {
    font-size: 0.8rem;
    color: #94a3b8;
}

.ds-account-menu__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 0.75rem;
    color: #64748b;
}

.ds-account-menu__footer a {
    color: #64748b;
    text-decoration: none;
}

.ds-account-menu__footer a:hover {
    color: #1361d8;
    text-decoration: underline;
}

.ds-account-menu__dot { color: #cbd5e1; }

/* ────────────────────────────────────────────────────────────────────
   Variante móvil del account menu: bottom-sheet estilo iOS.
   Bootstrap posiciona el dropdown con `position: absolute; transform`
   anclado al avatar — en pantallas pequeñas no tiene sentido. Lo
   forzamos a fixed-bottom y dejamos que se deslice desde abajo.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* El menú vive dentro de `.page-header` (z-index: 1000), que crea un
       stacking context. Aunque le pongamos al menú z-index: 9999, queda
       atrapado por el contexto del header y el backdrop (z:1099 en root)
       lo tapa. Cuando el sheet está abierto, elevamos el header completo
       por encima del backdrop. */
    body:has(.ds-account-menu.show) .page-header {
        z-index: 1100 !important;
    }

    /* Selector con especificidad alta (body + page-header + 4 clases en el
       menú + el `+ sibling` chain con el toggle) para vencer a las dos reglas
       desktop existentes:
       - `.show > .page-header .dropdown-menu.dropdown-menu-animated { transform }`
       - `.page-header .header-icon:not(.btn)[data-toggle="dropdown"] + .dropdown-menu { top/right/left }`
    */
    body .page-header .header-icon[data-toggle="dropdown"] + .dropdown-menu.ds-account-menu.dropdown-menu-animated,
    body .page-header .header-icon[data-toggle="dropdown"] + .dropdown-menu.ds-account-menu.dropdown-menu-animated.show,
    body .page-header .dropdown-menu.ds-account-menu.dropdown-menu-animated.dropdown-lg {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        inset: auto 0 0 0 !important;
        transform: none !important;
        border-radius: 22px 22px 0 0 !important;
        height: auto !important;
        max-height: 92vh !important;
        /* overflow shorthand explícito + longhand para vencer al
           `overflow: hidden` del .dropdown-menu-animated y del .ds-account-menu
           base. -webkit-overflow-scrolling para Safari iOS legacy. */
        overflow: hidden auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        padding: 14px 18px calc(20px + env(safe-area-inset-bottom)) !important;
        box-shadow:
            0 -20px 60px -16px rgba(2, 8, 32, 0.32),
            0 -2px 0 rgba(15, 23, 42, 0.05);
        z-index: 1100 !important;
        transform-origin: bottom center !important;
        transition: none !important;
    }

    body .page-header .header-icon[data-toggle="dropdown"] + .dropdown-menu.ds-account-menu.dropdown-menu-animated.show {
        animation: dsAccountMenuSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Handle visual tipo iOS sheet (la barrita gris en el tope). */
    .page-header .dropdown-menu.ds-account-menu::before {
        content: '';
        display: block;
        width: 38px;
        height: 5px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.18);
        margin: 0 auto 14px;
    }

    /* Backdrop tenue cuando el sheet está abierto. */
    body:has(.ds-account-menu.show)::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.32);
        backdrop-filter: blur(2px);
        z-index: 1099;
        animation: dsAccountMenuFade 0.24s ease-out;
        pointer-events: none;
    }

    /* Reducir paddings y radios en mobile para aprovechar la pantalla. */
    .ds-account-menu__head { padding-bottom: 12px; }
    .ds-account-menu__email { padding: 0 44px; font-size: 0.82rem; }
    .ds-account-menu__close { width: 36px; height: 36px; }
    .ds-account-menu__hero { padding: 18px 0 14px; gap: 8px; }
    .ds-account-menu .ds-account-menu__avatar {
        width: 64px !important;
        height: 64px !important;
        font-size: 1.45rem;
    }
    .ds-account-menu__hello { font-size: 1.05rem; }
    .ds-account-menu__section-label { margin: 14px 4px 8px; font-size: 0.74rem; }
    .ds-account-menu__card { border-radius: 14px; margin-bottom: 10px; }
    .ds-account-menu__row {
        padding: 14px 16px;
        grid-template-columns: 26px 1fr auto;
        gap: 14px;
    }
    .ds-account-menu__row-label { font-size: 0.92rem; }
    .ds-account-menu__footer { margin-top: 12px; padding-top: 12px; font-size: 0.72rem; }
}

@keyframes dsAccountMenuSlideUp {
    from { transform: translateY(100%) !important; opacity: 0.4; }
    to   { transform: translateY(0)    !important; opacity: 1; }
}
@keyframes dsAccountMenuFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Dark mode del menú de cuenta */
body.mod-skin-dark .page-header .dropdown-menu.ds-account-menu {
    background: #0f1628;
    border-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
body.mod-skin-dark .page-header .dropdown-menu.ds-account-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.20);
    background-clip: content-box;
}

body.mod-skin-dark .ds-account-menu__head { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.mod-skin-dark .ds-account-menu__email { color: #94a3b8; }
body.mod-skin-dark .ds-account-menu__close {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: #cbd5e1;
}
body.mod-skin-dark .ds-account-menu__close:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}
body.mod-skin-dark .ds-account-menu__hello { color: #f1f5f9; }
body.mod-skin-dark .ds-account-menu__primary {
    background: transparent;
    border-color: rgba(138, 180, 255, 0.55);
    color: #8ab4ff;
}
body.mod-skin-dark .ds-account-menu__primary:hover {
    background: rgba(138, 180, 255, 0.10);
    color: #b3ccff;
}
body.mod-skin-dark .ds-account-menu__section-label { color: #94a3b8; }
body.mod-skin-dark .ds-account-menu__card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}
body.mod-skin-dark .ds-account-menu__card--danger {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.20);
}
body.mod-skin-dark .ds-account-menu__row {
    color: #e2e8f0;
    border-top-color: rgba(255, 255, 255, 0.04);
}
body.mod-skin-dark .ds-account-menu__row:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}
body.mod-skin-dark .ds-account-menu__card--danger .ds-account-menu__row { color: #fca5a5; }
body.mod-skin-dark .ds-account-menu__card--danger .ds-account-menu__row:hover {
    background: rgba(220, 38, 38, 0.15);
    color: #fecaca;
}
body.mod-skin-dark .ds-account-menu__row-icon { color: #94a3b8; }
body.mod-skin-dark .ds-account-menu__card--danger .ds-account-menu__row-icon { color: #f87171; }
body.mod-skin-dark .ds-account-menu__row-meta { color: #94a3b8; }
body.mod-skin-dark .ds-account-menu__footer { border-top-color: rgba(255, 255, 255, 0.08); color: #94a3b8; }
body.mod-skin-dark .ds-account-menu__footer a { color: #94a3b8; }
body.mod-skin-dark .ds-account-menu__footer a:hover { color: #8ab4ff; }
body.mod-skin-dark .ds-account-menu__dot { color: #475569; }

/* Dark mode + mobile sheet: handle más claro sobre fondo oscuro. */
@media (max-width: 768px) {
    body.mod-skin-dark .page-header .dropdown-menu.ds-account-menu::before {
        background: rgba(255, 255, 255, 0.22);
    }
    body.mod-skin-dark:has(.ds-account-menu.show)::before {
        background: rgba(0, 0, 0, 0.55);
    }
}

/* Items: redondeados, hover suave, tipografía Inter */
.page-header .dropdown-menu.dropdown-menu-animated .dropdown-item {
    border-radius: 10px;
    padding: 10px 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.88rem;
    color: #334155;
    transition: background 0.15s ease, color 0.15s ease;
}

.page-header .dropdown-menu.dropdown-menu-animated .dropdown-item:hover,
.page-header .dropdown-menu.dropdown-menu-animated .dropdown-item:focus {
    background: rgba(15, 23, 42, 0.05);
    color: #0a0f1f;
}

.page-header .dropdown-menu.dropdown-menu-animated .dropdown-item i {
    transition: color 0.15s ease;
}

.page-header .dropdown-menu.dropdown-menu-animated .dropdown-item:hover i {
    color: #1361d8;
}

.page-header .dropdown-menu.dropdown-menu-animated .dropdown-divider {
    margin: 6px 4px;
    border-color: rgba(15, 23, 42, 0.08);
}

.page-header .dropdown-menu.dropdown-menu-animated .dropdown-header {
    border-radius: 12px;
    margin-bottom: 6px;
}

/* Dark mode del dropdown */
body.mod-skin-dark .page-header .dropdown-menu.dropdown-menu-animated {
    background: #0f1628;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 20px 48px -12px rgba(0, 0, 0, 0.5),
        0 4px 16px -4px rgba(0, 0, 0, 0.35);
}

body.mod-skin-dark .page-header .dropdown-menu.dropdown-menu-animated .dropdown-item {
    color: #cbd5e1;
}

body.mod-skin-dark .page-header .dropdown-menu.dropdown-menu-animated .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

body.mod-skin-dark .page-header .dropdown-menu.dropdown-menu-animated .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08);
}

body.mod-skin-dark {
    background:
        radial-gradient(1100px 640px at 16% 18%, rgba(56, 132, 255, 0.10), transparent 60%),
        radial-gradient(900px 540px at 88% 82%, rgba(99, 102, 241, 0.08), transparent 60%),
        linear-gradient(160deg, #03060f 0%, #050b1d 60%, #060f25 100%);
}

/* Dark mode: wrapper y topbar comparten el mismo bg + shadow para que se
   vean a la misma profundidad. */
body.mod-skin-dark .page-wrapper.container-general,
body.mod-skin-dark .page-header {
    background: var(--ds-topbar-bg-dark);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.5),
                0 2px 8px -2px rgba(0, 0, 0, 0.35);
}

/* Burger del topbar + avatar del usuario: mismo hover que el botón del login (.ds-auth-submit).
   Size con !important porque site.css fuerza `.profile-sub-name { 40px !important }`. */
.page-header #burgerMenu,
.page-header .profile-image[data-initial-user-name] {
    width: var(--ds-topbar-btn-size) !important;
    height: var(--ds-topbar-btn-size) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #2b85ff 0%, #1361d8 100%);
    border: 1px solid transparent;
    color: #ffffff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 1px 2px rgba(2, 8, 32, 0.30),
        0 8px 22px -6px rgba(26, 115, 232, 0.55);
    transition:
        transform 0.15s cubic-bezier(.2, .7, .2, 1),
        box-shadow 0.2s,
        filter 0.2s;
}

.page-header #burgerMenu:hover,
.page-header .profile-image[data-initial-user-name]:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 1px 2px rgba(2, 8, 32, 0.30),
        0 12px 28px -8px rgba(26, 115, 232, 0.65);
}

.page-header #burgerMenu:active,
.page-header .profile-image[data-initial-user-name]:active {
    transform: translateY(0);
    filter: brightness(0.96);
}

/* Quitar cualquier outline o tap-highlight que pueda mover/iluminar el avatar
   cuando se hace click. Sobre todo Bootstrap `.btn:active` heredado por el
   `<a>` padre del dropdown. */
.page-header a.header-icon:has(.profile-image[data-initial-user-name]),
.page-header a.header-icon:has(.profile-image[data-initial-user-name]):active,
.page-header a.header-icon:has(.profile-image[data-initial-user-name]):focus,
.page-header a.header-icon:has(.profile-image[data-initial-user-name]):hover {
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    background: transparent !important;
}

.page-header #burgerMenu i {
    font-size: 1.05rem;
    line-height: 1;
    color: #ffffff;
}

body.mod-skin-dark .page-header .greeting-message {
    color: #e5e7eb;
}

body.mod-skin-dark .page-header #burgerMenu:hover,
body.mod-skin-dark .page-header .header-icon:hover,
body.mod-skin-dark .page-header .profile-image:hover {
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
    :root {
        --ds-topbar-gap: 8px;
        --ds-topbar-btn-size: 40px;
    }
    .page-header .greeting-message {
        font-size: 0.85rem;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Boot loader fullscreen + animación de entrada del topbar
   ═══════════════════════════════════════════════════════════════════════ */

.boot-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #ffffff 0%, #f3f4f8 100%);
    opacity: 1;
    transition: opacity 0.45s ease;
    pointer-events: all;
}

.boot-loader--leaving {
    opacity: 0;
    pointer-events: none;
}

.boot-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    animation: bootLoaderFadeIn 0.5s ease;
}

@keyframes bootLoaderFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.boot-loader__logo img {
    height: 42px;
    width: auto;
    opacity: 0.9;
}

.boot-loader__spinner {
    display: inline-flex;
    gap: 8px;
}

.boot-loader__spinner span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    animation: bootDotPulse 1.1s ease-in-out infinite;
}

.boot-loader__spinner span:nth-child(2) { animation-delay: 0.15s; }
.boot-loader__spinner span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bootDotPulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.boot-loader__text {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.02em;
}

body.mod-skin-dark .boot-loader {
    background: radial-gradient(ellipse at center, #0a0f1f 0%, #050811 100%);
}

body.mod-skin-dark .boot-loader__text {
    color: #94a3b8;
}

/* ─── Animación bouncy del topbar al entrar ─── */

/* Estado inicial OCULTO solo cuando el boot-loader sigue activo. Una vez
   que el loader se va (o si nunca existió), el header se muestra al
   instante incluso si el JS no llega a disparar `.page-header--enter`.
   Antes el header tenía `opacity: 0` permanente y dependía 100% del JS
   para hacerse visible — si algo fallaba el header desaparecía. */
body:has(#boot-loader) .page-header {
    transform: scaleX(0.05);
    transform-origin: center top;
    opacity: 0;
    will-change: transform, opacity;
}

.page-header.page-header--enter {
    animation: topbarBounce 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes topbarBounce {
    0% {
        transform: scaleX(0.05) scaleY(0.7);
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    65% {
        transform: scaleX(1.04) scaleY(1.02);
    }
    85% {
        transform: scaleX(0.98) scaleY(0.99);
    }
    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }
}

/* Los hijos del topbar fade-in suave una vez que la cápsula tomó forma */
.page-header.page-header--enter > * {
    animation: topbarChildrenFade 0.4s ease 0.35s both;
}

@keyframes topbarChildrenFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Animación de entrada del wrapper (contenido) — slide-up + fade ───
   Se dispara al mismo tiempo que el topbar para que el shell aparezca
   como una pieza única. Más suave que el topbar (sin bounce) porque es
   un elemento grande y un overshoot se sentiría tosco.
   Estado inicial oculto SOLO mientras el boot-loader está presente —
   failsafe para que el shell aparezca aunque el JS falle. */
body:has(#boot-loader) .page-wrapper.container-general {
    transform: translateY(40px);
    opacity: 0;
    will-change: transform, opacity;
}

.page-wrapper.container-general.page-wrapper--enter {
    animation: wrapperSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes wrapperSlideUp {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Accesibilidad: respetar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .page-header,
    .page-wrapper.container-general {
        transform: none;
        opacity: 1;
    }
    .page-header.page-header--enter,
    .page-header.page-header--enter > *,
    .page-wrapper.container-general.page-wrapper--enter {
        animation: none;
    }
    .boot-loader,
    .boot-loader--leaving,
    .boot-loader__inner,
    .boot-loader__spinner span {
        animation: none;
        transition: opacity 0.2s linear;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Modal de configuración de apariencia (#appearance_modal)
   ═══════════════════════════════════════════════════════════════════════ */

.ds-appearance-modal {
    position: fixed;
    inset: 0;
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ds-appearance-modal[hidden] { display: none; }

.ds-appearance-modal--open {
    opacity: 1;
    pointer-events: all;
}

.ds-appearance-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 32, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ds-appearance-modal__panel {
    position: relative;
    width: min(540px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow: auto;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(15, 22, 40, 0.06);
    box-shadow:
        0 24px 64px -16px rgba(2, 8, 32, 0.35),
        0 8px 24px -8px rgba(2, 8, 32, 0.18);
    padding: 22px;
    transform: scale(0.94) translateY(12px);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ds-appearance-modal--open .ds-appearance-modal__panel {
    transform: scale(1) translateY(0);
}

.ds-appearance-modal__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.ds-appearance-modal__icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #2b85ff 0%, #1361d8 100%);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 4px 14px -4px rgba(26, 115, 232, 0.45);
}

.ds-appearance-modal__head h3 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #0a0f1f;
}

.ds-appearance-modal__head p {
    margin: 2px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: #64748b;
}

.ds-appearance-modal__close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #fff;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.ds-appearance-modal__close:hover {
    border-color: rgba(15, 23, 42, 0.20);
    color: #0a0f1f;
}

.ds-appearance-modal__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ds-appearance-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ds-appearance-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0a0f1f;
}

.ds-appearance-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ds-appearance-option {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    position: relative;
}

.ds-appearance-option:hover {
    border-color: rgba(15, 23, 42, 0.22);
}

.ds-appearance-option input[type="radio"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.ds-appearance-option:has(input:checked) {
    border-color: #1361d8;
    background: rgba(43, 133, 255, 0.06);
}

.ds-appearance-option__swatch {
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.ds-appearance-option__swatch--disacomp {
    background:
        radial-gradient(circle at 25% 25%, rgba(56, 132, 255, 0.4), transparent 60%),
        linear-gradient(160deg, #050a1c 0%, #081230 50%, #0a1a44 100%);
}

.ds-appearance-option__swatch--solid {
    background: #0a1a44;
}

/* ── Modo de menú: variante de 3 columnas + swatches que mockuean cada modo ── */
.ds-appearance-choice--triple {
    grid-template-columns: repeat(3, 1fr);
}

/* Los swatches del modo de menú son mini-mockups del layout — no colores
   planos. Usamos gradientes y posicionamiento radial para sugerir el shape
   sin imágenes. */
.ds-appearance-option__swatch--menu-popup {
    background:
        /* burger pill arriba */
        linear-gradient(#1361d8, #1361d8) 6px 6px / 8px 4px no-repeat,
        /* mini sidebar flotante a la izquierda */
        linear-gradient(180deg, #ffffff, #ffffff) 4px 14px / 10px 18px no-repeat,
        /* fondo */
        linear-gradient(160deg, #2b85ff 0%, #1361d8 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.ds-appearance-option__swatch--menu-tiles {
    background:
        /* 2x2 grid de tiles blancas */
        linear-gradient(#ffffff, #ffffff) 6px 6px / 10px 10px no-repeat,
        linear-gradient(#ffffff, #ffffff) 20px 6px / 10px 10px no-repeat,
        linear-gradient(#ffffff, #ffffff) 6px 20px / 10px 10px no-repeat,
        linear-gradient(#ffffff, #ffffff) 20px 20px / 10px 10px no-repeat,
        /* fondo */
        linear-gradient(135deg, #ff9500 0%, #ff7e1c 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.ds-appearance-option__swatch--menu-sidebar {
    background:
        /* rail vertical de iconos a la izquierda */
        linear-gradient(180deg, #ffffff, #ffffff) 4px 4px / 8px 28px no-repeat,
        /* área de contenido grande a la derecha */
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)) 16px 4px / 16px 28px no-repeat,
        /* fondo */
        linear-gradient(135deg, #34c759 0%, #1f9d44 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.ds-appearance-field__note {
    margin: 8px 2px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    color: #64748b;
}
.ds-appearance-field__note i { font-size: 0.85rem; color: #94a3b8; }

/* ── Modal mandatorio de recarga (cambio de modo de menú) ──────────
   Reusa la base visual de `.accept-reject-content` + `.accept-content-modal`
   pero centra el único botón (no hay reject) y el icono usa el azul Apple
   para identidad visual. El `.accept-content-modal` original tiene
   `height: 0px` (esperando que AcceptRejectModal.ts lo seteara via JS);
   como no usamos esa clase, forzamos altura auto con padding propio. */
.ds-reload-modal#ds_reload_modal_bg .accept-content-modal {
    height: auto !important;
    min-height: 0 !important;
    width: 480px;
    max-width: calc(100vw - 32px);
    padding: 28px 32px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 22, 40, 0.06) !important;
    border-radius: 18px !important;
    box-shadow:
        0 24px 64px -16px rgba(2, 8, 32, 0.32),
        0 8px 24px -8px rgba(2, 8, 32, 0.16) !important;
    overflow: visible !important;
    gap: 22px;
}
.ds-reload-modal .text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.ds-reload-modal .text-content i {
    color: #1361d8;
    font-size: 40px;
}
.ds-reload-modal .text-content h1 {
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #0a0f1f;
}
.ds-reload-modal .text-content p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #475569;
    max-width: 380px;
}
.ds-reload-modal__buttons {
    display: flex !important;
    justify-content: center !important;
    margin-top: 4px;
}
.ds-reload-modal .accept-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px !important;
    background: linear-gradient(180deg, #2b85ff, #1361d8) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.ds-reload-modal .accept-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px rgba(43, 133, 255, 0.55);
}
.ds-reload-modal .accept-btn:focus-visible {
    outline: 2px solid rgba(43, 133, 255, 0.55);
    outline-offset: 2px;
}

/* Dark mode */
body.mod-skin-dark .ds-reload-modal#ds_reload_modal_bg .accept-content-modal {
    background: #0f1628 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.mod-skin-dark .ds-reload-modal .text-content h1 { color: #f1f5f9; }
body.mod-skin-dark .ds-reload-modal .text-content p { color: #94a3b8; }

.ds-appearance-option__label {
    align-self: end;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0a0f1f;
}

.ds-appearance-option__hint {
    align-self: start;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #64748b;
}

.ds-appearance-color-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 10px;
    align-items: center;
}

.ds-appearance-color-row input[type="color"] {
    width: 56px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    cursor: pointer;
    padding: 4px;
    background: #fff;
}

.ds-appearance-color-row input[type="text"] {
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    padding: 0 14px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.92rem;
    color: #0a0f1f;
    text-transform: lowercase;
    transition: border-color 0.15s ease;
}

.ds-appearance-color-row input[type="text"]:focus {
    outline: none;
    border-color: #1361d8;
}

.ds-appearance-presets {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    margin-top: 6px;
}

.ds-appearance-presets button {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s ease, border-color 0.15s ease;
}

.ds-appearance-presets button:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 23, 42, 0.30);
}

.ds-appearance-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════
   Tiles menu overlay (modo "Tiles" del menú principal)
   ═══════════════════════════════════════════════════════════════════════ */
.ds-tiles-overlay {
    position: fixed;
    inset: 0;
    z-index: 11020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.ds-tiles-overlay[hidden] { display: none; }
.ds-tiles-overlay--open { opacity: 1; pointer-events: auto; }

.ds-tiles-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 32, 0.42);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.ds-tiles-modal {
    position: relative;
    width: min(960px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 22px;
    box-shadow:
        0 32px 80px -16px rgba(2, 8, 32, 0.35),
        0 8px 24px -8px rgba(2, 8, 32, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px) scale(0.98);
    opacity: 0;
    transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.24s ease-out;
}
.ds-tiles-overlay--open .ds-tiles-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.ds-tiles-modal__head {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

/* Anclamos explícitamente cada item a su columna para que el close button
   no se corra a la columna del medio cuando el back está `hidden`
   (HTML hidden = display:none → el browser auto-place mueve los demás).  */
.ds-tiles-modal__back   { grid-column: 1; justify-self: start; }
.ds-tiles-modal__title  { grid-column: 2; }
.ds-tiles-modal__close  { grid-column: 3; justify-self: end; }

.ds-tiles-modal__back,
.ds-tiles-modal__close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ds-tiles-modal__back:hover,
.ds-tiles-modal__close:hover {
    background: #f5f6fa;
    border-color: rgba(15, 23, 42, 0.20);
    color: #0a0f1f;
}

.ds-tiles-modal__title {
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #0a0f1f;
    text-align: center;
    letter-spacing: -0.01em;
}

.ds-tiles-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
}

/* ── Tile grids ────────────────────────────────────────────────────────
   Tarjetas cuadradas (ancho = alto via aspect-ratio) con layout vertical:
   icono arriba → nombre → descripción opcional. minmax 160px da tiles
   suficientemente grandes en desktop y se rebajan en mobile. */
.ds-tiles-grid--modules,
.ds-tiles-section__options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.ds-tiles-grid--options { display: block; }

/* ── Page transition (modules ⇄ options) ──────────────────────────────
   FASE OUT: el grid actual se desliza fuera + fade. FASE IN: el nuevo
   contenido aparece desde el lado opuesto. Durante IN cada `.ds-tiles-card`
   también pop-in con stagger (delay = índice × 35ms) para una entrada
   secuencial elegante. */
@keyframes dsTilesOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-36px); }
}
@keyframes dsTilesOutRight {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(36px); }
}
@keyframes dsTilesInRight {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes dsTilesInLeft {
    from { opacity: 0; transform: translateX(-36px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes dsTileCardPopIn {
    from { opacity: 0; transform: translateY(10px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ds-tiles-grid--out-left   { animation: dsTilesOutLeft  0.20s cubic-bezier(0.4, 0, 1, 1) forwards; }
.ds-tiles-grid--out-right  { animation: dsTilesOutRight 0.20s cubic-bezier(0.4, 0, 1, 1) forwards; }
.ds-tiles-grid--in-right   { animation: dsTilesInRight  0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.ds-tiles-grid--in-left    { animation: dsTilesInLeft   0.32s cubic-bezier(0.16, 1, 0.3, 1); }

/* Stagger de los cards individuales mientras el grid entra. `backwards`
   aplica el estado `from` durante el delay para evitar parpadeo. Cap el
   máximo de cards animados (~14 = 490ms) — más allá ya entran juntos. */
.ds-tiles-grid--in-right .ds-tiles-card,
.ds-tiles-grid--in-left  .ds-tiles-card {
    animation: dsTileCardPopIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(min(var(--idx, 0), 14) * 35ms);
}

/* Fade rápido del título al cambiar de vista. */
.ds-tiles-modal__title {
    transition: opacity 0.14s ease-out;
}
.ds-tiles-modal__title--fading { opacity: 0; }

/* Respect prefers-reduced-motion: sin animaciones de entrada. */
@media (prefers-reduced-motion: reduce) {
    .ds-tiles-grid--out-left,
    .ds-tiles-grid--out-right,
    .ds-tiles-grid--in-left,
    .ds-tiles-grid--in-right,
    .ds-tiles-grid--in-right .ds-tiles-card,
    .ds-tiles-grid--in-left .ds-tiles-card {
        animation: none !important;
    }
    .ds-tiles-modal__title { transition: none; }
}

.ds-tiles-section + .ds-tiles-section { margin-top: 22px; }
.ds-tiles-section__label {
    margin: 0 0 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ds-tiles-card {
    /* Forma cuadrada: aspect-ratio asegura ancho == alto. */
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #ffffff;
    cursor: pointer;
    text-align: center;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.12s ease,
        box-shadow 0.18s ease;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}
.ds-tiles-card:hover {
    border-color: rgba(43, 133, 255, 0.45);
    background: rgba(43, 133, 255, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -16px rgba(43, 133, 255, 0.45);
}

.ds-tiles-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(180deg, #2b85ff, #1361d8);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 6px 16px -6px rgba(43, 133, 255, 0.55);
}
.ds-tiles-card__icon--option {
    background: linear-gradient(180deg, #ff9500, #ff7e1c);
    box-shadow: 0 6px 16px -6px rgba(255, 149, 0, 0.55);
}

.ds-tiles-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
}
.ds-tiles-card__name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #0a0f1f;
    line-height: 1.3;
    /* Truncate a 2 líneas para que el tile cuadrado no se rompa con
       nombres largos. line-clamp es estándar moderno. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.ds-tiles-card__body small {
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* En layout vertical/cuadrado el chevron sobra — la jerarquía es obvia
   por el grid de tiles. Se mantiene en el markup por si en el futuro
   queremos una variante lista. */
.ds-tiles-card__chevron { display: none; }

.ds-tiles-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 16px;
    text-align: center;
    color: #64748b;
}
.ds-tiles-empty i { font-size: 38px; color: rgba(15, 23, 42, 0.18); }
.ds-tiles-empty p { margin: 0; font-size: 0.85rem; }

/* Mobile bottom-sheet del tiles modal — coherente con el account menu sheet. */
@media (max-width: 768px) {
    .ds-tiles-overlay { padding: 0; align-items: flex-end; }
    /* Tiles más pequeños en móvil para que entren 2-3 por fila sin saturar. */
    .ds-tiles-grid--modules,
    .ds-tiles-section__options {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }
    .ds-tiles-card { padding: 14px 10px; gap: 8px; border-radius: 14px; }
    .ds-tiles-card__icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        font-size: 1.25rem;
    }
    .ds-tiles-card__name { font-size: 0.84rem; }
    .ds-tiles-card__body small { font-size: 0.68rem; }
    .ds-tiles-modal {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }
    .ds-tiles-overlay--open .ds-tiles-modal { transform: translateY(0); }
}

/* Dark mode del tiles overlay */
body.mod-skin-dark .ds-tiles-modal {
    background: #0f1628;
    color: #e2e8f0;
}
body.mod-skin-dark .ds-tiles-modal__head { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.mod-skin-dark .ds-tiles-modal__title { color: #f1f5f9; }
body.mod-skin-dark .ds-tiles-modal__back,
body.mod-skin-dark .ds-tiles-modal__close {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: #cbd5e1;
}
body.mod-skin-dark .ds-tiles-modal__back:hover,
body.mod-skin-dark .ds-tiles-modal__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
body.mod-skin-dark .ds-tiles-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}
body.mod-skin-dark .ds-tiles-card:hover {
    background: rgba(138, 180, 255, 0.10);
    border-color: rgba(138, 180, 255, 0.45);
}
body.mod-skin-dark .ds-tiles-card__name { color: #f1f5f9; }
body.mod-skin-dark .ds-tiles-card__body small { color: #94a3b8; }
body.mod-skin-dark .ds-tiles-section__label { color: #94a3b8; }

/* Dark mode del modal de apariencia */
body.mod-skin-dark .ds-appearance-modal__panel {
    background: #0f1628;
    border-color: rgba(255, 255, 255, 0.08);
}

body.mod-skin-dark .ds-appearance-modal__head h3 { color: #f1f5f9; }
body.mod-skin-dark .ds-appearance-modal__head p { color: #94a3b8; }
body.mod-skin-dark .ds-appearance-label { color: #f1f5f9; }
body.mod-skin-dark .ds-appearance-option {
    border-color: rgba(255, 255, 255, 0.10);
}
body.mod-skin-dark .ds-appearance-option:has(input:checked) {
    background: rgba(43, 133, 255, 0.12);
}
body.mod-skin-dark .ds-appearance-option__label { color: #f1f5f9; }
body.mod-skin-dark .ds-appearance-option__hint { color: #94a3b8; }
body.mod-skin-dark .ds-appearance-color-row input[type="text"] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: #f1f5f9;
}
body.mod-skin-dark .ds-appearance-modal__close {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: #cbd5e1;
}
body.mod-skin-dark .ds-appearance-modal__footer {
    border-color: rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   Modals legacy — reskin + z-index fixes
   Aplica el sistema visual `ds-*` (radius, sombras, blur, tipografía) sobre
   los modals viejos de `home.hbs` sin tocar su HTML ni su JS.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --ds-modal-bg: #ffffff;
    --ds-modal-bg-dark: #0f1628;
    --ds-modal-radius: 24px;
    --ds-modal-padding: 22px;
    --ds-modal-shadow:
        0 24px 64px -16px rgba(2, 8, 32, 0.35),
        0 8px 24px -8px rgba(2, 8, 32, 0.18);
    --ds-modal-shadow-dark:
        0 24px 64px -16px rgba(0, 0, 0, 0.55),
        0 8px 24px -8px rgba(0, 0, 0, 0.35);
    --ds-modal-backdrop: rgba(2, 8, 32, 0.55);
    --ds-modal-border: 1px solid rgba(15, 22, 40, 0.06);
    --ds-modal-border-dark: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── A. z-index escalera por encima del topbar (z-index: 1000) ─── */
.blocker-location               { z-index: 2000 !important; }
.modal-backdrop                  { z-index: 2100 !important; }
.modal.fade,
.modal.show                      { z-index: 2110 !important; }
/* Picker de cuenta contable / centro de costo (.blocker-location) abierto desde
   DENTRO de un modal Bootstrap (ej. "Crear documento" en conciliación): debe
   quedar POR ENCIMA del modal, no detrás. */
.blocker-location.active         { z-index: 2400 !important; }
/* OJO: site.css usa z-index: -1 para `.accept-reject-content` cuando inactivo,
   y solo eleva a 10000 con `.show-content-modal`. Sólo elevamos en ese estado. */
.accept-reject-content.show-content-modal { z-index: 2200 !important; }
.ds-appearance-modal             { z-index: 2300 !important; }

/* ─── B. Backdrop unificado para `.blocker-location` (11 modals) ─── */
.blocker-location {
    /* Forzar fullscreen viewport: el `.blocker-location` base de site.css solo
       agrega `top:0; left:0` al activarse, lo que falla si algún ancestor
       (page-wrapper con backdrop-filter, body con bg fixed, etc) crea un
       contening block. Usar `inset: 0` + viewport units lo blinda. */
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    background: var(--ds-modal-backdrop);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s ease, backdrop-filter 0.2s ease;
}

/* Accept/reject: el original deja `padding: 20px 0; background: white` en el
   panel interior con `height: 0`, lo que pinta un rectángulo blanco fantasma.
   Para garantizar ocultación absoluta sin importar stacking context, forzamos
   `visibility: hidden` en el padre. Los hijos lo heredan y desaparecen
   completamente hasta que el JS añada `.show-content-modal`. */
.accept-reject-content {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    visibility: hidden;
    opacity: 0;
}

.accept-reject-content.show-content-modal {
    visibility: visible;
    opacity: 1;
}

/* Base: solo transitions. Estilos visuales solo cuando el blocker está activo. */
.blocker-location .modal-location,
.blocker-location .gom-modal {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.blocker-location.active .modal-location,
.blocker-location.active .gom-modal {
    background: var(--ds-modal-bg);
    border: var(--ds-modal-border);
    border-radius: var(--ds-modal-radius);
    box-shadow: var(--ds-modal-shadow);
}

.blocker-location.active .modal-location h3,
.blocker-location.active .modal-location h4,
.blocker-location.active .gom-modal h3,
.blocker-location.active .gom-modal h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: #0a0f1f;
}

/* ─── C. Accept/Reject modal — backdrop SOLO cuando .show-content-modal está
   presente (sino el bloque queda visible cubriendo el shell al cargar). ─── */
.accept-reject-content {
    /* background transparente por default — el modal está oculto (z-index: -1) */
    background: transparent;
    transition: background 0.2s ease, backdrop-filter 0.2s ease;
}

.accept-reject-content.show-content-modal {
    background: var(--ds-modal-backdrop) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Base: solo transitions. NO aplicar background/padding/border/shadow aquí
   porque el original es `height: 0px` y los estilos lo harían visible. */
.accept-reject-content .accept-content-modal {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease,
                height 0.25s ease;
}

/* Estilos visuales SOLO cuando el JS activa `.show-accept-modal`. */
.accept-reject-content .accept-content-modal.show-accept-modal {
    background: var(--ds-modal-bg);
    border: var(--ds-modal-border);
    border-radius: var(--ds-modal-radius);
    box-shadow: var(--ds-modal-shadow);
    padding: var(--ds-modal-padding);
}

.accept-reject-content .text-content h1,
.accept-reject-content .text-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    color: #0a0f1f;
}

.accept-reject-content .accept-btn,
.accept-reject-content .reject-btn {
    border-radius: 999px;
    padding: 9px 18px;
    transition: filter 0.15s, box-shadow 0.2s, transform 0.12s;
}

/* ─── D. Bootstrap modals (modalPrinter, session-expired, etc) ─── */
/* Solo cuando el modal está mostrado (Bootstrap añade `.show`). */
.modal.show .modal-content {
    background: var(--ds-modal-bg);
    border: var(--ds-modal-border);
    border-radius: var(--ds-modal-radius);
    box-shadow: var(--ds-modal-shadow);
}

.modal-backdrop.show {
    background: var(--ds-modal-backdrop) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 1 !important;
}

.modal-header,
.modal-footer {
    border-color: rgba(15, 23, 42, 0.06);
}

.modal-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: #0a0f1f;
}

/* ─── E. Panel lateral de logs auditoría ─── */
#cnt_lgs_adt_id .logs {
    background: var(--ds-modal-bg);
    border: var(--ds-modal-border);
    border-right: 0;
    border-radius: var(--ds-modal-radius) 0 0 var(--ds-modal-radius);
    box-shadow: var(--ds-modal-shadow);
}

/* ─── F. Dark mode ─── */
body.mod-skin-dark .blocker-location.active .modal-location,
body.mod-skin-dark .blocker-location.active .gom-modal,
body.mod-skin-dark .accept-reject-content .accept-content-modal.show-accept-modal,
body.mod-skin-dark .modal.show .modal-content,
body.mod-skin-dark #cnt_lgs_adt_id .logs {
    background: var(--ds-modal-bg-dark);
    border: var(--ds-modal-border-dark);
    box-shadow: var(--ds-modal-shadow-dark);
    color: #e2e8f0;
}

body.mod-skin-dark .blocker-location.active .modal-location h3,
body.mod-skin-dark .blocker-location.active .modal-location h4,
body.mod-skin-dark .blocker-location.active .gom-modal h3,
body.mod-skin-dark .blocker-location.active .gom-modal h4,
body.mod-skin-dark .accept-reject-content .text-content h1,
body.mod-skin-dark .accept-reject-content .text-content h2,
body.mod-skin-dark .modal-title {
    color: #f1f5f9;
}

body.mod-skin-dark .modal-header,
body.mod-skin-dark .modal-footer {
    border-color: rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   Modal "Sesión cerrada en otra ventana" (#session-closed-modal)
   ═══════════════════════════════════════════════════════════════════════ */
.ds-session-modal {
    position: fixed;
    inset: 0;
    z-index: 2400;                              /* sobre TODOS los modals */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ds-session-modal[hidden] { display: none; }

.ds-session-modal--open {
    opacity: 1;
    pointer-events: all;
}

.ds-session-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 32, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ds-session-modal__panel {
    position: relative;
    width: min(440px, calc(100% - 32px));
    background: #ffffff;
    border: 1px solid rgba(15, 22, 40, 0.06);
    border-radius: 24px;
    padding: 32px 28px 28px;
    box-shadow:
        0 30px 80px -20px rgba(2, 8, 32, 0.45),
        0 12px 32px -8px rgba(2, 8, 32, 0.25);
    text-align: center;
    transform: scale(0.92) translateY(16px);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ds-session-modal--open .ds-session-modal__panel {
    transform: scale(1) translateY(0);
}

.ds-session-modal__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ff5147 0%, #d93b30 100%);
    color: #ffffff;
    font-size: 1.6rem;
    box-shadow: 0 8px 22px -6px rgba(220, 38, 38, 0.45);
}

.ds-session-modal__panel h3 {
    margin: 0 0 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #0a0f1f;
}

.ds-session-modal__panel p {
    margin: 0 0 22px;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.5;
}

.ds-session-modal__panel .ds-btn--primary {
    min-width: 180px;
    justify-content: center;
}

/* Dark mode */
body.mod-skin-dark .ds-session-modal__panel {
    background: #0f1628;
    border-color: rgba(255, 255, 255, 0.08);
}

body.mod-skin-dark .ds-session-modal__panel h3 { color: #f1f5f9; }
body.mod-skin-dark .ds-session-modal__panel p { color: #94a3b8; }

/* ── profile-management module ─────────────────────────────────────────── */

.container-elements-profile .content-element {
    margin-top: 8px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 6px;
    background: #fff;
}

.container-elements-profile .content-element .element {
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 2px;
    user-select: none;
    transition: background-color 120ms ease;
    font-size: 0.9rem;
}

.container-elements-profile .content-element .element:hover {
    background-color: rgba(33, 150, 243, 0.06);
}

.container-elements-profile .content-element .element-active {
    background-color: rgba(33, 150, 243, 0.15);
    color: #0d47a1;
    font-weight: 600;
}

.container-elements-profile .element-permission {
    display: flex;
    align-items: center;
    gap: 6px;
}

.container-elements-profile .element-permission input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.select-all-permission {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    margin: 0;
}

.select-all-permission input[type="checkbox"] {
    margin: 0;
}

.content-button-record {
    padding: 8px 16px;
    gap: 8px;
}

body.mod-skin-dark .container-elements-profile .content-element {
    background: #16213a;
    border-color: rgba(255, 255, 255, 0.08);
}

body.mod-skin-dark .container-elements-profile .content-element .element-active {
    background-color: rgba(33, 150, 243, 0.25);
    color: #90caf9;
}

/* ── SharedDynamicModal ────────────────────────────────────────────── */
/* Modal compartido inyectado en <body>. Tiene su PROPIO overlay con
   `position: fixed; inset: 0` y un z-index alto (2200) que escapa de
   cualquier stacking context del shell. NO usa `.modal-backdrop` de
   Bootstrap → puede convivir con modales Bootstrap globales sin
   pisarse. Ver `shared/components/dynamicModal/dynamic-modal.ts`. */
.ds-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ds-modal[hidden] { display: none; }

.ds-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .48);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.ds-modal__panel {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    min-height: 70vh;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, .35);
    overflow: hidden;
}

/* El variant `--full` define su propia altura (vh-32px) y debe ignorar
   el min-height del panel base. */
.ds-modal__panel--full { min-height: 0; }

.ds-modal__panel--sm   { width: min(420px,  calc(100vw - 32px)); }
.ds-modal__panel--md   { width: min(640px,  calc(100vw - 32px)); }
.ds-modal__panel--lg   { width: min(880px,  calc(100vw - 32px)); }
.ds-modal__panel--xl   { width: min(1140px, calc(100vw - 32px)); }
.ds-modal__panel--full { width: calc(100vw - 32px); height: calc(100vh - 32px); }

.ds-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eef0f4;
    gap: 12px;
}
.ds-modal__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-modal__title  { margin: 0; font-size: 1.05rem; font-weight: 600; color: #0f172a; }
.ds-modal__subtitle { color: #6c757d; font-size: .82rem; }

.ds-modal__close {
    background: transparent;
    border: 0;
    font-size: 1.05rem;
    color: #475569;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    flex: 0 0 auto;
}
.ds-modal__close:hover { background: #f1f5f9; color: #0f172a; }

.ds-modal__body {
    padding: 16px 18px;
    overflow: auto;
    flex: 1 1 auto;
}

body.mod-skin-dark .ds-modal__panel {
    background: #0f1628;
    border-color: rgba(255, 255, 255, .08);
    color: #e2e8f0;
}
body.mod-skin-dark .ds-modal__header  { border-bottom-color: rgba(255, 255, 255, .08); }
body.mod-skin-dark .ds-modal__title   { color: #f1f5f9; }
body.mod-skin-dark .ds-modal__subtitle{ color: #94a3b8; }
body.mod-skin-dark .ds-modal__close   { color: #cbd5e1; }
body.mod-skin-dark .ds-modal__close:hover { background: rgba(255, 255, 255, .06); color: #f1f5f9; }

/* ── shortcut-menu (acciones rápidas, esquina inferior derecha) ──────── */
/* Réplica del look del header (#burgerMenu): círculo con gradiente azul
   + shadows con tinte azul + icono blanco. Override de los estilos
   legacy de app.bundle.css mediante mayor especificidad. El menú
   despliega 3 .menu-item — también unificados al mismo look. */
.shortcut-menu label.menu-open-button,
.shortcut-menu .menu-item.btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #2b85ff 0%, #1361d8 100%) !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 1px 2px rgba(2, 8, 32, 0.30),
        0 8px 22px -6px rgba(26, 115, 232, 0.55) !important;
    /* Transición común: incluye `transform` (controlado por el legacy +
       overrides nuestros), `width/height` (para el shrink del cerrar),
       `background/box-shadow/filter` (hover/checked state). El cubic-
       bezier es el mismo del header (.ds-auth-submit). */
    transition:
        transform 240ms cubic-bezier(.2, .7, .2, 1),
        width 240ms cubic-bezier(.2, .7, .2, 1),
        height 240ms cubic-bezier(.2, .7, .2, 1),
        background 220ms ease,
        box-shadow 220ms ease,
        filter 200ms ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Hover: NO modificamos `transform` porque el legacy lo usa para
   posicionar (translate3d) cada item. Si lo sobrescribimos, los items
   colapsan a su posición base. En su lugar, usamos box-shadow más
   pronunciado + filter brightness — efecto visible sin chocar con el
   translate de apertura. */
.shortcut-menu label.menu-open-button:hover,
.shortcut-menu .menu-item.btn:hover {
    filter: brightness(1.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.24) inset,
        0 2px 4px rgba(2, 8, 32, 0.32),
        0 14px 32px -8px rgba(26, 115, 232, 0.75) !important;
}

.shortcut-menu label.menu-open-button:active,
.shortcut-menu .menu-item.btn:active {
    filter: brightness(0.95);
}

/* Iconos blancos del shortcut-menu (sustituye al icono CSS-only legacy
   `.app-shortcut-icon`). */
.shortcut-menu .menu-open-icon,
.shortcut-menu .menu-item.btn i {
    color: #ffffff !important;
    font-size: 1.05rem;
    line-height: 1;
    pointer-events: none;
    transition: transform 240ms cubic-bezier(.2, .7, .2, 1),
                font-size 240ms cubic-bezier(.2, .7, .2, 1);
}

/* Toggle del icono cuando el menú está abierto: muestra fa-times en lugar
   de fa-bolt. Default state: solo .menu-open-icon--default visible. */
.shortcut-menu .menu-open-icon--active { display: none !important; }
.shortcut-menu .menu-open:checked + label.menu-open-button .menu-open-icon--default { display: none !important; }
.shortcut-menu .menu-open:checked + label.menu-open-button .menu-open-icon--active  { display: inline-block !important; }

/* ── Estado abierto del botón principal: shrink + rojo ──
   Una vez desplegado, el botón principal pasa a ser "cerrar". Se hace
   más pequeño que las otras opciones (36px vs 48px) y cambia a rojo
   gradiente con shadow tintada. La transición smooth viene del bloque
   común arriba. Neutralizamos la rotación legacy 45° (ya no aplica
   porque el icono es una X explícita, no un patrón rotado). */
.shortcut-menu .menu-open:checked + label.menu-open-button {
    width: 36px !important;
    height: 36px !important;
    background: linear-gradient(180deg, #ff4b4b 0%, #c81e1e 100%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 1px 2px rgba(2, 8, 32, 0.30),
        0 8px 22px -6px rgba(220, 38, 38, 0.55) !important;
    transform: none !important;
}

.shortcut-menu .menu-open:checked + label.menu-open-button:hover {
    filter: brightness(1.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.24) inset,
        0 2px 4px rgba(2, 8, 32, 0.32),
        0 14px 32px -8px rgba(220, 38, 38, 0.75) !important;
}

/* Icono X un poco más pequeño para combinar con el shrink del botón. */
.shortcut-menu .menu-open:checked + label.menu-open-button .menu-open-icon--active {
    font-size: 0.92rem;
}

/* ── Más espacio entre las opciones desplegadas ──
   Legacy las separa 48px (translate3d 0,-48px,0 entre items). Lo
   subimos a 64px para que respiren. `:nth-child(3)` es el primer item,
   `(4)` el segundo, `(5)` el tercero. Usamos `!important` para vencer
   la regla legacy de app.bundle.css. */
.shortcut-menu .menu-open:checked ~ .menu-item:nth-child(3) {
    transform: translate3d(0, -64px, 0) !important;
}
.shortcut-menu .menu-open:checked ~ .menu-item:nth-child(4) {
    transform: translate3d(0, -128px, 0) !important;
}
.shortcut-menu .menu-open:checked ~ .menu-item:nth-child(5) {
    transform: translate3d(0, -192px, 0) !important;
}

/* Apagar el waves-ripple legacy (consistente con el header). */
.shortcut-menu .menu-item.btn .waves-ripple,
.shortcut-menu label.menu-open-button .waves-ripple {
    display: none !important;
}

/* ── Badge "auto" en endpoints auto-detectados ────────────────────── */
/* En el form de versión de opción, los endpoints que provienen del
   escaneo de un script subido llevan este badge junto a su label de
   uniqueKey. Solo informa — no cambia el behavior. */
.ds-version-auto-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.4;
    color: #1361d8;
    background: rgba(43, 133, 255, .12);
    border: 1px solid rgba(43, 133, 255, .25);
    border-radius: 999px;
    vertical-align: middle;
}

/* ── Tab 2 user-profile-templates: árbol moderno de accesos ──────────── */

.pfm-tree-toolbar {
    /* Permite wrap a multi-línea cuando el viewport es estrecho. Los items
       conservan sus márgenes individuales (`mr-*` del HTML). */
    flex-wrap: wrap;
    row-gap: 8px;
}
.pfm-tree-toolbar #pfm_tree_search {
    flex: 1 1 220px;
    min-width: 200px;
}
.pfm-tree-toolbar > .btn,
.pfm-tree-toolbar > button {
    white-space: nowrap;
    flex-shrink: 0;
}
.pfm-tree-stats {
    font-size: .82rem;
    color: #64748b;
    white-space: nowrap;
}
.pfm-tree {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pfm-tree__loading,
.pfm-tree__empty {
    padding: 24px;
    text-align: center;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 10px;
}
.pfm-tree__empty-icon {
    display: block;
    font-size: 2rem;
    color: #cbd5e1;
    margin-bottom: 12px;
}
.pfm-tree__empty p {
    margin: 0 0 4px 0;
    color: #475569;
    font-weight: 500;
}
.pfm-tree__empty small {
    display: block;
    color: #94a3b8;
}

/* ── Módulo ────────────────────────────────────────────────────────── */
.pfm-tree__module {
    background: #ffffff;
    border: 1px solid rgba(15, 22, 40, 0.08);
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(15, 22, 40, 0.03);
    overflow: hidden;
}
.pfm-tree__module-header {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    transition: background 150ms ease;
}
.pfm-tree__module-header:hover {
    background: rgba(43, 133, 255, 0.04);
}
.pfm-tree__chevron {
    transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
    color: #94a3b8;
    font-size: .8rem;
}
.pfm-tree__module--open > .pfm-tree__module-header .pfm-tree__chevron,
.pfm-tree__section--open > .pfm-tree__section-header .pfm-tree__chevron {
    transform: rotate(90deg);
}
.pfm-tree__module-icon { color: #2b85ff; font-size: 1rem; }
.pfm-tree__module-name { font-weight: 600; color: #0f172a; flex: 1 1 auto; }
.pfm-tree__badge {
    background: rgba(43, 133, 255, 0.10);
    color: #1361d8;
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
}
.pfm-tree__module-body,
.pfm-tree__section-body {
    display: none;
    padding: 4px 16px 12px 16px;
}
.pfm-tree__module--open > .pfm-tree__module-body,
.pfm-tree__section--open > .pfm-tree__section-body {
    display: block;
}

/* ── Sección ──────────────────────────────────────────────────────── */
.pfm-tree__section {
    border-top: 1px solid rgba(15, 22, 40, 0.06);
    margin-top: 4px;
}
.pfm-tree__section:first-child { border-top: 0; }
.pfm-tree__section-header {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    color: #334155;
}
.pfm-tree__section-icon { color: #64748b; font-size: .9rem; }
.pfm-tree__section-name { font-weight: 600; flex: 1 1 auto; font-size: .9rem; }
.pfm-tree__section-body { padding-left: 18px; padding-bottom: 8px; }

/* ── Opción ──────────────────────────────────────────────────────── */
.pfm-tree__option {
    padding: 8px 0;
    border-top: 1px solid rgba(15, 22, 40, 0.04);
}
.pfm-tree__option:first-child { border-top: 0; }
.pfm-tree__option-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
}
.pfm-tree__option-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.pfm-tree__option-icon { color: #64748b; font-size: 0.9rem; width: 1em; text-align: center; }
.pfm-tree__option--included .pfm-tree__option-icon { color: #1361d8; }
body.mod-skin-dark .pfm-tree__option-icon { color: #94a3b8; }
body.mod-skin-dark .pfm-tree__option--included .pfm-tree__option-icon { color: #60a5fa; }
.pfm-tree__option-name { font-weight: 500; color: #0f172a; }
.pfm-tree__option-version {
    font-size: .7rem;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 1px 8px;
    border-radius: 999px;
}
.pfm-tree__option--included .pfm-tree__option-name { color: #1361d8; }

.pfm-tree__endpoints {
    margin-top: 8px;
    margin-left: 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pfm-tree__endpoint-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid rgba(15, 22, 40, 0.04);
    border-radius: 8px;
    transition: background 150ms ease;
}
.pfm-tree__endpoint-row:hover { background: #eef2ff; }
.pfm-tree__endpoint-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.pfm-tree__endpoint-toggle input[type="checkbox"] { cursor: pointer; }
.pfm-tree__endpoint-method {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e2e8f0;
    color: #334155;
    min-width: 50px;
    text-align: center;
}
.pfm-tree__endpoint-method--get    { background: #dbeafe; color: #1e40af; }
.pfm-tree__endpoint-method--post   { background: #dcfce7; color: #15803d; }
.pfm-tree__endpoint-method--put    { background: #fef3c7; color: #a16207; }
.pfm-tree__endpoint-method--patch  { background: #fde68a; color: #92400e; }
.pfm-tree__endpoint-method--delete { background: #fee2e2; color: #b91c1c; }
.pfm-tree__endpoint-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
}
.pfm-tree__endpoint-title {
    color: #0f172a;
    font-weight: 600;
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pfm-tree__endpoint-desc {
    color: #64748b;
    font-size: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pfm-tree__endpoint-authz {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0;
    font-size: .78rem;
    color: #475569;
    white-space: nowrap;
}
.pfm-tree__endpoint-authz--disabled {
    opacity: .5;
    cursor: not-allowed;
}
/* Requerido a nivel de sistema — siempre checked, no editable por el admin */
.pfm-tree__endpoint-authz--locked {
    cursor: default;
    color: #0f766e;
    font-weight: 500;
}
.pfm-tree__endpoint-authz--locked input[type="checkbox"] {
    accent-color: #0f766e;
    cursor: default;
}

/* Dark mode */
body.mod-skin-dark .pfm-tree__module       { background: #0f1628; border-color: rgba(255,255,255,.08); }
body.mod-skin-dark .pfm-tree__module-name  { color: #f1f5f9; }
body.mod-skin-dark .pfm-tree__module-header:hover { background: rgba(43, 133, 255, 0.10); }
body.mod-skin-dark .pfm-tree__section      { border-top-color: rgba(255,255,255,.06); }
body.mod-skin-dark .pfm-tree__option       { border-top-color: rgba(255,255,255,.04); }
body.mod-skin-dark .pfm-tree__endpoint-row { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.04); }
body.mod-skin-dark .pfm-tree__endpoint-row:hover { background: rgba(43, 133, 255, 0.12); }
body.mod-skin-dark .pfm-tree__endpoint-title { color: #f1f5f9; }
body.mod-skin-dark .pfm-tree__endpoint-desc  { color: #94a3b8; }
body.mod-skin-dark .pfm-tree__option-version { background: rgba(255,255,255,.06); color: #94a3b8; }

/* Indicador "cambios sin guardar" en el botón Guardar del Tab 2. */
.pfm-tree-save--dirty {
    position: relative;
}
.pfm-tree-save--dirty::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    margin-left: 8px;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
    vertical-align: middle;
    animation: pfm-dirty-pulse 1.6s ease-in-out infinite;
}
@keyframes pfm-dirty-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22); }
    50%      { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.30); }
}

/* ── Tab 3 Perfiles de la Compañía: tabla de roles asignables ──────── */
.pfm-roles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pfm-roles__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid rgba(15, 22, 40, 0.06);
    border-radius: 12px;
    cursor: pointer;
    margin: 0;
    transition: background 150ms ease, border-color 150ms ease;
}
.pfm-roles__row:hover { background: #f8fafc; border-color: rgba(15, 22, 40, 0.10); }
.pfm-roles__row--assigned {
    background: rgba(43, 133, 255, 0.06);
    border-color: rgba(43, 133, 255, 0.30);
}
.pfm-roles__row--assigned:hover { background: rgba(43, 133, 255, 0.10); }
.pfm-roles__row--inactive { opacity: .55; cursor: not-allowed; }
.pfm-roles__row > input[type="checkbox"] { margin-top: 4px; cursor: pointer; flex-shrink: 0; }
.pfm-roles__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.pfm-roles__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pfm-roles__name { color: #0f172a; font-weight: 600; font-size: .92rem; }
.pfm-roles__uniquekey {
    font-family: ui-monospace, Menlo, monospace;
    font-size: .72rem;
    letter-spacing: .04em;
    color: #1361d8;
    background: rgba(43, 133, 255, .12);
    border: 1px solid rgba(43, 133, 255, .25);
    border-radius: 999px;
    padding: 2px 8px;
}
.pfm-roles__badge {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 6px;
    border-radius: 6px;
}
.pfm-roles__badge--inactive { background: #fee2e2; color: #b91c1c; }
.pfm-roles__desc {
    color: #64748b;
    font-size: .82rem;
    line-height: 1.4;
}

/* Dark mode pfm-roles */
body.mod-skin-dark .pfm-roles__row {
    background: #0f1628;
    border-color: rgba(255, 255, 255, 0.08);
}
body.mod-skin-dark .pfm-roles__row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}
body.mod-skin-dark .pfm-roles__row--assigned {
    background: rgba(43, 133, 255, 0.14);
    border-color: rgba(43, 133, 255, 0.40);
}
body.mod-skin-dark .pfm-roles__row--assigned:hover {
    background: rgba(43, 133, 255, 0.20);
}
body.mod-skin-dark .pfm-roles__name { color: #f1f5f9; }
body.mod-skin-dark .pfm-roles__uniquekey {
    background: rgba(43, 133, 255, .18);
    border-color: rgba(43, 133, 255, .35);
    color: #60a5fa;
}
body.mod-skin-dark .pfm-roles__desc { color: #94a3b8; }

/* ── Tab 4 Perfiles de la Compañía: cards de estadísticas ──────────────── */
.pfm-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.pfm-stats__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 20px 22px;
    background: #ffffff;
    border: 1px solid rgba(15, 22, 40, 0.06);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(15, 22, 40, 0.03);
    position: relative;
    overflow: hidden;
}
.pfm-stats__card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
}
.pfm-stats__icon {
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.2rem;
    margin-bottom: 6px;
}
.pfm-stats__value {
    font-size: 1.9rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.pfm-stats__label {
    font-size: 0.82rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.pfm-stats__card--blue::before   { background: #2b85ff; }
.pfm-stats__card--blue .pfm-stats__icon   { color: #1361d8; background: rgba(43, 133, 255, 0.12); }
.pfm-stats__card--green::before  { background: #22c55e; }
.pfm-stats__card--green .pfm-stats__icon  { color: #15803d; background: rgba(34, 197, 94, 0.12); }
.pfm-stats__card--purple::before { background: #a855f7; }
.pfm-stats__card--purple .pfm-stats__icon { color: #7e22ce; background: rgba(168, 85, 247, 0.14); }
.pfm-stats__card--orange::before { background: #f97316; }
.pfm-stats__card--orange .pfm-stats__icon { color: #c2410c; background: rgba(249, 115, 22, 0.14); }

body.mod-skin-dark .pfm-stats__card {
    background: #0f1628;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
body.mod-skin-dark .pfm-stats__value { color: #f1f5f9; }
body.mod-skin-dark .pfm-stats__label { color: #94a3b8; }
body.mod-skin-dark .pfm-stats__card--blue .pfm-stats__icon   { color: #60a5fa; background: rgba(43, 133, 255, 0.18); }
body.mod-skin-dark .pfm-stats__card--green .pfm-stats__icon  { color: #4ade80; background: rgba(34, 197, 94, 0.18); }
body.mod-skin-dark .pfm-stats__card--purple .pfm-stats__icon { color: #c084fc; background: rgba(168, 85, 247, 0.20); }
body.mod-skin-dark .pfm-stats__card--orange .pfm-stats__icon { color: #fb923c; background: rgba(249, 115, 22, 0.20); }

/* ── Gestión de Usuarios — avatar circular con upload ─────────────────── */
.usr-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 8px 24px -8px rgba(2, 8, 32, 0.18), 0 0 0 1px rgba(15, 22, 40, 0.06);
    cursor: pointer;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.usr-avatar:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -10px rgba(2, 8, 32, 0.25), 0 0 0 1px rgba(43, 133, 255, 0.30);
}
.usr-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}
.usr-avatar__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 3rem;
}
.usr-avatar--has-image .usr-avatar__placeholder { display: none; }
.usr-avatar__edit {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2b85ff 0%, #1361d8 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px -4px rgba(26, 115, 232, 0.55);
    border: 2px solid #ffffff;
}
body.mod-skin-dark .usr-avatar {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-color: #0f1628;
}
body.mod-skin-dark .usr-avatar__placeholder { color: #475569; }
body.mod-skin-dark .usr-avatar__edit { border-color: #0f1628; }

/* Avatar mini para la tabla del modal de búsqueda */
.usr-avatar-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    object-fit: cover;
    overflow: hidden;
    font-weight: 600;
    font-size: 0.95rem;
}
.usr-avatar-mini--initial {
    background: linear-gradient(180deg, #2b85ff 0%, #1361d8 100%);
    color: #ffffff;
}
body.mod-skin-dark .usr-avatar-mini { background: #1e293b; color: #cbd5e1; }

/* Ajustes — cards de configuración del usuario */
.usr-settings-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid rgba(15, 22, 40, 0.06);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(15, 22, 40, 0.03);
}
.usr-settings-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249, 115, 22, 0.12);
    color: #c2410c;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.usr-settings-card__body { flex: 1 1 auto; min-width: 0; }
.usr-settings-card__body h4 { margin: 0 0 4px 0; font-size: 1rem; color: #0f172a; font-weight: 600; }
.usr-settings-card__body p { margin: 0; color: #64748b; font-size: 0.85rem; line-height: 1.4; }
.usr-settings-card__action { flex-shrink: 0; }
body.mod-skin-dark .usr-settings-card { background: #0f1628; border-color: rgba(255,255,255,.08); }
body.mod-skin-dark .usr-settings-card__icon { background: rgba(249, 115, 22, 0.18); color: #fb923c; }
body.mod-skin-dark .usr-settings-card__body h4 { color: #f1f5f9; }
body.mod-skin-dark .usr-settings-card__body p { color: #94a3b8; }

/* Sesiones activas */
.usr-sessions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.usr-session {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid rgba(15, 22, 40, 0.06);
    border-radius: 12px;
}
.usr-session__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(43, 133, 255, 0.10);
    color: #1361d8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.usr-session__info { flex: 1 1 auto; min-width: 0; }
.usr-session__device { font-weight: 600; color: #0f172a; font-size: 0.92rem; margin-bottom: 4px; }
.usr-session__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: #64748b;
    font-size: 0.78rem;
}
body.mod-skin-dark .usr-session { background: #0f1628; border-color: rgba(255,255,255,.08); }
body.mod-skin-dark .usr-session__icon { background: rgba(43, 133, 255, 0.18); color: #60a5fa; }
body.mod-skin-dark .usr-session__device { color: #f1f5f9; }
body.mod-skin-dark .usr-session__meta { color: #94a3b8; }

/* ── Tab activo con el look del #burgerMenu (gradient azul + texto blanco) ─
   Aplica al `.nav-tabs-clean .nav-link.active` en cualquier módulo que use
   esa estructura. `!important` en los hover/focus para vencer la regla
   con color púrpura (#886ab5) que viene del `app.bundle.css` legacy. */
.nav-tabs-clean .nav-item .nav-link.active,
.nav-tabs-clean .nav-item .nav-link.active:hover,
.nav-tabs-clean .nav-item .nav-link.active:focus {
    background: linear-gradient(180deg, #2b85ff 0%, #1361d8 100%) !important;
    color: #ffffff !important;
    border-bottom-color: transparent !important;
    border-radius: 10px 10px 0 0;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 4px 14px -4px rgba(26, 115, 232, 0.45);
}
.nav-tabs-clean .nav-item .nav-link.active i,
.nav-tabs-clean .nav-item .nav-link.active:hover i,
.nav-tabs-clean .nav-item .nav-link.active:focus i {
    color: #ffffff !important;
}

/* Dark mode: misma estética azul para que el tab activo destaque sobre el
   fondo oscuro de la card. */
body.mod-skin-dark .nav-tabs-clean .nav-item .nav-link.active,
body.mod-skin-dark .nav-tabs-clean .nav-item .nav-link.active:hover,
body.mod-skin-dark .nav-tabs-clean .nav-item .nav-link.active:focus {
    background: linear-gradient(180deg, #2b85ff 0%, #1361d8 100%) !important;
    color: #ffffff !important;
    border-bottom-color: transparent !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 4px 16px -4px rgba(26, 115, 232, 0.60);
}
body.mod-skin-dark .nav-tabs-clean .nav-item .nav-link.active i,
body.mod-skin-dark .nav-tabs-clean .nav-item .nav-link.active:hover i,
body.mod-skin-dark .nav-tabs-clean .nav-item .nav-link.active:focus i {
    color: #ffffff !important;
}

/* ── Tab "Gestión del Perfil" deshabilitado mientras no hay perfil activo ── */
.nav-tabs-clean .nav-item .nav-link.disabled,
.nav-tabs-clean .nav-item .nav-link[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* ── Presupuesto: barra de tabs de la sección de distribución ──────────────
   El `.nav-tabs-clean` base tiene `height:45px` fija y el override del tab
   activo le agrega redondeo + sombra, lo que hacía que el tab se viera como un
   botón flotante "saliéndose" del panel. Aquí se contiene: altura automática y
   el tab activo asentado sobre la línea inferior del nav (look de pestaña). */
#bgt_distribution_section .nav-tabs-clean {
    height: auto;
    align-items: flex-end;
}
#bgt_distribution_section .nav-tabs-clean .nav-item .nav-link {
    height: 42px;
}
#bgt_distribution_section .nav-tabs-clean .nav-item .nav-link.active {
    margin-bottom: -1px;       /* se asienta sobre el borde inferior del nav */
    box-shadow: none !important;
    border-radius: 8px 8px 0 0;
}

/* ── Dark mode: nav-tabs-clean ─────────────────────────────────────────── */
body.mod-skin-dark .nav-tabs-clean {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.mod-skin-dark .nav-tabs-clean .nav-item .nav-link {
    color: #94a3b8;
    background: transparent;
}
body.mod-skin-dark .nav-tabs-clean .nav-item .nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
}
body.mod-skin-dark .nav-tabs-clean .nav-item .nav-link.active {
    color: #60a5fa;
    border-bottom-color: #2b85ff;
    background: transparent;
}
body.mod-skin-dark .nav-tabs-clean .nav-item .nav-link.disabled,
body.mod-skin-dark .nav-tabs-clean .nav-item .nav-link[aria-disabled="true"] {
    color: #475569;
    background: transparent;
}

/* ── Dark mode: st-section-header (encabezado de secciones en formularios) ── */
body.mod-skin-dark .st-section-header {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: #2b85ff;
    color: #e2e8f0;
}
body.mod-skin-dark .st-section-header i {
    color: #60a5fa;
}

/* ── Sidebar info-card: apellido del usuario ───────────────────────────── */
.info-card .info-card-text > span#userCoopLastName {
    color: #000000;
    font-weight: 500;
    text-shadow: none;
    opacity: 1;
}

/* ── Modal de inactividad ("¿Sigues ahí?") ─────────────────────────────────
   Backdrop full-screen con blur que bloquea toda interacción. Card centrada
   con countdown circular animado. Aparece tras 10 min sin actividad y, si
   el user no presiona "Estoy aquí" en 60 s, dispara logout forzado. */
.ds-inactivity-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.55) 0%, rgba(2, 6, 23, 0.78) 100%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-inactivity-modal[data-visible="true"] {
    opacity: 1;
    pointer-events: auto;
}
.ds-inactivity-modal[hidden] {
    display: none;
}

.ds-inactivity-card {
    width: 100%;
    max-width: 26rem;
    padding: 2.5rem 2rem 2rem;
    background: #ffffff;
    border-radius: 20px;
    box-shadow:
        0 24px 60px -12px rgba(2, 6, 23, 0.45),
        0 0 0 1px rgba(15, 23, 42, 0.04);
    text-align: center;
    transform: translateY(8px) scale(0.985);
    opacity: 0;
    transition:
        transform 260ms cubic-bezier(0.34, 1.6, 0.64, 1),
        opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-inactivity-modal[data-visible="true"] .ds-inactivity-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.ds-inactivity-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    color: #ffffff;
    font-size: 1.75rem;
    box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.55);
}

.ds-inactivity-title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.ds-inactivity-desc {
    margin: 0 0 1.75rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #475569;
}

/* Countdown circular — el ring se vacía conforme avanza el contador. */
.ds-inactivity-countdown {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 1.75rem;
}
.ds-inactivity-countdown__ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.ds-inactivity-countdown__ring-track {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 8;
}
.ds-inactivity-countdown__ring-progress {
    fill: none;
    stroke: #2563eb;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 980ms linear, stroke 220ms ease;
}
.ds-inactivity-countdown[data-urgent="true"] .ds-inactivity-countdown__ring-progress {
    stroke: #dc2626;
}
.ds-inactivity-countdown__label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.ds-inactivity-countdown__value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    transition: color 220ms ease;
}
.ds-inactivity-countdown[data-urgent="true"] .ds-inactivity-countdown__value {
    color: #dc2626;
    animation: ds-inactivity-pulse 720ms ease-in-out infinite;
}
.ds-inactivity-countdown__unit {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: lowercase;
    letter-spacing: 0.04em;
}

@keyframes ds-inactivity-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.ds-inactivity-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}
.ds-inactivity-btn {
    flex: 1;
    min-width: 0;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: transform 120ms ease, box-shadow 220ms ease, background 220ms ease;
    cursor: pointer;
}
.ds-inactivity-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.ds-inactivity-btn:active {
    transform: translateY(1px);
}
.ds-inactivity-btn--primary {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.6);
}
.ds-inactivity-btn--primary:hover {
    box-shadow: 0 10px 22px -6px rgba(37, 99, 235, 0.7);
    filter: brightness(1.04);
}
.ds-inactivity-btn--secondary {
    background: #f1f5f9;
    color: #334155;
    border-color: #e2e8f0;
}
.ds-inactivity-btn--secondary:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* Dark mode */
body.mod-skin-dark .ds-inactivity-card {
    background: #0f172a;
    box-shadow:
        0 24px 60px -12px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}
body.mod-skin-dark .ds-inactivity-title { color: #f1f5f9; }
body.mod-skin-dark .ds-inactivity-desc { color: #94a3b8; }
body.mod-skin-dark .ds-inactivity-countdown__ring-track { stroke: #1e293b; }
body.mod-skin-dark .ds-inactivity-countdown__value { color: #f1f5f9; }
body.mod-skin-dark .ds-inactivity-countdown__unit { color: #64748b; }
body.mod-skin-dark .ds-inactivity-btn--secondary {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}
body.mod-skin-dark .ds-inactivity-btn--secondary:hover {
    background: #334155;
    color: #f1f5f9;
}

@media (max-width: 480px) {
    .ds-inactivity-card { padding: 2rem 1.25rem 1.5rem; }
    .ds-inactivity-title { font-size: 1.25rem; }
    .ds-inactivity-actions { flex-direction: column-reverse; }
    .ds-inactivity-btn { flex: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-inactivity-modal,
    .ds-inactivity-card,
    .ds-inactivity-countdown__value,
    .ds-inactivity-countdown__ring-progress { transition: none; }
    .ds-inactivity-countdown[data-urgent="true"] .ds-inactivity-countdown__value { animation: none; }
}

/* ── Modal de Dev-Mode (Ctrl+Alt+Shift+D) ─────────────────────────────────
   Solo se monta cuando NODE_ENV=development. Lista todos los .hbs de
   www/core/ y permite cargar uno conservando sus <script> embebidos. */
.ds-devmode-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483601;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.6) 0%, rgba(2, 6, 23, 0.85) 100%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-devmode-modal[data-visible="true"] {
    opacity: 1;
    pointer-events: auto;
}
.ds-devmode-modal[hidden] { display: none; }

.ds-devmode-card {
    width: 100%;
    max-width: 44rem;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 18px;
    box-shadow:
        0 30px 70px -16px rgba(2, 6, 23, 0.55),
        0 0 0 1px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    transform: translateY(8px) scale(0.985);
    opacity: 0;
    transition:
        transform 220ms cubic-bezier(0.34, 1.6, 0.64, 1),
        opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-devmode-modal[data-visible="true"] .ds-devmode-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.ds-devmode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ds-devmode-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.ds-devmode-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #38bdf8;
    font-size: 1rem;
}
.ds-devmode-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.005em;
}
.ds-devmode-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ffffff;
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ds-devmode-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 1rem;
    transition: background 160ms ease, color 160ms ease;
}
.ds-devmode-close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}
.ds-devmode-close:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.ds-devmode-searchwrap {
    position: relative;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ds-devmode-search-icon {
    position: absolute;
    left: 1.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.875rem;
    pointer-events: none;
}
.ds-devmode-search {
    width: 100%;
    padding: 0.625rem 5rem 0.625rem 2.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.9375rem;
    color: #0f172a;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.ds-devmode-search::placeholder { color: #94a3b8; }
.ds-devmode-search:focus {
    outline: none;
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.ds-devmode-count {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.ds-devmode-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem 0.5rem 0.75rem;
}
.ds-devmode-status {
    padding: 1.5rem;
    text-align: center;
    color: #64748b;
    font-size: 0.875rem;
}
.ds-devmode-status--error { color: #b91c1c; }

.ds-devmode-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background 120ms ease, border-color 120ms ease;
}
.ds-devmode-row + .ds-devmode-row { margin-top: 2px; }
.ds-devmode-row:hover,
.ds-devmode-row--active {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.18);
}
.ds-devmode-row:focus-visible {
    outline: none;
    background: rgba(37, 99, 235, 0.12);
    border-color: #2563eb;
}
.ds-devmode-row__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    flex: 1;
}
.ds-devmode-row__name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ds-devmode-row__path {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ds-devmode-row__module {
    flex: none;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #1e40af;
    background: rgba(37, 99, 235, 0.1);
    border-radius: 999px;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ds-devmode-footer {
    padding: 0.625rem 1.5rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: #f8fafc;
}
.ds-devmode-hint {
    font-size: 0.6875rem;
    color: #64748b;
}
.ds-devmode-hint kbd {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    margin: 0 0.125rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: #334155;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;
    border-radius: 4px;
}

/* Dark mode */
body.mod-skin-dark .ds-devmode-card {
    background: #0f172a;
    box-shadow:
        0 30px 70px -16px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}
body.mod-skin-dark .ds-devmode-header { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.mod-skin-dark .ds-devmode-title { color: #f1f5f9; }
body.mod-skin-dark .ds-devmode-close { color: #94a3b8; }
body.mod-skin-dark .ds-devmode-close:hover { background: rgba(255, 255, 255, 0.06); color: #f1f5f9; }
body.mod-skin-dark .ds-devmode-searchwrap { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.mod-skin-dark .ds-devmode-search {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}
body.mod-skin-dark .ds-devmode-search:focus { background: #0f172a; border-color: #60a5fa; }
body.mod-skin-dark .ds-devmode-row { color: #e2e8f0; }
body.mod-skin-dark .ds-devmode-row__name { color: #f1f5f9; }
body.mod-skin-dark .ds-devmode-row__path { color: #94a3b8; }
body.mod-skin-dark .ds-devmode-row:hover,
body.mod-skin-dark .ds-devmode-row--active {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.28);
}
body.mod-skin-dark .ds-devmode-row__module {
    color: #93c5fd;
    background: rgba(96, 165, 250, 0.16);
}
body.mod-skin-dark .ds-devmode-footer {
    background: #020617;
    border-top-color: rgba(255, 255, 255, 0.06);
}
body.mod-skin-dark .ds-devmode-hint { color: #94a3b8; }
body.mod-skin-dark .ds-devmode-hint kbd {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

@media (max-width: 640px) {
    .ds-devmode-modal { padding: 0; }
    .ds-devmode-card {
        max-width: none;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-devmode-modal,
    .ds-devmode-card { transition: none; }
}

/* ── Badge "DEV" en la fila "Modo Dev" del account-menu ─────────────────── */
.ds-account-menu__row-meta--dev {
    padding: 0.0625rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ffffff;
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.25);
}

/* ── POS Connection Keys (admin shell) ──────────────────────────────────── */
.ds-pck-host {
    padding: 1.5rem;
}
.ds-pck-header { margin-bottom: 1.25rem; }
.ds-pck-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.25rem;
}
.ds-pck-subtitle {
    margin: 0;
    color: #64748b;
    font-size: 0.875rem;
    max-width: 720px;
}

.ds-pck-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 1fr) auto auto;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05);
}
.ds-pck-toolbar__field { display: flex; flex-direction: column; }
.ds-pck-toolbar__spacer { flex: 1; }

.ds-pck-tabs { margin-top: 0.5rem; }
.ds-pck-tab-content { padding-top: 1rem; }

.ds-pck-table-wrap {
    background: #ffffff;
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05);
}
.ds-pck-empty {
    margin: 1.5rem 0;
    text-align: center;
    color: #94a3b8;
}

.ds-pck-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
}

.ds-pck-badge {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.ds-pck-badge--green  { background: rgba(34, 197, 94, 0.14);  color: #15803d; }
.ds-pck-badge--yellow { background: rgba(234, 179, 8, 0.18);  color: #a16207; }
.ds-pck-badge--red    { background: rgba(220, 38, 38, 0.14);  color: #b91c1c; }
.ds-pck-badge--gray   { background: rgba(100, 116, 139, 0.14);color: #475569; }

.ds-pck-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
.ds-pck-detail-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05);
}
.ds-pck-detail-card h4 {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2563eb;
    margin: 0 0 0.75rem;
}
.ds-pck-detail-card dl {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.375rem 0.75rem;
    margin: 0;
    font-size: 0.875rem;
}
.ds-pck-detail-card dt { color: #64748b; font-weight: 500; }
.ds-pck-detail-card dd {
    margin: 0;
    color: #0f172a;
    word-break: break-word;
}
.ds-pck-detail-fp { font-size: 0.75em; }
.ds-pck-detail-ua { font-size: 0.75em; color: #64748b; }

.ds-pck-audit-filters {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}
.ds-pck-audit-filters > div { min-width: 200px; }

/* Modales del módulo (mismo lenguaje que el modal de inactividad / dev-mode). */
.ds-pck-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.55) 0%, rgba(2, 6, 23, 0.78) 100%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-pck-modal[data-visible="true"] { opacity: 1; pointer-events: auto; }
.ds-pck-modal[hidden] { display: none; }
.ds-pck-modal__card {
    width: 100%;
    max-width: 28rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px -12px rgba(2, 6, 23, 0.45);
    overflow: hidden;
    transform: translateY(8px) scale(0.985);
    opacity: 0;
    transition:
        transform 240ms cubic-bezier(0.34, 1.6, 0.64, 1),
        opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Modales "wide" para detalle y auditoría (tablas/grids necesitan espacio). */
.ds-pck-modal__card--wide { max-width: 64rem; }
/* Cuerpo scrolleable para contenidos largos (lista de logs). */
.ds-pck-modal__body--scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.ds-pck-modal[data-visible="true"] .ds-pck-modal__card {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.ds-pck-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ds-pck-modal__head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}
.ds-pck-modal__head--warn {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.ds-pck-modal__head--warn h3 { color: #92400e; }
.ds-pck-modal__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background 160ms ease;
}
.ds-pck-modal__close:hover { background: rgba(15, 23, 42, 0.06); color: #0f172a; }
.ds-pck-modal__body { padding: 1.25rem; }
.ds-pck-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: #f8fafc;
}
.ds-pck-modal__warn {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(234, 179, 8, 0.08);
    border-left: 3px solid #eab308;
    border-radius: 6px;
    color: #78350f;
    font-size: 0.875rem;
}
.ds-pck-reveal-row {
    display: flex;
    gap: 0.5rem;
}
.ds-pck-reveal-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    background: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #0f172a !important;
    letter-spacing: 0.02em;
}
.ds-pck-reveal-copied {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
}

/* Dark mode */
body.mod-skin-dark .ds-pck-title       { color: #f1f5f9; }
body.mod-skin-dark .ds-pck-subtitle    { color: #94a3b8; }
body.mod-skin-dark .ds-pck-toolbar,
body.mod-skin-dark .ds-pck-table-wrap,
body.mod-skin-dark .ds-pck-detail-card {
    background: #0f172a;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
body.mod-skin-dark .ds-pck-detail-card dd { color: #e2e8f0; }
body.mod-skin-dark .ds-pck-modal__card { background: #0f172a; }
body.mod-skin-dark .ds-pck-modal__head h3 { color: #f1f5f9; }
body.mod-skin-dark .ds-pck-modal__foot {
    background: #020617;
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* ── ECF Signer Sockets — tabs custom del panel ────────────────────────── */
.ds-ess-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 1rem;
}
.ds-ess-tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.625rem 1rem;
    font: inherit;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.ds-ess-tab:hover {
    color: #1e40af;
    background: rgba(37, 99, 235, 0.06);
}
.ds-ess-tab.is-active {
    color: #2563eb;
    border-bottom-color: #2b85ff;
}
.ds-ess-tab:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.ds-ess-panels { position: relative; }
.ds-ess-panel { display: none; }
.ds-ess-panel.is-active { display: block; }
body.mod-skin-dark .ds-ess-tabs { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.mod-skin-dark .ds-ess-tab { color: #94a3b8; }
body.mod-skin-dark .ds-ess-tab:hover { color: #93c5fd; background: rgba(96, 165, 250, 0.08); }
body.mod-skin-dark .ds-ess-tab.is-active { color: #60a5fa; border-bottom-color: #60a5fa; }

/* ── ECF Signer Sockets — específicos del panel WS ─────────────────────── */
.ds-ess-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.ds-ess-status-dot--online  { background: #16a34a; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18); }
.ds-ess-status-dot--offline { background: #94a3b8; }

.ds-ess-tab-content { margin-top: 1rem; }
.ds-ess-stats { min-height: 120px; }
.ds-ess-action-row { padding: 0.5rem 0; }
.ds-ess-btn-block {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
}

.ds-ess-console-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.ds-ess-console-autoscroll {
    margin-left: auto;
    font-size: 0.875rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.ds-ess-console {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #0f172a;
    color: #e2e8f0;
    max-height: 55vh;
    min-height: 220px;
    overflow-y: auto;
    padding: 12px;
    border-radius: 8px;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-all;
}
.ds-ess-console__line { padding: 1px 0; }
.ds-ess-console__line--warn  { color: #fbbf24; }
.ds-ess-console__line--error { color: #f87171; }
.ds-ess-console__line--debug { color: #94a3b8; }

/* ── Footer meta (vista activa · versión · red) ─────────────────────────── */
.ds-footer {
    justify-content: space-between;
    padding: 0 1rem;
    gap: 1rem;
}
.ds-footer__left,
.ds-footer__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.ds-footer__item {
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 32ch;
}
.ds-footer__version {
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}
.ds-footer__sep {
    opacity: 0.4;
    user-select: none;
}
.ds-footer__net {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: #64748b;
}
.ds-footer__net-dot {
    font-size: 0.5rem;
    line-height: 1;
}
.ds-footer[data-net="online"]  .ds-footer__net-dot { color: #22c55e; }
.ds-footer[data-net="offline"] .ds-footer__net-dot { color: #ef4444; }
.ds-footer[data-net="offline"] .ds-footer__net-label { color: #ef4444; font-weight: 600; }

@media (max-width: 768px) {
    .ds-footer { padding: 0 0.5rem; }
    .ds-footer__sep { display: none; }
    .ds-footer__item { max-width: 18ch; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Modal de Autorizador (delegación) — shared/security/authorizer-modal
   Inyectado por TS en <body>. z-index por encima de los overlays top-level
   existentes (2147483601). Oculto por defecto; visible con .ds-authz-open.
   ────────────────────────────────────────────────────────────────────────── */
.ds-authz-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147483602;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}
.ds-authz-backdrop.ds-authz-open {
    opacity: 1;
    visibility: visible;
}
.ds-authz-modal {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.18s ease;
}
.ds-authz-backdrop.ds-authz-open .ds-authz-modal {
    transform: translateY(0) scale(1);
}
.ds-authz-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 1.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
    border-bottom: 1px solid #eef2f7;
}
.ds-authz-header i { color: #2563eb; }
.ds-authz-body { padding: 1.1rem 1.25rem 0.5rem; }
.ds-authz-desc {
    margin: 0 0 0.85rem;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.45;
}
.ds-authz-key {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.85rem;
    word-break: break-all;
}
.ds-authz-key:empty { display: none; }
.ds-authz-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    margin: 0.6rem 0 0.25rem;
}
.ds-authz-modal .ds-authz-body input.form-control { margin-bottom: 0.25rem; }
.ds-authz-error {
    min-height: 1.1rem;
    margin: 0.5rem 0 0.25rem;
    font-size: 0.82rem;
    color: #dc2626;
}
.ds-authz-error:empty { min-height: 0; }
.ds-authz-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem 1.15rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   Autorizadores por opción — security/captures/authorization-grants
   Lista de endpoints con checkbox, agrupada por opción.
   ────────────────────────────────────────────────────────────────────────── */
.ag-endpoint-list { display: flex; flex-direction: column; gap: 0.35rem; }
.ag-endpoint-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.ag-endpoint-row:hover { background: #f8fafc; }
.ag-endpoint-row .ag-ep-check { cursor: pointer; }
.ag-endpoint-row .ag-ep-method { min-width: 56px; text-align: center; }
.ag-endpoint-row .ag-ep-title { font-size: 0.875rem; color: #1e293b; }
.ag-endpoint-row .ag-ep-key {
    margin-left: auto;
    font-size: 0.75rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

/* ───────────────────────────────────────────────────────────────────────────
   Catalog Import (accounting/process) — importación de catálogo de cuentas CSV
─────────────────────────────────────────────────────────────────────────── */

.ci-instructions {
    margin: 0 0 16px;
    padding-left: 18px;
    color: #5a6573;
    font-size: 0.85rem;
    line-height: 1.6;
}
.ci-instructions li { margin-bottom: 6px; }
.ci-instructions strong { color: #343a40; }

.ci-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background: #eef4ff;
    border: 1px solid #d4e2ff;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.8rem;
    color: #2d4a7c;
}
.ci-note i { color: #1a73e8; margin-top: 1px; }

/* ── Dropzone (estado inicial) ────────────────────────────────────────────── */
.ci-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 200px;
    padding: 28px 20px;
    border: 2px dashed #cfd8e3;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    outline: none;
    transition: border-color .2s ease, background-color .2s ease, transform .1s ease;
}
.ci-dropzone:hover,
.ci-dropzone:focus-visible {
    border-color: #1a73e8;
    background: #eef4ff;
}
.ci-dropzone--over {
    border-color: #1a73e8;
    border-style: solid;
    background: #e4eeff;
}
.ci-dropzone:active { transform: scale(0.995); }
.ci-dropzone--disabled { pointer-events: none; opacity: 0.6; }
.ci-dropzone__icon {
    font-size: 2.5rem;
    color: #1a73e8;
    margin-bottom: 12px;
}
.ci-dropzone__title {
    margin: 0;
    font-weight: 600;
    color: #343a40;
    font-size: 0.95rem;
}
.ci-dropzone__hint {
    margin: 4px 0 0;
    color: #8a95a3;
    font-size: 0.82rem;
}

/* ── Tarjeta del archivo seleccionado ─────────────────────────────────────── */
.ci-file-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 6px 16px -10px rgba(26, 115, 232, 0.35);
}
.ci-file-card__icon { font-size: 1.8rem; color: #1a73e8; flex-shrink: 0; }
.ci-file-card__meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ci-file-card__name {
    font-weight: 600;
    color: #343a40;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ci-file-card__size { color: #8a95a3; font-size: 0.78rem; margin-top: 2px; }
.ci-file-card__remove {
    border: none;
    background: transparent;
    color: #98a2b3;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .15s ease, color .15s ease;
}
.ci-file-card__remove:hover { background: #fdecef; color: #d64550; }

/* ── Acciones ─────────────────────────────────────────────────────────────── */
.ci-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

/* ── Panel de resultado ───────────────────────────────────────────────────── */
.ci-result {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 10px;
    border-left: 4px solid #1a73e8;
    background: #f8fafc;
}
.ci-result--ok { border-left-color: #2e9e5b; background: #ecf8f1; }
.ci-result--warn { border-left-color: #e0a106; background: #fdf6e3; }
.ci-result--error { border-left-color: #d64550; background: #fdecef; }
.ci-result__head { display: flex; align-items: flex-start; gap: 12px; }
.ci-result__icon { font-size: 1.6rem; margin-top: 2px; }
.ci-result--ok .ci-result__icon { color: #2e9e5b; }
.ci-result--warn .ci-result__icon { color: #e0a106; }
.ci-result--error .ci-result__icon { color: #d64550; }
.ci-result__title { font-weight: 600; color: #343a40; font-size: 0.95rem; }
.ci-result__subtitle { color: #6a7480; font-size: 0.82rem; margin-top: 2px; }

.ci-result__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ci-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 96px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 22, 40, 0.06);
}
.ci-stat__value { font-weight: 700; font-size: 1.25rem; line-height: 1; }
.ci-stat__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a95a3;
    margin-top: 4px;
}
.ci-stat--ok .ci-stat__value { color: #2e9e5b; }
.ci-stat--bad .ci-stat__value { color: #d64550; }
.ci-stat--neutral .ci-stat__value { color: #343a40; }

.ci-result__errors { margin-top: 14px; }
.ci-result__errors-title {
    font-weight: 600;
    font-size: 0.82rem;
    color: #8a6d1a;
    margin-bottom: 6px;
}
.ci-result__errors-list {
    margin: 0;
    padding-left: 18px;
    max-height: 220px;
    overflow-y: auto;
    font-size: 0.8rem;
    color: #5a6573;
}
.ci-result__errors-list li { margin-bottom: 4px; }
.ci-result__more { font-size: 0.78rem; color: #8a95a3; margin: 6px 0 0; }

/* ── Dark mode ────────────────────────────────────────────────────────────── */
body.mod-skin-dark .ci-instructions { color: #b9c6dd; }
body.mod-skin-dark .ci-instructions strong { color: #e7ecf3; }
body.mod-skin-dark .ci-note { background: #16213a; border-color: #2a3550; color: #b9c6dd; }
body.mod-skin-dark .ci-dropzone { background: #0f1628; border-color: #2a3550; }
body.mod-skin-dark .ci-dropzone:hover,
body.mod-skin-dark .ci-dropzone:focus-visible,
body.mod-skin-dark .ci-dropzone--over { background: #16213a; border-color: #4d90fe; }
body.mod-skin-dark .ci-dropzone__title { color: #e7ecf3; }
body.mod-skin-dark .ci-file-card { background: #0f1628; border-color: #2a3550; }
body.mod-skin-dark .ci-file-card__name { color: #e7ecf3; }
body.mod-skin-dark .ci-result { background: #0f1628; }
body.mod-skin-dark .ci-result--ok { background: #10261a; }
body.mod-skin-dark .ci-result--warn { background: #2a2410; }
body.mod-skin-dark .ci-result--error { background: #2a1418; }
body.mod-skin-dark .ci-result__title { color: #e7ecf3; }
body.mod-skin-dark .ci-stat { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }

/* ─── Authorizations — bento de gráficos ───────────────────────────────────── */
/* Reemplaza a .lr-chart-card (que recortaba la leyenda con max-height+overflow).
   Tiles de altura suficiente, sin recorte, en distribución bento. */
.az-charts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.az-charts .az-chart {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    box-shadow: 0 6px 18px -12px rgba(16, 24, 40, 0.18);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.az-charts .az-chart:hover {
    box-shadow: 0 12px 26px -14px rgba(16, 24, 40, 0.26);
    transform: translateY(-2px);
}
.az-chart__title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #495057;
}
.az-chart__title i { color: #1a73e8; font-size: 0.82rem; }
.az-chart__body {
    position: relative;
    flex: 1 1 auto;
    height: 250px;
    min-height: 250px;
}
.az-chart--wide { grid-column: 1 / -1; }
.az-chart--wide .az-chart__body { height: 230px; min-height: 230px; }
@media (max-width: 1200px) { .az-charts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .az-charts { grid-template-columns: 1fr; }
    .az-chart--wide { grid-column: auto; }
}
body.mod-skin-dark .az-charts .az-chart { background: #0f1628; border-color: #2a3550; }
body.mod-skin-dark .az-chart__title { color: #e7ecf3; }

/* ── Account Movement — Info Strip ───────────────────────────────────────── */

.amc-info-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

.amc-stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.25rem 1.25rem 0.25rem 0;
}

.amc-stat-item--wide { min-width: 0; flex: 1 1 200px; }

.amc-stat-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #94a3b8;
    text-transform: uppercase;
    white-space: nowrap;
}

.amc-stat-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amc-stat-value--mono { font-variant-numeric: tabular-nums; }

.amc-stat-divider {
    width: 1px;
    height: 2rem;
    background: #e2e8f0;
    margin: 0 1.25rem 0 0;
    flex-shrink: 0;
}

/* La tabla de movimientos hace scroll DENTRO de su propio contenedor, así el
   footer de totales queda siempre justo debajo y las filas no se ven por
   detrás de él (antes la página scrolleaba detrás del footer sticky). */
#amc_table_container {
    max-height: 55vh;
    overflow-y: auto;
}
/* La cabecera de columnas permanece visible mientras se hace scroll. */
#amc_table_container .custom-header {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ── Account Movement — Footer Totals Bar ────────────────────────────────── */
.amc-footer-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0;
    padding: 0.75rem 1.5rem;
    background: #ffffff;
    border-top: 2px solid #1a56db;
    border-radius: 0.5rem;
    color: #1e293b;
    /* Va justo debajo de la tabla (que ya hace scroll interno), no sticky. */
    margin-top: 0.25rem;
    box-shadow: 0 -6px 18px -8px rgba(15, 23, 42, 0.18);
}

.amc-footer-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    padding: 0.15rem 0 0.15rem 1.5rem;
}

.amc-footer-divider {
    width: 1px;
    height: 1.75rem;
    background: #e2e8f0;
    margin-left: 1.5rem;
    flex-shrink: 0;
}

.amc-footer-label {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #64748b;
    text-transform: uppercase;
    white-space: nowrap;
}

.amc-footer-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.amc-footer-value--balance {
    font-size: 1.1rem;
    color: #16a34a;
}

/* Dark mode */
body.mod-skin-dark .amc-info-strip {
    background: linear-gradient(135deg, #16213a 0%, #0f1628 100%);
    border-color: #2a3550;
}

body.mod-skin-dark .amc-stat-value { color: #e7ecf3; }
body.mod-skin-dark .amc-stat-divider { background: #2a3550; }
body.mod-skin-dark .amc-footer-bar { background: #0a0f1e; border-top-color: #2b85ff; }
body.mod-skin-dark .amc-footer-value { color: #e7ecf3; }
body.mod-skin-dark .amc-footer-divider { background: #2a3550; }
body.mod-skin-dark .amc-footer-value--balance { color: #4ade80; }

/* ── Fiscal Year Closing — Period Selection Cards ────────────────────────── */
.fyc-period-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.625rem;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    margin-bottom: 0;
    width: 100%;
    position: relative;
}

.fyc-period-card:hover:not(.fyc-period-card--locked) {
    border-color: var(--primary-400, #60a5fa);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}

.fyc-period-card--selected {
    border-color: var(--primary, #0d6efd);
    background: rgba(13, 110, 253, 0.04);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.fyc-period-card--active {
    border-color: #198754;
    background: rgba(25, 135, 84, 0.04);
}

.fyc-period-card--locked {
    cursor: default;
    opacity: 0.75;
}

.fyc-period-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fyc-period-card__indicator {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
}

.fyc-period-card--selected .fyc-period-card__indicator,
.fyc-period-card--active .fyc-period-card__indicator {
    border-color: var(--primary, #0d6efd);
}

.fyc-period-card--active .fyc-period-card__indicator {
    border-color: #198754;
}

.fyc-period-card__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: transparent;
    transition: background 0.15s ease;
}

.fyc-period-card--selected .fyc-period-card__dot {
    background: var(--primary, #0d6efd);
}

.fyc-period-card--active .fyc-period-card__dot {
    background: #198754;
}

.fyc-period-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

.fyc-period-card__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
}

.fyc-period-card__range {
    font-size: 0.75rem;
    color: #64748b;
}

.fyc-period-card__badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
}

/* Dark mode */
body.mod-skin-dark .fyc-period-card {
    background: #16213a;
    border-color: #2a3550;
    color: #e7ecf3;
}

body.mod-skin-dark .fyc-period-card__title { color: #e7ecf3; }
body.mod-skin-dark .fyc-period-card__range  { color: #8898b4; }
body.mod-skin-dark .fyc-period-card--selected { background: rgba(13, 110, 253, 0.1); }
body.mod-skin-dark .fyc-period-card--active   { background: rgba(25, 135, 84, 0.1); }

/* ── TXT Generation — detail modal ───────────────────────────────────────── */
.txt-detail-summary {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 4px 0 20px;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 20px;
}

.txt-detail-seq-badge {
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f4ff;
    color: #1a56db;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.txt-detail-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a2035;
    margin: 0 0 4px;
    line-height: 1.3;
}

.txt-detail-date {
    font-size: 0.82rem;
    color: #6c757d;
    margin: 0 0 8px;
}

.txt-detail-status-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.txt-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 20px;
    margin-bottom: 20px;
}

.txt-meta-full { grid-column: 1 / -1; }

.txt-meta-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #8a95a3;
    margin-bottom: 2px;
}

.txt-meta-value {
    display: block;
    font-size: 0.88rem;
    color: #1a2035;
    word-break: break-all;
}

.txt-meta-value.is-mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.82rem; }
.txt-meta-value.is-path { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.78rem; color: #495057; }

.txt-section-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #495057;
    padding: 10px 0 8px;
    border-top: 1px solid #e9ecef;
    margin-top: 4px;
}

.txt-route-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    background: #e8f0fe;
    color: #1a56db;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.txt-amount-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a2035;
}

.txt-id-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.8rem;
    color: #495057;
}

/* Dark mode */
body.mod-skin-dark .txt-detail-summary { border-color: rgba(255,255,255,0.08); }
body.mod-skin-dark .txt-detail-seq-badge { background: rgba(26,86,219,.15); color: #6ea6ff; }
body.mod-skin-dark .txt-detail-title { color: #e7ecf3; }
body.mod-skin-dark .txt-detail-date  { color: #8a95a3; }
body.mod-skin-dark .txt-meta-grid    { border-color: rgba(255,255,255,0.08); }
body.mod-skin-dark .txt-meta-value   { color: #e7ecf3; }
body.mod-skin-dark .txt-meta-value.is-path { color: #b9c6dd; }
body.mod-skin-dark .txt-section-rule { border-color: rgba(255,255,255,0.08); color: #8a95a3; }
body.mod-skin-dark .txt-route-pill   { background: rgba(26,86,219,.2); color: #6ea6ff; }
body.mod-skin-dark .txt-amount-mono  { color: #e7ecf3; }
body.mod-skin-dark .txt-id-mono      { color: #b9c6dd; }

/* ════════════════════════════════════════════════════════════════════════════
   PRESUPUESTOS — desglose mensual (tarjetas con iconos + animaciones)
   ════════════════════════════════════════════════════════════════════════════ */
@keyframes bgtSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Animación al desplegar el detalle de un presupuesto / cuenta */
.bgt-detail:not([hidden]),
.bgt-acct-detail:not([hidden]) {
    animation: bgtSlideDown .28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Chevron del acordeón */
.bgt-chevron,
.bgt-acct-chevron {
    transition: transform .25s ease;
}
.bgt-chevron.fa-chevron-down,
.bgt-acct-chevron.fa-chevron-down {
    transform: rotate(0deg);
}

/* Tarjeta de un mes */
.bgt-month-card {
    border: 1px solid #e9ecef;
    border-radius: .65rem;
    padding: 1rem 1.1rem;
    height: 100%;
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    animation: bgtSlideDown .35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.bgt-month-card:hover {
    box-shadow: 0 8px 22px -10px rgba(26, 86, 219, .25);
    transform: translateY(-3px);
    border-color: #d3dcef;
}
.bgt-month-card__title {
    font-weight: 700;
    font-size: .95rem;
    color: #1a2233;
    margin-bottom: .85rem;
}
.bgt-month-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .6rem;
}
.bgt-month-row:last-child { margin-bottom: 0; }
.bgt-month-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #f1f4f9;
    color: #8a95a8;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: .95rem;
    transition: background .2s ease, color .2s ease;
}
.bgt-month-card:hover .bgt-month-icon { background: #e7eefc; color: #1a56db; }
.bgt-month-meta { flex: 1; text-align: right; line-height: 1.2; }
.bgt-month-meta small { display: block; color: #98a2b3; font-size: .72rem; }
.bgt-month-meta strong { font-size: 1.02rem; color: #1a2233; }
.bgt-month-meta strong.text-success { color: #28a745 !important; }
.bgt-month-meta strong.text-danger  { color: #dc3545 !important; }

/* ════════════════════════════════════════════════════════════════════════════
   ENTRADA DE DIARIO — anchos de columna del listado
   Columnas: Secuencia | Nro.Doc | Descripción | Fecha | Tipo | Débito | Crédito | Estatus | Acciones
   ════════════════════════════════════════════════════════════════════════════ */
#jne_table_container .custom-header,
#jne_table_container .custom-tbody,
#jne_table_container .custom-footer {
    grid-template-columns: 0.8fr 0.8fr 2.3fr 1fr 0.8fr 1.1fr 1.1fr 1fr 0.85fr !important;
}

/* Botón "Distribuir" del modal de presupuesto: pulso/cue cuando hay monto */
@keyframes bgtDistributePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26, 86, 219, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(26, 86, 219, 0); }
}
.bgt-distribute-cue {
    animation: bgtDistributePulse 1.4s ease-in-out infinite;
}

/* Entrada de Diario — el menú de acciones de la codificación no debe recortarse
   por el overflow:hidden de la custom-table */
#jne_form_view .custom-table { overflow: visible; }

/* ════════════════════════════════════════════════════════════════════════════
   CATALOG PICKER MODAL — búsqueda de endpoints del gateway
   ════════════════════════════════════════════════════════════════════════════ */

.ds-cpm {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ds-cpm[hidden] { display: none !important; }

.ds-cpm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 32, 0.52);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: dsModalFadeIn 0.15s ease;
}
@keyframes dsModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ds-cpm__panel {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px -12px rgba(2, 8, 32, 0.28), 0 0 0 1px rgba(15, 22, 40, 0.07);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: dsModalSlideIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dsModalSlideIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.ds-cpm__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e8ecf2;
    flex-shrink: 0;
}
.ds-cpm__header-icon {
    width: 34px;
    height: 34px;
    background: rgba(26, 115, 232, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a73e8;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.ds-cpm__titles { flex: 1; min-width: 0; }
.ds-cpm__title {
    margin: 0;
    font-size: 0.97rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}
.ds-cpm__subtitle {
    font-size: 0.76rem;
    color: #64748b;
    margin-top: 2px;
}
.ds-cpm__close {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.ds-cpm__close:hover { background: #f1f5f9; color: #0f172a; }

/* Search bar */
.ds-cpm__search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 0;
    flex-shrink: 0;
}
.ds-cpm__search-wrap {
    flex: 1;
    position: relative;
}
.ds-cpm__search-wrap i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.82rem;
    pointer-events: none;
}
.ds-cpm__search {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 32px;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #0f172a;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ds-cpm__search:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
    background: #fff;
}
.ds-cpm__count {
    font-size: 0.76rem;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Method filter pills */
.ds-cpm__filters {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px 0;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.ds-cpm__filter {
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
    color: #475569;
    transition: background 0.13s, border-color 0.13s, color 0.13s;
    line-height: 1;
    display: flex;
    align-items: center;
}
.ds-cpm__filter:hover { background: #f1f5f9; border-color: #cbd5e1; }
.ds-cpm__filter.active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}
.ds-cpm__filter[data-method="GET"].active    { background: #16a34a; border-color: #16a34a; }
.ds-cpm__filter[data-method="POST"].active   { background: #1a73e8; border-color: #1a73e8; }
.ds-cpm__filter[data-method="PUT"].active    { background: #d97706; border-color: #d97706; }
.ds-cpm__filter[data-method="PATCH"].active  { background: #7c3aed; border-color: #7c3aed; }
.ds-cpm__filter[data-method="DELETE"].active { background: #dc2626; border-color: #dc2626; }

/* Column headers */
.ds-cpm__col-headers {
    display: grid;
    grid-template-columns: 76px 2fr 0.9fr 1.6fr;
    gap: 0 12px;
    padding: 8px 16px 6px 20px;
    margin-top: 10px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.ds-cpm__col-headers span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
}

/* List */
.ds-cpm__list {
    overflow-y: auto;
    flex: 1;
    padding: 4px 8px 12px;
    min-height: 0;
}
.ds-cpm__list::-webkit-scrollbar { width: 5px; }
.ds-cpm__list::-webkit-scrollbar-track { background: transparent; }
.ds-cpm__list::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 999px; }

.ds-cpm__item {
    display: grid;
    grid-template-columns: 76px 2fr 0.9fr 1.6fr;
    gap: 0 12px;
    align-items: start;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
    margin-bottom: 2px;
}
.ds-cpm__item:hover {
    background: #f0f7ff;
    border-color: rgba(26, 115, 232, 0.2);
}
.ds-cpm__item:active {
    background: #dbeafe;
    transform: scale(0.995);
}

/* Method badge */
.ds-cpm__method {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 7px;
    border-radius: 5px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: .04em;
    width: fit-content;
}
.ds-cpm__method--GET    { background: rgba(22, 163, 74, 0.1);  color: #15803d; border: 1px solid rgba(22, 163, 74, 0.25); }
.ds-cpm__method--POST   { background: rgba(26, 115, 232, 0.1); color: #1558b0; border: 1px solid rgba(26, 115, 232, 0.25); }
.ds-cpm__method--PUT    { background: rgba(217, 119, 6, 0.1);  color: #b45309; border: 1px solid rgba(217, 119, 6, 0.25); }
.ds-cpm__method--PATCH  { background: rgba(124, 58, 237, 0.1); color: #6d28d9; border: 1px solid rgba(124, 58, 237, 0.25); }
.ds-cpm__method--DELETE { background: rgba(220, 38, 38, 0.1);  color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.25); }

.ds-cpm__url {
    font-size: 0.79rem;
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    color: #1e293b;
    word-break: break-all;
}
.ds-cpm__url mark {
    background: rgba(26, 115, 232, 0.18);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}
.ds-cpm__title-cell {
    font-size: 0.8rem;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-cpm__key {
    font-size: 0.75rem;
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    color: #64748b;
    word-break: break-all;
}
.ds-cpm__key mark {
    background: rgba(26, 115, 232, 0.18);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* Empty / loading states */
.ds-cpm__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 20px;
    color: #94a3b8;
    text-align: center;
}
.ds-cpm__empty i { font-size: 1.8rem; opacity: 0.5; }
.ds-cpm__empty p { margin: 0; font-size: 0.82rem; }

/* Wrapper: input + trigger button side by side */
.ds-cpm-trigger-wrap {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.ds-cpm-trigger-wrap > input {
    flex: 1 1 0;
    min-width: 0;
}

/* Button to open the catalog picker */
.ds-cpm-trigger {
    height: 30px;
    padding: 0 10px;
    border: 1px solid #dde3ec;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: background 0.13s, border-color 0.13s, color 0.13s;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 0;
}
.ds-cpm-trigger:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1a73e8;
}
.ds-cpm-trigger i { font-size: 0.78rem; }

/* Dark mode */
body.mod-skin-dark .ds-cpm__panel {
    background: #1e2435;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07);
}
body.mod-skin-dark .ds-cpm__header { border-bottom-color: rgba(255,255,255,.08); }
body.mod-skin-dark .ds-cpm__title  { color: #f1f5f9; }
body.mod-skin-dark .ds-cpm__subtitle { color: #94a3b8; }
body.mod-skin-dark .ds-cpm__close  { color: #64748b; }
body.mod-skin-dark .ds-cpm__close:hover { background: rgba(255,255,255,.06); color: #f1f5f9; }
body.mod-skin-dark .ds-cpm__search {
    background: #111827;
    border-color: rgba(255,255,255,.1);
    color: #e2e8f0;
}
body.mod-skin-dark .ds-cpm__search:focus { border-color: #3b82f6; }
body.mod-skin-dark .ds-cpm__filter { background: #111827; border-color: rgba(255,255,255,.1); color: #94a3b8; }
body.mod-skin-dark .ds-cpm__filter:hover { background: rgba(255,255,255,.06); }
body.mod-skin-dark .ds-cpm__col-headers { border-bottom-color: rgba(255,255,255,.06); }
body.mod-skin-dark .ds-cpm__col-headers span { color: #475569; }
body.mod-skin-dark .ds-cpm__item:hover { background: rgba(59, 130, 246, 0.1); border-color: rgba(59,130,246,.2); }
body.mod-skin-dark .ds-cpm__url   { color: #cbd5e1; }
body.mod-skin-dark .ds-cpm__title-cell { color: #94a3b8; }
body.mod-skin-dark .ds-cpm__key   { color: #64748b; }
body.mod-skin-dark .ds-cpm-trigger { background: #111827; border-color: rgba(255,255,255,.1); color: #64748b; }
body.mod-skin-dark .ds-cpm-trigger:hover { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.35); color: #60a5fa; }
#jne_form_view .custom-tbody { overflow: visible; }

/* ══════════════════════════════════════════════════════════════════════
   My Profile — premium redesign
   ══════════════════════════════════════════════════════════════════════ */

/* ── Banner ──────────────────────────────────────────────────────────── */
.prf-banner {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a2840 0%, #243347 50%, #1a3a5c 100%);
    box-shadow: 0 4px 20px -4px rgba(26, 56, 92, .32);
    margin-bottom: 0;
}

.prf-banner__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 82% 40%, rgba(43, 133, 255, .22) 0%, transparent 52%),
        radial-gradient(ellipse at 8%  80%, rgba(16, 185, 129, .07) 0%, transparent 42%);
    pointer-events: none;
}

.prf-banner__body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
}

/* ── Bloque de identidad (izquierda) ──────────────────────────────────── */
.prf-banner__identity {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    min-width: 0;
    flex: 1;
}

.prf-avatar-xl {
    flex-shrink: 0;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: linear-gradient(175deg, #3b9aff 0%, #1361d8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: -.02em;
    border: 3px solid rgba(255, 255, 255, .2);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .14) inset,
        0 8px 24px -6px rgba(19, 97, 216, .55);
    user-select: none;
}

.prf-id-block { min-width: 0; }

.prf-id-block__name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.prf-id-block__row {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .45rem;
}

.prf-id-block__email {
    font-size: .845rem;
    color: rgba(255, 255, 255, .6);
}

/* ── Status pill ──────────────────────────────────────────────────────── */
.prf-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .62rem;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: opacity .25s;
}
.prf-status-pill--loading {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .4);
    border: 1px solid rgba(255, 255, 255, .1);
}
.prf-status-pill--active {
    background: rgba(34, 197, 94, .14);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, .32);
}
.prf-status-pill--inactive {
    background: rgba(248, 113, 113, .12);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, .28);
}
.prf-status-pill--pending {
    background: rgba(251, 191, 36, .12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, .28);
}

.prf-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
}
.prf-status-pill--active .prf-status-dot {
    animation: prf-dot-pulse 2.2s ease-in-out infinite;
}

@keyframes prf-dot-pulse {
    0%, 100% { opacity: 1;  transform: scale(1);   }
    50%       { opacity: .5; transform: scale(.75); }
}

/* ── Empresa ──────────────────────────────────────────────────────────── */
.prf-id-block__company {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .45);
    line-height: 1;
}
.prf-id-block__company .fal { font-size: .78rem; color: rgba(255, 255, 255, .3); }

.prf-id-block__rnc {
    font-size: .72rem;
    color: rgba(255, 255, 255, .3);
}
.prf-id-block__rnc:not(:empty)::before {
    content: '·';
    margin-right: .35rem;
    color: rgba(255, 255, 255, .2);
}

/* ── Badge de perfil asignado (glassmorphism, derecha) ────────────────── */
.prf-template-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .85rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 10px;
    padding: .85rem 1.1rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset;
    max-width: 210px;
    min-width: 0;
}

.prf-template-badge__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: rgba(43, 133, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #74b3ff;
    font-size: .95rem;
}

.prf-template-badge__text { min-width: 0; }

.prf-template-badge__label {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255, 255, 255, .38);
    margin-bottom: .18rem;
}

.prf-template-badge__name {
    display: block;
    font-size: .83rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .86);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Stats strip ──────────────────────────────────────────────────────── */
.prf-stats-strip {
    display: flex;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .03);
    overflow: hidden;
}

.prf-stat-cell {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.05rem 1.35rem;
    border-right: 1px solid #f1f5f9;
    opacity: 0;
    animation: prf-fade-up .4s cubic-bezier(.16, 1, .3, 1) forwards;
}
.prf-stat-cell:last-child { border-right: none; }

.prf-stats-strip .prf-stat-cell:nth-child(1) { animation-delay: 50ms;  }
.prf-stats-strip .prf-stat-cell:nth-child(2) { animation-delay: 120ms; }
.prf-stats-strip .prf-stat-cell:nth-child(3) { animation-delay: 190ms; }
.prf-stats-strip .prf-stat-cell:nth-child(4) { animation-delay: 260ms; }

@keyframes prf-fade-up {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.prf-stat-cell__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2b85ff;
    font-size: .9rem;
}

.prf-stat-cell__data {
    display: flex;
    flex-direction: column;
    gap: .08rem;
    min-width: 0;
}

.prf-stat-cell__label {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .055em;
    color: #94a3b8;
    white-space: nowrap;
}

.prf-stat-cell__value {
    font-size: .93rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Detail grid (tab Información) ───────────────────────────────────── */
.prf-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
}

.prf-detail-row {
    display: flex;
    flex-direction: column;
    gap: .22rem;
    padding: .8rem 0;
    border-bottom: 1px solid #f8fafc;
}

.prf-detail-row--full {
    grid-column: 1 / -1;
}

.prf-detail-row__key {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .065em;
    color: #94a3b8;
    display: flex;
    align-items: center;
}
.prf-detail-row__key .fal { font-size: .72rem; }

.prf-detail-row__val {
    font-size: .915rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.4;
}

.prf-detail-row__val--muted {
    color: #94a3b8;
    font-style: italic;
    font-weight: 400;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .prf-banner__body {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem;
        gap: 1rem;
    }
    .prf-template-badge {
        max-width: 100%;
        width: 100%;
    }
    .prf-stats-strip {
        flex-wrap: wrap;
    }
    .prf-stat-cell {
        flex: 1 0 50%;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
    }
    .prf-stats-strip .prf-stat-cell:nth-child(odd)  { border-right: 1px solid #f1f5f9; }
    .prf-stats-strip .prf-stat-cell:last-child       { border-bottom: none; }
    .prf-detail-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .prf-detail-row--full { grid-column: 1; }
}

/* ── Dark mode ───────────────────────────────────────────────────────── */
body.mod-skin-dark .prf-banner {
    background: linear-gradient(135deg, #0e1a2d 0%, #172233 50%, #0f2540 100%);
}

body.mod-skin-dark .prf-stats-strip {
    background: #1a2234;
    border-color: rgba(255, 255, 255, .06);
}
body.mod-skin-dark .prf-stat-cell {
    border-right-color: rgba(255, 255, 255, .04);
}
body.mod-skin-dark .prf-stat-cell__icon {
    background: rgba(43, 133, 255, .1);
    color: #74b3ff;
}
body.mod-skin-dark .prf-stat-cell__label { color: #64748b; }
body.mod-skin-dark .prf-stat-cell__value { color: #e2e8f0; }

body.mod-skin-dark .prf-detail-row { border-bottom-color: rgba(255, 255, 255, .04); }
body.mod-skin-dark .prf-detail-row__val { color: #e2e8f0; }
body.mod-skin-dark .prf-detail-row__val--muted { color: #475569; }

/* ── PIN de Autorizador ─────────────────────────────────────────────── */
.prf-pin-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
}
.prf-pin-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem .75rem;
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background .2s, color .2s;
}
.prf-pin-badge--set {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #15803d;
}
.prf-pin-badge--unset {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}
.prf-pin-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.prf-pin-form {
    margin-top: .75rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
}
body.mod-skin-dark .prf-pin-badge--set   { background: rgba(20,83,45,.25); border-color: rgba(34,197,94,.2); color: #4ade80; }
body.mod-skin-dark .prf-pin-badge--unset { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); color: #64748b; }
body.mod-skin-dark .prf-pin-form         { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); }

/* ── Security Authorization Admin — modes callout ──────────────────── */
.saa-info-callout {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1.125rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #3b82f6;
    border-radius: .375rem;
    max-width: 860px;
}
.saa-info-callout__icon {
    color: #3b82f6;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.saa-info-callout__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.saa-info-callout__text {
    font-size: .875rem;
    color: #4a5568;
    line-height: 1.5;
}
.saa-info-callout__modes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .5rem;
}
.saa-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8125rem;
}
.saa-mode-pill__desc {
    color: #64748b;
}
.saa-mode-pill__sep {
    color: #cbd5e1;
    font-size: .875rem;
    user-select: none;
}
body.mod-skin-dark .saa-info-callout {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.07);
    border-left-color: #3b82f6;
}
body.mod-skin-dark .saa-info-callout__text { color: #94a3b8; }
body.mod-skin-dark .saa-mode-pill__desc    { color: #64748b; }
body.mod-skin-dark .saa-mode-pill__sep     { color: #334155; }

/* ── Catálogo: barra de selección masiva ─────────────────────────────────── */
.ec-bulk-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .5rem .75rem;
    border-radius: 6px;
    background: #eef3fb;
    border: 1px solid #c8d9f4;
}
.ec-bulk-bar__count {
    font-size: .8rem;
    font-weight: 600;
    color: #1e40af;
    white-space: nowrap;
    margin-right: .25rem;
}
.ec-bulk-bar__modes { display: flex; gap: .35rem; }
.ec-row-check { cursor: pointer; accent-color: #3b5fc0; width: 15px; height: 15px; }
body.mod-skin-dark .ec-bulk-bar { background: #1e2d45; border-color: #2d4a7a; }
body.mod-skin-dark .ec-bulk-bar__count { color: #93c5fd; }