/* =============================================
   BBVA – Business Reconciliation
   Design System v2
   ============================================= */

:root {
    /* Brand */
    --navy: #004481;
    --navy-dark: #003060;
    --navy-mid: #02569b;
    --blue: #1973b8;
    --blue-light: #3d8fd1;
    --sky: #e8f3fb;
    --sky-hover: #d8ecf8;

    /* Neutrals */
    --white: #ffffff;
    --surface: #f4f6f9;
    --surface-2: #eceef2;
    --border: #dde1e8;
    --border-mid: #c8cdd8;

    /* Text */
    /* Jerarquía de texto de la paleta Prime Music: negro, gris oscuro, gris claro. */
    --text-primary: #000000;
    --text-secondary: #3d4a5c;
    --text-muted: #8e9bad;
    --text-inverse: rgba(255, 255, 255, 0.9);

    /* Semantic */
    --success: #0d9a6f;
    --success-bg: #e8f7f2;
    --success-lt: #c1ecd8;
    --error: #c0392b;
    --error-bg: #fdf1f0;
    --error-lt: #f5c6c2;
    --warning: #b45309;
    --warning-bg: #fffbeb;
    --info: #1973b8;
    --info-bg: #ebf4ff;

    /* Sidebar */
    --sb-w: 264px;
    /* Navbar de la paleta Prime Music (nav-bg / nav-txt / nav-label /
       nav-accent): azul oscuro y acento celeste. */
    --sb-bg: #001f3f;
    --sb-border: rgba(255, 255, 255, 0.06);
    --sb-text: rgba(255, 255, 255, 0.65);
    --sb-text-hi: rgba(255, 255, 255, 0.95);
    --sb-label: rgba(255, 255, 255, 0.38);
    --sb-hover: rgba(255, 255, 255, 0.055);
    --sb-active: rgba(91, 190, 255, 0.12);
    --sb-accent: #5bbeff;

    /* Layout */
    --topbar-h: 56px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;

    /* Shadows */
    --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
    --sh-sm: 0 1px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --sh-md: 0 4px 12px rgba(0, 68, 129, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    --sh-lg: 0 8px 28px rgba(0, 68, 129, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);

    /* Tipografías de la paleta Prime Music: Inter (texto), Space Grotesk
       (títulos y montos) y Roboto Mono (cuentas, IDs). */
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-mono: 'Roboto Mono', 'JetBrains Mono', 'Courier New', monospace;
    --ease: cubic-bezier(0.22, 0.68, 0, 1.2);
    --t: 0.15s ease;
}

/* ── Reset ─────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font);
    background: var(--surface);
    color: var(--text-primary);
    display: flex;
    min-height: 100vh;
    line-height: 1.5;
}

/* ── Icon helpers ───────────────────────────── */
/* Icon() en shared.js pone esta clase en el <span> contenedor, no en el
   <svg> que lucide.createIcons() inyecta adentro (ese svg trae sus propios
   atributos width="24" height="24" de fábrica, sin relación con esta
   clase). Sin la regla `svg` de abajo, ese <svg> de 24x24 queda de hijo
   flex de un span de 13x13/15x15: flexbox lo encoge en el eje horizontal
   (ancho) pero no en el vertical, así que renderiza ovalado/estirado en
   vez de cuadrado -- el ícono empuja visualmente el texto de al lado
   (botones, badges, headers) aunque el texto en sí esté bien centrado.
   Afecta a los ~130 usos de <Icon> en todo el proyecto por igual, así que
   se corrige acá una sola vez en vez de por componente. */
.icon-xs {
    width: 13px;
    height: 13px;
    display: inline-flex;
    vertical-align: middle;
    flex-shrink: 0;
}

.icon-sm {
    width: 15px;
    height: 15px;
    display: inline-flex;
    vertical-align: middle;
    flex-shrink: 0;
}

.icon-xs svg,
.icon-sm svg {
    width: 100%;
    height: 100%;
}

.label-icon {
    color: var(--text-muted);
    margin-right: 4px;
}

/* =============================================
   SIDEBAR
   ============================================= */
.sidebar {
    width: var(--sb-w);
    min-width: var(--sb-w);
    background: var(--sb-bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    z-index: 20;
    border-right: 1px solid rgba(0, 0, 0, 0.3);
}

/* Brand */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 16px;
    flex-shrink: 0;
}

.sidebar-company-lockup {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 11px;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.sidebar-company-lockup:focus-visible {
    border-radius: var(--r-sm);
    outline: 2px solid var(--sb-accent);
    outline-offset: 4px;
}

.sidebar-logo {
    display: block;
    width: 196px;
    height: auto;
}

.brand-logo {
    width: 72px;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

.brand-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.brand-product {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sb-text-hi);
    letter-spacing: 0.02em;
}

.brand-env {
    font-size: 10px;
    color: var(--sb-accent);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(91, 190, 255, 0.1);
    border-radius: 3px;
    padding: 1px 5px;
    width: fit-content;
}

/* Nav */
.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 0 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.sidebar-sandbox-case-slot {
    display: none;
}

.sidebar-sandbox-case-slot.visible {
    display: block;
    padding-bottom: 10px;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.nav-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sb-label);
}

/* Encabezado de sección que se puede colapsar (acordeón), en vez de
   desplegar toda la lista de una vez -- se mantiene fijo arriba del
   scroll del sidebar para no perder la referencia al hacer scroll por
   los casos. */
.nav-group-toggle {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 16px;
    background: var(--sb-bg);
    border-top: 1px solid var(--sb-border);
    border-bottom: 1px solid var(--sb-border);
    cursor: pointer;
    user-select: none;
}

.nav-group-toggle:hover {
    color: rgba(255, 255, 255, 0.55);
}

/* Case search */
.case-search-wrap {
    position: relative;
    padding: 0 12px 10px;
}

input[type='text'].case-search-input {
    width: 100%;
    height: 34px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-sm);
    color: #e2e8f0;
    font-family: var(--font);
    font-size: 12px;
    padding: 0 10px 0 32px;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color var(--t),
        background var(--t);
}

input[type='text'].case-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

input[type='text'].case-search-input:focus {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(91, 190, 255, 0.4);
    box-shadow: none;
}

.case-search-icon {
    position: absolute;
    left: 22px;
    top: 17px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* Case list */
.case-list {
    list-style: none;
    padding: 0 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.case-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 10px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition:
        background var(--t),
        border-left-color var(--t);
    border-left: 2px solid transparent;
    position: relative;
}

.case-item:hover {
    background: var(--sb-hover);
    border-left-color: rgba(91, 190, 255, 0.4);
}

.case-item.active {
    background: var(--sb-active);
    border-left-color: var(--sb-accent);
}

.sidebar-submenu-host {
    list-style: none;
    margin: -1px 0 5px;
    padding: 0;
}

.sidebar-submenu-toggle {
    display: inline-flex;
    width: 24px;
    height: 24px;
    margin: -4px -3px -4px auto;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sb-text);
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition:
        color var(--t),
        background var(--t);
}

.sidebar-submenu-toggle:hover {
    color: var(--sb-text-hi);
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-submenu-toggle .icon-xs {
    transition: transform var(--t);
}

.sidebar-submenu-toggle.open .icon-xs {
    transform: rotate(180deg);
}

.sidebar-submenu {
    list-style: none;
    margin: 0 8px 0 34px;
    padding: 2px 0 2px 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.sidebar-submenu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--r-sm);
    color: var(--sb-text);
    font-size: 11.5px;
    line-height: 1.3;
    cursor: pointer;
    transition:
        color var(--t),
        background var(--t);
}

.sidebar-submenu-item:hover {
    color: var(--sb-text-hi);
    background: var(--sb-hover);
}

.sidebar-submenu-item.active {
    color: var(--sb-text-hi);
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-submenu-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: currentColor;
}

.case-item.status-pass {
    border-left-color: var(--success);
    background: rgba(13, 154, 111, 0.08);
}

.case-item.status-fail {
    border-left-color: var(--error);
    background: rgba(192, 57, 43, 0.08);
}

.case-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    margin-top: 4px;
    transition: background var(--t);
}

.case-item.active .case-status-dot {
    background: var(--sb-accent);
}

.case-item.status-pass .case-status-dot {
    background: var(--success);
}

.case-item.status-fail .case-status-dot {
    background: var(--error);
}

.case-body {
    flex: 1;
    min-width: 0;
}

.case-id {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 1px;
}

.case-item.active .case-id {
    color: var(--sb-accent);
}

.case-item.status-pass .case-id {
    color: #6bdfb1;
}

.case-item.status-fail .case-id {
    color: #f5a19a;
}

