:root {
    --app-sidebar-width: 250px;
    --app-navy: #1f3a5f;
    --app-navy-dark: #162b47;
    --app-accent: #2f6fed;
    --app-bg: #f4f6f9;
    --app-border: #e2e6ee;
}

/* Base font size drives every rem-based size in the app; bumped 5% for readability. */
html {
    font-size: 14.7px;
}

@media (min-width: 768px) {
    html {
        font-size: 15.75px;
    }
}

body {
    margin: 0;
    background: var(--app-bg);
    color: #24303f;
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 111, 237, 0.25);
}

/* ============================ App shell ============================ */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--app-sidebar-width);
    background: linear-gradient(180deg, var(--app-navy) 0%, var(--app-navy-dark) 100%);
    color: #cfdaeb;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

.app-sidebar__brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.app-sidebar__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 37px;
    height: 37px;
    border-radius: 8px;
    /* The isologo is red on an opaque white background, so it needs a white
       plate to sit on — red straight onto the navy sidebar barely reads. */
    background: #fff;
    overflow: hidden;
}

    .app-sidebar__logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.app-sidebar__title {
    font-weight: 600;
    color: #fff;
    letter-spacing: .2px;
}

/* El menú es lo único que se estira, así que es lo único que scrollea: la marca de arriba
   queda siempre fija. min-height:0 es lo que deja encoger al hijo flex — sin eso crece hasta
   pasarse del alto de la barra y las últimas secciones quedan cortadas contra el borde. */
.app-sidebar__nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: .75rem .5rem 1.25rem;
    gap: .15rem;
    overflow-y: auto;
    /* Que la rueda no siga arrastrando la página cuando el menú llegó al final. */
    overscroll-behavior: contain;
    /* Firefox: la barra fina, en el mismo blanco translúcido que los hovers del menú. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

/* Y lo mismo en WebKit/Chromium, donde scrollbar-color no aplica: sin flechas, sin canal
   gris, sólo una barrita del ancho de los íconos que se enciende igual que un ítem al pasar
   el mouse. Va sobre el degradado de la barra, así que el track se deja transparente. */
.app-sidebar__nav::-webkit-scrollbar {
    width: 8px;
}

.app-sidebar__nav::-webkit-scrollbar-track {
    background: transparent;
}

.app-sidebar__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    /* El borde transparente deja el pulgar más finito que el canal, con aire a los costados. */
    border: 2px solid transparent;
    background-clip: content-box;
}

.app-sidebar__nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .32);
    background-clip: content-box;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .85rem;
    border-radius: 8px;
    color: #cfdaeb;
    text-decoration: none;
    font-size: .95rem;
    transition: background .15s ease, color .15s ease;
}

.app-nav-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.app-nav-link.active {
    background: var(--app-accent);
    color: #fff;
    font-weight: 600;
}

/* Each tool gets its own colour so the menu is scannable at a glance. The hues are
   the light end of the Inicio card palette — they have to hold up on the navy. */
.app-nav-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.app-nav-link__icon svg { width: 18px; height: 18px; }

.app-nav-link__icon--inicio { color: #7cc4ff; }
.app-nav-link__icon--oficializaciones { color: #ffd166; }
.app-nav-link__icon--generador { color: #7ee0c9; }
.app-nav-link__icon--visualizador { color: #c4a7f5; }
.app-nav-link__icon--cotizaciones { color: #7bd88f; }
.app-nav-link__icon--herramientas { color: #ffa373; }
.app-nav-link__icon--psad { color: #6fd3e8; }
.app-nav-link__icon--enviosmail { color: #f5c76f; }
.app-nav-link__icon--endo { color: #f0a6c8; }
.app-nav-link__icon--legajos { color: #ffb454; }
.app-nav-link__icon--estadisticas { color: #9ecbff; }
.app-nav-link__icon--kitmaria { color: #b6b8ff; }
.app-nav-link__icon--configurar { color: #9fe0c0; }

/* The active row is accent-blue; the tints lose contrast against it, so go white. */
.app-nav-link.active .app-nav-link__icon { color: #fff; }

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

/* A bordered cluster inside a section: groups the two "reportes" tools together. */
.app-nav-group {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    padding: .25rem;
    margin: .3rem 0;
    background: rgba(255, 255, 255, .03);
}

/* Sections are headed groups, never collapsible — every visible option stays visible. */
.app-nav-section + .app-nav-section { margin-top: 1.15rem; }

.app-nav-section__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .85rem;
    margin-bottom: .4rem;
    color: #8fa3c0;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
}

/* Marks the section a Bank user can see but not open. */
.app-nav-section__badge {
    padding: .05rem .4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #cfdaeb;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: none;
}

.app-sidebar__backdrop {
    display: none;
}

/* Main column */
.app-main {
    flex: 1;
    margin-left: var(--app-sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 60px;
    padding: 0 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--app-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-topbar__spacer {
    flex: 1;
}

.app-topbar__user {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.app-topbar__username {
    font-weight: 600;
    color: var(--app-navy);
}

.app-topbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 36px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.app-topbar__toggle span {
    display: block;
    height: 2px;
    width: 20px;
    margin: 0 auto;
    background: var(--app-navy);
}

.app-content {
    padding: 1.5rem;
    flex: 1;
}

/* ============================ Cards / panels ============================ */
.panel {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.panel__header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--app-border);
    font-weight: 600;
    color: var(--app-navy);
}

.panel__body {
    padding: 1.25rem;
}

/* ============================ Summary bar ============================ */
.summary-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.summary-stat {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: .6rem 1rem;
    min-width: 140px;
}

.summary-stat__label {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7891;
}

.summary-stat__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--app-navy);
}

/* ============================ Multi-select combo ============================ */
.ms {
    position: relative;
}

.ms__control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.ms__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms__value--empty {
    color: #6b7891;
}

.ms__arrow {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #6b7891;
    transition: transform .15s ease;
}

.ms--open .ms__arrow {
    transform: rotate(180deg);
}

.ms__dropdown {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
    padding: .5rem;
}

.ms__search {
    margin-bottom: .4rem;
}

.ms__actions {
    display: flex;
    gap: .75rem;
    padding: 0 .15rem .4rem;
    border-bottom: 1px solid var(--app-border);
    margin-bottom: .35rem;
}

.ms__action {
    border: none;
    background: none;
    padding: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--app-accent);
    cursor: pointer;
}

.ms__action:hover {
    text-decoration: underline;
}

.ms__list {
    max-height: 240px;
    overflow-y: auto;
}

.ms__option {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .4rem;
    margin: 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: .9rem;
}

.ms__option:hover {
    background: #f4f7ff;
}

.ms__option input {
    flex: 0 0 auto;
    cursor: pointer;
}

/* Color swatch shown next to an option's text (e.g. Canal) */
.ms__swatch {
    flex: 0 0 auto;
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: .1rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
    vertical-align: middle;
}

.ms__value .ms__swatch {
    margin-right: .4rem;
}

.ms__empty {
    padding: .6rem .4rem;
    color: #6b7891;
    font-size: .85rem;
    text-align: center;
}

/* ============================ Attached-files icon + modal ============================ */
.despacho-nro {
    vertical-align: middle;
}

/* The Oficialización número copies to the clipboard on click. */
.despacho-nro.js-copy-nro {
    cursor: pointer;
    border-radius: 4px;
    padding: 0 .15rem;
}

.despacho-nro.js-copy-nro:hover {
    text-decoration: underline;
    background: rgba(47, 111, 237, .10);
}

/* Saldos: highlighted "consultar en vivo contra ARCA" call-to-action. */
.arca-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    border: 1.5px solid var(--app-accent);
    border-radius: 12px;
    background: rgba(47, 111, 237, .07);
}

.arca-box__title { display: block; font-weight: 700; color: var(--app-navy); }
.arca-box__hint { display: block; color: #52617a; font-size: .82rem; }
.arca-box__actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* Saldos cells after a live ARCA consult. A value that CHANGED shows in green
   (hover reveals the previous, outdated value); an unchanged one stays neutral.
   The Disponible cell is a highlighted (col-hl) column, whose background wins on
   specificity + source order — so these force their fill with !important. */
.results-table td.js-saldo-disponible.saldo-consultado {
    background-color: rgba(120, 132, 152, .16) !important;
}
.results-table td.js-saldo-disponible.saldo-cambiado {
    background-color: rgba(15, 122, 95, .20) !important;
    font-weight: 700;
    color: #0f7a5f;
}
.results-table tr.saldo-error td.js-saldo-disponible {
    background-color: rgba(208, 59, 59, .16) !important;
}

/* Saldos: the cell being consulted live shows a spinner + "Consultando…". */
.results-table td.js-saldo-disponible.saldo-cargando {
    color: #52617a;
    font-style: italic;
    white-space: nowrap;
    background-color: rgba(47, 111, 237, .10) !important;
}
.saldo-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    vertical-align: -2px;
    border: 2px solid rgba(47, 111, 237, .3);
    border-top-color: var(--app-accent);
    border-radius: 50%;
    animation: saldo-spin .6s linear infinite;
}
@keyframes saldo-spin { to { transform: rotate(360deg); } }

/* Saldos: notice that the shown saldos were consulted automatically overnight. */
.arca-notice {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .7rem .9rem;
    border: 1px solid #cfe0c9;
    border-left: 4px solid #3f9a56;
    border-radius: 10px;
    background: rgba(63, 154, 86, .08);
    color: #2f5a3a;
    font-size: .86rem;
    line-height: 1.35;
}
.arca-notice svg { flex-shrink: 0; width: 18px; height: 18px; color: #3f9a56; margin-top: 1px; }

/* "Volver" back button — deliberately prominent (users were missing the subtle one). */
.btn-volver {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    color: #fff;
    background: var(--app-navy);
    border: 1.5px solid var(--app-navy);
    border-radius: 9px;
    padding: .45rem .95rem;
    box-shadow: 0 6px 16px -6px rgba(31, 58, 95, .55);
}
/* Force the dark fill on hover/focus/active — Bootstrap's .btn:hover would otherwise
   blank the background to transparent, leaving white text on the white page. */
a.btn-volver:hover,
a.btn-volver:focus,
a.btn-volver:active {
    color: #fff !important;
    background-color: #16304f !important;
    border-color: #16304f !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(31, 58, 95, .6);
}
.btn-volver svg { width: 17px; height: 17px; }

/* Emphasised filters panel (Oficializaciones): a stronger accent frame + tinted header. */
.filters-emphasis {
    border: 1.5px solid var(--app-accent);
    box-shadow: 0 0 0 4px rgba(47, 111, 237, .10);
}

.filters-emphasis .panel__header {
    background: rgba(47, 111, 237, .07);
    border-bottom-color: rgba(47, 111, 237, .28);
    color: var(--app-navy);
}

/* Quiet, auto-dismissing "copied" toast — never blocks interaction. */
.copy-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(10px);
    background: rgba(31, 58, 95, .96);
    color: #fff;
    padding: .5rem .9rem;
    border-radius: 8px;
    font-size: .9rem;
    box-shadow: 0 6px 20px rgba(16, 24, 40, .22);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 1080;
}

.copy-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.despacho-files-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: .4rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--app-accent);
    cursor: pointer;
    vertical-align: middle;
    transition: background .15s ease, color .15s ease;
}

.despacho-files-icon:hover {
    background: rgba(47, 111, 237, .12);
    color: #1d5bd6;
}

.df-section {
    padding: .25rem 0 .5rem;
}

.df-section + .df-section {
    border-top: 1px solid var(--app-border);
    margin-top: .75rem;
    padding-top: .9rem;
}

.df-section__title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7891;
    margin-bottom: .6rem;
}

.df-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 0;
}

.df-row__label {
    font-weight: 500;
    color: #24303f;
}

.df-row__hint {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    color: #6b7891;
    margin-top: .1rem;
}

.df-row__actions {
    display: flex;
    gap: .5rem;
    flex: 0 0 auto;
}

.df-btn-icon {
    width: 15px;
    height: 15px;
    vertical-align: -2px;
    margin-right: .3rem;
}

.df-back {
    display: inline-flex;
    align-items: center;
    margin-right: .75rem;
}

/* Loading state (per-request, with delayed cancel button) */
.df-loading {
    text-align: center;
    padding: 2.75rem 1rem;
}

.df-loading__spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 1rem;
    border: 4px solid #dbe3f0;
    border-top-color: var(--app-accent);
    border-radius: 50%;
    animation: app-spin .8s linear infinite;
}

.df-loading__text {
    font-weight: 600;
    color: var(--app-navy);
}

/* Styled "not available" message */
.df-error__box {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    max-width: 520px;
    margin: 1.5rem auto;
    padding: 1.1rem 1.25rem;
    background: #fff8ec;
    border: 1px solid #f2d9a6;
    border-radius: 12px;
    color: #8a5a00;
}

.df-error__icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: #d9880a;
}

.df-error__title {
    font-weight: 700;
    margin-bottom: .15rem;
}

.df-error__text {
    font-size: .92rem;
    color: #9a6a12;
}

/* Large-file notice (background download only) */
.df-large__box {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    max-width: 560px;
    margin: 1.5rem auto;
    padding: 1.1rem 1.25rem;
    background: #eef4ff;
    border: 1px solid #cadcff;
    border-radius: 12px;
    color: #1f3a5f;
}

.df-large__icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: var(--app-accent);
}

.df-large__title {
    font-weight: 700;
    margin-bottom: .15rem;
}

.df-large__text {
    font-size: .92rem;
    color: #3a4a63;
}

.df-large__done {
    font-size: .88rem;
    font-weight: 600;
    color: #1b7f4b;
}

/* Inline PDF preview inside the modal */
.df-preview__frame {
    width: 100%;
    height: 72vh;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: #f4f6f9;
}

/* ============================ Shared despacho modal (files + items) ============================ */
/* Header: soft accent band with an icon + title + prominent despacho chip. */
.desp-modal-head {
    align-items: center;
    gap: .65rem;
    padding: .85rem 1.1rem;
    background: linear-gradient(180deg, #f5f9ff 0%, #e9f1ff 100%);
    border-bottom: 2px solid #cadcff;
}

.desp-modal-title {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    color: var(--app-navy);
    font-weight: 700;
}

.desp-modal-title__icon {
    width: 20px;
    height: 20px;
    color: var(--app-accent);
    flex: 0 0 auto;
}

.desp-modal-title__label {
    font-size: 1rem;
}

.desp-modal-head__actions {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

/* Prominent, pill-shaped despacho number badge shown in the modal title. */
.despacho-chip {
    display: inline-flex;
    align-items: center;
    padding: .2rem .75rem;
    background: linear-gradient(135deg, var(--app-accent), #1d5bd6);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .3px;
    box-shadow: 0 3px 9px -3px rgba(29, 91, 214, .6);
}

/* Row-count hint next to the title ("12 items"). */
.desp-modal__count {
    font-size: .82rem;
    font-weight: 600;
    color: #6b7891;
}

/* Items modal is 60% wider than the standard modal-xl (1140px → ~1824px) so
   despachos with only a few items don't leave a cramped-looking window; capped
   to the viewport on smaller screens. Overrides Bootstrap's .modal-xl max-width
   (same specificity, declared later + !important to beat the 1200px media rule). */
.modal-dialog.items-modal-dialog {
    max-width: min(1824px, calc(100vw - 3.5rem)) !important;
}

/* ---- Items / subitems modal body ---- */
.items-modal__loading,
.items-modal__msg {
    padding: 2.5rem 1rem;
    color: #6b7891;
    text-align: center;
}

.items-modal__loading-text {
    font-weight: 600;
    color: var(--app-navy);
}

.items-modal__spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 1rem;
    border: 4px solid #dbe3f0;
    border-top-color: var(--app-accent);
    border-radius: 50%;
    animation: app-spin .8s linear infinite;
}

/* Inside the scrollable modal, let the modal body own the scroll so the sticky
   table headers pin to the top of the body (not a nested scroll box). */
.items-modal .items-table-wrap {
    max-height: none;
    overflow: visible;
}

/* ============================ Highlights (columns, filters, estado icon) ============================ */
/* Highlighted table columns: Oficialización (#4) and Fecha Oficialización (#3) */
.results-table thead th.col-hl {
    background: var(--app-accent);
}

.results-table td.col-hl {
    background: #eaf1ff;
    font-weight: 600;
    color: var(--app-navy);
}

.results-table tbody tr:hover td.col-hl {
    background: #dde9ff;
}

/* Highlighted "Nro Despacho" filter (#5) */
.filter-hl .form-label {
    color: var(--app-accent);
    font-weight: 700;
}

.filter-hl .form-control {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 2px rgba(47, 111, 237, .12);
}

/* A Nro Despacho search ignores the other filters: fade them so what the user typed is
   visibly set aside rather than silently dropped. They stay usable — clearing the nro
   brings them back. */
.filter-solo-hint {
    color: var(--app-accent);
    font-weight: 600;
}

form.is-solo-nro .row > [class*="col-"]:not(.filter-hl) {
    opacity: .45;
}

/* Cancelaciones: Suspensiva and Definitiva each cancel the rest (incl. each other). */
form.is-solo-susp .row > [class*="col-"]:not(.filter-susp),
form.is-solo-def .row > [class*="col-"]:not(.filter-def) {
    opacity: .45;
}

/* ===== Dashboard de operaciones ===== */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.dash-card {
    margin-bottom: 0;
}

/* The chart fills a sized box (Chart.js needs an explicit container height). */
.dash-chart {
    position: relative;
    height: 300px;
}

/* Un ranking de 10 barras horizontales no entra en el alto estándar sin apretarse. */
.dash-chart--alto { height: 380px; }

@media (min-width: 768px) {
    .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-card--wide { grid-column: span 2; }
}

/* ---- Indicadores Kit Maria: tarjetas de totales ----
   Cuatro tarjetas de igual peso visual arriba de los gráficos. Cada una lleva su color en
   --km-kpi-color (el mismo que ese tipo de operación tiene en la torta), así el ojo une la
   tarjeta con su porción del gráfico sin tener que leer. */
.km-kpis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .km-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .km-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.km-kpi {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding: 1rem 1.1rem;
    /* La franja de color va arriba y no como borde izquierdo: con cuatro tarjetas en fila,
       el borde lateral se lee como separador entre ellas en vez de como identidad de cada una. */
    border-top: 3px solid var(--km-kpi-color, var(--app-accent));
}

.km-kpi__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.km-kpi__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--app-navy);
}

.km-kpi__badge {
    font-size: .72rem;
    font-weight: 600;
    color: #6b7891;
    background: #f3f6fb;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    padding: .1rem .5rem;
    white-space: nowrap;
}

.km-kpi__body {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* Concepto a la izquierda, importe a la derecha. Cuando un concepto tiene más de una divisa
   se repite la fila con la etiqueta vacía, así los importes quedan alineados en columna. */
.km-kpi__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: .85rem;
    color: #4a5568;
}

.km-kpi__line--vacia { color: #9aa4b2; }

/* Tabulares: los importes de varias filas tienen que alinearse dígito con dígito. */
.km-kpi__monto {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--app-navy);
    white-space: nowrap;
}

.km-kpi__monto em {
    font-style: normal;
    font-weight: 700;
    font-size: .72rem;
    color: #6b7891;
    margin-right: .15rem;
}

.km-kpi__body--grande {
    flex: 1;
    flex-direction: row;
    align-items: baseline;
    gap: .4rem;
}

.km-kpi__grande {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--app-navy);
    font-variant-numeric: tabular-nums;
}

.km-kpi__unidad {
    font-size: .9rem;
    font-weight: 600;
    color: #6b7891;
}

@media (min-width: 992px) {
    .dash-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .dash-card { grid-column: span 4; }
    .dash-card--wide { grid-column: span 8; }
    .dash-card--half { grid-column: span 6; }
}

/* Estadísticas hub report cards */
.est-card {
    border: 1px solid #dbe4f0;
    transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}

.est-card:hover {
    border-color: var(--app-accent);
    box-shadow: 0 4px 14px rgba(31, 58, 95, .12);
    transform: translateY(-1px);
}

/* Highlighted "Fecha Ofic. desde/hasta" pair (#6) */
.filter-range-hl {
    background: #eef4ff;
    border: 1px solid #cadcff;
    border-radius: 10px;
    padding: .3rem .6rem .5rem;
}

.filter-range-hl .form-label {
    color: var(--app-navy);
    font-weight: 700;
}

/* Estado refresh icon (#7) */
.estado-value {
    vertical-align: middle;
}

.estado-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: .35rem;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--app-accent);
    cursor: pointer;
    vertical-align: middle;
    transition: background .15s ease, color .15s ease;
}

.estado-refresh:hover {
    background: rgba(47, 111, 237, .14);
    color: #1d5bd6;
}

.estado-refresh:disabled {
    opacity: .55;
    cursor: default;
}

.estado-refresh--spin svg {
    animation: app-spin .8s linear infinite;
}

/* ============================ Inline-editable cells (Interno / Referencia) ============================ */
/* The cell fills the column so the pencil is always pinned to the right edge,
   regardless of the value's length. The two columns get a consistent min-width
   so the icons line up across rows. */
.results-table th[data-col="identificadorPropio"],
.results-table td[data-col="identificadorPropio"],
.results-table th[data-col="nroReferenciaInterna"],
.results-table td[data-col="nroReferenciaInterna"] {
    min-width: 150px;
}

.editable-cell {
    display: flex;
    align-items: center;
    gap: .3rem;
    width: 100%;
}

.editable-cell__value {
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* Push the pencil to the right border, leaving the value on the left. */
.editable-cell__edit {
    margin-left: auto;
}

.editable-cell__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--app-accent);
    cursor: pointer;
    opacity: .55;
    flex: 0 0 auto;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.editable-cell__edit:hover {
    background: rgba(47, 111, 237, .14);
    color: #1d5bd6;
    opacity: 1;
}

/* Reveal the pencil fully when hovering the row, so it's discoverable but quiet. */
.results-table tbody tr:hover .editable-cell__edit {
    opacity: 1;
}

.editable-cell.is-editing {
    gap: .25rem;
}

.editable-cell__input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 220px;
    padding: .15rem .4rem;
    font-size: .82rem;
    text-align: left;
    border: 1px solid var(--app-accent);
    border-radius: 5px;
    box-shadow: 0 0 0 2px rgba(47, 111, 237, .14);
}

