:root {
    /* Paleta corporativa */
    --azul: #183964;        /* primario */
    --secundario: #B4C54F;
    --verde: #B4C54F;       /* alias de secundario */
    --azul-claro: #2D5F9E;
    --verde-osc: #8A9A35;   /* verde oscuro */
    --neutro: #A7B5C8;
    --fondo: #F7F8F8;
    --gris: #F7F8F8;        /* alias de fondo */
    --blanco: #FFFFFF;
    /* Derivados para texto y bordes (legibilidad) */
    --gris-borde: #E1E6EC;
    --texto: #1F2A37;
    --texto-suave: #5A6B82;
    --sombra: 0 10px 30px rgba(24, 57, 100, .12);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--texto);
    background: var(--fondo);
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Login ---------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Fondo CLARO (neutro)*/
    background: linear-gradient(160deg, var(--neutro) 0%, var(--azul-claro) 100%);
}

.login-card {
    width: 100%;
    max-width: 940px;
    min-height: 480px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--blanco);
    border-radius: 18px;
    overflow: hidden;
    /* sombra fuerte + anillo claro para que la tarjeta siempre se distinga del fondo */
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .25);
}

.login-brand {
    background: linear-gradient(160deg, var(--azul) 0%, var(--azul-claro) 100%);
    color: var(--blanco);
    padding: 44px 40px 0;
    display: flex;
    flex-direction: column;
}
.login-brand .brand-cab h1 { font-size: 38px; margin: 0 0 6px; line-height: 1.1; }
.login-brand .brand-cab p { color: var(--secundario); font-size: 16px; font-weight: 600; letter-spacing: .3px; margin: 0; }
.brand-mascota { max-height: 300px; max-width: 88%; align-self: center; margin-top: auto; object-fit: contain; object-position: center bottom; }

.login-form { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.login-form h2 { color: var(--azul); margin: 0 0 4px; font-size: 26px; }
.login-form .sub { color: var(--texto-suave); margin: 0 0 28px; font-size: 14px; }
.login-nota { background: var(--fondo); border: 1px solid var(--gris-borde); color: var(--texto-suave); font-size: 13px; border-radius: 8px; padding: 10px 12px; margin: 0 0 18px; }

@media (max-width: 720px) {
    .login-card { grid-template-columns: 1fr; min-height: 0; }
    .login-brand { padding: 28px 28px 0; }
    .brand-mascota { max-height: 200px; }
}

.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: 13px; font-weight: 600; color: var(--azul); margin-bottom: 6px; }
.campo input {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--gris-borde); border-radius: 10px;
    font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.campo input:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(180, 197, 79, .25); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: 10px; padding: 12px 22px;
    font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--verde); color: var(--azul); }
.btn-primary:hover { background: var(--verde-osc); }
.btn-light { background: var(--blanco); color: var(--azul); border: 1.5px solid var(--gris-borde); }
.btn-block { width: 100%; }

.login-acciones { display: flex; gap: 12px; margin-top: 8px; }
.olvido { display: block; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--azul-claro); margin: 18px 0 0; }
.olvido:hover { color: var(--azul); text-decoration: underline; }