.case-desc {
    font-size: 12px;
    color: var(--sb-text);
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
}

.case-item:hover .case-desc,
.case-item.active .case-desc {
    color: var(--sb-text-hi);
}

.case-check {
    flex-shrink: 0;
    margin-top: 2px;
    display: none;
}

.case-item.status-pass .case-check {
    display: block;
    color: var(--success);
}

.case-item.status-fail .case-check {
    display: block;
    color: var(--error);
}

/* Sidebar footer */
.sidebar-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--sb-border);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
}

.sidebar-mode-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 0;
    color: rgba(255, 255, 255, 0.3);
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: color var(--t);
}

.sidebar-mode-link:hover,
.sidebar-mode-link:focus-visible {
    color: rgba(255, 255, 255, 0.72);
    outline: none;
}

.sandbox-suite-count {
    display: inline-flex;
    min-width: 23px;
    height: 20px;
    margin-left: auto;
    padding: 0 7px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--navy);
    background: rgba(224, 242, 254, 0.95);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cases-counter {
    font-variant-numeric: tabular-nums;
}

/* =============================================
   LAYOUT
   ============================================= */
.layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
}

/* ── Topbar ──────────────────────────────────── */
.topbar {
    height: var(--topbar-h);
    background: var(--white);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--sh-xs);
    flex-shrink: 0;
}

.topbar-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.bc-root {
    font-weight: 500;
}

.bc-sep {
    color: var(--border-mid);
}

.bc-current {
    color: var(--navy);
    font-weight: 600;
}

.topbar-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Sandbox es el estado por defecto de esta insignia (produccion y offline
   suman su propia clase modificadora abajo) -- rojo porque NO son datos
   financieros reales, para que llame la atencion contra qué ambiente de
   BBVA esta pegando el backend. */
.topbar-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--error);
    background: var(--error-bg);
    border: 1px solid var(--error-lt);
    padding: 4px 10px;
    border-radius: 20px;
}

.topbar-badge .status-dot {
    background: var(--error);
}

/* Producción = datos financieros reales, todo conectado correctamente --
   verde. */
.topbar-badge--production {
    color: var(--success);
    background: var(--success-bg);
    border-color: var(--success-lt);
}

.topbar-badge--production .status-dot {
    background: var(--success);
}

.topbar-badge--offline {
    color: var(--error);
    background: var(--error-bg);
    border-color: var(--error-lt);
}

.topbar-badge--offline .status-dot {
    background: var(--error);
    animation: none;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ── Content ─────────────────────────────────── */
.content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Icon button ─────────────────────────────── */
.icon-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--text-secondary);
    transition:
        background var(--t),
        border-color var(--t),
        color var(--t);
}

.icon-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-mid);
    color: var(--text-primary);
}

/* ── Buscador de la barra superior ───────────── */
.topbar-search {
    position: relative;
    display: flex;
    width: min(380px, 40vw);
    align-items: center;
}

.topbar-search-icon {
    position: absolute;
    left: 11px;
    color: var(--text-muted);
    pointer-events: none;
}

.topbar-search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 12.5px;
    outline: none;
    transition:
        border-color var(--t),
        background var(--t),
        box-shadow var(--t);
}

.topbar-search input:focus {
    background: var(--white);
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(25, 115, 184, 0.12);
}

.topbar-search-results {
    right: auto;
    left: 0;
    width: 100%;
    max-height: 380px;
    padding: 4px;
    overflow-y: auto;
    transform-origin: top left;
}

.search-result {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-radius: var(--r-md);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.search-result.active {
    background: var(--surface);
}

.search-result-label {
    flex: 1;
}

.search-result small {
    color: var(--text-muted);
    font-size: 10.5px;
}

.search-empty {
    padding: 14px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

/* ── Herramientas de la barra superior ───────── */
.topbar-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: 10px;
    margin-right: 2px;
    border-right: 1px solid var(--border);
}

.topbar-menu {
    position: relative;
}

.topbar-icon-btn {
    position: relative;
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--r-md);
    cursor: pointer;
    transition:
        background var(--t),
        color var(--t);
}

.topbar-icon-btn:hover,
.topbar-icon-btn[aria-expanded='true'] {
    color: var(--text-primary);
    background: var(--surface-2);
}

.topbar-dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--white);
    border-radius: 50%;
    background: var(--sb-accent);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 6px 4px 4px;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-radius: var(--r-md);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--t);
}

.topbar-user:hover,
.topbar-user[aria-expanded='true'] {
    background: var(--surface-2);
}

.user-avatar {
    display: grid;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    place-items: center;
    color: var(--navy);
    background: var(--sky);
    border: 1px solid #c9dff2;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.user-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.2;
}

.user-meta strong {
    max-width: 150px;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-meta small {
    color: var(--text-muted);
    font-size: 10.5px;
}

.user-chevron {
    color: var(--text-muted);
}

.topbar-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    width: 260px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    animation: popover-in 0.16s ease-out;
    transform-origin: top right;
}

.topbar-menu--wide .topbar-popover {
    width: 340px;
}

@keyframes popover-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.topbar-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
}

.topbar-popover-head .link-btn {
    padding: 2px 4px;
    color: var(--blue);
    font-size: 11.5px;
}

.user-popover-head {
    justify-content: flex-start;
}

.topbar-popover-foot {
    padding: 8px 14px;
    color: var(--text-muted);
    background: var(--surface);
    border-top: 1px solid var(--border);
    font-size: 10.5px;
}

.notif-list,
.menu-list {
    max-height: 360px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
}

.notif-item {
    display: flex;
    width: 100%;
    gap: 10px;
    padding: 10px;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-radius: var(--r-md);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--t);
}

.notif-item:hover {
    background: var(--surface);
}

.notif-item.unread {
    background: #f6faff;
}

.notif-item.unread .notif-body strong::after {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--sb-accent);
    content: '';
    vertical-align: middle;
}

.notif-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--r-md);
}

.notif-icon--warning {
    color: var(--warning);
    background: var(--warning-bg);
}

.notif-icon--error {
    color: var(--error);
    background: var(--error-bg);
}

.notif-icon--success {
    color: var(--success);
    background: var(--success-bg);
}

.notif-icon--info {
    color: var(--info);
    background: var(--info-bg);
}

.notif-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    font-size: 11.5px;
}

.notif-body strong {
    font-size: 12px;
    font-weight: 600;
}

.notif-body span {
    color: var(--text-secondary);
    line-height: 1.35;
}

.notif-body small {
    color: var(--text-muted);
    font-size: 10.5px;
}

.menu-list li,
.menu-item-action {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    color: var(--text-secondary);
    border-radius: var(--r-md);
    font-size: 12px;
}

.menu-list li:has(> .menu-item-action) {
    padding: 0;
}

.menu-item-action {
    width: 100%;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition:
        background var(--t),
        color var(--t);
}

.menu-item-action:hover {
    color: var(--error);
    background: var(--error-bg);
}

.quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition:
        border-color var(--t),
        background var(--t),
        transform var(--t);
}

.quick-link:hover {
    background: var(--white);
    border-color: var(--border-mid);
    transform: translateY(-1px);
}

.quick-link-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--navy);
    background: var(--sky);
    border-radius: var(--r-md);
}

@media (max-width: 768px) {
    .user-meta,
    .user-chevron {
        display: none;
    }

    .topbar-tools {
        padding-right: 4px;
    }

    .topbar-menu--wide .topbar-popover {
        position: fixed;
        top: calc(var(--topbar-h) + 4px);
        right: 12px;
        left: 12px;
        width: auto;
    }
}

/* ── Menú móvil (hamburguesa) ─────────────────── */
/* Oculto en escritorio -- el breakpoint de abajo lo muestra y convierte
   el sidebar en un panel deslizante en vez de ocultarlo sin alternativa. */
.hamburger-btn {
    display: none;
    flex-shrink: 0;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 19, 42, 0.45);
    z-index: 55;
}

/* ── Link button ─────────────────────────────── */
.link-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    transition:
        color var(--t),
        background var(--t);
}

.link-btn:hover {
    color: var(--navy);
    background: var(--sky);
}

/* =============================================
   KPI STRIP
   ============================================= */
.kpi-strip {
    display: grid;
    /* Columnas de 220px como mínimo: con 4 fijas los saldos largos desbordaban
       el ancho y aparecía scroll horizontal. */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.kpi-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--sh-sm);
    transition: box-shadow var(--t);
}

.kpi-card:hover {
    box-shadow: var(--sh-md);
}

.kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon--total {
    background: var(--sky);
    color: var(--navy);
}

.kpi-icon--income {
    background: var(--success-bg);
    color: var(--success);
}