.editable-cell__save,
.editable-cell__cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: filter .15s ease;
}

.editable-cell__save {
    background: #1b7f4b;
    color: #fff;
}

.editable-cell__cancel {
    background: #e6e9ef;
    color: #495267;
}

.editable-cell__save:hover,
.editable-cell__cancel:hover {
    filter: brightness(1.06);
}

/* ============================ Buttons / labels / misc UI ============================ */
.btn-icon {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: .4rem;
    flex: 0 0 auto;
}

/* #2 Search button — larger and eye-catching */
.btn-search {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    padding: .55rem 1.6rem;
    box-shadow: 0 8px 20px -6px rgba(47, 111, 237, .6);
    transition: transform .12s ease, box-shadow .18s ease, filter .15s ease;
}

.btn-search:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -6px rgba(47, 111, 237, .65);
}

/* #3 "Más filtros" button — prominent */
.btn-more-filters {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #fff;
    background: var(--app-accent);
    border: 1px solid var(--app-accent);
}

.btn-more-filters:hover {
    background: #1d5bd6;
    border-color: #1d5bd6;
    color: #fff;
}

.btn-more-filters .btn-icon {
    width: 15px;
    height: 15px;
}

/* "Más filtros" (re-open collapsed filters after a search) — made eye-catching
   so it isn't lost against the results. Warm amber stands out over the blue UI. */
.btn-edit-filters {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    color: #fff;
    background: #ef6c00;
    border: 1px solid #ef6c00;
    box-shadow: 0 6px 16px -6px rgba(239, 108, 0, .7);
    transition: transform .12s ease, box-shadow .18s ease, filter .15s ease;
}

.btn-edit-filters:hover,
.btn-edit-filters:focus {
    color: #fff;
    background: #e05f00;
    border-color: #e05f00;
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(239, 108, 0, .75);
}

/* #6 Bold all filter labels */
#filterForm .form-label {
    font-weight: 700;
}

/* #4 Center table titles + values, #8 slightly larger headers */
.results-table th,
.results-table td {
    text-align: center;
    vertical-align: middle;
}

.results-table thead th {
    font-size: .95rem;
    padding-top: .7rem;
    padding-bottom: .7rem;
}

/* #9 Estado "CONSULTANDO ARCA" loading text (plain — no colour/italics) */
.estado-value--loading {
    white-space: nowrap;
}

/* Fixed Estado column width so "CONSULTANDO ARCA" doesn't stretch/compress it */
.results-table th[data-col="estadoDeclaracion"],
.results-table td[data-col="estadoDeclaracion"] {
    min-width: 172px;
    width: 172px;
}

/* #7 Username copy (top bar) */
.app-topbar__username {
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    padding: .15rem .45rem;
    transition: background .15s ease;
}

.app-topbar__username:hover {
    background: rgba(47, 111, 237, .1);
}

.app-topbar__username.is-copied::after {
    content: "¡Copiado!";
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #1b7f4b;
    color: #fff;
    padding: .2rem .5rem;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 1050;
}

/* Logout ("Cerrar sesión") button in the top bar */
.app-logout {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1;
    color: var(--app-navy);
    background: #fff;
    border: 1.5px solid #d7dfea;
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.app-logout__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.app-logout:hover {
    color: #fff;
    background: #d64545;
    border-color: #d64545;
    box-shadow: 0 4px 12px rgba(214, 69, 69, .28);
}

.app-logout:active {
    transform: translateY(1px);
}

.app-logout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(214, 69, 69, .35);
}

/* On narrow screens the label collapses, leaving just the icon. */
@media (max-width: 520px) {
    .app-logout__label {
        display: none;
    }

    .app-logout {
        padding: .4rem;
    }
}

/* #5 Scroll-to-top button */
.scroll-top {
    position: fixed;
    right: 1.5rem;
    /* Stacked above the WhatsApp button, which owns the bottom-right corner. Clears
       both the 60px button and the 16px translateY of this button's hidden state. */
    bottom: 7.5rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--app-accent);
    color: #fff;
    box-shadow: 0 10px 26px -6px rgba(16, 24, 40, .45);
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, background .15s ease;
}

.scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-top:hover {
    background: #1d5bd6;
}

.scroll-top__icon {
    width: 22px;
    height: 22px;
}

/* Hover hint (slides in to the left of the button) */
.scroll-top__label {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: var(--app-navy);
    color: #fff;
    padding: .3rem .6rem;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.scroll-top:hover .scroll-top__label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* #5 View-items icon + subtable */
.items-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: .25rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--app-accent);
    cursor: pointer;
    vertical-align: middle;
    transition: background .15s ease, color .15s ease;
}

.items-icon:hover {
    background: rgba(47, 111, 237, .12);
    color: #1d5bd6;
}

.items-table-wrap {
    max-height: 40vh;
    overflow: auto;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: #fff;
}

.items-table {
    margin-bottom: 0;
    font-size: .82rem;
    white-space: nowrap;
}