/* Checklist de requisitos de contraseña (rojo → verde) */
.req-titulo { font-size: 12px; color: #5a6b82; font-weight: 600; margin: 4px 0 6px; }
.req-lista { list-style: none; margin: 0 0 16px; padding: 10px 12px; background: #faf8f8; border: 1px solid #eee; border-radius: 8px; }
.req-lista .req { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #b23a3a; padding: 3px 0; transition: color .15s; }
.req-lista .req.ok { color: #2f7d3b; }
.req-txt { flex: 1 1 auto; }
.req-min { flex: 0 0 auto; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: #b23a3a; opacity: .8; }
.req.ok .req-min { color: #2f7d3b; }
.req-ic { flex: 0 0 auto; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 10px; font-weight: 700; background: #f2d6d6; color: #b23a3a; }
.req.ok .req-ic { background: #d6ecd8; color: #2f7d3b; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.alerta { background: #fdecec; color: #b3261e; border: 1px solid #f6c9c6; padding: 10px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; }
.campo .val { color: #b3261e; font-size: 12.5px; margin-top: 4px; display: block; }

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

.sidebar { background: var(--azul); color: var(--blanco); padding: 22px 16px; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; }
.sidebar .marca { font-size: 19px; font-weight: 700; padding: 6px 10px 22px; display: flex; align-items: center; gap: 10px; }
.sidebar .marca .pill { width: 30px; height: 30px; border-radius: 9px; background: var(--verde); display:inline-flex; align-items:center; justify-content:center; color: var(--azul); font-weight: 800; }
.sidebar nav { display: flex; flex-direction: column; }
.sidebar nav .nav-item {
    display: flex; align-items: center; gap: 10px;
    color: rgba(255, 255, 255, .82); padding: 10px 12px; border-radius: 9px;
    font-size: 14px; margin-bottom: 2px; text-decoration: none; cursor: pointer;
}
.sidebar nav a.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.sidebar nav .nav-item.activo { background: var(--verde); color: var(--azul); font-weight: 600; }
/* Etiquetas largas (p.ej. "Transferencia entre bancos") envuelven en vez de cortarse. En riel el .nav-txt se oculta, así que no afecta. */
.sidebar nav .nav-item .nav-txt { white-space: normal; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }

/* Grupos del menú (Catálogos, Desembolso de fondos, Saldo de bancos, Reportes) */
.nav-grupo { margin-top: 14px; }
.nav-grupo:first-of-type { margin-top: 8px; }
.nav-grupo-head {
    width: 100%; display: flex; align-items: center; gap: 9px; font-family: inherit;
    background: rgba(255, 255, 255, .07); border: 0; border-radius: 8px; cursor: pointer;
    padding: 9px 11px; margin-bottom: 5px;
    color: rgba(255, 255, 255, .9); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
}
.nav-grupo-head:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-grupo-head .ico { width: 15px; height: 15px; flex: 0 0 auto; color: var(--verde); }
.nav-chevron { margin-left: auto; display: inline-flex; transition: transform .15s ease; }
.nav-chevron .ico { width: 14px; height: 14px; }
.nav-grupo.cerrado .nav-chevron { transform: rotate(-90deg); }
.nav-grupo.cerrado .nav-grupo-items { display: none; }
.nav-grupo-items { display: flex; flex-direction: column; }
.nav-grupo-items .nav-item { padding-left: 24px; font-size: 13.5px; }
.nav-proximamente { color: rgba(255, 255, 255, .3); cursor: default; }
.nav-proximamente:hover { background: none; }

.contenido { display: flex; flex-direction: column; }
.topbar {
    background: var(--blanco); border-bottom: 1px solid var(--gris-borde);
    padding: 14px 28px; display: flex; align-items: center; justify-content: space-between;
}
.topbar .titulo { color: var(--azul); font-size: 18px; font-weight: 700; }
.topbar .usuario { display: flex; align-items: center; gap: 14px; color: var(--texto-suave); font-size: 14px; }
.topbar .usuario .usuario-nombre { display: inline-flex; align-items: center; gap: 7px; }
.topbar .usuario .usuario-nombre .ico { width: 16px; height: 16px; color: var(--azul); }
/* Botón Fideicomisos: relleno sólido de la marca + flecha de salida, para que se lea claramente como botón. */
.btn-fideicomisos { display: inline-flex; align-items: center; gap: 8px; background: var(--azul); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 9px; text-decoration: none; white-space: nowrap; transition: background .15s ease, transform .05s ease; }
.btn-fideicomisos:hover { background: #12315b; }
.btn-fideicomisos:active { transform: scale(.98); }
.btn-fideicomisos .ico { width: 15px; height: 15px; color: #fff; }
.btn-fideicomisos .ico:last-child { width: 13px; height: 13px; opacity: .9; }
/* Página de inicio: banda de bienvenida + accesos rápidos. */
.inicio { display: flex; flex-direction: column; gap: 22px; }
.inicio-hero { background: var(--azul); border-radius: 14px; padding: 22px 26px; display: flex; align-items: center; gap: 16px; }
.inicio-hero-ico { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .15); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.inicio-hero-ico .ico { width: 24px; height: 24px; color: #fff; }
.inicio-hola { color: #fff; font-size: 20px; font-weight: 700; }
.inicio-sub { color: #b5d4f4; font-size: 13.5px; margin-top: 3px; }
.inicio-seccion { color: var(--azul); font-weight: 700; font-size: 15px; }
.inicio-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.inicio-card { display: flex; align-items: flex-start; gap: 13px; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: 12px; padding: 16px 18px; text-decoration: none; transition: border-color .15s ease, transform .05s ease, box-shadow .15s ease; }
.inicio-card:hover { border-color: var(--verde); box-shadow: 0 2px 10px rgba(24, 57, 100, .06); }
.inicio-card:active { transform: scale(.99); }
.inicio-card-ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(180, 197, 79, .18); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.inicio-card-ico .ico { width: 19px; height: 19px; color: var(--verde-osc); }
.inicio-card-txt { display: flex; flex-direction: column; }
.inicio-card-t { color: var(--azul); font-weight: 600; font-size: 14.5px; }
.inicio-card-d { color: var(--texto-suave); font-size: 12.5px; margin-top: 2px; }
.inicio-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.inicio-kpi-v { color: var(--azul); font-size: 28px; font-weight: 700; line-height: 1.1; }
.main { padding: 28px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.card { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: 14px; padding: 22px; }
.card .k { color: var(--texto-suave); font-size: 13px; }
.card .v { color: var(--azul); font-size: 28px; font-weight: 700; margin-top: 6px; }

/* ---------- Tabla ---------- */
.panel { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: 14px; overflow: hidden; }
.panel .panel-head { padding: 16px 20px; border-bottom: 1px solid var(--gris-borde); display: flex; justify-content: space-between; align-items: center; }
.panel .panel-head h3 { margin: 0; color: var(--azul); font-size: 16px; }

table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid thead th { background: var(--gris); color: var(--azul); text-align: left; padding: 12px 16px; font-weight: 600; border-bottom: 1px solid var(--gris-borde); }
table.grid tbody td { padding: 12px 16px; border-bottom: 1px solid var(--gris-borde); }
table.grid tbody tr:hover { background: #fafbfd; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-pend { background: #fff4d6; color: #8a6d1a; }
.badge-ok { background: #e7f0d4; color: #5e7016; }

.btn-sm { padding: 6px 12px; font-size: 13px; }
.mensaje { background: #e7f0d4; color: #5e7016; padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; }
.paginacion { display: flex; gap: 8px; padding: 14px 20px; justify-content: flex-end; align-items: center; }
.vacio { padding: 40px; text-align: center; color: var(--texto-suave); }

/* ---------- Toolbar de módulo ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .sep { flex: 1; }
.toggle { display: inline-flex; border: 1px solid var(--gris-borde); border-radius: 9px; overflow: hidden; }
.toggle a { padding: 8px 16px; font-size: 14px; color: var(--azul); background: var(--blanco); }
.toggle a.on { background: var(--azul); color: #fff; }
.toggle a:hover { text-decoration: none; }

/* ---------- Selector de columnas ---------- */
.col-chooser { position: relative; display: inline-block; }
.col-chooser-panel {
    position: absolute; top: 110%; right: 0; z-index: 20; display: none;
    background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: 10px;
    box-shadow: var(--sombra); padding: 10px; min-width: 220px; max-height: 320px; overflow: auto;
}
.col-chooser.abierto .col-chooser-panel { display: block; }
.col-chooser-panel label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 14px; border-radius: 7px; cursor: pointer; }
.col-chooser-panel label:hover { background: var(--gris); }

table.grid td.acc { white-space: nowrap; }
.grid-scroll { overflow-x: auto; }

/* ---------- Ordenamiento por columna ---------- */
table.grid thead th.ordenable { cursor: pointer; user-select: none; }
table.grid thead th.ordenable:hover { background: #eef1f6; }
.orden-flecha { color: var(--verde-osc); font-size: 12px; }

/* ---------- Botón peligro / confirmación ---------- */
.btn-peligro { background: #d8443a; color: #fff; }
.btn-peligro:hover { background: #b3261e; }
.conf-msg { color: var(--texto); font-size: 15px; line-height: 1.5; margin: 0 0 18px; }

/* ---------- Barra de acciones + selección de fila---------- */
.acciones-grid { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
table.grid-sel tbody tr { cursor: pointer; }
table.grid-sel tbody tr.activa td { background: rgba(180, 197, 79, .20); }
/* Depósitos sin recibo: selección por clic en la fila*/
.dep-row { cursor: pointer; }
.dep-row.activa td { background: rgba(180, 197, 79, .20); }
/* Reporte tributario: bandas de grupo colapsables (Compañía / Cliente). */
#tribCont .rec-empresa, #tribCont .rec-moneda { cursor: pointer; user-select: none; }
#tribCont .grp-arrow { display: inline-block; width: 1.1em; font-size: 12px; opacity: .85; }
/* Aprovecha el alto de la pantalla: el área del reporte crece hasta cerca del borde inferior. */
#tribCont .grid-scroll-alto { max-height: calc(100vh - 210px); }
/* Cargar bancos (importar extracto con mapeo + preview). */
.cb-mapeo { display: flex; flex-wrap: wrap; gap: 12px 18px; padding: 14px 20px; }
.cb-mapeo-acc, .cb-res-acc { display: flex; align-items: center; gap: 16px; padding: 0 20px 12px; }
.cb-res-acc { padding-top: 12px; }
.cb-leyenda { font-size: 13px; color: #6b7280; display: inline-flex; align-items: center; gap: 6px; }
.cb-chip { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: middle; }
.cb-fila-enc td { background: rgba(45, 95, 158, .14); font-weight: 700; }
.cb-fila-ruido td { opacity: .5; }
tr.cb-nueva td, .cb-chip.cb-nueva { background: #ffe08a; }                 /* Nuevo = ámbar/oro */
tr.cb-dup td, .cb-chip.cb-dup { background: #e7f0d4; }                     /* Ya registrado = verde de la paleta (igual al badge de formato) */
tr.cb-fuera td, .cb-chip.cb-fuera { background: #e9ecef; color: #868e96; } /* Fuera de periodo = gris */
tr.cb-sistema td, .cb-chip.cb-sistema { background: #d0ebff; }            /* Solo en sistema = azul */
#cbGridCruda td, #cbGridCruda th { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
/* Selector de archivo bonito (oculta el input gris nativo). */
.file-picker { display: inline-flex; align-items: center; gap: 10px; }
.file-nombre { font-size: 13px; color: #6b7280; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-col { text-align: center; }

/* ---------- Ficha de consulta (label/valor) ---------- */
.ficha-sec { color: var(--azul); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 2px; }
.ficha-sec:first-child { margin-top: 0; }
.ficha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
.ficha-grid > div { display: flex; flex-direction: column; padding: 9px 0; border-bottom: 1px solid var(--gris-borde); }
.ficha-grid span { font-size: 12px; color: var(--texto-suave); }
.ficha-grid strong { color: var(--azul); font-size: 15px; }

/* ---------- Impresión ---------- */
@media print {
    .sidebar, .topbar, .toolbar, .paginacion, .modal-fondo { display: none !important; }
    .app { display: block; }
    .contenido { display: block; }
    .main { padding: 0; }
    body { background: #fff; }
    .panel { border: none; box-shadow: none; }
    table.grid thead th { background: #fff; }
    table.grid-sel thead th:first-child, table.grid-sel td.sel-col { display: none; }
    table.grid td.acc, table.grid input, table.grid button { display: none; }
    .grid-filtros { display: none; }
}

/* La barra de herramientas queda fija arriba (sticky); el grid se desplaza por debajo.
   Se ancla al viewport: ningún ancestro tiene overflow, así que no rompe el layout. */
.toolbar {
    position: sticky; top: 0; z-index: 20;
    background: var(--gris); padding: 12px 0; margin-bottom: 4px;
    box-shadow: 0 6px 6px -6px rgba(24, 57, 100, .12);
}

/* ---------- Sidebar colapsable (riel de íconos) ---------- */
.app { transition: grid-template-columns .18s ease; }
.app.nav-oculta { grid-template-columns: 64px 1fr; }
.sidebar { overflow-x: hidden; white-space: nowrap; }
.app.nav-oculta .nav-txt, .app.nav-oculta .marca-txt { display: none; }
.app.nav-oculta .sidebar { padding: 22px 8px; }
.app.nav-oculta .sidebar nav .nav-item { justify-content: center; padding: 11px 0; }
.app.nav-oculta .nav-grupo-head { justify-content: center; padding: 9px 0; }
.app.nav-oculta .marca { justify-content: center; padding: 6px 0 22px; }
.app.nav-oculta .sidebar nav .nav-item.activo { border-radius: 9px; }
.topbar-izq { display: flex; align-items: center; gap: 14px; }
.btn-menu { background: transparent; border: none; color: var(--azul); cursor: pointer; padding: 6px; display: inline-flex; border-radius: 8px; }
.btn-menu:hover { background: var(--gris); }
.btn-menu .ico { width: 20px; height: 20px; }

/* Íconos y módulos sin acceso en el menú */
.sidebar nav .ico { width: 17px; height: 17px; flex: 0 0 auto; }
.nav-bloqueado { color: var(--neutro); cursor: not-allowed; }
.nav-bloqueado:hover { background: rgba(255, 255, 255, .04); }

/* ---------- Toasts (mensajes flotantes) ---------- */
.toasts { position: fixed; top: 18px; right: 18px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast {
    min-width: 240px; max-width: 380px; padding: 13px 16px; border-radius: 10px;
    font-size: 14px; color: #fff; box-shadow: var(--sombra); animation: toastIn .2s ease;
}
.toast-info { background: var(--azul); }
.toast-ok { background: var(--verde-osc); }
.toast-error { background: #d8443a; }
.toast.saliendo { opacity: 0; transition: opacity .3s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Overlay de carga ---------- */
.overlay-carga {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: center; justify-content: center;
    background: rgba(24, 57, 100, .28); backdrop-filter: blur(2px);
}
.overlay-carga.visible { display: flex; }
.overlay-box {
    background: var(--blanco); border-radius: 14px; box-shadow: var(--sombra);
    padding: 26px 34px; display: flex; flex-direction: column; align-items: center; gap: 14px;
    color: var(--azul); font-size: 14px; font-weight: 600;
}
.spinner {
    width: 42px; height: 42px; border-radius: 50%;
    border: 4px solid var(--gris-borde); border-top-color: var(--verde);
    animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Íconos en botones */
.ico { width: 15px; height: 15px; flex: 0 0 auto; }

/* Fila de filtros por columna (auto-filtro estilo legacy) */
.grid-filtros th { padding: 4px 8px; background: var(--gris); border-bottom: 1px solid var(--gris-borde); }
.grid-filtros .filtro-col {
    width: 100%; padding: 5px 8px; font-size: 12.5px; font-weight: 400;
    border: 1px solid var(--gris-borde); border-radius: 6px; outline: none;
}
.grid-filtros .filtro-col:focus { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(180, 197, 79, .2); }

/* ---------- Modal ---------- */
.modal-fondo { position: fixed; inset: 0; background: rgba(24,57,100,.35); display: none; align-items: center; justify-content: center; z-index: 50; }
.modal-fondo.abierto { display: flex; }
.modal { background: var(--blanco); border-radius: 14px; box-shadow: var(--sombra); width: 100%; max-width: 440px; padding: 24px; }
.modal h3 { color: var(--azul); margin: 0 0 16px; }
.modal .campo { margin-bottom: 14px; }
.modal .acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.modal-ancho { max-width: 620px; }

/* Formularios de catálogos con muchos campos: 2 columnas, alto acotado con scroll interno y botones SIEMPRE visibles abajo. */
#catModal .modal { max-width: 720px; max-height: 90vh; display: flex; flex-direction: column; }
#catModal form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#catModal #catCampos { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; padding: 2px 4px; }
#catModal .acciones { flex: 0 0 auto; border-top: 1px solid var(--gris-borde); padding-top: 14px; margin-top: 8px; }
@media (max-width: 680px) { #catModal #catCampos { grid-template-columns: 1fr; } }
.chk-form { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto); padding-top: 4px; cursor: pointer; }
.chk-form input { width: 17px; height: 17px; accent-color: var(--azul); }
/* Campo a ancho completo dentro del modal de catálogos (la grilla es de 2 columnas). */
#catModal #catCampos .ancho-2 { grid-column: 1 / -1; }
/* Checklist (relación N:M, p.ej. usuarios aprobadores). */
.multi-lista { max-height: 200px; overflow-y: auto; border: 1px solid var(--gris-borde); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; background: #fff; }
.chk-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto); padding: 4px; border-radius: 6px; cursor: pointer; }
.chk-item:hover { background: var(--gris); }
.chk-item input { width: 16px; height: 16px; accent-color: var(--azul); }
/* Campo con botón de búsqueda (input + lupa que abre el modal selector). */
.cat-lookup { display: flex; gap: 6px; align-items: stretch; }
.cat-lookup input { flex: 1 1 auto; min-width: 0; }
.cat-lookup-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--gris-borde); border-radius: 9px; background: var(--blanco); color: var(--azul); cursor: pointer; }
.cat-lookup-btn:hover { background: var(--gris); border-color: var(--verde); }
/* Caja de búsqueda del modal selector (cuentas / beneficiarios). */
#selCuentaQ { width: 100%; padding: 9px 12px; border: 1px solid var(--gris-borde); border-radius: 9px; font-size: 14px; font-family: inherit; color: var(--texto); margin-bottom: 12px; box-sizing: border-box; }
#selCuentaQ:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(180, 197, 79, .25); outline: none; }
.resumen-dep { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; background: var(--gris); border: 1px solid var(--gris-borde); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.resumen-dep div { display: flex; flex-direction: column; }
.resumen-dep span { font-size: 12px; color: var(--texto-suave); }
.resumen-dep strong { color: var(--azul); font-size: 15px; }
.gps-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--azul); margin-bottom: 14px; cursor: pointer; }

/* ---------- Formulario (crear) ---------- */
.campo select, .campo textarea {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--gris-borde); border-radius: 10px;
    font-size: 15px; outline: none; background: var(--blanco); transition: border-color .15s, box-shadow .15s;
}
.campo select:focus, .campo textarea:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(180, 197, 79, .25); }
.campo .filtro { margin-bottom: 6px; font-size: 13.5px; padding: 8px 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; padding: 20px; }
.form-grid .ancho-2 { grid-column: 1 / -1; }
.nota-form { padding: 0 20px 16px; color: #6b7280; font-size: 13px; }
.panel + .panel { margin-top: 18px; }
.det-form { display: grid; grid-template-columns: 2fr 1fr 2fr auto; gap: 12px; align-items: end; padding: 16px 20px; border-bottom: 1px solid var(--gris-borde); }
.det-form .campo { margin: 0; }
.acciones-form { display: flex; gap: 10px; justify-content: flex-end; padding: 18px 20px; }
.tot-linea { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px; font-size: 15px; color: var(--azul); }
.tot-linea strong { color: var(--verde-osc); }
.link-quitar { color: #b3261e; cursor: pointer; font-size: 13px; }
.recibos-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--texto-suave); margin-bottom: 8px; }
.recibos-head strong { color: var(--verde-osc); font-size: 15px; }

/* ---------- Conciliación bancaria ---------- */
.concil-selectores { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.campo-inline { display: flex; flex-direction: column; gap: 4px; }
.campo-inline label { font-size: 12px; font-weight: 600; color: var(--azul); }
.campo-inline select {
    padding: 8px 12px; border: 1px solid var(--gris-borde); border-radius: 9px;
    font-size: 14px; min-width: 190px; background: var(--blanco); font-family: inherit;
}
.campo-inline select:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(180, 197, 79, .25); outline: none; }
.campo-inline input[type=date] {
    padding: 7px 10px; border: 1px solid var(--gris-borde); border-radius: 9px;
    font-size: 14px; background: var(--blanco); font-family: inherit; color: var(--texto);
}
.campo-inline input[type=date]:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(180, 197, 79, .25); outline: none; }
.campo-inline input[type=date]:disabled { background: var(--gris); color: var(--texto-suave); }
.chk-inline { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--texto); cursor: pointer; align-self: flex-end; padding-bottom: 8px; }
.chk-inline input { width: 16px; height: 16px; accent-color: var(--azul); }
.concil-periodo { font-size: 13px; color: var(--texto-suave); font-weight: 600; }
/* Toolbar de conciliación: selectores en su propia fila; los botones quedan SIEMPRE debajo (no se reacomodan al colapsar el menú). */
.toolbar-concil { align-items: flex-start; }
.toolbar-concil .concil-selectores { flex: 1 1 100%; }
.toolbar-concil .concil-periodo { margin-left: auto; align-self: center; }
.concil-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.concil-cols .panel { display: flex; flex-direction: column; margin-top: 0; }
.concil-cols .grid-scroll-alto { flex: 1; }
.filtro-grid {
    margin: 10px 16px 4px; width: calc(100% - 32px); padding: 8px 12px;
    border: 1px solid var(--gris-borde); border-radius: 9px; font-size: 13.5px; font-family: inherit;
}
.filtro-grid:focus { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(180, 197, 79, .2); outline: none; }
.grid-scroll-alto { max-height: 460px; min-height: 240px; overflow-y: auto; }
@media (max-width: 1100px) { .concil-cols { grid-template-columns: 1fr; } }

/* ---------- Cierre mensual ---------- */
.cierre-panel { max-width: 560px; margin: 0 auto; }
.cierre-body { padding: 24px 28px; }
.cierre-periodo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.cierre-periodo span { font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.cierre-periodo strong { font-size: 26px; color: var(--azul); }
.cierre-aviso { background: #fff4d6; color: #8a6d1a; border-radius: 9px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; margin-bottom: 20px; }

/* ---------- Presentación de saldos ---------- */
.toggle a { cursor: pointer; }
.saldo-grupo td { background: var(--azul); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 12px; }
.saldo-subtotal td { background: var(--gris); font-weight: 700; color: var(--verde-osc); text-align: right; padding: 8px 12px; }
/* Igual que el legacy: fila salmón cuando el Disponible es negativo. */
.saldo-neg td { background: #ffc0c0; color: #8a1c14; }
.saldo-row { cursor: pointer; }
.saldo-row:hover td { background: rgba(45, 95, 158, .08); }
.saldo-row.saldo-neg:hover td { background: #f7adad; }
/* Modo reporte (saldos anteriores): sin drill-down, no debe parecer clickeable. */
.saldo-row.no-clic { cursor: default; }
.saldo-row.no-clic:hover td { background: transparent; }
.saldo-row.no-clic.saldo-neg td, .saldo-row.no-clic.saldo-neg:hover td { background: #ffc0c0; }

/* Reporte Recibos sin depósito: agrupado Compañía (banda azul) → Moneda (sub-banda) con subtotal. */
.rec-empresa td { background: var(--azul); color: #fff; font-weight: 700; font-size: 13px; padding: 9px 12px; }
.rec-moneda td { background: #e7edf5; color: var(--azul); font-weight: 600; padding: 7px 12px; }
.rec-subtotal td { background: var(--gris); font-weight: 700; color: var(--verde-osc); text-align: right; padding: 8px 12px; }
.rec-row:hover td { background: rgba(45, 95, 158, .08); }

/* Consulta de transferencias: fila amarilla cuando el estado es "Gerencia Aprobado" (igual que el legacy). */
.estado-aprobado td { background: #fff3bf; }
.estado-aprobado:hover td { background: #ffec99; }

/* Toggle de vista (Tesorería / Contabilidad), como el botón "Vista" del legacy. */
.vista-toggle { display: inline-flex; border: 1px solid var(--gris-borde); border-radius: 8px; overflow: hidden; }
.vista-toggle button { border: 0; background: var(--blanco); color: var(--texto); padding: 6px 14px; font-size: 13px; cursor: pointer; }
.vista-toggle button + button { border-left: 1px solid var(--gris-borde); }
.vista-toggle button:hover { background: var(--gris); }
.vista-toggle button.activo { background: var(--azul); color: #fff; font-weight: 600; }
.vista-toggle button.activo:hover { background: var(--azul); }

/* Detalle de cuenta: color por tipo de movimiento (igual que el legacy, en tonos suaves) */
.det-sub { font-size: 13px; color: var(--texto-suave); }
.det-row.tipo-conciliados td { background: #e3f0fb; }
.det-row.tipo-solicitudes td { background: #d7f3ef; }
.det-row.tipo-depsinconciliar td { background: #fff0db; }
.det-row.tipo-pendeacreditar td { background: #fde7ec; }
.det-row.tipo-transsinconciliar td, .det-row.tipo-cksinconciliar td { background: #fdf6d6; }
.det-row.tipo-reservas td { background: #e7f0d8; }

/* Animaciones*/
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeInSuave { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes loginCardIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes flotarMascota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes loginFondo { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Entrada suave del contenido: SOLO opacidad (nada de transform). Un transform en .main la convierte en el
   bloque contenedor de los position:fixed → los modales de las vistas se desplazan y hay que scrollear. */
.main { animation: fadeInSuave .35s ease both; }

/* Tarjetas del panel de inicio: leve elevación al pasar el mouse. */
.card { transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(24, 57, 100, .12); }

/* Botones: leve elevación + sombra al pasar el mouse; estado deshabilitado más claro. */
.btn { transition: background .15s ease, transform .12s ease, box-shadow .15s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(24, 57, 100, .18); }
.btn:disabled { opacity: .55; cursor: default; box-shadow: none; transform: none; }

/* Resaltado de filas de grilla con transición suave. */
table.grid tbody tr { transition: background-color .12s ease; }

/* Modales: fondo con fundido y contenido con leve "pop". */
.modal-fondo.abierto { animation: fadeInSuave .18s ease; }
.modal-fondo.abierto .modal { animation: modalPop .24s cubic-bezier(.2, .7, .2, 1); }

/* Login: entrada de la tarjeta, flotación sutil de la mascota y fondo con movimiento muy lento. */
.login-card { animation: loginCardIn .55s cubic-bezier(.2, .7, .2, 1) both; }
.brand-mascota { animation: flotarMascota 5s ease-in-out infinite; }
.login-wrap { background-size: 220% 220%; animation: loginFondo 24s ease infinite; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}