.kpi-icon--expense {
    background: var(--error-bg);
    color: var(--error);
}

.kpi-icon--balance {
    background: var(--warning-bg);
    color: var(--warning);
}

.kpi-data {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Saldos de Inicio: montos de hasta miles de millones en una sola línea, así
   que tarjetas más anchas; la etiqueta larga se recorta con "…". */
.kpi-strip--balances {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.kpi-strip--balances .kpi-data {
    min-width: 0;
}

.kpi-strip--balances .kpi-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-label {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.kpi-value {
    white-space: nowrap;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.kpi-value--income {
    color: var(--success);
}

.kpi-value--expense {
    color: var(--error);
}

/* =============================================
   CUENTAS BANCARIAS
   ============================================= */
.account-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    margin-bottom: 14px;
    position: relative;
    /* overflow:hidden quita el alto mínimo automático: sin esto .content
       (columna flex) la aplasta. */
    flex-shrink: 0;
    overflow: hidden;
    background: var(--sb-bg);
    border-radius: var(--r-xl);
    color: var(--text-inverse);
    box-shadow: var(--sh-lg);
}

.account-hero-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.account-hero-amount {
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    margin: 4px 0 8px;
    font-variant-numeric: tabular-nums;
}

.account-hero-error {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.account-hero-sub {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

.account-hero-number {
    display: block;
    font-size: 11px;
    font-family: var(--font-mono);
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
}

.account-list {
    display: grid;
    gap: 10px;
}

.account-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition:
        border-color var(--t),
        box-shadow var(--t);
}

.account-card:hover {
    box-shadow: var(--sh-sm);
}

.account-card.active {
    border-color: var(--blue);
    background: var(--sky);
    box-shadow: 0 0 0 3px rgba(25, 115, 184, 0.1);
}

.account-card-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: var(--sky);
    color: var(--navy);
}

.account-card-body {
    flex: 1;
    min-width: 0;
}

.account-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: var(--text-primary);
}

.account-card-sub {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-secondary);
    margin-top: 3px;
}

.account-card-number {
    font-size: 14px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    margin-top: 2px;
}

.account-card-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
}

.payment-type-card {
    margin: 16px 10px;
    padding: 18px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition:
        border-color var(--t),
        box-shadow var(--t);
}

.payment-type-card:hover {
    box-shadow: var(--sh-sm);
}

.payment-type-card.active {
    border-color: var(--blue);
    background: #eef7fc;
}

.payment-type-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: var(--sky);
    color: var(--navy);
    margin-bottom: 10px;
}

.payment-type-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.payment-type-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: 2px 7px;
}

.payment-type-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.4;
}

/* =============================================
   PANEL
   ============================================= */
.panel {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--white);
}

.panel-head-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.panel-head-left .icon-sm {
    color: var(--navy);
}

.panel-head-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

/* Las tarjetas de filtros se leen como una sola superficie redondeada. El
   encabezado conserva jerarquía por espaciado, sin una línea divisoria. */
.filter-panel {
    overflow: visible;
    border-radius: var(--r-lg);
}

.filter-panel > .panel-head {
    border-bottom: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: 8px;
}

.filter-panel > .panel-body {
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    padding-top: 8px;
}

.results-chip {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    background: var(--sky);
    color: var(--navy);
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    letter-spacing: 0.02em;
}

.panel-body {
    padding: 14px 18px 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 16px;
}

/* Resúmenes de una sola línea dentro de un panel-body (p. ej. "Enviados X de
   Y" en el asistente): ocupan todo el ancho en vez de una de las 4 columnas. */
.panel-body > .readonly-value,
.panel-body > .result-meta {
    grid-column: 1 / -1;
}

.panel-actions .readonly-value {
    white-space: nowrap;
}

/* Conciliación: todos los filtros operativos y la acción principal quedan
   alineados en una única fila en escritorio. */
.panel-body.reconciliation-filter-row {
    grid-template-columns:
        minmax(300px, 2fr)
        165px
        165px
        minmax(170px, 1fr)
        max-content;
    gap: 12px;
    align-items: end;
}

.reconciliation-filter-row .field {
    margin-bottom: 0;
}

.reconciliation-filter-actions {
    display: flex;
    height: 38px;
    align-self: end;
    justify-self: end;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
}

.reconciliation-filter-actions .btn {
    height: 38px;
    white-space: nowrap;
}

/* Reportes: cuenta, fechas y acción en una sola fila. */
.panel-body.reports-filter-row {
    grid-template-columns: minmax(320px, 1fr) 165px 165px max-content;
    gap: 12px;
    align-items: end;
}

.panel-body.reports-filter-row.reports-filter-row--remesas {
    /* Remesas por estado: tipo de pago, etapa, desde, hasta y acciones en
       una sola línea (tipo de pago más angosto que la cuenta de Movimientos). */
    grid-template-columns: minmax(160px, 280px) minmax(130px, 220px) minmax(140px, 165px) minmax(140px, 165px) 1fr;
}

/* El espacio sobrante queda antes de los botones: Generar reporte pegado a
   la derecha. */
.reports-filter-row--remesas .inline-filter-actions {
    justify-content: flex-end;
}

.reports-filter-row .field,
.payment-status-filter-grid .field {
    margin-bottom: 0;
}

/* Resultado pagos: Estados ocupa la primera fila; los demás filtros y la
   acción comparten una segunda fila compacta. */
.panel-body.payment-status-filter-grid {
    grid-template-columns:
        minmax(210px, 1.3fr)
        minmax(175px, 1fr)
        minmax(140px, 0.85fr)
        145px
        145px
        max-content;
    gap: 12px;
    align-items: end;
}

.payment-status-filter-panel {
    overflow: visible;
}

.status-multiselect {
    position: relative;
}

.status-multiselect summary {
    display: flex;
    height: 38px;
    padding: 0 11px 0 12px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-primary);
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 12.5px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.status-multiselect summary::-webkit-details-marker {
    display: none;
}

.status-multiselect[open] summary {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(25, 115, 184, 0.1);
}

.status-multiselect-chevron {
    color: var(--text-muted);
    transition: transform var(--t);
}

.status-multiselect[open] .status-multiselect-chevron {
    transform: rotate(180deg);
}

.status-multiselect-menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    width: 370px;
    max-width: min(370px, 85vw);
    padding: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    font-family: var(--font);
}

.status-multiselect-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px 8px;
    color: var(--text-muted);
    font-size: 10.5px;
}

.status-multiselect-head div {
    display: flex;
    gap: 4px;
}

.status-multiselect-head button {
    padding: 3px 6px;
    color: var(--blue);
    background: transparent;
    border: 0;
    font: 500 10.5px var(--font);
    cursor: pointer;
}

.status-multiselect-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-height: 270px;
    overflow-y: auto;
    gap: 2px 8px;
}

.status-multiselect-option {
    display: grid;
    grid-template-columns: 15px 36px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-height: 29px;
    padding: 4px 5px;
    border-radius: var(--r-sm);
    cursor: pointer;
}

.status-multiselect-option:hover {
    background: var(--surface-2);
}

.status-multiselect-option input {
    width: 14px;
    height: 14px;
    margin: 0;
}

.status-multiselect-code {
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 10.5px;
    font-weight: 400;
}

.status-multiselect-description {
    overflow: hidden;
    color: #111827;
    font-family: var(--font);
    font-size: 10.5px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-multiselect-option.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.payment-type-multiselect .status-multiselect-menu {
    width: 340px;
}

.payment-type-multiselect .status-multiselect-options {
    grid-template-columns: 1fr;
}

.payment-type-multiselect .status-multiselect-option {
    grid-template-columns: 15px 90px minmax(0, 1fr);
}

.inline-filter-actions {
    display: flex;
    height: 38px;
    align-self: end;
    justify-self: end;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.inline-filter-actions .btn {
    height: 38px;
    white-space: nowrap;
}

/* Default in search mode */
.panel-body.tab-search #field-contracts {
    grid-column: span 3;
}
.panel-body.tab-search #field-flow {
    grid-column: span 1;
}
.panel-body.tab-search #field-from,
.panel-body.tab-search #field-to,
.panel-body.tab-search #field-keyword,
.panel-body.tab-search #field-pagination {
    grid-column: span 1;
}

/* Detail mode */
.panel-body.tab-detail #field-contracts {
    grid-column: span 2;
}
.panel-body.tab-detail #field-transaction-id {
    grid-column: span 2;
    display: block !important;
}
.panel-body.tab-detail #field-from,
.panel-body.tab-detail #field-to,
.panel-body.tab-detail #field-flow,
.panel-body.tab-detail #field-keyword,
.panel-body.tab-detail #field-pagination {
    display: none !important;
}