.items-table thead th {
    position: sticky;
    top: 0;
    color: #fff;
    font-weight: 600;
    z-index: 1;
}

/* Distinct, lighter header per tier (main table stays deep navy). The chained
   class raises specificity above the ancestor `.results-table thead th` rule,
   since these tables are nested inside a results-table row. */
.items-table.items-table--level1 thead th {
    background: #5f7196;
}

.items-table.items-table--level2 thead th {
    background: #3f8a80;
}

.items-table th,
.items-table td {
    text-align: center;
    vertical-align: middle;
}

.items-table .text-end-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Narrow leading column that holds the per-item "view subitems" toggle. */
.items-table .items-lead-col {
    width: 34px;
    padding-left: .35rem;
    padding-right: .35rem;
}

.subitem-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #3f8a80;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.subitem-icon:hover {
    background: rgba(63, 138, 128, .14);
    color: #2f6f68;
}

/* ============================ Results table ============================ */
.results-table-wrap {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--app-border);
    border-radius: 10px;
}

/* Wider (≈50%) scrollbars so the horizontal bar is easier to grab */
.results-table-wrap::-webkit-scrollbar {
    height: 22px;
    width: 22px;
}

.results-table-wrap::-webkit-scrollbar-track {
    background: #eef1f6;
    border-radius: 10px;
}

.results-table-wrap::-webkit-scrollbar-thumb {
    background: #9aa7bd;
    border: 4px solid #eef1f6;
    border-radius: 10px;
    background-clip: padding-box;
}

.results-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #7d8ba6;
    background-clip: padding-box;
}

.results-table {
    margin-bottom: 0;
    font-size: .85rem;
    white-space: nowrap;
}

.results-table thead th {
    position: sticky;
    top: 0;
    background: var(--app-navy);
    color: #fff;
    font-weight: 600;
    z-index: 1;
}

.text-end-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ============================ Loading overlay ============================ */
/* Sits above every modal that can start a request behind it — .digi-modal (2050)
   included — otherwise the spinner and its Cancelar button hide behind the open
   modal and the page looks frozen. Only .app-confirm (2100) outranks it. */
.app-loading {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(22, 43, 71, .55);
    backdrop-filter: blur(2px);
    z-index: 2060;
    align-items: center;
    justify-content: center;
}

.app-loading.is-visible {
    display: flex;
}

.app-loading__card {
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem 2.25rem;
    text-align: center;
    min-width: 280px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

.app-loading__spinner {
    width: 46px;
    height: 46px;
    margin: 0 auto .9rem;
    border: 4px solid #dbe3f0;
    border-top-color: var(--app-accent);
    border-radius: 50%;
    animation: app-spin .8s linear infinite;
}

@keyframes app-spin {
    to { transform: rotate(360deg); }
}

.app-loading__text {
    font-weight: 600;
    color: var(--app-navy);
}

.app-loading__timer {
    font-size: .85rem;
    color: #6b7891;
    margin-top: .35rem;
}

/* Revealed when a request outlives apiFetch's slowNoticeMs; the request is still
   running, so this informs without interrupting. */
.app-loading__notice {
    max-width: 380px;
    margin: .75rem auto 0;
    padding: .6rem .75rem;
    background: #fff8e6;
    border: 1px solid #f0d79a;
    border-radius: 8px;
    color: #6b5312;
    font-size: .82rem;
    line-height: 1.45;
    text-align: left;
}

.app-loading__notice a { color: #1f6f3f; font-weight: 700; }

/* ============================ Confirm dialog (styled window.confirm) ============================ */
.app-confirm {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2100;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(22, 43, 71, .55);
    backdrop-filter: blur(2px);
}

.app-confirm.is-visible {
    display: flex;
}

.app-confirm__card {
    width: 100%;
    max-width: 430px;
    background: #fff;
    border-radius: 16px;
    padding: 1.75rem 1.75rem 1.5rem;
    text-align: center;
    box-shadow: 0 20px 55px rgba(16, 24, 40, .35);
    animation: app-confirm-in .18s ease-out;
}

@keyframes app-confirm-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.app-confirm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    background: #fff5e6;
    color: #ef6c00;
}

.app-confirm__icon svg {
    width: 28px;
    height: 28px;
}

.app-confirm__title {
    margin: 0 0 .5rem;
    font-weight: 700;
    color: var(--app-navy);
}

.app-confirm__message {
    margin: 0 0 1rem;
    color: #4a5769;
    font-size: .95rem;
}

.app-confirm__detail {
    margin: 0 auto 1.25rem;
    padding: .6rem .9rem;
    background: #eef4ff;
    border: 1px solid #cadcff;
    border-radius: 10px;
    max-width: 100%;
}

.app-confirm__detail-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7891;
    margin-bottom: .15rem;
}

.app-confirm__detail-value {
    display: block;
    font-weight: 700;
    color: var(--app-navy);
    word-break: break-word;
}

.app-confirm__actions {
    display: flex;
    justify-content: center;
    gap: .6rem;
}

.app-confirm__actions .btn {
    min-width: 130px;
    font-weight: 600;
}

/* ============================ Reportes (custom report builder) ============================ */

/* ---- Stages (1 Armá tu reporte · 2 Filtros · 3 Resultados) ---- */
.report-stage {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.report-stage__head {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem 1rem;
    background: #f6f8fc;
    border-bottom: 1px solid var(--app-border);
}

/* The step number: the thing that makes the stages read as an order. */
.report-stage__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--app-navy);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
}

.report-stage__heading { flex: 1 1 auto; min-width: 0; }

.report-stage__title {
    margin: 0 0 .15rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--app-navy);
}