/* =============================================
   FORM FIELDS
   ============================================= */
.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}

.field.full {
    grid-column: 1 / -1;
}

.field-row {
    display: contents;
}

label {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    gap: 3px;
}

.field-hint {
    font-size: 11px;
    color: var(--text-muted);
}

.optional-pill {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--surface-2);
    color: var(--text-muted);
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
}

input[type='text'],
input[type='date'],
select {
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-primary);
    background: var(--white);
    outline: none;
    transition:
        border-color var(--t),
        box-shadow var(--t);
    width: 100%;
}

input[type='text']::placeholder,
input[type='date']::placeholder {
    color: var(--text-muted);
}

input[type='text']:hover,
input[type='date']:hover,
select:hover {
    border-color: var(--border-mid);
}

input[type='text']:focus,
input[type='date']:focus,
select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(25, 115, 184, 0.1);
}

.select-wrap {
    position: relative;
}

.select-wrap select {
    appearance: none;
    padding-right: 34px;
    cursor: pointer;
}

.select-chevron {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
}

.panel-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
    padding-top: 16px;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition:
        background var(--t),
        box-shadow var(--t),
        transform 0.1s;
    white-space: nowrap;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 1px 3px rgba(0, 68, 129, 0.25);
}

.btn-primary:hover {
    background: var(--navy-dark);
    box-shadow: 0 3px 10px rgba(0, 68, 129, 0.3);
}

.btn-primary:disabled {
    background: var(--border-mid);
    cursor: not-allowed;
    box-shadow: none;
    color: var(--text-muted);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border);
}

.btn-ghost:hover {
    background: var(--surface-2);
    border-color: var(--border-mid);
    color: var(--text-primary);
}

/* Spinner */
.btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
    flex-shrink: 0;
}

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

/* =============================================
   ERROR BANNER
   ============================================= */
.error-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--error-bg);
    border: 1px solid var(--error-lt);
    border-left: 4px solid var(--error);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    color: var(--error);
    margin-bottom: 20px;
}

.error-banner-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.error-banner-body {
    flex: 1;
}

.error-banner-body strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--error);
}

.error-banner-body pre {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: #922b21;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.55;
}

/* Mismo layout que .error-banner, en ambar -- para avisos que no son un
   error (ej. "estos datos estan incompletos") sino algo a tener en cuenta. */
.warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--warning-bg);
    border: 1px solid #fde68a;
    border-left: 4px solid var(--warning);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    color: var(--warning);
    margin-bottom: 20px;
}

.warning-banner-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Caja de búsqueda genérica con ícono -- reusada en varios lados (filtros
   rápidos de tabla, listas de casos QA dentro del sidebar). El <span> del
   ícono (de <Icon>) y el <input> son hermanos en el DOM, así que con
   "display:flex" el span reservaba sus propios 13px de espacio en el
   layout, empujando al <input> (con su propio borde blanco) a empezar
   DESPUES de esos 13px -- el ícono quedaba flotando en el hueco gris
   antes del recuadro del input, no encima de él. Mismo patrón que ya
   funciona en .login-input (usuario/contraseña del login):
   contenedor solo "position:relative", ícono en "position:absolute"
   superpuesto sobre el input, que ocupa el 100% del ancho él solo. */
.search-input {
    position: relative;
}

.search-input > span {
    position: absolute;
    top: 50%;
    left: 11px;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.search-input input {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 32px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    background: var(--white);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 12.5px;
    outline: none;
}

.search-input input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(25, 115, 184, 0.1);
}

/* =============================================
   TABLE FILTERS
   ============================================= */
.table-filters {
    display: flex;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 3px;
}

.filter-btn {
    white-space: nowrap;
    height: 26px;
    padding: 0 12px;
    border-radius: calc(var(--r-md) - 2px);
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition:
        background var(--t),
        color var(--t);
    white-space: nowrap;
}

.filter-btn:hover {
    color: var(--text-primary);
}

.filter-btn.active {
    background: var(--white);
    color: var(--navy);
    box-shadow: var(--sh-xs);
}

/* =============================================
   TABLE
   ============================================= */
.table-scroll {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead tr {
    background: var(--surface);
    border-bottom: 2px solid var(--border);
}

th {
    padding: 11px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    user-select: none;
}

th.sortable {
    cursor: pointer;
    transition: color var(--t);
}

th.sortable:hover {
    color: var(--navy);
}

td {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr {
    transition: background var(--t);
}

tbody tr:hover {
    background: var(--sky);
}

/* Table cells */
.cell-id {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.cell-date {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-size: 12.5px;
}

.cell-concept {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    font-weight: 500;
}

/* Celda de dos líneas: dato principal arriba y secundario abajo (fecha +
   fecha valor, categoría + concepto). */
.cell-main,
.cell-sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-main {
    color: var(--text-primary);
    font-weight: 600;
}

.cell-sub {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
}

.cell-mono {
    font-family: var(--font-mono);
    font-size: 10.5px;
}

.cell-concept:has(.cell-main) {
    max-width: 360px;
}

.amount-flow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.amount-flow .icon-xs {
    padding: 2px;
    width: 17px;
    height: 17px;
    background: currentColor;
    border-radius: 4px;
}

.amount-flow .icon-xs svg {
    color: var(--white);
}

/* ── Resumen de Conciliación ─────────────────── */
.recon-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.recon-balance-card,
.recon-flow-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border-radius: var(--r-xl);
}

.recon-balance-card {
    color: #fff;
    background: var(--sb-bg);
    box-shadow: var(--sh-lg);
}

.recon-flow-card {
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--sh-sm);
}

.recon-label {
    display: block;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.recon-balance-card .recon-label {
    color: rgba(255, 255, 255, 0.55);
}

.recon-balance {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.recon-balance-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.recon-account {
    display: block;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
}

.recon-balance-card .recon-count {
    color: rgba(255, 255, 255, 0.6);
}

.recon-flow-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.recon-flow-head .kpi-icon {
    width: 32px;
    height: 32px;
}

.recon-flow-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.recon-count {
    color: var(--text-muted);
    font-size: 11.5px;
}

.cell-account {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
}

.cell-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 13.5px;
    text-align: right;
}

.cell-amount.positive {
    color: var(--success);
}

.cell-amount.negative {
    color: var(--error);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.025em;
    padding: 3px 9px 3px 7px;
    border-radius: 20px;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-income {
    background: var(--success-bg);
    color: #0a7a56;
    border: 1px solid var(--success-lt);
}

.badge-expense {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid var(--error-lt);
}

.badge-neutral {
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid #fde68a;
}

.badge-info {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid #c4ddf5;
}

.badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 64px 20px;
    color: var(--text-muted);
}

.empty-state .empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--surface-2);
    border-radius: 50%;
    margin: 0 auto 16px;
    color: var(--border-mid);
}

.empty-state .empty-icon svg {
    width: 24px;
    height: 24px;
}

.empty-state h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.empty-state p {
    font-size: 13px;
    line-height: 1.6;
}

/* =============================================
   TOAST
   ============================================= */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
    pointer-events: none;
}

.toast {
    pointer-events: all;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 300px;
    max-width: 400px;
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow:
        var(--sh-lg),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 13px 16px;
    border-left: 3px solid transparent;
    animation: toastIn 0.28s var(--ease) both;
    position: relative;
    overflow: hidden;
}

.toast-success {
    border-left-color: var(--success);
}

.toast-error {
    border-left-color: var(--error);
}

.toast-info {
    border-left-color: var(--blue);
}

.toast-warning {
    border-left-color: var(--warning);
}

.toast-icon-wrap {
    flex-shrink: 0;
    margin-top: 1px;
}

.toast-success .toast-icon-wrap {
    color: var(--success);
}

.toast-error .toast-icon-wrap {
    color: var(--error);
}

.toast-info .toast-icon-wrap {
    color: var(--blue);
}

.toast-warning .toast-icon-wrap {
    color: var(--warning);
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.toast-msg {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.45;
}

.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    flex-shrink: 0;
    padding: 2px;
    border-radius: 4px;
    transition: color var(--t);
    line-height: 0;
}

.toast-close:hover {
    color: var(--text-primary);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.2;
    animation: progressBar 4s linear forwards;
}

.toast-success .toast-progress {
    color: var(--success);
}

.toast-error .toast-progress {
    color: var(--error);
}

.toast-info .toast-progress {
    color: var(--blue);
}

.toast-warning .toast-progress {
    color: var(--warning);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateX(20px) scale(0.96);
        max-height: 0;
        padding: 0;
        margin: 0;
    }
}

@keyframes progressBar {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/* =============================================
   PRINT
   ============================================= */
@media print {
    .sidebar,
    .topbar,
    #toast-container,
    .panel-actions,
    .table-filters,
    .icon-btn,
    .no-print {
        display: none !important;
    }

    .layout {
        display: block;
    }

    .content {
        padding: 0;
    }

    table {
        font-size: 11px;
    }

    .panel {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1350px) {
    .panel-body.reconciliation-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reconciliation-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1100px) {
    .panel-body.reports-filter-row,
    .panel-body.reports-filter-row.reports-filter-row--remesas,
    .panel-body.payment-status-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inline-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1024px) {
    .kpi-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* El sidebar pasa de columna fija a panel deslizante (off-canvas):
       sigue en el DOM pero fuera de pantalla hasta que se abre con el
       botón hamburguesa, en vez de desaparecer sin ninguna forma de
       volver a mostrarlo. */
    .hamburger-btn {
        display: flex;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100svh;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 60;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 12px 0 32px rgba(0, 0, 0, 0.28);
    }

    .topbar {
        padding: 0 16px;
        gap: 12px;
        justify-content: flex-start;
    }

    .topbar-right {
        margin-left: auto;
    }

    .content {
        padding: 16px;
    }

    .panel-body {
        grid-template-columns: 1fr;
    }

    .field-row {
        display: flex;
        flex-direction: column;
    }

    .kpi-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================
   ACTIVE FIELD HIGHLIGHTING
   ============================================= */
.field-active {
    border-color: #d97706 !important;
    background-color: #fffbeb !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15) !important;
}

/* =============================================
   PANEL TABS (SEARCH / DETAIL)
   ============================================= */
.panel-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    padding-bottom: 8px;
    grid-column: 1 / -1;
}

.panel-tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 8px 16px;
    cursor: pointer;
    border-radius: var(--r-md);
    transition: all 0.2s;
}

.panel-tab-btn:hover {
    color: var(--blue);
    background: rgba(25, 115, 184, 0.05);
}

.panel-tab-btn.active {
    color: var(--blue);
    background: rgba(25, 115, 184, 0.1);
}

/* Subtítulo con ícono (ej. "HTTP Request"/"HTTP Response" en Pruebas
   conciliación) -- antes cada uno repetía el mismo style={{}} completo. */
.section-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Título de resultados de Pruebas conciliación (ej. "Caso BR-01: ..."). */
.results-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* =============================================
   CASE BADGES (SIDEBAR)
   ============================================= */
.case-badge {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sb-text);
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
}
.case-badge.badge-pass {
    color: #2ecc71 !important;
    background: rgba(46, 204, 113, 0.15) !important;
}
.case-badge.badge-fail {
    color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.15) !important;
}

/* La tabla de resultados crece a su alto natural (todas las filas) en
   vez de quedar comprimida a un hueco fijo -- .content (overflow-y:auto)
   es quien scrollea cuando el contenido no entra en la ventana. Antes
   #results-section/#results-panel usaban flex:1 + min-height:0 para
   repartirse el espacio sobrante del viewport, pero #results-section
   hereda overflow:hidden de .panel y, por la spec de flexbox, el
   "automatic minimum size" de un flex item con overflow distinto de
   visible es 0 -- asi que en viewports chicos el panel se aplastaba a 0
   y la tabla quedaba invisible, sin scroll posible. flex-shrink:0 evita
   que estos paneles se compriman por debajo de su contenido real. */
.table-scroll {
    overflow-x: auto;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.content > .panel {
    flex-shrink: 0;
}

#root {
    display: flex;
    flex: 1;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* Clasico gotcha de flexbox: un hijo flex tiene min-height:auto por
   defecto, lo que le impide encogerse por debajo del alto de su
   contenido -- rompe silenciosamente cualquier overflow-y:auto mas
   abajo en la cadena. Sin esto, .content nunca hace scroll propio. */
.layout,
.content {
    min-height: 0;
}

/* ── Case-populated input highlighting ("se pintan los campos") ── */
.field.case-filled input,
.field.case-filled select,
input.field-case-populated,
select.field-case-populated {
    border-color: #02569b !important;
    background-color: #ebf4ff !important;
    box-shadow: 0 0 0 3px rgba(2, 86, 155, 0.18) !important;
    transition: all 0.25s ease;
}

.case-filled-pill {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: #004481;
    background: #d8ecf8;
    border: 1px solid #99cbeb;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    letter-spacing: 0.02em;
    animation: fadeInPill 0.25s ease-in-out;
}

@keyframes fadeInPill {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
   LOGIN
   Portada oscura a pantalla completa: fondo navy animado, titular abajo a
   la izquierda y el formulario en una tarjeta de vidrio a la derecha.
   ============================================= */
.login-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    color: #fff;
    background: #000e1f;
}

.login-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.login-photo {
    position: absolute;
    inset: -4%;
    background: url('assets/login-bg.jpg?v=4') center / cover no-repeat;
    animation: login-zoom 40s ease-in-out infinite alternate;
}

@keyframes login-zoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.08) translate(-1%, -1%);
    }
}

/* Oscurece abajo (titular y tarjeta) y a la izquierda; deja ver el video
   arriba. */
.login-video-shade {
    position: absolute;
    inset: 0;
    /* Viñeta: más oscuro abajo a la izquierda (texto) y en los bordes; un
       poco más claro detrás de la tarjeta para darle profundidad. */
    background:
        radial-gradient(60% 70% at 72% 50%, rgba(25, 115, 184, 0.2) 0%, transparent 70%),
        linear-gradient(to top, rgba(0, 14, 31, 0.8) 0%, rgba(0, 14, 31, 0.2) 50%, rgba(0, 14, 31, 0.4) 100%),
        linear-gradient(to right, rgba(0, 14, 31, 0.6) 0%, rgba(0, 14, 31, 0.1) 55%, rgba(0, 14, 31, 0.35) 100%);
}

.login-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 48px;
    /* Mismo margen arriba y abajo: la tarjeta queda centrada en la pantalla. */
    padding: 40px 48px;
}

.login-hero-top {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.login-logo {
    display: block;
    width: 340px;
    max-width: 70vw;
    height: auto;
}

/* Dos mitades: el texto abajo a la izquierda y la tarjeta en la mitad
   derecha, centrada respecto de toda la pantalla (ocupa las dos filas de la
   cuadrícula, no solo la de debajo del logo). */
.login-hero-main {
    display: contents;
}

.login-hero-copy {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
}

.login-card {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
}

.login-hero-copy {
    max-width: 560px;
    animation: fade-up 0.6s ease-out backwards;
}

.login-hero-copy h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(40px, 5.4vw, 76px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.login-hero-copy h1 span {
    color: var(--sb-accent);
}

.login-hero-copy p {
    max-width: 460px;
    margin: 18px 0 0;
    color: #a9bcd0;
    font-size: 14.5px;
    line-height: 1.6;
}

/* Tarjeta clara con los mismos tonos fríos del panel (--surface, --border,
   grises azulados): título en azul de marca, textos en negro, campos blancos. */
.login-card {
    width: 100%;
    display: flex;
    max-width: 480px;
    min-height: 530px;
    flex-shrink: 0;
    flex-direction: column;
    /* Alto mínimo de 530px con todo el contenido centrado en vertical: el
       mismo espacio arriba del título que debajo del pie. */
    justify-content: center;
    padding: 44px;
    color: var(--text-primary);
    background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    animation: fade-up 0.6s 0.12s ease-out backwards;
}

.login-card h2 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--navy);
    font-size: 30px;
    font-weight: 600;
}

.login-card-sub {
    margin: 8px 0 34px;
    color: var(--text-secondary);
    font-size: 14px;
}

.login-field {
    display: block;
    margin-bottom: 18px;
}

.login-field > span:first-child {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.login-input {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input > .icon-sm {
    position: absolute;
    right: 18px;
    color: var(--text-muted);
    pointer-events: none;
}

.login-input input {
    width: 100%;
    height: 52px;
    padding: 0 50px 0 20px;
    color: var(--text-primary);
    background: #fff;
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    font-family: var(--font);
    font-size: 15px;
    outline: 0;
    transition:
        border-color var(--t),
        background var(--t),
        box-shadow var(--t);
}

.login-input input:focus {
    background: #fff;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(25, 115, 184, 0.15);
}

.login-password-toggle {
    position: absolute;
    right: 18px;
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: none;
    border: 0;
    outline: none;
    cursor: pointer;
}

.login-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 16px;
    padding: 10px 14px;
    color: var(--error);
    background: var(--error-bg);
    border: 1px solid var(--error-lt);
    border-radius: 12px;
    font-size: 13px;
}

/* Botón en el azul de marca: el único bloque de color fuerte de la tarjeta. */
.login-submit {
    display: flex;
    width: 100%;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    color: #fff;
    background: var(--blue);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(25, 115, 184, 0.28);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition:
        opacity var(--t),
        transform 0.15s ease-out;
}

.login-submit:hover:not(:disabled) {
    background: #2384cc;
}

.login-submit:active:not(:disabled) {
    transform: scale(0.98);
}

.login-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.login-submit .btn-spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

.login-card-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    padding-top: 18px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    font-size: 11.5px;
}