.report-stage__optional { font-weight: 600; color: #6b7891; font-size: .86rem; }
.report-stage__hint { color: #6b7891; font-size: .85rem; }
.report-stage__action { flex: 0 0 auto; align-self: center; }
.report-stage__body { padding: 1rem; }

/* Stage 2 is called out: filters are what keep a report from timing out. */
.report-stage--filters {
    border-color: #b9cdf0;
    box-shadow: 0 0 0 3px rgba(47, 111, 237, .10);
}

.report-stage--filters .report-stage__head {
    background: linear-gradient(180deg, #eaf1fd 0%, #e2ebfb 100%);
    border-bottom-color: #b9cdf0;
}

.report-stage--filters .report-stage__num { background: var(--app-accent); }

/* ---- Collapsible stages (Visualizar reportes) ----
   Columnas y Filtros arrancan plegados: si no, la etapa de resultados —donde está
   el botón Buscar— queda tan abajo que no se ve. */
.report-stage--collapsible > .report-stage__head { cursor: pointer; }
.report-stage--collapsible > .report-stage__head:hover { filter: brightness(.985); }

.report-stage__summary {
    flex: 0 0 auto;
    align-self: center;
    color: #6b7891;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.report-stage__chevron {
    flex: 0 0 auto;
    align-self: center;
    color: var(--app-navy);
    font-size: .75rem;
    line-height: 1;
    transition: transform .15s ease;
}

.report-stage.is-collapsed > .report-stage__head { border-bottom: 0; }
.report-stage.is-collapsed > .report-stage__body { display: none; }
.report-stage.is-collapsed .report-stage__chevron { transform: rotate(-90deg); }
/* Plegada, la etapa se reduce al título + el resumen: la ayuda y el botón de la
   cabecera hablan de algo que no está a la vista. */
.report-stage.is-collapsed .report-stage__hint,
.report-stage.is-collapsed .report-stage__action { display: none; }

/* ---- Stage 3 actions ---- */
.report-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.report-actions__save {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    padding-left: .75rem;
    border-left: 1px solid var(--app-border);
}

.report-actions__save input { min-width: 210px; }
.report-actions__save .btn { white-space: nowrap; }

/* Saving a report was easy to miss as an outline button, so it gets a solid
   amber treatment that reads as an action without competing with the primary
   (blue = run) or the export (green). */
.btn-save {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #d98324;
    border: 1px solid #c0721c;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .10);
}

.btn-save:hover,
.btn-save:focus {
    background: #c0721c;
    border-color: #a5620f;
    color: #fff;
}

.btn-save:focus-visible { outline: 3px solid rgba(217, 131, 36, .35); outline-offset: 1px; }
.btn-save .btn-icon { width: 16px; height: 16px; flex: 0 0 auto; }

/* The "found" total sits next to "mostrados" and is the number users act on. */
.summary-stat--total .summary-stat__value { color: var(--app-accent); }

/* ---- Sortable result headers ----
   These sit on the navy `.results-table thead th` (white text), so the hover and
   sorted states have to stay dark or the label disappears. Sorted uses the accent,
   matching how `col-hl` marks a highlighted column. */
/* These backgrounds MUST be opaque. `background` replaces the navy set by
   `.results-table thead th` rather than layering over it, so a translucent white
   composites against the page (white) and the white label disappears. */
.report-th { cursor: pointer; user-select: none; white-space: nowrap; }
.report-th:hover { background: #33587f; }
.report-th:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.report-th.is-sorted { background: var(--app-accent); }
.report-th.is-sorted:hover { background: #2560d4; }

.report-th__inner { display: inline-flex; align-items: center; gap: .3rem; }
.report-th.text-end-num .report-th__inner { justify-content: flex-end; }

.report-sort__icon {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .55);
    transition: color .12s ease;
}

.report-th:hover .report-sort__icon,
.report-th.is-sorted .report-sort__icon { color: #fff; }

@media (max-width: 700px) {
    .report-actions__save { margin-left: 0; padding-left: 0; border-left: none; width: 100%; }
    .report-actions__save input { flex: 1 1 auto; min-width: 0; }
}

.report-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .report-builder { grid-template-columns: 1fr; }
}

.report-builder__subtitle {
    font-weight: 700;
    color: var(--app-navy);
    margin-bottom: .6rem;
}

.report-empty,
.report-loading,
.report-error {
    padding: 1rem;
    color: #6b7891;
    font-size: .9rem;
    text-align: center;
    background: #f6f8fc;
    border: 1px dashed var(--app-border);
    border-radius: 10px;
}

.report-error { color: #b23b3b; border-color: #e9c3c3; background: #fdf3f3; }

/* Table badges by level (carátula / ítem / subítem). Sized 30% up from the
   original .72rem so the table a column comes from reads at a glance. */
.report-badge {
    display: inline-flex;
    align-items: center;
    padding: .16rem .62rem;
    border-radius: 999px;
    font-size: .936rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.report-badge--l0 { background: #1f3a5f; }
.report-badge--l1 { background: #5f7196; }
.report-badge--l2 { background: #3f8a80; }

/* "Carátula documentos" y "Carátula liquidación" son de nivel carátula pero no son
   tablas: se distinguen para que en la lista de columnas elegidas se vea de dónde
   sale cada una. */
.report-badge--pivot { background: #8a5a2b; }

/* ---- Left: available tables (accordion) ---- */
.report-tables { display: flex; flex-direction: column; gap: .6rem; }

.report-table {
    border: 1px solid var(--app-border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.report-table__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem .8rem;
    border: none;
    background: #f2f5fa;
    cursor: pointer;
    text-align: left;
}

.report-table__head:hover { background: #e9eff8; }

.report-table__meta { color: #6b7891; font-size: .78rem; }

.report-table__chevron { margin-left: auto; color: #6b7891; transition: transform .15s ease; }
.report-table.is-open .report-table__chevron { transform: rotate(180deg); }

.report-table__body { display: none; padding: .6rem .8rem .8rem; }
.report-table.is-open .report-table__body { display: block; }

.report-table__search { margin-bottom: .5rem; }

/* Aclaración dentro de las pseudo-tablas pivoteadas: explica que cada opción elegida
   es una columna y que el reporte no repite líneas. */
.report-table__note {
    margin: 0 0 .5rem;
    padding: .45rem .6rem;
    border-radius: 8px;
    background: #fdf6ee;
    border: 1px solid #edd9c2;
    color: #6b533a;
    font-size: .8rem;
    line-height: 1.35;
}


.report-table__cols {
    max-height: 260px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.report-col {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .28rem .4rem;
    border-radius: 6px;
    cursor: pointer;
    margin: 0;
}

.report-col:hover { background: #f2f5fa; }
.report-col input { flex: 0 0 auto; }
.report-col__name { flex: 1 1 auto; font-size: .85rem; color: #24303f; }
.report-col__type { flex: 0 0 auto; font-size: .7rem; color: #8794ab; text-transform: uppercase; letter-spacing: .3px; }

/* ---- Right: selected columns (reorderable) ---- */
.report-selected { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }

.report-selected__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 10px;
}

.report-selected__item.is-dragging { opacity: .5; }
.report-selected__item.is-drop-target { border-color: var(--app-accent); box-shadow: 0 0 0 2px rgba(47, 111, 237, .18); }

.report-selected__handle { cursor: grab; color: #9aa7bd; font-weight: 700; letter-spacing: -2px; user-select: none; }

.report-selected__origin { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; min-width: 0; }
.report-selected__col { font-size: .82rem; color: #24303f; white-space: nowrap; }
.report-selected__label { flex: 1 1 auto; min-width: 90px; }

.report-selected__moves { display: inline-flex; flex-direction: column; gap: 1px; flex: 0 0 auto; }

.report-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 15px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #6b7891;
    cursor: pointer;
    font-size: .6rem;
    line-height: 1;
}

.report-icon-btn:hover { background: rgba(47, 111, 237, .14); color: var(--app-accent); }

.report-selected__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #c0563f;
    cursor: pointer;
    flex: 0 0 auto;
}

.report-selected__remove:hover { background: rgba(198, 40, 40, .12); }

/* ---- Filters ---- */
.report-filters { display: flex; flex-direction: column; gap: .5rem; }

.report-filter {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.report-filter .js-filter-col { flex: 1 1 240px; min-width: 180px; }
.report-filter .js-filter-op { flex: 0 0 160px; }
.report-filter__values { display: inline-flex; align-items: center; gap: .4rem; flex: 1 1 240px; }
.report-filter__values input { flex: 1 1 auto; min-width: 90px; }
.report-filter__and { color: #6b7891; font-size: .85rem; }
.report-filter__novalue { color: #9aa7bd; }

/* The mandatory FechaOficializacion filter: the date is editable, the row isn't
   removable, so it gets fixed labels instead of the column/operator selects. */
.report-filter--locked {
    padding: .5rem .6rem;
    background: #fff;
    border: 1px solid #b9cdf0;
    border-radius: 10px;
}

.report-filter__fixed { display: inline-flex; align-items: center; gap: .4rem; flex: 1 1 240px; min-width: 180px; }
.report-filter__fixed-col { font-size: .85rem; font-weight: 600; color: #24303f; }

.report-filter__fixed-op {
    flex: 0 0 160px;
    font-size: .85rem;
    font-weight: 600;
    color: #6b7891;
}

.report-filter__lock {
    flex: 0 0 auto;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #e6edfa;
    color: #2f4d80;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: help;
}

/* Visualizador PSAD: the digitalización cell when there's nothing to open. */
.psad-sin-digi { color: #8794ab; font-size: .82rem; font-style: italic; white-space: nowrap; }

/* Tinted plate rather than an outline button: on the white table row the outline
   variant left the label washed out. Hover promotes it to the solid accent. */
.digi-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    background: #dfe9fb;
    border: 1px solid #b4ccf5;
    color: #1b4fb8;
    font-weight: 600;
}

    .digi-btn:hover,
    .digi-btn:focus-visible {
        background: var(--app-accent);
        border-color: var(--app-accent);
        color: #fff;
    }

.digi-btn__icon { width: 14px; height: 14px; flex: 0 0 auto; }

/* ---- Digitalizaciones viewer ---- */
.digi-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2050;
    background: rgba(22, 43, 71, .55);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.digi-modal.is-visible { display: flex; }

.digi-modal__card {
    display: flex;
    flex-direction: column;
    width: min(1200px, 100%);
    height: min(90vh, 100%);
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.digi-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.1rem;
    background: #f6f8fc;
    border-bottom: 1px solid var(--app-border);
}

.digi-modal__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--app-navy); }
.digi-modal__nro { font-size: .82rem; color: #6b7891; }

.digi-modal__close {
    border: none;
    background: transparent;
    color: #6b7891;
    font-size: 1rem;
    cursor: pointer;
    padding: .2rem .4rem;
    border-radius: 6px;
}

.digi-modal__close:hover { background: rgba(198, 40, 40, .12); color: #c0563f; }

/* Documents left, preview right — the split the viewer is built around. */
.digi-modal__body { display: flex; flex: 1 1 auto; min-height: 0; }

.digi-modal__side {
    flex: 0 0 240px;
    padding: .9rem;
    border-right: 1px solid var(--app-border);
    background: #fbfcfe;
    overflow: auto;
}

.digi-modal__side-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #8794ab;
    margin-bottom: .5rem;
}

.digi-botones { display: flex; flex-direction: column; gap: .35rem; }

.digi-doc {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: #fff;
    color: #24303f;
    font-size: .85rem;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.digi-doc:hover:not(.is-disabled) { background: #eaf1fd; border-color: #b9cdf0; }
.digi-doc.is-active { background: var(--app-accent); border-color: var(--app-accent); color: #fff; }

/* Disabled means the familia has no PDF — visibly present, not clickable. */
.digi-doc.is-disabled { opacity: .45; cursor: not-allowed; background: #f4f6f9; }
.digi-doc .digi-btn__icon { width: 15px; height: 15px; }

.digi-modal__preview { flex: 1 1 auto; min-width: 0; position: relative; background: #eef1f6; }
.digi-modal__preview iframe { width: 100%; height: 100%; border: none; display: block; }

.digi-modal__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7891;
    font-size: .9rem;
    padding: 1rem;
    text-align: center;
}

@media (max-width: 800px) {
    .digi-modal__body { flex-direction: column; }
    .digi-modal__side { flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--app-border); }
    .digi-botones { flex-direction: row; flex-wrap: wrap; }
    .digi-doc { width: auto; }
}

/* ---- Descarga masiva (Visualizador PSAD) ----
   Same shell as .digi-modal, but the body is one scrolling table with a sticky header:
   the column checks have to stay reachable with a thousand rows below them. */
.dm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2050;
    background: rgba(22, 43, 71, .55);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.dm-modal.is-visible { display: flex; }

.dm-modal__card {
    display: flex;
    flex-direction: column;
    width: min(1150px, 100%);
    height: min(90vh, 100%);
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.dm-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.1rem;
    background: #f6f8fc;
    border-bottom: 1px solid var(--app-border);
}

.dm-modal__heading { display: flex; align-items: center; gap: .75rem; }

/* The title carries the modal: big, navy, with the download mark beside it. */
.dm-modal__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--app-accent) 0%, #1d5bd6 100%);
    box-shadow: 0 8px 18px -8px rgba(47, 111, 237, .8);
}

.dm-modal__badge svg { width: 1.25rem; height: 1.25rem; }

.dm-modal__title {
    margin: 0 0 .1rem;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--app-navy);
}

.dm-modal__sub { font-size: .82rem; color: #6b7891; }

.dm-modal__close {
    border: none;
    background: transparent;
    color: #6b7891;
    font-size: 1rem;
    cursor: pointer;
    padding: .2rem .4rem;
    border-radius: 6px;
}

.dm-modal__close:hover { background: rgba(198, 40, 40, .12); color: #c0563f; }

.dm-modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0; }

.dm-table { margin: 0; font-size: .85rem; }

.dm-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eef2f8;
    border-bottom: 2px solid var(--app-border);
    color: var(--app-navy);
    font-weight: 700;
    text-align: center;
    vertical-align: top;
    padding: .5rem .6rem;
    white-space: nowrap;
}

.dm-th-nro { text-align: left !important; }
.dm-th-label { display: block; font-size: .78rem; }

.dm-th-todos {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .35rem;
    font-size: .7rem;
    font-weight: 600;
    color: #6b7891;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.dm-table tbody tr:nth-child(even) { background: #fafbfe; }
.dm-table tbody tr:hover { background: #eef4fd; }

.dm-table td {
    padding: .35rem .6rem;
    border-bottom: 1px solid #eef1f6;
    vertical-align: middle;
}

.dm-nro { white-space: nowrap; }
.dm-check { text-align: center; width: 7rem; }
.dm-check input { width: 1.05rem; height: 1.05rem; cursor: pointer; }

.dm-tag {
    display: inline-block;
    margin-left: .45rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: #eef1f6;
    color: #6b7891;
    font-size: .68rem;
    font-weight: 600;
}

.dm-tag--grande { background: #fdf1e3; color: #a55b12; }

.dm-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1.1rem;
    background: #f6f8fc;
    border-top: 1px solid var(--app-border);
}

.dm-resumen { font-size: .85rem; font-weight: 600; color: var(--app-navy); }
.dm-resumen.is-error { color: #c0563f; }
.dm-progreso { font-size: .78rem; color: #6b7891; margin-top: .2rem; }
.dm-foot__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 800px) {
    .dm-check { width: auto; }
    .dm-modal__foot { justify-content: flex-start; }
}

/* ---- Pill buttons (Descarga masiva) ----
   The download actions are the point of the modal, so they get the app's gradient
   treatment instead of a flat Bootstrap button. They don't carry .btn-primary and
   friends: only Bootstrap's bare .btn, so these rules own the look outright. */
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: none;
    border-radius: 999px;
    padding: .55rem 1.4rem;
    font-weight: 600;
    letter-spacing: .2px;
    transition: transform .12s ease, box-shadow .18s ease, filter .15s ease, background .15s ease;
}

.btn-pill__icon { width: 16px; height: 16px; flex: 0 0 auto; }

.btn-pill--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--app-accent) 0%, #1d5bd6 100%);
    box-shadow: 0 8px 20px -6px rgba(47, 111, 237, .55);
}

.btn-pill--primary:hover:not(:disabled) {
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -6px rgba(47, 111, 237, .65);
}

/* Violet keeps it apart from Buscar (blue) and Exportar (green) in the same bar. */
.btn-pill--masiva {
    color: #fff;
    background: linear-gradient(135deg, #7b4bd8 0%, #4527a0 100%);
    box-shadow: 0 8px 20px -6px rgba(94, 53, 177, .6);
}

.btn-pill--masiva:hover:not(:disabled) {
    color: #fff;
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -6px rgba(94, 53, 177, .7);
}

.btn-pill--ghost {
    color: var(--app-navy);
    background: #fff;
    border: 1.5px solid #ccd9ef;
}

.btn-pill--ghost:hover:not(:disabled) {
    color: var(--app-accent);
    border-color: var(--app-accent);
    background: #f3f8ff;
    transform: translateY(-1px);
}

.btn-pill:disabled {
    filter: grayscale(.45);
    opacity: .55;
    box-shadow: none;
    transform: none;
}

/* ---- Visualizar reportes: saved report list ---- */
.saved-list { display: flex; flex-direction: column; gap: .5rem; }

.saved-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .8rem;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 10px;
}

/* La fila entera abre el reporte (no hay botón "Abrir"): mano al pasar por encima y
   foco visible, como cualquier botón. */
.saved-item { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.saved-item:hover { border-color: #b9cdf0; background: #f1f6fd; }
.saved-item:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.saved-item.is-current { border-color: var(--app-accent); box-shadow: 0 0 0 2px rgba(47, 111, 237, .14); }

.saved-item__main { flex: 1 1 auto; min-width: 0; }
.saved-item__name { font-weight: 700; color: var(--app-navy); }
.saved-item__meta { color: #6b7891; font-size: .78rem; }

/* Reemplaza al viejo botón "Abierto": el estado se muestra, no se clickea. */
.saved-item__open {
    margin-left: .45rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--app-accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    vertical-align: 1px;
}

.saved-item__actions { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; cursor: default; }

/* ============================ WhatsApp chatbot (FAB) ============================
   Mirrors the floating button on alpha2000.com.ar: WhatsApp green, pulsing ring and a
   "¡Escribinos!" tooltip on hover. `animate-ping` there is Tailwind's keyframe, so it
   is reproduced here rather than pulled in. */
.wa-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1045;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 12px 30px -6px rgba(0, 0, 0, .45);
    transition: transform .3s ease, box-shadow .3s ease;
}

.wa-fab:hover {
    transform: scale(1.1);
    color: #fff;
    box-shadow: 0 14px 34px -4px rgba(37, 211, 102, .5);
}

/* The glyph sets its own colour rather than inheriting from the anchor. The default
   template leftover Views/Shared/_Layout.cshtml.css carries `a[b-<scope>]
   { color: #0077cc }`, which outranks `.wa-fab` (attribute+type beats one class) but
   not `.wa-fab:hover` — so the logo came out blue and only turned white under the
   mouse. The svg is not an <a>, so that rule can't reach it here. */
.wa-fab__icon {
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 1;
    color: #fff;
}

/* The expanding ring — Tailwind's `animate-ping`. */
.wa-fab__ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25D366;
    opacity: .4;
    animation: wa-ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes wa-ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* Tooltip to the left of the button, revealed on hover/focus. */
.wa-fab__tip {
    position: absolute;
    right: 100%;
    margin-right: 1rem;
    padding: .35rem .75rem;
    border-radius: 8px;
    background: var(--app-navy);
    color: #fff;
    font-size: .8rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .3);
}

.wa-fab:hover .wa-fab__tip,
.wa-fab:focus-visible .wa-fab__tip { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .wa-fab__ping { animation: none; }
    .wa-fab:hover { transform: none; }
}

/* ============================ Footer ============================
   Mirrors the alpha2000.com.ar footer (same blocks, same links) but recoloured to
   this app: the sidebar's navy instead of slate-950, and the accent blue instead of
   the site's brand red on hover. */
.app-footer {
    margin-top: auto;
    background: linear-gradient(180deg, var(--app-navy) 0%, var(--app-navy-dark) 100%);
    border-top: 1px solid #2c4a72;
    padding: 2rem 1.5rem;
}

.app-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: space-between;
}

@media (min-width: 992px) {
    .app-footer__inner { flex-direction: row; align-items: center; }
}

/* ---- Brand / social ---- */
.app-footer__brand { flex: 0 0 auto; }
.app-footer__logo { height: 38px; width: auto; object-fit: contain; }

.app-footer__copy {
    margin: .5rem 0 0;
    color: #8fa3c0;
    font-size: .8rem;
    line-height: 1.5;
}

.app-footer__social { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.1rem; }

/* The `.app-footer` prefix is load-bearing: Views/Shared/_Layout.cshtml.css (default
   template leftover) carries `a[b-<scope>] { color: #0077cc }`, which has the same
   specificity as `.app-footer__col a` and is served after this file — so the plain
   class selectors lose and the links render an unreadable blue on the navy. */
.app-footer .app-footer__social a {
    display: inline-flex;
    color: #8fa3c0;
    text-decoration: none;
    transition: color .15s ease, transform .15s ease;
}

.app-footer .app-footer__social a:hover { color: var(--app-accent); transform: translateY(-2px); }
.app-footer__social svg { width: 20px; height: 20px; }

/* ---- Legal links + badges ---- */
.app-footer__right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    width: 100%;
}

@media (min-width: 992px) {
    .app-footer__right { flex-direction: row; align-items: center; gap: 2rem; width: auto; }
}

.app-footer__links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 3rem;
}

@media (min-width: 768px) {
    .app-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.app-footer__col { display: flex; flex-direction: column; gap: .85rem; }

.app-footer .app-footer__col a {
    color: #a9bad4;
    font-size: .8rem;
    text-decoration: none;
    max-width: 320px;
    transition: color .15s ease;
}

.app-footer .app-footer__col a:hover { color: #fff; text-decoration: underline; }

.app-footer__badges { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.app-footer .app-footer__badges a { display: block; height: 86px; transition: opacity .15s ease; }
.app-footer .app-footer__badges a:hover { opacity: .8; }
.app-footer__badges img { height: 100%; width: auto; object-fit: contain; }

/* ============================ Inicio (tool cards) ============================ */
.home-card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }

.home-card:hover {
    border-color: #b9cdf0;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
    transform: translateY(-2px);
}

/* Cards read a bit more like buttons: a soft blue-gray surface that deepens on hover.
   Compact so the whole Inicio fits without scrolling (footer stays visible). */
.home-card .panel__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: .6rem .85rem;
    background: #f6f8fc;
    border-radius: 12px;
    transition: background .15s ease;
}

.home-card:hover .panel__body { background: #eaf1fc; }

/* Bordered cluster grouping the two "reportes" tools. */
.home-group {
    border: 1px solid #cad9f0;
    border-radius: 14px;
    padding: .7rem .8rem;
    background: rgba(47, 111, 237, .035);
}

.home-group__title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #6b7891;
    margin-bottom: .5rem;
}

.home-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: .35rem;
    border-radius: 9px;
    background: var(--app-navy);
    color: #fff;
}

.home-card__icon svg { width: 16px; height: 16px; }

/* A colour per tool, so the cards are told apart at a glance. */
.home-card__icon--oficializaciones { background: #1f3a5f; }
.home-card__icon--generador { background: #2f6fed; }
.home-card__icon--visualizador { background: #3f8a80; }
.home-card__icon--cotizaciones { background: #1f6f3f; }
.home-card__icon--herramientas { background: #d98324; }
.home-card__icon--psad { background: #2f7f9f; }
.home-card__icon--dashboard { background: #5b53c6; }
.home-card__icon--beneficios { background: #1f7a5f; }
.home-card__icon--personalizados { background: #7a5fd9; }
.home-card__icon--enviosmail { background: #b06a1f; }

.home-card__title {
    margin: 0 0 .15rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--app-navy);
}

.home-card__text { color: #6b7891; font-size: .77rem; line-height: 1.25; margin-bottom: .4rem; }
/* Pins every "Abrir" to the bottom so the cards line up despite different text lengths. */
.home-card .btn { margin-top: auto; padding: .18rem .65rem; font-size: .78rem; }

/* ============================ Cotizaciones ============================ */
.cot-hint { color: #6b7891; font-size: .82rem; align-self: center; }

/* ============================ Herramientas ============================ */
.tool {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    overflow: hidden;
}

.tool__head {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem 1rem;
    background: #f6f8fc;
    border-bottom: 1px solid var(--app-border);
}

.tool__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--app-navy);
    color: #fff;
}

.tool__icon svg { width: 18px; height: 18px; }
.tool__heading { flex: 1 1 auto; min-width: 0; }

.tool__title {
    margin: 0 0 .15rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--app-navy);
}

.tool__hint { color: #6b7891; font-size: .85rem; }
.tool__body { padding: 1rem; }

/* ---- Upload ---- */

/* Qué trae la planilla: facturas con su permiso, o sólo permisos. Mismo tratamiento
   que los filtros por estado, que es el otro selector de la pantalla. */
.cierres-modo .btn.is-active {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
}

.cierres-upload {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}

.cierres-upload__field { flex: 1 1 380px; min-width: 260px; }

/* El texto de formato vive fuera de la fila para no correr el botón hacia abajo. */
.cierres-upload__ayuda { margin-top: .4rem; }
.cierres-upload .btn { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.cierres-upload .btn-icon { width: 16px; height: 16px; }

.cierres-example summary { cursor: pointer; color: var(--app-accent); font-size: .85rem; font-weight: 600; }
.cierres-example__table { max-width: 420px; font-size: .82rem; }
.cierres-example__table--permisos { max-width: 240px; }

/* ---- Upload summary ---- */
.cierres-resumen {
    padding: .75rem .9rem;
    background: #f2f7ff;
    border: 1px solid #b9cdf0;
    border-radius: 10px;
}

.cierres-resumen__head { font-weight: 700; color: var(--app-navy); margin-bottom: .4rem; }
.cierres-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

.cierres-chip {
    padding: .15rem .55rem;
    border-radius: 999px;
    background: #e6edfa;
    color: #2f4d80;
    font-size: .78rem;
    font-weight: 600;
}

.cierres-chip.is-ok { background: #e3f4e9; color: #1f6f3f; }

.cierres-rechazos {
    background: #fdf3f3;
    border: 1px solid #e9c3c3;
    border-radius: 8px;
    padding: .6rem .7rem;
}

.cierres-rechazos__title { font-weight: 700; color: #b23b3b; font-size: .85rem; margin-bottom: .3rem; }
.cierres-rechazos table { font-size: .8rem; }

/* ---- Status tables ---- */
.cierres-tabla__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

/* Título + su botón de refresco, como una sola unidad a la izquierda del header. */
.cierres-tabla__title {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* Refrescar es la acción que más se repite cuando se está monitoreando un envío, así
   que va en píldora con el color de acento: se ve sin competir con el azul sólido del
   botón primario de la subida. */
.btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border: 1px solid var(--app-accent);
    border-radius: 999px;
    background: rgba(47, 111, 237, .08);
    color: var(--app-accent);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.btn-refresh:hover,
.btn-refresh:focus {
    background: var(--app-accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -5px rgba(47, 111, 237, .65);
}

.btn-refresh:focus-visible { outline: 3px solid rgba(47, 111, 237, .35); outline-offset: 1px; }

.btn-refresh__icon { width: 14px; height: 14px; flex: 0 0 auto; }

/* Mientras trae los datos: el ícono gira y el botón no acepta otro clic. */
.btn-refresh.is-loading { pointer-events: none; opacity: .7; }
.btn-refresh.is-loading .btn-refresh__icon { animation: cierres-refresh-spin .8s linear infinite; }

@keyframes cierres-refresh-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .btn-refresh { transition: none; }
    .btn-refresh:hover, .btn-refresh:focus { transform: none; }
    .btn-refresh.is-loading .btn-refresh__icon { animation: none; }
}

.cierres-buscar { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.cierres-buscar input { min-width: 190px; }

.cierres-filtros { flex: 0 0 auto; align-self: center; }
.cierres-filtros .btn.is-active { background: var(--app-accent); border-color: var(--app-accent); color: #fff; }

.cierre-estado {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.cierre-estado.is-pendiente { background: #fff3d6; color: #8a6100; }
.cierre-estado.is-cerrada { background: #e3f4e9; color: #1f6f3f; }
.cierre-estado.is-error { background: #fdE3e3; color: #b23b3b; }

/* Result messages can be long; keep the row height sane and show the rest on hover. */
.cierre-msg {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .tool__head { flex-wrap: wrap; }
    .cierres-filtros { width: 100%; }
}

/* ============================ Auth (login / recover) ============================ */
/* Altura fija y sin desborde: la pantalla de login entra entera en la ventana y no scrollea.
   Lo que puede crecer —la lista de novedades— scrollea adentro de su propio panel. */
.auth {
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--app-bg);
}

/* ---- Brand panel ---- */
/* The container-ship photo sits behind the brand copy. A navy scrim on top keeps the
   panel on-palette and stops the busy parts of the photo from fighting the text. */
.auth__brand {
    position: relative;
    display: flex;
    align-items: center;
    padding: 3.5rem;
    color: #fff;
    background-color: var(--app-navy-dark);
    background-image:
        linear-gradient(120deg, rgba(18, 34, 56, .82) 0%, rgba(22, 43, 71, .62) 55%, rgba(31, 58, 95, .45) 100%),
        url("../img/login-ship.jpg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    overflow: hidden;
    isolation: isolate;
}

/* A solid white card over the ship photo. Opaque by design: this is what guarantees the
   copy is readable regardless of what part of the photo falls behind it (the sky and
   water are bright enough that a translucent panel left the bullets under 4.5:1). */
/* 30% larger than the 460px/2.25rem it was, so the panel carries the extra copy. */
.auth__brand-content {
    position: relative;
    z-index: 1;
    max-width: 598px;
    padding: 2.9rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
    /* The panel is white, so the copy has to invert with it — .auth__brand sets
       color:#fff for the panel-on-navy design this replaces. */
    color: #24303f;
    animation: auth-rise .7s cubic-bezier(.2, .7, .2, 1) both;
}

.auth__brand-title {
    font-size: 2.15rem;
    font-weight: 700;
    letter-spacing: -.5px;
    margin: 1.25rem 0 .5rem;
    line-height: 1.15;
    color: var(--app-navy);
}

/* Slightly darker than the usual #6b7891 muted grey, which lands at 4.45:1 on white —
   just under the bar for text this size. */
.auth__brand-tagline {
    color: #5f6c85;
    font-size: 1.05rem;
    line-height: 1.55;
    margin-bottom: 2rem;
}

.auth__brand-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .85rem;
}

.auth__brand-features li {
    position: relative;
    padding-left: 2rem;
    color: #3a4a63;
    line-height: 1.4;
}

.auth__brand-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    font-size: .8rem;
    color: var(--app-accent);
    background: rgba(47, 111, 237, .12);
    border: 1px solid rgba(47, 111, 237, .35);
    border-radius: 50%;
    font-weight: 700;
}

/* ---- Form panel ---- */
/* The blue the brand panel used to carry now lives here, so the login card reads as a
   white sheet on navy. Same family as the sidebar/footer rather than the old
   translucent value, which only made sense composited over the photo. */
.auth__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    /* min-height: 0 deja que el contenido se encoja dentro del alto fijo en vez de
       empujar hacia afuera; overflow auto es la red para ventanas muy bajas, donde es
       preferible scrollear este panel antes que cortar el formulario. */
    min-height: 0;
    overflow: auto;
    background:
        radial-gradient(1000px 500px at 100% 0%, rgba(47, 111, 237, .28), transparent 65%),
        linear-gradient(160deg, #24457a 0%, var(--app-navy) 45%, var(--app-navy-dark) 100%);
}

.auth__form-inner {
    width: 100%;
    max-width: 410px;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    padding: 2.75rem;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 24px 60px -20px rgba(16, 24, 40, .18);
    animation: auth-rise .6s cubic-bezier(.2, .7, .2, 1) both;
}

/* The Alpha 2000 wordmark: a wide (~3.6:1) image, not the square badge it replaced. */
.auth__logo {
    display: block;
    height: 44px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Único logo de marca, centrado en el panel (antes iba junto al de BANK, con divisor). */
.auth__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}


.auth__logo--mobile {
    display: none;
    height: 38px;
    margin: 0 auto 1.25rem;
}

.auth__heading {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--app-navy);
    margin-bottom: .35rem;
}

.auth__subheading {
    color: #6b7891;
    margin-bottom: 1.75rem;
}

/* Refined form controls within the auth card */
.auth__form-inner .form-label {
    font-weight: 600;
    font-size: .85rem;
    color: #3a4a63;
    margin-bottom: .4rem;
}

.auth__form-inner .form-control,
.auth__form-inner .input-group {
    border-radius: 12px;
}

.auth__form-inner .form-control {
    border-color: #dce1ec;
    padding-top: .7rem;
    padding-bottom: .7rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth__form-inner .form-control:hover {
    border-color: #c2cbdb;
}

.auth__form-inner .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.auth__form-inner .input-group:focus-within {
    box-shadow: 0 0 0 0.2rem rgba(47, 111, 237, .18);
    border-radius: 12px;
}

.auth__form-inner .input-group:focus-within .form-control,
.auth__form-inner .input-group:focus-within .auth__toggle {
    border-color: var(--app-accent);
    box-shadow: none;
}

.auth__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7891;
    background: #fff;
    border-color: #dce1ec;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    transition: color .15s ease, background .15s ease;
}

.auth__toggle:hover {
    color: var(--app-accent);
    background: #f4f7ff;
    border-color: #dce1ec;
}

.auth__form-inner .form-check-input {
    border-color: #c2cbdb;
    cursor: pointer;
}

.auth__form-inner .form-check-label {
    color: #4a5772;
    cursor: pointer;
    user-select: none;
}

.auth__link {
    color: var(--app-accent);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    transition: color .15s ease;
}

.auth__link:hover {
    color: #1d5bd6;
    text-decoration: underline;
}

/* Primary submit button */
.auth__form-inner .btn-primary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    background: linear-gradient(135deg, var(--app-accent) 0%, #1d5bd6 100%);
    border: none;
    border-radius: 12px;
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: 0 8px 20px -6px rgba(47, 111, 237, .55);
    transition: transform .12s ease, box-shadow .18s ease, filter .15s ease;
}

.auth__form-inner .btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -6px rgba(47, 111, 237, .6);
}

.auth__form-inner .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px -6px rgba(47, 111, 237, .5);
}

.auth__form-inner .alert-danger {
    border-radius: 12px;
    border-color: #f3c6c6;
    background: #fdecec;
    color: #9b2c2c;
}

@keyframes auth-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes auth-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, 30px) scale(1.08); }
}

/* Stack to a single column on tablets/phones; hide the brand panel. */
@media (max-width: 767.98px) {
    .auth {
        grid-template-columns: 1fr;
    }

    .auth__brand {
        display: none;
    }

    .auth__logo--mobile {
        display: block;
    }

    .auth__form-inner {
        padding: 2.25rem 1.75rem;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth__brand-content,
    .auth__form-inner {
        animation: none;
    }
}

/* ============================ Responsive ============================ */
@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    .app-sidebar.is-open {
        transform: translateX(0);
    }

    .app-main {
        margin-left: 0;
    }

    .app-topbar__toggle {
        display: flex;
    }

    .app-sidebar__backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 1025;
    }
}

/* ===== Canal cell: full name + colored circle (matches the Canal filter) ===== */
.canal-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.canal-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

/* ===== Vertical column borders (left + right) on the data tables ===== */
.results-table th,
.results-table td,
.items-table th,
.items-table td {
    border-left: 1px solid var(--app-border);
    border-right: 1px solid var(--app-border);
}

.results-table thead th,
.items-table thead th {
    border-left-color: rgba(255, 255, 255, .18);
    border-right-color: rgba(255, 255, 255, .18);
}

/* ===== Post-search: collapse filters to the Nro Despacho + date range, enlarge results ===== */
/* Nro Despacho (.filter-hl) stays visible alongside the date range even when compact. */
.filters-compact .panel__body form > .row.g-3 > *:not(.filter-range-hl):not(.filter-hl) {
    display: none !important;
}

.filters-compact #toggleMoreFilters {
    display: none;
}

body.filters-collapsed .results-table-wrap {
    max-height: 80vh;
}

/* ===== Envíos por mail ===== */

/* ---- etapas ----
   Las cuatro etapas se distinguen por una escala de azules pastel que se va saturando de
   la 1 a la 4, más una barra lateral del mismo tono: el orden se lee de un vistazo sin
   depender del número. El azul es el de la app (--app-accent / --app-navy), no un gris
   neutro, para que la pantalla no se vea apagada. */

.em-etapa {
    border-left: 4px solid transparent;
}

.em-etapa .panel__header {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.em-etapa__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
}

.em-etapa--1 {
    border-left-color: #bcd6f5;
}

.em-etapa--1 .panel__header {
    background: linear-gradient(90deg, #f3f8ff 0%, #fbfdff 100%);
}

.em-etapa--1 .em-etapa__numero {
    background: #7aa8e3;
}

.em-etapa--2 {
    border-left-color: #97bfef;
}

.em-etapa--2 .panel__header {
    background: linear-gradient(90deg, #e8f1fe 0%, #f6faff 100%);
}

.em-etapa--2 .em-etapa__numero {
    background: #5a8ed6;
}

.em-etapa--3 {
    border-left-color: #6ea3e6;
}

.em-etapa--3 .panel__header {
    background: linear-gradient(90deg, #dcebfd 0%, #eff6ff 100%);
}

.em-etapa--3 .em-etapa__numero {
    background: #3a72c4;
}

.em-etapa--4 {
    border-left-color: #3d78c9;
}

.em-etapa--4 .panel__header {
    background: linear-gradient(90deg, #cfe2fb 0%, #e6f1ff 100%);
}

.em-etapa--4 .em-etapa__numero {
    background: var(--app-navy);
}

/* ---- Etapas plegables (1 y 2) ----
   Casillas y Reportes se configuran una vez; plegadas dejan a la vista el dashboard y
   el historial, que es lo que se mira todos los días. */
.em-etapa--plegable > .panel__header {
    cursor: pointer;
    user-select: none;
}

.em-etapa--plegable > .panel__header:hover {
    filter: brightness(.97);
}

.em-etapa__resumen {
    margin-left: auto;
    flex: 0 0 auto;
    color: #4d6b93;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.em-etapa__chevron {
    flex: 0 0 auto;
    margin-left: .25rem;
    color: var(--app-navy);
    font-size: .75rem;
    line-height: 1;
    transition: transform .15s ease;
}

/* Sin resumen (todavía no cargó la vista) el chevron igual queda pegado a la derecha. */
.em-etapa__resumen:empty + .em-etapa__chevron {
    margin-left: auto;
}

.em-etapa.is-collapsed > .panel__header { border-bottom: 0; }
.em-etapa.is-collapsed > .panel__body { display: none; }
.em-etapa.is-collapsed .em-etapa__chevron { transform: rotate(-90deg); }

/* ---- dashboard ----
   Los tres gráficos van en una sola línea; recién en pantallas angostas se apilan, porque
   una torta de 200px de ancho no se lee. */

.em-dash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 992px) {
    .em-dash-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.em-dash-card {
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background: #fff;
    padding: .9rem 1rem 1rem;
    min-width: 0;
}

.em-dash-card__titulo {
    font-size: .95rem;
    font-weight: 700;
    color: var(--app-navy);
    margin: 0;
}

.em-dash-card__ayuda {
    font-size: .78rem;
    color: #6b7a8c;
    margin: .15rem 0 .6rem;
}

.em-dash-chart {
    position: relative;
    height: 240px;
}

.em-dash-card__nota {
    font-size: .74rem;
    color: #6b7a8c;
    margin: .5rem 0 0;
}

.em-dash-card__nota:empty {
    margin: 0;
}

.em-dash-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    font-size: .85rem;
    color: #8b98a6;
}

.em-casillas {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.em-casilla {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .75rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background: #fff;
}

.em-casilla--llena {
    border-color: #f0c36d;
    background: #fffaf0;
}

/* Bloqueada por rebotes: se distingue de "llena" porque no es un tope alcanzado sino una
   dirección que no funciona. */
.em-casilla--bloqueada {
    border-color: #e6b0ac;
    background: #fdf5f4;
}

.em-casilla--bloqueada .em-casilla__email {
    color: #a8322c;
    text-decoration: line-through;
}

.em-casilla__aviso {
    flex: 0 0 auto;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #fdeceb;
    color: #a8322c;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.em-casilla__motivo {
    font-size: .78rem;
    color: #a8322c;
}

.em-casilla__datos {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.em-casilla__email {
    font-weight: 600;
    color: var(--app-navy);
    word-break: break-all;
}

.em-casilla__nombre {
    font-size: .82rem;
    color: #6b7a8c;
}

.em-casilla__cupo {
    flex: 0 0 auto;
    font-size: .8rem;
    color: #6b7a8c;
    white-space: nowrap;
}

/* ---- grupos de reportes ---- */

.em-grupo + .em-grupo {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--app-border);
}

.em-grupo__titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--app-navy);
    margin: 0;
}

.em-grupo__ayuda {
    font-size: .82rem;
    color: #6b7a8c;
    margin: .15rem 0 .75rem;
}

.em-grupo__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .6rem;
}

.em-reporte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    text-align: left;
    padding: .6rem .75rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.em-reporte:hover {
    border-color: var(--app-accent);
    box-shadow: 0 2px 6px rgba(47, 111, 237, .12);
}

.em-reporte--programado {
    border-left: 3px solid #2e9e5b;
}

.em-reporte--huerfano {
    border-left: 3px solid #b8434c;
    background: #fdf5f5;
}

.em-reporte__nombre {
    font-weight: 600;
    color: var(--app-navy);
}

.em-reporte__estado {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.em-reporte__estado--activo {
    color: #2e9e5b;
}

.em-reporte__estado--pausado {
    color: #b07b18;
}

.em-reporte__resumen {
    font-size: .78rem;
    color: #6b7a8c;
}

/* ---- modal de configuración ---- */

.em-check-lista {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    max-height: 220px;
    overflow-y: auto;
}

.em-check {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .35rem;
    border-radius: .35rem;
    cursor: pointer;
}

.em-check:hover {
    background: #f4f6f9;
}

.em-check--bloqueada {
    opacity: .6;
    cursor: not-allowed;
}

.em-check__nota {
    font-size: .78rem;
    color: #b07b18;
}

.em-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.em-preset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    text-align: left;
    padding: .5rem .75rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.em-preset:hover {
    border-color: var(--app-accent);
    box-shadow: 0 2px 6px rgba(47, 111, 237, .12);
}

.em-preset__titulo {
    font-weight: 600;
    color: var(--app-navy);
    font-size: .9rem;
}

.em-preset__detalle {
    font-size: .78rem;
    color: #6b7a8c;
}

.em-dias {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.em-dia {
    min-width: 3.2rem;
    padding: .35rem .6rem;
    border: 1px solid var(--app-border);
    border-radius: .4rem;
    background: #fff;
    font-size: .85rem;
    font-weight: 600;
    color: #4a5a6d;
    cursor: pointer;
}

.em-dia--activo {
    background: var(--app-navy);
    border-color: var(--app-navy);
    color: #fff;
}

.em-horarios {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.em-hora {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .3rem .2rem .55rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: #eef3fb;
    font-size: .85rem;
    font-weight: 600;
    color: var(--app-navy);
}

.em-hora__quitar {
    border: 0;
    background: transparent;
    color: #6b7a8c;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0 .25rem;
    cursor: pointer;
}

.em-hora__quitar:hover {
    color: #b8434c;
}

/* ---- historial ---- */

.em-estado {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6b7a8c;
}

.em-estado--enviado {
    color: #2e9e5b;
}

.em-estado--error {
    color: #b8434c;
}

.em-estado--sindatos,
.em-estado--sinscope,
.em-estado--sinacceso,
.em-estado--procesando {
    color: #b07b18;
}

/* ===== Novedades de la plataforma (pantalla de login) =====

   El panel va debajo de la tarjeta de login, bajito, y al pasar el mouse se estira
   hacia arriba hasta cubrirla por completo para poder leer cómodo. Va posicionado en
   absoluto sobre la tarjeta y no como un bloque más del flujo: animar el alto de un
   bloque en flujo empuja todo lo que tiene alrededor en cada cuadro, y acá lo único
   que tiene que moverse es el panel.

   El padding-bottom del stack es lo que le reserva el lugar: como el panel está fuera
   del flujo, sin eso se superpondría a la tarjeta en vez de quedar abajo. */

/* Mismo ancho que la tarjeta (.auth__form-inner tiene max-width: 410px) para que el panel
   quede alineado con ella y no sobresalga por los costados. */
.auth__stack {
    position: relative;
    width: 100%;
    max-width: 410px;
    padding-bottom: 11.5rem;
    max-height: 100%;
}

.auth__novedades {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Colapsado ocupa la franja de abajo; expandido arranca en el borde superior del
       stack, o sea encima de toda la tarjeta de login. */
    top: calc(100% - 10.5rem);
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 24px 60px -20px rgba(16, 24, 40, .18);
    cursor: pointer;
    overflow: hidden;
    transition: top .28s ease, box-shadow .28s ease;
}

.auth__novedades:hover,
.auth__novedades:focus-within,
.auth__novedades.is-open {
    top: 0;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 30px 70px -20px rgba(16, 24, 40, .32);
}

.auth__novedades:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.auth__novedades-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

.auth__novedades-head svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--app-accent);
}

.auth__novedades-titulo {
    font-weight: 700;
    color: var(--app-navy);
    white-space: nowrap;
}

.auth__novedades-badge {
    min-width: 1.4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--app-accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}

.auth__novedades-ayuda {
    flex: 0 0 auto;
    margin: .15rem 0 .6rem;
    font-size: .75rem;
    color: #8b98a6;
}

/* Una vez expandido el cartel de "pasá el mouse" ya cumplió su función. */
.auth__novedades:hover .auth__novedades-ayuda,
.auth__novedades:focus-within .auth__novedades-ayuda,
.auth__novedades.is-open .auth__novedades-ayuda {
    visibility: hidden;
}

.novedades {
    list-style: none;
    margin: 0;
    padding: 0 .35rem 0 0;
    overflow-y: auto;
    flex: 1 1 auto;
}

.novedad {
    padding: .8rem 0;
    border-top: 1px solid var(--app-border);
}

.novedad:first-child {
    border-top: 0;
    padding-top: 0;
}

.novedad__cabecera {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
}

.novedad__titulo {
    font-weight: 700;
    color: var(--app-navy);
}

.novedad__fecha {
    margin-left: auto;
    font-size: .78rem;
    color: #8b98a6;
    white-space: nowrap;
}

.novedad__tag {
    padding: .1rem .45rem;
    border-radius: 999px;
    background: #e9edf3;
    color: #52606d;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.novedad__tag.es-nuevo {
    background: #e3f5ec;
    color: #17794f;
}

.novedad__tag.es-mejora {
    background: #e6eefc;
    color: #1f4fa8;
}

.novedad__tag.es-correccion {
    background: #fdeceb;
    color: #a8322c;
}

/* white-space: la descripción se inserta como texto plano, así que los saltos de línea
   que escribió quien la cargó se respetan desde el CSS y no armando HTML. */
.novedad__texto {
    margin: .3rem 0 0;
    color: #3f4b59;
    font-size: .88rem;
    white-space: pre-line;
}

/* Colapsado el texto largo sólo estorba: se muestran las primeras líneas y el resto
   aparece cuando el panel se abre. */
.auth__novedades .novedad__texto {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.auth__novedades:hover .novedad__texto,
.auth__novedades:focus-within .novedad__texto,
.auth__novedades.is-open .novedad__texto {
    display: block;
    overflow: visible;
}

/* En táctil no hay hover, así que nada puede depender de él: el panel queda en el flujo,
   siempre desplegado, y la pantalla vuelve a poder scrollear — forzar el alto fijo en un
   teléfono cortaría el formulario, que es lo único que no puede fallar acá. */
@media (max-width: 991.98px) {
    .auth {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .auth__form {
        overflow: visible;
    }

    .auth__stack {
        padding-bottom: 0;
        max-height: none;
    }

    .auth__novedades {
        position: static;
        top: auto;
        margin-top: 1rem;
        max-height: 300px;
        cursor: default;
    }

    .auth__novedades-ayuda {
        display: none;
    }

    .auth__novedades .novedad__texto {
        display: block;
        overflow: visible;
    }
}

/* Ventanas bajas (los portátiles de 768px de alto son mayoría): el panel colapsado se
   achica para que tarjeta + panel sigan entrando sin scroll. Expandido ocupa lo mismo
   de siempre, así que no se pierde nada al leer. */
@media (min-width: 992px) and (max-height: 820px) {
    .auth__stack {
        padding-bottom: 8.5rem;
    }

    .auth__novedades {
        top: calc(100% - 7.5rem);
    }
}

@media (min-width: 992px) and (max-height: 700px) {
    .auth__stack {
        padding-bottom: 5.75rem;
    }

    .auth__novedades {
        top: calc(100% - 4.75rem);
    }

    .auth__novedades-ayuda {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth__novedades {
        transition: none;
    }
}

/* ============================================================
   Configurar → Enviador de PDFS y RETS por mail
   ============================================================ */

/* Los pasos no siguen la escala gris de Envíos por mail: acá cada paso tiene su propio color
   (paso 1 azul, paso 2 ámbar) y ese color se repite en todo lo que cuelga del paso — la barra
   lateral, el encabezado, el número y los acentos de adentro. Así el ojo agrupa por color
   antes de leer, que es lo que hace falta cuando la pantalla se llena de casillas. */

.epr-etapa {
    border-left: 4px solid transparent;
}

.epr-etapa .panel__header {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.epr-etapa__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
}

.epr-etapa--1 {
    border-left-color: #2f6fed;
}

.epr-etapa--1 .panel__header {
    background: linear-gradient(90deg, #e3edff 0%, #f6f9ff 100%);
    color: #1c4bb0;
}

.epr-etapa--1 .epr-etapa__numero {
    background: #2f6fed;
}

.epr-etapa--2 {
    border-left-color: #d98324;
}

.epr-etapa--2 .panel__header {
    background: linear-gradient(90deg, #ffeed8 0%, #fffaf3 100%);
    color: #965411;
}

.epr-etapa--2 .epr-etapa__numero {
    background: #d98324;
}

.epr-casillas {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* Una casilla es una tarjeta y no una fila como en Envíos por mail: acá cada correo lleva
   colgados sus dos combos, así que necesita alto propio. */
/* Sin overflow:hidden. Tentaba para recortar el degradado del encabezado contra las esquinas
   redondeadas, pero el desplegable de los combos es position:absolute y cuelga por fuera de la
   tarjeta: recortarla lo dejaba invisible. Las esquinas las redondea el propio encabezado. */
.epr-casilla {
    border: 1px solid #cfe0ff;
    border-left: 4px solid #2f6fed;
    border-radius: .5rem;
    background: #fff;
    padding: 0 0 .9rem;
}

.epr-casilla__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
    background: linear-gradient(90deg, #eef4ff 0%, #fbfcff 100%);
    border-bottom: 1px solid #e4edff;
    border-radius: .4rem .4rem 0 0;
}

.epr-casilla__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: .4rem;
    background: #2f6fed;
    color: #fff;
}

.epr-casilla__icon svg { width: 15px; height: 15px; }

.epr-casilla__email {
    font-weight: 600;
    color: #1c4bb0;
    word-break: break-all;
}

.epr-casilla__combos {
    margin: 0;
    padding: .8rem .9rem 0;
}

/* Un color por combo, para que "despachantes" y "clientes" no se confundan entre sí cuando
   hay varias casillas apiladas y todos los controles se ven iguales. */
.epr-campo .form-label {
    font-weight: 700;
}

.epr-campo--despachantes .form-label { color: #1f6f7a; }
.epr-campo--despachantes .ms__control { border-color: #9fd3db; }

.epr-campo--importadores .form-label { color: #6b4bb8; }
.epr-campo--importadores .ms__control { border-color: #c7b8ee; }

.epr-vacio {
    padding: 1.25rem;
    border: 1px dashed #b9cdf5;
    border-radius: .5rem;
    background: #f8faff;
    text-align: center;
    font-size: .88rem;
    color: #6a7fa8;
}

/* Los tres adjuntos van en columna: se leen de a uno, no son una botonera. */
.epr-envios {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Un color por tipo de adjunto. El borde izquierdo es el que lleva el color: el fondo queda
   muy claro para que el texto no pierda contraste. */
.epr-adjunto {
    margin: 0;
    padding: .55rem .75rem .55rem 2.25rem;
    border: 1px solid var(--app-border);
    border-left: 4px solid transparent;
    border-radius: .45rem;
}

.epr-adjunto .form-check-label {
    font-weight: 600;
    cursor: pointer;
}

.epr-adjunto--pdf {
    border-left-color: #c0392b;
    background: #fdf3f2;
}

.epr-adjunto--pdf .form-check-label { color: #8f2a20; }
.epr-adjunto--pdf .form-check-input:checked { background-color: #c0392b; border-color: #c0392b; }

.epr-adjunto--rets {
    border-left-color: #2f7f9f;
    background: #f1f8fb;
}

.epr-adjunto--rets .form-check-label { color: #235f77; }
.epr-adjunto--rets .form-check-input:checked { background-color: #2f7f9f; border-color: #2f7f9f; }

.epr-adjunto--excel {
    border-left-color: #1f7a5f;
    background: #f1faf6;
}

.epr-adjunto--excel .form-check-label { color: #175c47; }
.epr-adjunto--excel .form-check-input:checked { background-color: #1f7a5f; border-color: #1f7a5f; }

/* ---- paso 3: cuándo sale ---- */

.epr-etapa--3 {
    border-left-color: #7a5fd9;
}

.epr-etapa--3 .panel__header {
    background: linear-gradient(90deg, #efe9ff 0%, #fbf9ff 100%);
    color: #543c9e;
}

.epr-etapa--3 .epr-etapa__numero {
    background: #7a5fd9;
}

.epr-cuando {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Las dos opciones son tarjetas y no un radio suelto: cada una lleva su explicación debajo,
   y toda la tarjeta es clickeable. */
.epr-modo {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    padding: .7rem .9rem;
    border: 1px solid var(--app-border);
    border-left: 4px solid transparent;
    border-radius: .45rem;
    cursor: pointer;
}

.epr-modo .form-check-input {
    flex: 0 0 auto;
    margin: .15rem 0 0;
}

.epr-modo__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.epr-modo__titulo {
    font-weight: 600;
}

.epr-modo__ayuda {
    font-size: .82rem;
    color: #6b7a8c;
}

.epr-modo--auto {
    border-left-color: #7a5fd9;
    background: #f7f4ff;
}

.epr-modo--auto .epr-modo__titulo { color: #543c9e; }
.epr-modo--auto .form-check-input:checked { background-color: #7a5fd9; border-color: #7a5fd9; }

.epr-modo--programado {
    border-left-color: #2f7f9f;
    background: #f2f8fb;
}

.epr-modo--programado .epr-modo__titulo { color: #235f77; }
.epr-modo--programado .form-check-input:checked { background-color: #2f7f9f; border-color: #2f7f9f; }

/* Apagada mientras rige el envío automático: se ve, para que se entienda qué se está dejando
   de lado, pero no invita a tocarla. */
.epr-programacion {
    margin-top: .9rem;
    padding: .9rem 1rem;
    border: 1px dashed var(--app-border);
    border-radius: .5rem;
    opacity: .5;
}

.epr-programacion--activa {
    border: 1px solid #bcdcea;
    background: #f7fbfd;
    opacity: 1;
}

.epr-dias {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.epr-dia {
    min-width: 3.2rem;
    padding: .35rem .6rem;
    border: 1px solid var(--app-border);
    border-radius: .4rem;
    background: #fff;
    font-size: .85rem;
    font-weight: 600;
    color: #4a5a6d;
    cursor: pointer;
}

.epr-dia--activo {
    background: #2f7f9f;
    border-color: #2f7f9f;
    color: #fff;
}

.epr-horarios {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.epr-hora {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .3rem .2rem .55rem;
    border: 1px solid #bcdcea;
    border-radius: 999px;
    background: #e8f4f9;
    font-size: .85rem;
    font-weight: 600;
    color: #235f77;
}

.epr-hora__quitar {
    border: 0;
    background: transparent;
    color: #5d7f8d;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .25rem;
    cursor: pointer;
}

.epr-hora__quitar:hover {
    color: #a8322c;
}

/* ---- paso 4: prueba ---- */

.epr-etapa--4 {
    border-left-color: #1f7a5f;
}

.epr-etapa--4 .panel__header {
    background: linear-gradient(90deg, #e4f5ee 0%, #f8fdfb 100%);
    color: #175c47;
}

.epr-etapa--4 .epr-etapa__numero {
    background: #1f7a5f;
}

.epr-campo--prueba .form-label { color: #175c47; }
.epr-campo--prueba .form-control { border-color: #a9d8c6; }

/* El resultado de la prueba se queda en pantalla, no es un cartel que se cierra: el usuario
   necesita poder releer a qué casilla fue y con qué declaración. */
.epr-prueba-estado {
    margin-top: .9rem;
    padding: .65rem .9rem;
    border: 1px solid var(--app-border);
    border-left: 4px solid transparent;
    border-radius: .45rem;
    font-size: .9rem;
}

.epr-prueba-estado--ok {
    border-left-color: #1f7a5f;
    background: #f1faf6;
    color: #175c47;
}

.epr-prueba-estado--error {
    border-left-color: #c0392b;
    background: #fdf3f2;
    color: #8f2a20;
}

.epr-campo--desde .form-label { color: #543c9e; }
.epr-campo--desde .form-control { border-color: #c7b8ee; }

/* ---- Reportes personalizados: pasos, reporte elegido y resultado vacío ---- */

/* Numerito del paso en el header del panel — mismo círculo que las etapas del
   Generador, para que las tres pantallas de reportes se lean igual. */
.rp-paso {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--app-navy);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
}

/* Qué reporte se va a ejecutar, arriba del botón Buscar. */
.rp-seleccion {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .8rem;
    border: 1px solid #b9cdf0;
    border-left: 4px solid var(--app-accent);
    border-radius: .5rem;
    background: #eef4fe;
    font-size: .92rem;
}

.rp-seleccion__etiqueta {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .72rem;
    font-weight: 700;
    color: #6b7891;
}

.rp-seleccion__valor { font-weight: 700; color: var(--app-navy); }

/* Sin reporte elegido el aviso es ámbar: es lo que falta para poder buscar. */
.rp-seleccion--vacia {
    border-color: #ecd39a;
    border-left-color: #d99b1c;
    background: #fdf7e8;
}

.rp-seleccion--vacia .rp-seleccion__valor { color: #8a6212; font-weight: 600; }

/* Llama la atención cuando el usuario toca Buscar sin haber elegido reporte. */
@keyframes rp-latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 155, 28, 0); }
    35% { box-shadow: 0 0 0 5px rgba(217, 155, 28, .35); }
}

.rp-seleccion--alerta { animation: rp-latido .9s ease-in-out 2; }

/* Resultado vacío: antes era un renglón gris que se perdía en la página. */
.empty-result {
    max-width: 520px;
    margin: .5rem auto;
    padding: 1.6rem 1.25rem;
    text-align: center;
    border: 1px solid #ecd39a;
    border-radius: 12px;
    background: linear-gradient(180deg, #fffaf0 0%, #fdf4e2 100%);
}

.empty-result__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: .7rem;
    border-radius: 50%;
    background: #f7e6c4;
    color: #8a6212;
}

.empty-result__icon svg { width: 26px; height: 26px; }

.empty-result__title {
    margin-bottom: .3rem;
    font-size: 1.08rem;
    font-weight: 700;
    color: #7a5610;
}

.empty-result__hint { color: #6b7891; font-size: .9rem; }

/* ---- Visualizar reportes: editor de columnas bajo demanda ----
   No es una etapa del recorrido (por eso no lleva número): se abre desde "Editar
   columnas" en la lista de reportes y se cierra desde su propio header. */
.report-stage--edit {
    border-color: #cfd6e4;
    border-style: dashed;
}

.report-stage--edit .report-stage__head {
    background: #f1f3f8;
    border-bottom-style: dashed;
    border-bottom-color: #cfd6e4;
}

.report-stage__num--edit { background: #6b7891; }
.report-stage__num--edit svg { width: 15px; height: 15px; }

/* Abrir / cerrar el editor de columnas ("Editar columnas" en la lista y "Cerrar
   edición" en el panel). Van llenos, no outline: en gris eran casi invisibles al lado
   del "Abrir" azul. El gris-azulado es el mismo del ícono de lápiz del panel, así se
   ve que el botón y el panel que abre son la misma cosa. */
.btn-edit-cols {
    display: inline-flex;
    align-items: center;
    padding: .38rem .9rem;
    border: 0;
    border-radius: .375rem;
    background: #5f6d88;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    box-shadow: 0 5px 14px -6px rgba(31, 58, 95, .85);
    transition: background .15s ease, transform .12s ease, box-shadow .18s ease;
}

.btn-edit-cols:hover,
.btn-edit-cols:focus {
    background: var(--app-navy);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 9px 20px -6px rgba(31, 58, 95, .9);
}

.btn-edit-cols .btn-icon { width: 15px; height: 15px; margin-right: .35rem; }

/* ============================================================
   Ventana de carátula (clic en el número de oficialización)
   ============================================================ */

/* Un 25% más ancha que el modal-xl de Bootstrap (1140px), con tope en el viewport para que en
   pantallas chicas siga entrando. */
.dc-dialog {
    max-width: min(1425px, calc(100vw - 2rem));
}

.dc-head {
    background: var(--app-navy);
    color: #fff;
}

.dc-head__titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    font-size: 1rem;
}

.dc-head__etiqueta {
    font-weight: 600;
    opacity: .85;
}

/* Clickeable para copiar, como el CUIT: el punteado lo anuncia sobre el azul del encabezado. */
.dc-head__nro {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    border-bottom: 1px dashed rgba(255, 255, 255, .6);
    padding-bottom: 1px;
}

.dc-head__nro:hover,
.dc-head__nro:focus-visible {
    border-bottom-color: #fff;
    outline: none;
}

.dc-body {
    background: #f7f9fc;
}

/* Los grises de esta ventana están elegidos para pasar 4.5:1 sobre su propio fondo: es una
   pantalla de datos que se lee de corrido, y el gris claro de los textos secundarios la hacía
   ilegible. Nada baja de #3d4c5e sobre blanco. */
.dc-estado {
    padding: 2rem;
    text-align: center;
    color: #3d4c5e;
}

.dc-estado--error {
    color: #8f2a20;
}

/* ---- encabezado: las partes de la operación ---- */

.dc-partes {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background: #fff;
}

.dc-partes__lado--der {
    text-align: right;
}

.dc-partes__centro {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}

.dc-parte + .dc-parte {
    margin-top: .6rem;
}

/* El celeste del original (#1aa7c1) sobre blanco no llega a 3:1 ni siendo negrita; el mismo
   tono bajado sigue leyéndose como rótulo y se puede leer. */
.dc-parte__rotulo {
    font-size: .78rem;
    font-weight: 700;
    color: #106b7e;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.dc-parte__nombre {
    color: #17222e;
}

/* El CUIT es clickeable (copia al portapapeles): el subrayado punteado lo anuncia sin
   convertirlo en un botón, que competiría con el nombre de arriba. */
.dc-parte__cuit {
    display: inline-block;
    font-size: .78rem;
    color: #3d4c5e;
    cursor: pointer;
    border-bottom: 1px dashed #93a2b3;
    padding-bottom: 1px;
}

.dc-parte__cuit:hover,
.dc-parte__cuit:focus-visible {
    color: var(--app-accent);
    border-bottom-color: var(--app-accent);
    outline: none;
}

/* ---- secciones y fichas ---- */

/* Cada sección es una tarjeta con su propio color, y ese color tiñe también el rótulo de sus
   fichas y el punto de la línea de tiempo. Con el mismo azul en todas, Información general,
   Línea de tiempo y Transporte se leían como un solo bloque continuo. El color va en una
   variable para no repetirlo en cada regla. */
.dc-seccion {
    --dc-color: #33607d;
    --dc-tinte: #f2f6fa;

    /* El color del texto sobre --dc-color. Es variable y no fijo en blanco porque hay secciones
       de fondo claro (aquamarine), donde el blanco no se leería. */
    --dc-texto: #fff;

    margin-top: 1rem;
    padding: .75rem .85rem .85rem;
    border: 1px solid var(--app-border);
    border-left: 5px solid var(--dc-color);
    border-radius: .5rem;
    background: var(--dc-tinte);
}

.dc-seccion__titulo {
    margin: 0 0 .7rem;
    padding: .45rem .75rem;
    border-radius: .35rem;
    background: var(--dc-color);
    color: var(--dc-texto);
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Los tonos de montos y más información van desaturados respecto del verde y el ocre plenos:
   con la saturación alta gritaban al lado de los otros tres y la ventana se veía disfrazada.
   Mismo matiz, menos intensidad — y sin bajar tanto el valor como para que el texto blanco del
   título deje de leerse (los dos quedan arriba de 5:1). */
.dc-seccion--general   { --dc-color: #1f3a5f; --dc-tinte: #f1f4f9; }
.dc-seccion--tiempo    { --dc-color: #57408f; --dc-tinte: #f5f2fb; }
.dc-seccion--transporte{ --dc-color: #1f6f7a; --dc-tinte: #eff7f8; }
.dc-seccion--montos    { --dc-color: #3f6d5b; --dc-tinte: #f1f7f4; }

.dc-seccion--mas       { --dc-color: #7c6647; --dc-tinte: #f9f6f0; }

/* Auto-fill y no columnas fijas: la carátula se lee igual en un monitor ancho que en una
   ventana angosta, sin dejar una sola ficha estirada de punta a punta. */
.dc-fichas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .5rem;
}

.dc-ficha {
    border: 1px solid var(--app-border);
    border-radius: .35rem;
    overflow: hidden;
    background: #fff;
}

.dc-ficha__rotulo {
    padding: .4rem .6rem;
    background: var(--dc-color, #3d6480);
    color: var(--dc-texto, #fff);
    font-size: .78rem;
}

.dc-ficha__valor {
    padding: .45rem .6rem;
    background: #f3f3f3;
    color: #17222e;
    word-break: break-word;
    text-align: center;
}

/* Los números también van centrados, pero con cifras de ancho fijo: así una columna de
   importes se sigue leyendo alineada aunque no esté pegada a un borde. */
.dc-ficha__valor--num {
    font-variant-numeric: tabular-nums;
}

.dc-ficha__pie {
    padding: .35rem .6rem;
    background: #dde7f0;
    font-size: .75rem;
    color: #2c3a4b;
    text-align: center;
}

@media (max-width: 767.98px) {
    .dc-partes {
        grid-template-columns: 1fr;
    }

    .dc-partes__lado--der {
        text-align: left;
    }
}

/* ---- línea de tiempo de la carátula ---- */

/* Horizontal y no vertical: la ventana es ancha y los siete hitos entran en una sola fila,
   que es donde una secuencia se lee de un vistazo. En pantallas angostas hace scroll lateral
   antes que apilarse, para no perder la idea de recorrido. */
.dc-linea {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 1.1rem .5rem .6rem;
    list-style: none;
    border: 1px solid var(--app-border);
    border-radius: .35rem;
    background: #fff;
    overflow-x: auto;
}

.dc-hito {
    position: relative;
    flex: 1 1 0;
    min-width: 92px;
    padding: 0 .35rem;
    text-align: center;
    color: #5c6b7d;
}

/* La línea que une los hitos: media a la izquierda y media a la derecha de cada punto, así
   los extremos no sobresalen del primero ni del último. */
.dc-hito::before,
.dc-hito::after {
    content: "";
    position: absolute;
    top: 7px;
    height: 2px;
    background: #dfe5ec;
}

.dc-hito::before { left: 0; width: 50%; }
.dc-hito::after { left: 50%; width: 50%; }
.dc-hito:first-child::before,
.dc-hito:last-child::after { background: transparent; }

.dc-hito__punto {
    position: relative;
    z-index: 1;
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto .45rem;
    border: 3px solid #dfe5ec;
    border-radius: 50%;
    background: #fff;
}

.dc-hito__estado {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.dc-hito__nombre {
    display: block;
    font-size: .72rem;
}

.dc-hito__fecha {
    display: block;
    margin-top: .15rem;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

/* El hito alcanzado: punto y tramo previo en el azul de la app. */
.dc-hito--ok {
    color: #17222e;
}

.dc-hito--ok .dc-hito__punto {
    border-color: var(--dc-color);
    background: var(--dc-color);
}

.dc-hito--ok::before {
    background: var(--dc-color);
}

.dc-hito--ok .dc-hito__estado {
    color: var(--dc-color);
}

.dc-hito--ok .dc-hito__fecha {
    color: #2c3a4b;
}

/* ---- botón imprimir de la carátula ---- */

.dc-imprimir {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
    margin-right: .75rem;
    border: 1px solid rgba(255, 255, 255, .55);
    background: transparent;
    color: #fff;
    font-size: .82rem;
}

.dc-imprimir:hover,
.dc-imprimir:focus-visible {
    background: rgba(255, 255, 255, .15);
    border-color: #fff;
    color: #fff;
}

.dc-imprimir svg {
    width: 15px;
    height: 15px;
}

/* ---- impresión de la carátula ----
   Se imprime sólo la ventana: el resto de la página (sidebar, filtros, la tabla de resultados
   entera) se oculta. El modal deja de ser flotante y pasa a fluir como un documento, porque un
   position:fixed con scroll propio imprime una sola pantalla y corta el resto. */

@media print {
    body.dc-imprimiendo > *:not(#despachoCaratulaModal) {
        display: none !important;
    }

    body.dc-imprimiendo #despachoCaratulaModal {
        position: static !important;
        display: block !important;
        overflow: visible !important;
        background: #fff;
    }

    body.dc-imprimiendo .dc-dialog {
        max-width: 100% !important;
        width: 100%;
        margin: 0;
        transform: none !important;
    }

    body.dc-imprimiendo .modal-content {
        border: 0;
        box-shadow: none;
    }

    /* Sin scroll interno: si el cuerpo conserva su altura máxima, se imprime recortado. */
    body.dc-imprimiendo .dc-body,
    body.dc-imprimiendo .modal-dialog-scrollable .modal-content,
    body.dc-imprimiendo .modal-dialog-scrollable .modal-body {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Los botones no van al papel. */
    body.dc-imprimiendo .dc-imprimir,
    body.dc-imprimiendo .btn-close {
        display: none !important;
    }

    /* Los colores de cada sección son lo que las diferencia: sin esto el navegador imprime
       todos los fondos en blanco y la carátula pierde justamente lo que la organiza. */
    body.dc-imprimiendo,
    body.dc-imprimiendo * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Una sección no se parte entre dos hojas si entra entera. */
    body.dc-imprimiendo .dc-seccion,
    body.dc-imprimiendo .dc-partes,
    body.dc-imprimiendo .dc-ficha {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.dc-imprimiendo .dc-linea {
        overflow: visible !important;
    }

    @page {
        margin: 12mm;
    }
}

/* ============================================================
   Sugerencias (Inicio)
   ============================================================ */

.sug {
    border-left: 4px solid #7a5fd9;
}

/* Una sola fila: logo | campos | botón. El del medio es el único que se estira. */
.sug__caja {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
}

.sug__logo {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.sug__campos {
    flex: 1 1 auto;
    min-width: 0;
}

.sug__titulo {
    display: block;
    margin-bottom: .3rem;
    color: #4a3a8f;
    font-weight: 600;
    font-size: .95rem;
}

.sug__campos textarea {
    resize: vertical;
}

/* El correo y el contador comparten renglón: el contador no merece una línea propia. */
.sug__fila-mail {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .4rem;
}

.sug__fila-mail input {
    flex: 1 1 auto;
    min-width: 0;
}

.sug__contador {
    flex: 0 0 auto;
    font-size: .75rem;
    color: #6b7a8c;
    white-space: nowrap;
}

.sug__enviar {
    flex: 0 0 auto;
    align-self: stretch;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}

/* El aviso queda fijo debajo del formulario y no es un cartel que se cierra: si algo falló, el
   motivo tiene que seguir a la vista mientras el usuario corrige lo que escribió. */
.sug__estado {
    margin: 0 1rem .9rem;
    padding: .6rem .9rem;
    border: 1px solid var(--app-border);
    border-left: 4px solid transparent;
    border-radius: .45rem;
    font-size: .9rem;
}

.sug__estado--ok {
    border-left-color: #1f7a5f;
    background: #f1faf6;
    color: #175c47;
}

.sug__estado--error {
    border-left-color: #c0392b;
    background: #fdf3f2;
    color: #8f2a20;
}

/* En pantallas chicas se apila: el botón pasa a lo ancho, debajo de los campos. */
@media (max-width: 767.98px) {
    .sug__caja {
        flex-wrap: wrap;
    }

    .sug__logo {
        width: 52px;
        height: 52px;
    }

    .sug__enviar {
        width: 100%;
    }
}

/* ============================================================
   Achicar / expandir el menú lateral
   ============================================================ */

.app-sidebar__colapsar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
    width: 100%;
    padding: .7rem 1.1rem;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .12);
    color: #cfdaeb;
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
}

.app-sidebar__colapsar:hover,
.app-sidebar__colapsar:focus-visible {
    background: rgba(255, 255, 255, .09);
    color: #fff;
    outline: none;
}

.app-sidebar__colapsar-icono {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    transition: transform .2s ease;
}

/* Sólo en escritorio: en pantallas chicas la barra ya se abre y se cierra entera con el botón
   de la barra superior, y una tercera forma de esconderla no ayudaría a nadie. */
@media (min-width: 992px) {
    /* Ancho, márgenes y transición salen todos de la variable: al pisarla acá, la columna
       principal se corre sola sin una sola regla más. */
    body.sidebar-colapsado {
        --app-sidebar-width: 68px;
    }

    .app-sidebar,
    .app-main {
        transition: width .18s ease, margin-left .18s ease;
    }

    /* El botón invierte las flechas cuando está achicado: apuntan hacia afuera, que es lo que
       va a pasar si se lo vuelve a apretar. */
    body.sidebar-colapsado .app-sidebar__colapsar-icono {
        transform: rotate(180deg);
    }

    body.sidebar-colapsado .app-sidebar__title,
    body.sidebar-colapsado .app-nav-section__title,
    body.sidebar-colapsado .app-sidebar__colapsar-texto {
        display: none;
    }

    body.sidebar-colapsado .app-sidebar__brand,
    body.sidebar-colapsado .app-sidebar__colapsar {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* El texto de cada opción es un nodo suelto dentro del <a>, sin span propio, así que no hay
       nada que ocultar con display:none. font-size:0 lo colapsa, y el ícono recupera el suyo. */
    body.sidebar-colapsado .app-nav-link {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
        font-size: 0;
    }

    body.sidebar-colapsado .app-nav-link__icon {
        font-size: 1rem;
    }

    body.sidebar-colapsado .app-nav-group {
        padding: .2rem .1rem;
    }

    body.sidebar-colapsado .app-nav-section + .app-nav-section {
        margin-top: .5rem;
        padding-top: .5rem;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
}