@media (max-width: 960px) {
    .login-hero-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 28px;
        padding: 24px 20px 32px;
    }

    .login-hero-copy,
    .login-card {
        grid-column: 1;
        grid-row: auto;
        align-self: start;
    }

    .login-card {
        max-width: none;
    }
}

/* =============================================
   BULK PAYMENTS / PAYMENTS STATUS / QA
   ============================================= */
.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.page-heading h1 {
    margin: 0 0 2px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.page-heading-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.page-heading-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-heading-icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    place-items: center;
    color: var(--navy);
    background: var(--sky);
    border: 1px solid #c9dff2;
    border-radius: var(--r-md);
}

.page-heading-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.page-back {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    color: var(--text-secondary);
    background: none;
    border: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--t);
}

.page-back:hover {
    color: var(--navy);
}

.page-back .icon-sm {
    transition: transform var(--t);
}

.page-back:hover .icon-sm {
    transform: translateX(-2px);
}

.page-heading p,
.close-panel p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 11px;
}

.workflow-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    /* NO "overflow: hidden" acá -- en este navegador, combinado con
       "display: grid" sin grid-template-rows explícito, hace que el alto
       intrínseco del contenido se calcule como ~0 y el contenedor entero
       queda clippeado a los 2px del borde (confirmado en vivo: los 3 hijos
       miden 50px cada uno, pero el padre reporta 2px hasta sacar esto).
       El redondeo de esquinas se logra en los hijos de punta en vez de acá. */
    margin-bottom: 16px;
}

/* Barra de acciones fija al pie del wizard de remesas: cuenta de cargo,
   totales y saldo resultante a la vista mientras se arma la remesa. */
/* La página del wizard es una columna: área con scroll arriba y el pie
   pegado al borde inferior, sin tapar el contenido. */
.page-with-footer {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.wizard-actionbar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 28px;
    padding: 12px 24px;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 14px rgba(1, 25, 80, 0.05);
}

.wizard-actionbar-account {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 10px;
    padding: 10px 16px;
    color: #fff;
    background: var(--sb-bg);
    border-radius: var(--r-lg);
}

.wizard-actionbar-account span {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, 0.6);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wizard-actionbar-account strong {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.wizard-actionbar-account em {
    padding: 1px 7px;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--r-sm);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
}

.wizard-actionbar-figure {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wizard-actionbar-figure span {
    color: var(--text-muted);
    font-size: 11px;
}

.wizard-actionbar-figure strong {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wizard-actionbar-figure strong.negative {
    color: var(--error);
}

.wizard-actionbar-cta {
    margin-left: auto;
    padding-right: 22px;
    padding-left: 22px;
}

@media (max-width: 768px) {
    .wizard-actionbar {
        flex-wrap: wrap;
        gap: 12px 20px;
        padding: 12px 16px;
    }

    .wizard-actionbar-account,
    .wizard-actionbar-cta {
        width: 100%;
    }

    .wizard-actionbar-cta {
        justify-content: center;
    }
}

.workflow-step {
    background: var(--white);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-secondary);
    font-size: 12px;
}

.workflow-step:first-child {
    border-radius: calc(var(--r-lg) - 1px) 0 0 calc(var(--r-lg) - 1px);
}

.workflow-step:last-child {
    border-radius: 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0;
}

.workflow-step strong {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--navy);
}

.workflow-step.active strong {
    background: var(--blue);
    color: var(--white);
}

.workflow-step.done strong {
    background: var(--success);
    color: var(--white);
}

/* Pasos en línea al estilo del prototipo: sin cajas, círculo + texto; el
   activo y los completados en verde. Aplica al wizard y al ciclo de vida de
   la ficha de remesa. */
.workflow-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 14px 18px;
    background: var(--white);
    border: 1px solid var(--border);
}

.workflow-step,
.workflow-step:first-child,
.workflow-step:last-child {
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-weight: 500;
}

.workflow-step strong {
    border: 1.5px solid var(--border-mid);
    background: var(--white);
    color: var(--text-muted);
    font-size: 11.5px;
    transition:
        background var(--t),
        border-color var(--t),
        color var(--t);
}

.workflow-step.active,
.workflow-step.done {
    color: var(--success);
}

.workflow-step.active strong,
.workflow-step.done strong {
    border-color: var(--success);
    background: var(--success);
    color: var(--white);
}

.workflow-step.active strong {
    box-shadow: 0 0 0 4px var(--success-bg);
}

.workflow-step.active span {
    font-weight: 600;
}

/* Etapas posteriores a la creación, mostradas en el wizard solo como
   referencia del recorrido completo. */
.workflow-step.upcoming {
    color: var(--text-muted);
    cursor: default;
}

.workflow-step.upcoming strong {
    border-style: dashed;
    background: var(--surface);
    color: var(--text-muted);
}

.workflow-divider {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 14px;
    color: var(--text-muted);
    border-left: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.workflow-steps .workflow-step.failed {
    background: transparent;
    color: var(--error);
}

.workflow-steps .workflow-step.failed strong {
    border-color: var(--error);
}

/* Tabla compacta de beneficiarios del wizard de pagos (paso 1/2) --
   reemplaza las tarjetas apiladas por fila de tabla, mismo espíritu visual
   que el prototipo de referencia. */
.payment-table td {
    padding: 6px 8px;
}

.payment-row-input {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 12.5px;
    outline: none;
}

.payment-row-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(25, 115, 184, 0.1);
}

.payment-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 14px;
}

.payment-editor-list {
    padding: 0 18px 6px;
}

.payment-editor {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px;
    margin-bottom: 12px;
    background: var(--surface);
}

.payment-editor-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: var(--navy);
}

input[type='number'],
.field input:not([type]),
.close-actions input,
.json-editor {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    background: var(--white);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 13px;
    outline: none;
}

input[type='number'],
.field input:not([type]),
.close-actions input {
    height: 38px;
    padding: 0 12px;
}
input[type='number']:focus,
.field input:not([type]):focus,
.close-actions input:focus,
.json-editor:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(25, 115, 184, 0.1);
}

.readonly-value {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--navy);
    font-weight: 700;
}

.success-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    margin-bottom: 14px;
    border: 1px solid #9bd8c4;
    border-radius: var(--r-md);
    color: #087052;
    background: #ecfbf5;
    font-size: 13px;
}

.mono-value,
.mono-subtle {
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}
.mono-subtle {
    color: var(--text-muted);
    font-size: 10.5px;
    margin-top: 3px;
}

.close-panel {
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.close-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: min(100%, 720px);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}
.detail-grid > div,
.detail-list > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.detail-grid span,
.detail-list span {
    color: var(--text-muted);
    font-size: 11px;
}
.loading-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px;
    color: var(--text-muted);
}

.detail-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    justify-content: flex-end;
    background: rgba(10, 25, 50, 0.42);
}
.detail-drawer {
    width: min(520px, 94vw);
    height: 100%;
    overflow-y: auto;
    background: var(--white);
    box-shadow: -12px 0 30px rgba(0, 0, 0, 0.2);
}
.drawer-body {
    padding: 20px;
}
.drawer-body h2 {
    color: var(--navy);
    margin: 12px 0 4px;
}
.detail-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 24px 0;
}
.status-timeline {
    border-left: 2px solid var(--border);
    margin-left: 7px;
}
.status-timeline > div {
    display: flex;
    gap: 12px;
    margin: 0 0 18px -7px;
}
.status-timeline small {
    display: block;
    color: var(--text-muted);
    margin-top: 3px;
}
.timeline-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 3px solid var(--white);
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 1px var(--blue);
}

.qa-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 14px;
    align-items: start;
}
.qa-grid .payment-form-grid {
    grid-template-columns: 1fr 1fr;
}
.json-editor {
    min-height: 320px;
    resize: vertical;
    padding: 12px;
    font-family: var(--font-mono);
    line-height: 1.45;
}
.qa-response-panel {
    min-height: 540px;
}
.qa-result {
    padding: 18px;
}
.qa-result h3 {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 18px 0 7px;
}
.qa-result pre {
    max-height: 270px;
    overflow: auto;
    padding: 12px;
    margin: 0;
    border-radius: var(--r-md);
    background: #172033;
    color: #dce7f8;
    font: 11.5px/1.45 var(--font-mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.qa-verdict {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-radius: var(--r-md);
}
.qa-verdict.pass {
    color: #087052;
    background: #ecfbf5;
}
.qa-verdict.fail {
    color: #a52b21;
    background: #fff0ef;
}
.qa-verdict span {
    margin-left: auto;
    font-size: 12px;
}
.qa-suite-page .full {
    grid-column: 1 / -1;
}
.qa-suite-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.qa-suite-stats > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--white);
}
.qa-suite-stats strong {
    color: var(--navy);
    font-size: 21px;
}
.qa-suite-stats span {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.qa-case-main {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.qa-case-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
}

.qa-case-panel-title {
    min-width: 0;
    align-items: flex-start;
    line-height: 1.35;
}

.qa-case-panel-title > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.qa-source-row-chip {
    align-self: start;
    flex-shrink: 0;
    white-space: nowrap;
}

.qa-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.qa-page-actions .btn {
    white-space: nowrap;
}

.qa-case-filters-first {
    padding-top: 2px;
}

/* "Ejecutar todo" + exportar -- banner arriba de la consola de cada suite QA,
   ver frontend/script.js y frontend/pages/api-payments-qa.js. */
.qa-run-hero {
    text-align: center;
    padding: 56px 24px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.qa-run-hero h2 {
    font-size: 19px;
    color: var(--navy);
    margin: 0 0 8px;
}
.qa-run-hero p {
    color: var(--text-muted);
    font-size: 13px;
    max-width: 480px;
    margin: 0 auto 26px;
    line-height: 1.6;
}
.qa-run-hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-hero {
    height: 48px;
    padding: 0 30px;
    font-size: 15px;
    border-radius: var(--r-md);
}

/* Filtro de endpoint de la lista de casos QA (portal dentro del sidebar
   oscuro compartido -- ver #qa-case-slot en shell.js). Mismo look que
   .case-search-input, pero <select> nativo. */
.case-filter-select {
    width: 100%;
    height: 34px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-sm);
    color: #e2e8f0;
    font-family: var(--font);
    font-size: 12px;
    padding: 0 10px;
    outline: none;
}
/* El <select> cerrado pinta su texto con el color de arriba (claro, para el
   fondo oscuro del sidebar) -- pero Chrome también aplica ese mismo color a
   cada <option> dentro del popup nativo, que siempre tiene fondo blanco
   (no es estilable). Sin este override, las opciones se ven gris claro
   sobre blanco -- bajo contraste, "apagadas". Fijar el color del <option>
   por separado no afecta el texto del select cerrado (usa su propio
   color), solo el popup. */
.case-filter-select option {
    color: var(--text-primary);
    background: var(--white);
}
.qa-step-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
}
.qa-step-tabs button {
    min-width: 150px;
    display: grid;
    grid-template-columns: 23px 1fr auto;
    align-items: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--white);
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
}
.qa-step-tabs button.active {
    border-color: var(--blue);
    background: #eef7fc;
    color: var(--navy);
}
.qa-step-tabs button > span {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    font-weight: 700;
}
.qa-step-tabs button.active > span {
    background: var(--blue);
    color: var(--white);
}
.qa-step-tabs small {
    font: 700 10px var(--font-mono);
}
.qa-endpoint {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.qa-endpoint strong {
    color: var(--blue);
    font: 700 11px var(--font-mono);
}
.qa-endpoint code {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--navy);
}
.qa-endpoint span {
    margin-left: auto;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 10.5px;
}
.qa-contract-issues {
    display: grid;
    gap: 5px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #f0b4ae;
    border-radius: var(--r-md);
    background: #fff7f6;
    color: #a52b21;
    font-size: 12px;
}

/* Ficha de remesa, bandeja por estado e historial de operaciones
   (pages/remesa.js, pages/cuentas.js, pages/historial.js). */
.workflow-steps.lifecycle {
    grid-template-columns: repeat(5, 1fr);
}
.workflow-step.skipped {
    opacity: 0.55;
}
/* Paso donde la remesa se detuvo sin pagarse (RECH, LIQN, ELIF). */
.workflow-step.failed {
    background: var(--error-bg);
}
.workflow-step.failed strong {
    background: var(--error);
    color: var(--white);
}
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    margin-bottom: 14px;
    border: 1px solid #c4ddf5;
    border-left: 4px solid var(--info);
    border-radius: var(--r-md);
    background: var(--info-bg);
    color: var(--navy);
    font-size: 13px;
}
.info-banner p {
    margin: 4px 0 0;
    color: var(--text-secondary);
}
.remittance-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
}
.remittance-action p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 12.5px;
    max-width: 720px;
}
.result-meta {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}
.timeline-source {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}
.timeline-dot.dot-error {
    background: var(--error);
    box-shadow: 0 0 0 1px var(--error);
}
.timeline-dot.dot-app {
    background: var(--text-muted);
    box-shadow: 0 0 0 1px var(--text-muted);
}
.inbox-section-title {
    padding: 12px 20px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.row-action {
    color: var(--blue);
    font-weight: 600;
    white-space: nowrap;
}
.log-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
    padding: 18px;
}

@media (max-width: 680px) {
    .workflow-steps.lifecycle,
    .log-filters {
        grid-template-columns: 1fr;
    }
    .remittance-action {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Las 3 suites de pruebas (Conciliación, Bulk Payments, Payments Status)
   viven anidadas en el shell principal (frontend/shell.js), comparten un
   único sidebar/topbar, y portan su lista de casos al sidebar via
   ReactDOM.createPortal hacia #qa-case-slot -- el área de contenido queda a
   ancho completo para el request/response de cada endpoint (.qa-grid). */

@media (max-width: 1100px) {
    .payment-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .qa-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .page-heading,
    .close-panel,
    .close-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .workflow-steps,
    .payment-form-grid,
    .qa-grid .payment-form-grid,
    .detail-grid,
    .detail-list {
        grid-template-columns: 1fr;
    }
    .qa-suite-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .qa-endpoint {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .qa-endpoint span {
        width: 100%;
        margin-left: 0;
    }
}

/* ── Bandeja de pagos: tarjetas por remesa ──── */
.inbox-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 4px 16px 16px;
    list-style: none;
}

.inbox-card {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    color: var(--text-primary);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color var(--t),
        box-shadow var(--t),
        transform var(--t);
}

.inbox-card:hover {
    border-color: var(--border-mid);
    box-shadow: var(--sh-md);
    transform: translateY(-1px);
}

.inbox-card-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #5bbeff 0%, #1973b8 60%, #0b4f96 100%);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.inbox-card-main {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.inbox-card-main strong {
    font-size: 13.5px;
    font-weight: 700;
}

.inbox-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: var(--text-secondary);
    font-size: 11.5px;
}

.inbox-card-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.inbox-card-side {
    display: flex;
    max-width: 320px;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    text-align: right;
}

.inbox-card-side .badge {
    white-space: normal;
}

.inbox-card-amount {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.inbox-card-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--blue);
    font-size: 11.5px;
    font-weight: 600;
}

/* =============================================
   MOVIMIENTO (mismos tiempos que el prototipo de referencia, que usa
   Framer Motion; acá en CSS porque el frontend no tiene build)
   ============================================= */

/* Entrada de cada pantalla: desde la derecha, 0.28s. Cada Page se monta de
   nuevo al cambiar de ruta, así que la animación corre en cada navegación.
   "backwards" no deja transform aplicado al terminar (si quedara, los
   position:fixed de adentro -- drawers -- se posicionarían mal). */
@keyframes page-in {
    from {
        opacity: 0;
        transform: translateX(48px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pop-in {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes drawer-in {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.layout > .content,
.layout > .page-with-footer {
    animation: page-in 0.28s ease-in-out backwards;
}

/* Bloques de la pantalla en cascada: suben 20px, 0.4s, 0.05s entre uno y
   otro (delayChildren 0.1s). */
.content > *,
.kpi-strip > *,
.recon-summary > *,
.inbox-cards > li,
.account-list > * {
    animation: fade-up 0.4s ease-out backwards;
}

.content > :nth-child(1),
.kpi-strip > :nth-child(1),
.recon-summary > :nth-child(1),
.inbox-cards > li:nth-child(1),
.account-list > :nth-child(1) {
    animation-delay: 0.1s;
}

.content > :nth-child(2),
.kpi-strip > :nth-child(2),
.recon-summary > :nth-child(2),
.inbox-cards > li:nth-child(2),
.account-list > :nth-child(2) {
    animation-delay: 0.15s;
}

.content > :nth-child(3),
.kpi-strip > :nth-child(3),
.recon-summary > :nth-child(3),
.inbox-cards > li:nth-child(3),
.account-list > :nth-child(3) {
    animation-delay: 0.2s;
}

.content > :nth-child(4),
.kpi-strip > :nth-child(4),
.inbox-cards > li:nth-child(4),
.account-list > :nth-child(4) {
    animation-delay: 0.25s;
}

.content > :nth-child(5),
.kpi-strip > :nth-child(5),
.inbox-cards > li:nth-child(5),
.account-list > :nth-child(5) {
    animation-delay: 0.3s;
}

.content > :nth-child(6),
.kpi-strip > :nth-child(6),
.inbox-cards > li:nth-child(6),
.account-list > :nth-child(6) {
    animation-delay: 0.35s;
}

.content > :nth-child(n + 7),
.kpi-strip > :nth-child(n + 7),
.inbox-cards > li:nth-child(n + 7),
.account-list > :nth-child(n + 7) {
    animation-delay: 0.4s;
}

/* El fondo del drawer no debe moverse con la cascada. */
.content > .detail-drawer-backdrop {
    animation: fade-in 0.2s ease-out;
}

/* Tarjetas: se elevan 2px al pasar el mouse (whileHover y:-2). */
.kpi-card,
.recon-flow-card,
.recon-balance-card,
.account-card {
    transition:
        transform 0.2s ease-out,
        box-shadow 0.2s ease-out,
        border-color 0.2s ease-out;
}

.kpi-card:hover,
.recon-flow-card:hover,
.recon-balance-card:hover,
.account-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-md);
}

/* Botones: crecen un poco al pasar el mouse y se hunden al hacer clic
   (whileHover scale 1.02 / whileTap 0.97). */
.btn,
.icon-btn,
.topbar-icon-btn,
.filter-btn {
    transition:
        background var(--t),
        border-color var(--t),
        color var(--t),
        box-shadow var(--t),
        transform 0.15s ease-out;
}

.btn:not(:disabled):hover {
    transform: scale(1.02);
}

.btn:not(:disabled):active,
.filter-btn:active {
    transform: scale(0.97);
}

.icon-btn:hover,
.topbar-icon-btn:hover {
    transform: scale(1.08);
}

.icon-btn:active,
.topbar-icon-btn:active {
    transform: scale(0.92);
}

/* Enlace de volver: se desplaza a la izquierda; "más opciones" a la derecha. */
.page-back:hover {
    transform: translateX(-2px);
}

/* Contadores (chips de resultados): aparecen con un "pop". */
.results-chip,
.sandbox-suite-count {
    animation: pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Drawer de detalle: fondo con blur y panel con entrada tipo resorte. */
.detail-drawer-backdrop {
    backdrop-filter: blur(2px);
    animation: fade-in 0.2s ease-out;
}

.detail-drawer {
    animation: drawer-in 0.32s cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* Indicador ámbar del menú lateral que se desliza entre opciones
   (layoutId "selectedIndicator" en el prototipo). */
.case-list {
    position: relative;
}

.nav-indicator {
    position: absolute;
    top: 0;
    left: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sb-accent);
    transition:
        transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
        height 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
    pointer-events: none;
}

.case-list.has-indicator .case-item.active,
.case-list.has-indicator .case-item:hover {
    border-left-color: transparent;
}

/* Quien pidió menos movimiento en su sistema no ve nada de lo anterior. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Space Grotesk para títulos de página y montos destacados. */
.page-heading h1,
.kpi-value,
.recon-balance,
.recon-flow-value,
.account-hero-amount,
.inbox-card-amount,
.wizard-actionbar-account strong,
.wizard-actionbar-figure strong,
.result-card-amount,
.remittance-banner-title {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* Foco visible del teclado en el menú lateral. */
.case-item:focus-visible,
.sidebar-submenu-item:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: -2px;
}

/* ── Resultado pagos: contadores que filtran ─── */
.status-counters {
    position: relative;
}

.kpi-card--action {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.kpi-card--action:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.kpi-card--action.active {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(25, 115, 184, 0.14);
}

.kpi-card--action:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.status-counters-note {
    grid-column: 1 / -1;
    margin: -4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}

.inbox-card.selected {
    border-color: var(--blue);
    background: var(--sky);
}

/* ── Filtros plegables con resumen ───────────── */
.filter-summary {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 12px;
}

.filter-chip {
    padding: 3px 9px;
    overflow: hidden;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-toggle {
    flex-shrink: 0;
    height: 30px;
    font-size: 12.5px;
}

/* ── Ruta de navegación del wizard ───────────── */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.breadcrumb-sep {
    color: var(--border-mid);
}

.breadcrumb-current {
    color: var(--blue);
    font-weight: 600;
}

/* ── Avatares con iniciales ──────────────────── */
.payment-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.name-avatar {
    display: grid;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    place-items: center;
    color: #fff;
    background: var(--navy);
    border-radius: 50%;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.name-avatar.empty {
    color: var(--text-muted);
    background: var(--surface-2);
}

/* ── Banner y detalle de remesa (wizard paso 3 y ficha) ── */
.remittance-banner {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    color: #fff;
    background: var(--sb-bg);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
}

.remittance-banner-badge {
    color: var(--sb-bg);
    background: #d6f0ff;
}

.remittance-banner-title {
    margin: 8px 0 2px;
    font-size: 18px;
    font-weight: 700;
}

.remittance-banner-id {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-mono);
    font-size: 11px;
}

.remittance-banner-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--sb-accent);
}

.remittance-banner-icon svg {
    width: 100%;
    height: 100%;
}

.remittance-detail-grid {
    display: grid;
    flex-shrink: 0;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.remittance-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.remittance-summary h3 {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.summary-item span {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.summary-item strong {
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.beneficiary-list {
    max-height: 360px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.beneficiary-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-top: 1px solid var(--border);
}

.beneficiary-list li:first-child {
    border-top: 0;
}

.beneficiary-main {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.beneficiary-amount {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}

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

.remittance-banner-figures {
    display: flex;
    flex-shrink: 0;
    gap: 28px;
    text-align: right;
}

.remittance-banner-figures span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.remittance-banner-figures small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.remittance-banner-figures strong {
    font-family: var(--font-display);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

/* ── Menú Ayuda ──────────────────────────────── */
.help-section {
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}

.topbar-popover-head + .help-section {
    border-top: 0;
}

.help-section h4 {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.help-section p {
    margin: 0 0 10px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.help-flow {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.help-flow li + li {
    margin-top: 4px;
}

.help-shortcuts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-shortcuts li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
}

.help-shortcuts kbd {
    min-width: 78px;
    padding: 2px 6px;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--font);
    font-size: 10.5px;
    text-align: center;
}

/* ── Transición entre pantallas (View Transitions API) ── */
/* La pantalla que sale va a la izquierda y la nueva entra desde la derecha
   (exit x:-48 / initial x:48 del prototipo). El resto (sidebar, barra
   superior) no se anima. */
.layout > .content,
.layout > .page-with-footer {
    view-transition-name: page;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

::view-transition-old(page) {
    animation: page-out 0.2s ease-in both;
}

::view-transition-new(page) {
    animation: page-in 0.28s ease-out both;
}

@keyframes page-out {
    to {
        opacity: 0;
        transform: translateX(-48px);
    }
}

/* Donde hay View Transitions, la entrada la hace ::view-transition-new; se
   apaga la animación CSS propia para no animar dos veces. */
@supports (view-transition-name: page) {
    .layout > .content,
    .layout > .page-with-footer {
        animation: none;
    }
}

/* ── Cuentas: datos de BBVA dentro de la tarjeta elegida ── */
.account-card.active {
    padding-top: 20px;
    padding-bottom: 20px;
}

.account-card-details {
    flex: 1.6;
    min-width: 0;
    padding-left: 22px;
    border-left: 1px solid #c9dff2;
    cursor: default;
}

.account-card-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 18px;
}

.account-card-details-grid > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.account-card-details-grid span {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.account-card-details-grid strong {
    overflow: hidden;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-card-details-cci {
    grid-column: span 2;
}

.account-card-details-cci strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.account-card-details-cci .btn {
    height: 24px;
    padding: 0 8px;
}

@media (max-width: 1100px) {
    .account-card.active {
        flex-wrap: wrap;
    }

    .account-card-details {
        flex-basis: 100%;
        padding-top: 12px;
        padding-left: 0;
        border-top: 1px solid #c9dff2;
        border-left: 0;
    }
}