/* ══════════════════════════════════════════════════════════════════
   Modulo Tesoreria — CSS propio (regla: un archivo por modulo).
   Prefijos por componente: .tcp- cuentas por cobrar y pagar al corte · .apl- aplicar un documento.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   Cuentas por cobrar y pagar AL CORTE (.tcp-) — rediseño 2026-10-12, /tesoreria/cuentasporcobrar.
   La página usa el esquema de cartera de Ventas por Cobrar y Compras por Pagar (.cxc- en commerce-reports.css:
   pantalla en columna, Saldos al, tabla con encabezado y totales pegados, paginación) y acá va solo lo propio: la
   línea con el lado (Por cobrar / Por pagar / Neto) y la nota del corte, la celda del documento y las vistas por
   titular y por cuenta. Las tarjetas de lado y la barra de antigüedad se quitaron el 2026-10-17 (pedido del user,
   para darle el alto a la tabla); la antigüedad quedó como filtro de la barra de búsqueda.
   El bloque .cxc- que vivía acá hasta esa fecha se borró: compartía cuatro clases con la cartera (.cxc-doc,
   .cxc-saldo, .cxc-tabla, .cxc-vacio) y, cargado después, las pisaba en Ventas por Cobrar y Compras por Pagar.
   ══════════════════════════════════════════════════════════════════════ */
.tcp { --tcp-lado: #1b87a8; }
.tcp--cobrar { --tcp-lado: #22a06b; }
.tcp--pagar { --tcp-lado: #e5584a; }

/* ── Barra de herramientas: Saldos al + búsqueda + Excel/Imprimir + vista + Acciones ── */
.tcp-toolbar { flex-wrap: wrap; row-gap: 8px; }
.tcp-toolbar__der { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tcp .cxc-modo__btn { white-space: nowrap; }

/* ── La línea sobre la tabla: lado, cuenta elegida y la nota del corte. Un solo renglón, para que la tabla tenga el alto ── */
.tcp-vista { flex: 0 0 auto; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.tcp-lsw .cxc-modo__btn { padding: 6px 14px; font-size: 13.5px; }
.tcp-lsw .cxc-modo__btn--activo.tcp-lsw--cobrar { background: #eef9f3; color: #1a7f4f; }
.tcp-lsw .cxc-modo__btn--activo.tcp-lsw--pagar { background: #fdf2f0; color: #b42318; }
.tcp-lsw .cxc-modo__btn--activo.tcp-lsw--neto { background: #e6f3f8; color: #136a85; }
.tcp-filtro {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 12px; border-radius: 999px;
    background: #e6f3f8; border: 1px solid #a9d3e3; color: #136a85; font-size: 13px; font-weight: 600;
}
.tcp-filtro button { border: 0; background: transparent; color: #136a85; cursor: pointer; padding: 0 4px; }

/* ── Detallado: titular y documento ── */
.tcp-c-doc { min-width: 280px; max-width: 400px; }
.tcp-tit, .tcp-docl { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.tcp-tit__nombre { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.tcp-otro {
    flex-shrink: 0; padding: 1px 8px; border-radius: 999px; background: #f1e9fb; color: #6b3fa0;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
/* Con el filtro de aplicaciones posteriores: estaba pendiente al corte y se aplicó después */
.tcp-post {
    flex-shrink: 0; padding: 1px 8px; border-radius: 999px; background: #e3f5ec; color: #1a7f4f;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.tcp-tabla .cxc-fila--doc .tcp-post { display: inline-block; margin-left: 6px; vertical-align: middle; }
.tcp-lado-tag { flex-shrink: 0; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.tcp-lado-tag--cobrar { background: #e3f5ec; color: #1a7f4f; }
.tcp-lado-tag--pagar { background: #fbe4e1; color: #b42318; }
.tcp-docl { margin-top: 3px; font-size: 12.5px; color: #64748b; }
.tcp-mod {
    flex-shrink: 0; padding: 0 7px; border-radius: 4px; background: #e8eef7; color: #284A70;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.tcp-docl__det { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #334155; }
.tcp-docl__ref { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tcp-docl > * + .tcp-docl__ref::before, .tcp-docl > * + .tcp-docl__venc::before { content: "· "; color: #94a3b8; font-weight: 400; font-style: normal; }
/* El vencimiento va en la línea del documento (la columna es la emisión), con el color de su tramo. */
.tcp-docl__venc { flex-shrink: 0; white-space: nowrap; color: #94a3b8; }
.tcp-docl__venc--vencido { color: #c0392b; font-weight: 600; }
.tcp-docl__venc--pronto { color: #a07400; font-weight: 600; }
.tcp-docl__venc--ok { color: #1a7f4f; }
.tcp-docl__venc--sin { font-style: italic; }

.tcp-c-cta b { display: block; font-variant-numeric: tabular-nums; color: #1e3a5f; }
.tcp-c-cta__nom { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: #64748b; }
.tcp-cta-tipo {
    display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 4px;
    background: #fdf3e1; color: #a06400; font-size: 11px; font-weight: 600;
}

span.tcp-fecha, span.tcp-venc { display: block; }
.tcp-venc { font-size: 12px; }
.tcp-venc--vencido { color: #c0392b; font-weight: 600; }
.tcp-venc--pronto { color: #a07400; font-weight: 600; }
.tcp-venc--ok { color: #1a7f4f; }
.tcp-venc--sin { color: #94a3b8; font-style: italic; }
.tcp-mon { color: #64748b; }
.tcp-cero { color: #b6c0cd; }
.tcp-despues { display: block; font-size: 11px; font-weight: 600; color: #1a7f4f; }
.cxc-tabla .tcp-neg, .cxc-saldo.tcp-neg { color: #b42318; }
.tcp-asiento {
    padding: 0; border: 0; background: transparent; color: #136a85; cursor: pointer;
    font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none;
}
.tcp-asiento:hover { color: #1b87a8; text-decoration: underline; }
.tcp-tipoasiento { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: #94a3b8; }

/* Lo vencido se marca con un borde rojo a la izquierda; la columna está fija, así que el borde va junto a su línea */
.tcp-fila--vencido td.cxc-fijo-izq { box-shadow: inset 3px 0 0 #e5584a, inset -1px 0 0 var(--cxc-linea-suave); }

/* ── Por titular y por cuenta ── */
.tcp-c-tit .cxc-nombre { display: inline-block; vertical-align: middle; }
.tcp-c-tit .tcp-otro { display: inline-block; margin-left: 6px; vertical-align: middle; }
.tcp-tabla .cxc-fila--doc .tcp-mod { margin-right: 6px; }
.tcp-tabla .cxc-fila--doc .tcp-docl__det { display: inline-block; max-width: 240px; vertical-align: middle; }
.tcp-tabla .cxc-fila--doc .tcp-docl__ref { display: inline-block; max-width: 160px; margin-left: 6px; vertical-align: middle; color: #64748b; }
.tcp-fila--cuenta td:first-child { box-shadow: inset 3px 0 0 var(--tcp-lado); }
.tcp-nro { font-weight: 700; font-variant-numeric: tabular-nums; color: #1e3a5f; }
.tcp-mn { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 700; }
.tcp-mn--mn { background: #e8eef7; color: #284A70; }
.tcp-mn--me { background: #fdf3e1; color: #a06400; }
.tcp-ver {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #e1e6ee; border-radius: 6px;
    background: #fff; color: #136a85; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tcp-ver:hover { background: #e6f3f8; border-color: #a9d3e3; }
.tcp-ver i { font-size: 10px; }

/* "También le debes / te debe" es el atajo a compensar: un clic abre Aplicar con ese documento (2026-10-18). */
.tcp-otro--btn { border: 0; cursor: pointer; }
.tcp-otro--btn:hover:not(:disabled) { background: #e4d6f7; box-shadow: 0 0 0 1px #c9b2ea inset; }
.tcp-otro--btn:disabled { cursor: default; opacity: .8; }

/* ── Paginado en el servidor (2026-10-19): de cuándo son los saldos, "Actualizar" y la tabla mientras llega la página ── */
.tcp-consulta { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: #64748b; white-space: nowrap; }
/* El "Cargando…" aparece solo si la página tarda: una que sale de lo guardado llega antes y no parpadea. */
.tcp-consulta__cargando { display: inline-flex; align-items: center; gap: 6px; opacity: 0; animation: tcp-aparece .15s ease .35s forwards; }
.tcp-consulta__btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #e1e6ee; border-radius: 6px;
    background: #fff; color: #136a85; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.tcp-consulta__btn:hover:not(:disabled) { background: #e6f3f8; border-color: #a9d3e3; }
.tcp-consulta__btn:disabled { cursor: default; opacity: .6; }
.tcp-consulta__btn i { font-size: 11px; }
/* La tabla se atenúa con retraso: si la página llega rápido no se nota; si tarda, se ve que algo pasa. Al volver, sin retraso. */
.tcp .cxc-tabla-wrap { transition: opacity .1s ease; }
.tcp .cxc-tabla-wrap.tcp-cargando { opacity: .55; transition: opacity .15s ease .25s; }
@keyframes tcp-aparece { to { opacity: 1; } }

@media (max-width: 768px) {
    .tcp-consulta { margin-left: 0; width: 100%; justify-content: space-between; }
    .tcp-lsw { width: 100%; }
    .tcp-lsw .cxc-modo__btn { flex: 1 1 0; padding: 6px 8px; }
    .tcp-toolbar__der { margin-left: 0; width: 100%; justify-content: space-between; }
    .tcp .cxc-modo__btn { padding: 7px 10px; font-size: 13px; }
    .tcp-acciones__txt { display: none; }
    /* En un teléfono una columna fija de 300 px tapa a las demás al desplazar: deja de fijarse a la izquierda */
    .tcp .cxc-tabla .cxc-fijo-izq, .tcp .cxc-tabla .cxc-fijo-izq2 { left: auto; }
    .tcp-c-tit .cxc-nombre { max-width: 180px; }
    .tcp-c-doc { min-width: 220px; max-width: 260px; }
}


/* ══════════════════════════════════════════════════════════════════════
   Aplicar un documento (.apl-) — AplicarDocumentoComponent, desde /tesoreria/cuentasporcobrar (2026-10-18).
   Reemplaza al Centro de Aplicaciones. Arriba el documento y lo que le queda; "¿Cómo aplicar?" (con asiento o
   directa); la lista de documentos del otro lado con su casilla y su monto; y abajo, pegado al borde, lo que va a
   pasar con el botón. "Ya aplicado" es la otra pestaña.
   ══════════════════════════════════════════════════════════════════════ */
.contenidoform.apl { position: relative; padding: 4px 24px 0; gap: 12px; }

.apl-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #d5dce6; border-radius: 8px;
    background: #fff; color: #334155; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.apl-btn:hover:not(:disabled) { border-color: var(--primario, #284A70); color: var(--primario, #284A70); }
.apl-btn:disabled { opacity: .5; cursor: not-allowed; }
.apl-btn--pri { background: var(--primario, #284A70); border-color: var(--primario, #284A70); color: #fff; }
.apl-btn--pri:hover:not(:disabled) { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }
.apl-btn--grande { padding: 10px 22px; font-size: 14.5px; }
.apl-btn--txt { border-color: transparent; background: transparent; color: #64748b; }
.apl-btn--peligro { padding: 4px 10px; color: #b42318; border-color: #f2c9c4; }
.apl-btn--peligro:hover:not(:disabled) { background: #b42318; border-color: #b42318; color: #fff; }
.apl-link {
    padding: 0; border: 0; background: transparent; color: #136a85; cursor: pointer;
    font-weight: 600; font-variant-numeric: tabular-nums;
}
.apl-link:hover { text-decoration: underline; }
.apl-fila__doc > .apl-link { align-self: flex-start; text-align: left; }

/* ── El documento ── */
.apl-doc {
    flex: 0 0 auto; display: flex; gap: 18px; align-items: stretch; justify-content: space-between; flex-wrap: wrap;
    padding: 14px 18px; border: 1px solid #e0e4ec; border-left: 4px solid #1b87a8; border-radius: 10px; background: #fff;
}
.apl-doc--cobrar { border-left-color: #22a06b; }
.apl-doc--pagar { border-left-color: #e5584a; }
.apl-doc__izq { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.apl-doc__l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.apl-volver {
    flex-shrink: 0; width: 30px; height: 30px; border: 1px solid #e0e4ec; border-radius: 8px; background: #f5f7fb;
    color: #475569; cursor: pointer;
}
.apl-volver:hover { border-color: var(--primario, #284A70); color: var(--primario, #284A70); }
.apl-lado { flex-shrink: 0; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.apl-lado--cobrar { background: #e3f5ec; color: #1a7f4f; }
.apl-lado--pagar { background: #fbe4e1; color: #b42318; }
.apl-doc__tit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; color: #1e293b; }
.apl-doc__det { font-size: 14px; font-weight: 600; color: var(--primario, #284A70); overflow-wrap: anywhere; }
.apl-doc__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: #64748b; }
.apl-doc__meta b { color: #1e3a5f; font-variant-numeric: tabular-nums; }
.apl-doc__nums { flex: 0 1 auto; display: flex; gap: 10px; align-items: stretch; }
.apl-doc__nums > div {
    display: flex; flex-direction: column; justify-content: center; min-width: 118px; padding: 8px 12px;
    border-radius: 8px; background: #f5f7fb; border: 1px solid #e8ecf3;
}
.apl-doc__nums span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #94a3b8; }
.apl-doc__nums b { font-size: 15px; color: #1e293b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.apl-doc__nums > div.apl-doc__pend { background: #fff7ec; border-color: #fbd9a8; }
.apl-doc__pend b { color: #b15600; font-size: 17px; }

/* ── Pestañas ── */
.apl-tabs { flex: 0 0 auto; display: flex; gap: 4px; border-bottom: 1px solid #e0e4ec; }
.apl-tab {
    padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: transparent;
    color: #64748b; font-size: 14px; font-weight: 600; cursor: pointer;
}
.apl-tab small { margin-left: 4px; padding: 0 7px; border-radius: 999px; background: #eef2f7; color: #475569; font-size: 11.5px; font-weight: 700; }
.apl-tab:hover { color: var(--primario, #284A70); }
.apl-tab.is-on { color: var(--primario, #284A70); border-bottom-color: var(--secundario, #fe7800); }
.apl-tab.is-on small { background: var(--primario, #284A70); color: #fff; }

/* ── ¿Cómo aplicar? ── */
.apl-forma { flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap; }
.apl-forma__op {
    flex: 1 1 280px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; text-align: left;
    border: 1px solid #d5dce6; border-radius: 10px; background: #fff; color: #334155; cursor: pointer;
}
.apl-forma__op > i { margin-top: 3px; font-size: 15px; color: #94a3b8; }
.apl-forma__op span { display: flex; flex-direction: column; gap: 2px; }
.apl-forma__op b { font-size: 14px; }
.apl-forma__op small { font-size: 12.5px; color: #64748b; line-height: 1.35; }
.apl-forma__op:hover:not(:disabled) { border-color: var(--primario, #284A70); }
.apl-forma__op.is-on { border-color: var(--primario, #284A70); background: #eef4fb; box-shadow: 0 0 0 1px var(--primario, #284A70) inset; }
.apl-forma__op.is-on > i { color: var(--secundario, #fe7800); }
.apl-forma__op:disabled { cursor: not-allowed; background: #f8fafc; color: #94a3b8; }
.apl-forma__op:disabled b { color: #94a3b8; }

.apl-guia { margin: 0; font-size: 13px; color: #475569; }
.apl-guia--sola { flex: 1 1 auto; }
.apl-nota { margin: 0; font-size: 12.5px; color: #64748b; }
.apl-nota i { color: #1b87a8; margin-right: 4px; }

.apl-herr { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apl-herr__der { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.apl-buscar {
    display: flex; align-items: center; gap: 8px; flex: 0 1 340px; padding: 0 10px; border: 1px solid #d5dce6;
    border-radius: 8px; background: #fff; color: #94a3b8;
}
.apl-buscar input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; padding: 7px 0; font-size: 13px; color: #334155; background: transparent; }

/* ── La lista: una fila por documento. Grilla y no tabla, para que en un teléfono se acomode en dos líneas ── */
.apl-lista { flex: 0 0 auto; border: 1px solid #e0e4ec; border-radius: 10px; background: #fff; overflow: hidden; }
.apl-fila {
    display: grid; grid-template-columns: 34px minmax(220px, 3fr) minmax(130px, 1.4fr) 92px 112px 132px;
    align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid #eef1f5; cursor: pointer;
    font-size: 13px; color: #334155;
}
.apl-lista--hecho .apl-fila { grid-template-columns: 96px minmax(200px, 3fr) minmax(150px, 1.5fr) 120px minmax(150px, 1.2fr); cursor: default; }
.apl-fila:first-child { border-top: 0; }
.apl-fila--cab {
    cursor: default; padding-top: 7px; padding-bottom: 7px; background: #f5f7fb;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #64748b;
}
.apl-fila:not(.apl-fila--cab):not(.apl-fila--nada):hover { background: #fafcff; }
.apl-fila.is-sel { background: #f2f8ff; box-shadow: inset 3px 0 0 var(--secundario, #fe7800); }
.apl-fila.is-sel:hover { background: #ecf4ff; }
.apl-fila.is-off { cursor: not-allowed; color: #94a3b8; }
.apl-fila.is-off b { color: #94a3b8; }
.apl-fila--nada { display: block; cursor: default; text-align: center; color: #94a3b8; }
.apl-fila__chk input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--primario, #284A70); }
.apl-fila__doc, .apl-fila__cta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apl-fila__doc b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1e293b; }
.apl-fila > span { min-width: 0; }
.apl-fila__doc small {
    display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap;
    font-size: 12px; color: #64748b;
}
/* El nombre de la cuenta es texto suelto: en bloque, para que los puntos suspensivos funcionen (en flex no). */
.apl-fila__cta small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: #64748b; }
.apl-fila__cta b { font-variant-numeric: tabular-nums; color: #1e3a5f; }
.apl-fila__fec { font-variant-numeric: tabular-nums; color: #475569; }
.apl-fila__pend { font-weight: 600; }
.apl-fila__monto input {
    width: 118px; padding: 5px 8px; border: 1px solid #9cc2e6; border-radius: 6px; text-align: right;
    font-size: 13.5px; font-weight: 600; color: #1e293b; font-variant-numeric: tabular-nums;
}
.apl-fila__monto input:focus { outline: 0; border-color: var(--primario, #284A70); box-shadow: 0 0 0 2px rgba(40, 74, 112, .15); }
.apl-fila__acc { display: flex; justify-content: flex-end; }
.apl-num { text-align: right; font-variant-numeric: tabular-nums; }
.apl-tipo { flex-shrink: 0; padding: 0 6px; border-radius: 4px; background: #e8eef7; color: #284A70; font-size: 11px; font-weight: 700; }
.apl-dir { flex-shrink: 0; padding: 0 7px; border-radius: 999px; background: #e3f5ec; color: #1a7f4f; font-size: 11px; font-weight: 700; }
.apl-fila__doc small.apl-motivo { white-space: normal; color: #a06400; }
.apl-gris { color: #94a3b8; }
.apl-solo-movil { display: none; }

/* ── Vacío, error y resultado ── */
.apl-vacio { padding: 40px 18px; text-align: center; color: #64748b; }
.apl-vacio i { display: block; margin-bottom: 10px; font-size: 32px; color: #b6c0cd; }
.apl-vacio i.apl-vacio--ok { color: #22a06b; }
.apl-vacio p { margin: 0 0 6px; font-size: 13.5px; }
.apl-vacio b { color: #334155; }
.apl-vacio .apl-btn { margin-top: 8px; }
.apl-error { padding: 40px 18px; text-align: center; color: #b42318; }
.apl-error i { font-size: 28px; }
.apl-error div { display: flex; justify-content: center; gap: 8px; }
.apl-result { flex: 0 0 auto; padding: 10px 14px; border: 1px solid #f2c9c4; border-radius: 10px; background: #fdf4f2; font-size: 13px; }
.apl-result ul { margin: 6px 0 0; padding-left: 18px; }
.apl-result li.is-ok { color: #1a7f4f; }
.apl-result li.is-mal { color: #b42318; }

/* ── Lo que va a pasar: pegado al borde de abajo mientras se baja por la lista ── */
.apl-pie {
    position: sticky; bottom: 0; z-index: 2; margin-top: auto;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 16px; border: 1px solid #e0e4ec; border-bottom: 0; border-radius: 10px 10px 0 0;
    background: #fff; box-shadow: 0 -6px 18px -12px rgba(15, 23, 42, .35);
}
.apl-pie__nums { display: flex; gap: 24px; }
.apl-pie__nums > div { display: flex; flex-direction: column; }
.apl-pie__nums span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #94a3b8; }
.apl-pie__nums b { font-size: 16px; color: #1e293b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.apl-pie__nums b.apl-azul { color: var(--primario, #284A70); }
.apl-pie__nums b.apl-verde { color: #1a7f4f; }
.apl-pie__nums b.apl-rojo { color: #b42318; }
.apl-pie__acc { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.apl-pie__msg { max-width: 420px; font-size: 12.5px; font-weight: 600; color: #b42318; }
.apl-fecha { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; color: #64748b; }
.apl-fecha > span { white-space: nowrap; }
.apl-fecha .insi-dp { width: 140px; }

@media (max-width: 860px) {
    .contenidoform.apl { padding: 4px 16px 0; }
    .apl-doc__nums { width: 100%; }
    .apl-doc__nums > div { flex: 1 1 0; min-width: 0; }
    .apl-fila--cab { display: none; }
    .apl-fila { grid-template-columns: 30px 1fr auto; row-gap: 4px; }
    .apl-fila__chk { grid-row: span 3; align-self: start; padding-top: 2px; }
    .apl-fila__doc { grid-column: 2 / 4; }
    .apl-fila__cta { grid-column: 2 / 3; }
    .apl-fila__fec { display: none; }
    .apl-fila__pend { grid-column: 3 / 4; }
    .apl-fila__monto { grid-column: 2 / 4; }
    .apl-fila:not(.is-sel) .apl-fila__monto { display: none; }
    /* Ya aplicado: fecha y monto arriba, contra qué en medio, el asiento y la acción abajo. */
    .apl-lista--hecho .apl-fila {
        grid-template-columns: 1fr auto; grid-template-areas: "fec monto" "contra contra" "asiento acc";
    }
    .apl-lista--hecho .apl-fila > :nth-child(1) { grid-area: fec; display: block; }
    .apl-lista--hecho .apl-fila > :nth-child(2) { grid-area: contra; }
    .apl-lista--hecho .apl-fila > :nth-child(3) { grid-area: asiento; }
    .apl-lista--hecho .apl-fila > :nth-child(4) { grid-area: monto; }
    .apl-lista--hecho .apl-fila > :nth-child(5) { grid-area: acc; }
    .apl-doc__nums > div { padding: 7px 9px; }
    .apl-doc__nums b { font-size: 13px; white-space: normal; }
    .apl-doc__nums > div.apl-doc__pend b { font-size: 14px; }
    .apl-solo-movil { display: inline; font-weight: 400; color: #94a3b8; }
    .apl-pie__nums { gap: 14px; width: 100%; justify-content: space-between; }
    .apl-pie__acc { width: 100%; margin-left: 0; }
    /* La fecha y el botón en una sola línea: el pie fijo no puede comerse media pantalla de un teléfono. */
    .apl-pie { gap: 10px; padding: 10px 12px; }
    .apl-fecha > span { display: none; }
    .apl-pie__msg { flex: 1 1 100%; order: -1; max-width: none; }
    .apl-pie__acc .apl-btn--grande { flex: 1 1 0; justify-content: center; padding: 10px 12px; }
    .apl-pie__nums b { font-size: 14.5px; }
    .apl-doc__tit { white-space: normal; }
    .apl-herr__der { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   .cj-*  Tarjetas de cajas — /tesoreria/cajanewlist (CajaNewListPage)

   Por que estan aqui: la pagina usa estas clases pero solo existian dentro del
   CSS aislado de PuntoVenta/ListaCajasNewPage.razor.css. Un .razor.css esta
   atado al scope de SU componente, asi que desde Tesoreria no aplicaban y la
   pantalla se veia sin estilos. Se copian aqui, sin ::deep, para el modulo.
   ═══════════════════════════════════════════════════════════════════════════ */


.cj-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 15px;
    margin-bottom: 4px;
}

.cj-toolbar__refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #344054;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
}

.cj-toolbar__refresh:hover {
    background: #f9fafb;
    border-color: #98a2b3;
}

.cj-toolbar__count {
    font-size: 12.5px;
    color: #667085;
    margin-left: auto;
}

.cj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.cj-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e4e7ec;
    box-shadow: 0 1px 3px rgba(16,24,40,.06);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}

.cj-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16,24,40,.1);
}

.cj-card--open { border-top: 3px solid #12b76a; }
.cj-card--closed { border-top: 3px solid #d0d5dd; }

.cj-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 16px 0 16px;
}

.cj-card__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.cj-card__status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 5px;
}

.cj-card__status-dot--open {
    background: #12b76a;
    box-shadow: 0 0 0 3px rgba(18,183,106,.2);
}

.cj-card__status-dot--closed { background: #d0d5dd; }

.cj-card__name {
    font-size: 14px;
    font-weight: 600;
    color: #1d2939;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-card__subtitle {
    font-size: 12px;
    color: #667085;
    font-weight: 500;
}

.cj-card__menu-btn {
    background: none;
    border: none;
    color: #98a2b3;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 14px;
    transition: all .15s;
    flex-shrink: 0;
}

.cj-card__menu-btn:hover {
    background: #f2f4f7;
    color: #667085;
}

.cj-card__status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 12px 16px;
}

.cj-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.cj-card__badge--open { background: #ecfdf3; color: #027a48; }
.cj-card__badge--closed { background: #f2f4f7; color: #667085; }

.cj-card__turno {
    font-size: 12px;
    color: #667085;
    font-weight: 500;
}

.cj-card__fecha {
    font-size: 11.5px;
    color: #98a2b3;
    margin-left: auto;
}

.cj-card__amounts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #f2f4f7;
    margin: 0 16px;
    border-radius: 8px;
    overflow: hidden;
}

.cj-card__amount {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    background: #f9fafb;
}

.cj-card__amount--highlight { background: #fff; }

.cj-card__amount-label {
    font-size: 11px;
    color: #667085;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cj-card__amount-value {
    font-size: 15px;
    font-weight: 700;
    color: #1d2939;
    font-variant-numeric: tabular-nums;
}

.cj-card__saldo-final { font-size: 16px; }
.cj-icon--ingreso { color: #12b76a; font-size: 10px; }
.cj-icon--egreso { color: #f04438; font-size: 10px; }
.cj-text--ingreso { color: #027a48; }
.cj-text--egreso { color: #b42318; }
.cj-text--negativo { color: #f04438; }

.cj-card__footer {
    padding: 12px 16px 16px 16px;
    margin-top: auto;
}

.cj-card__actions-row {
    display: flex;
    gap: 8px;
}

.cj-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
}

.cj-card__actions-row .cj-card__action { flex: 1; }

.cj-card__action--primary { background: #528bff; color: #fff; }
.cj-card__action--primary:hover { background: #4478e6; box-shadow: 0 2px 8px rgba(82,139,255,.3); }
.cj-card__action--success { background: #12b76a; color: #fff; width: 100%; }
.cj-card__action--success:hover { background: #0e9f5c; box-shadow: 0 2px 8px rgba(18,183,106,.3); }
.cj-card__action--outline { background: #fff; color: #344054; border: 1px solid #d0d5dd; }
.cj-card__action--outline:hover { background: #f9fafb; border-color: #98a2b3; }

.cj-empty {
    text-align: center;
    padding: 60px 20px;
    color: #98a2b3;
}

.cj-empty i {
    font-size: 40px;
    margin-bottom: 12px;
    display: block;
}

.cj-empty p {
    font-size: 14px;
    color: #667085;
    margin: 0;
}

@media (max-width: 768px) {
    .cj-grid { grid-template-columns: 1fr; }
    .cj-toolbar { flex-wrap: wrap; }
    .cj-toolbar__count { width: 100%; margin-left: 0; }
    .cj-card__actions-row { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   .cxv-*  Cuentas Vencidas — /tesoreria/cuentasvencidas

   Los tramos van de calma a alarma: cuanto mas tiempo lleva vencida la deuda,
   mas fuerte el color. La lectura de un vistazo es el objetivo de la pantalla.
   ═══════════════════════════════════════════════════════════════════════════ */

.cxv-tramos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 0 15px;
    margin-bottom: 10px;
}

.cxv-tramo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e0e4ec;
    border-left: 4px solid #98a2b3;
    border-radius: 8px;
}

.cxv-tramo__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #667085;
}

.cxv-tramo__monto {
    font-size: 19px;
    font-weight: 700;
    color: #1e3a5f;
    line-height: 1.2;
}

.cxv-tramo__conteo {
    font-size: 11px;
    color: #98a2b3;
}

.cxv-tramo--ok { border-left-color: #2e7d32; }
.cxv-tramo--warn { border-left-color: #c77700; }
.cxv-tramo--alert { border-left-color: #fe7800; }
.cxv-tramo--critico { border-left-color: #c62828; }

.cxv-tramo--critico .cxv-tramo__monto { color: #c62828; }

.cxv-tramo--total {
    background: #1e3a5f;
    border-color: #1e3a5f;
    border-left-color: #d4af37;
}

.cxv-tramo--total .cxv-tramo__label,
.cxv-tramo--total .cxv-tramo__conteo { color: #c8d4e4; }

.cxv-tramo--total .cxv-tramo__monto { color: #fff; }

/* Dias de atraso: pastilla suave, no un bloque de color saturado */
.cxv-dias {
    display: inline-block;
    min-width: 42px;
    padding: 1px 8px;
    font-weight: 600;
    border-radius: 10px;
}

.cxv-dias--ok { background: #e8f5e9; color: #2e7d32; }
.cxv-dias--warn { background: #fff4e5; color: #c77700; }
.cxv-dias--alert { background: #fff1e0; color: #fe7800; }
.cxv-dias--critico { background: #fdecea; color: #c62828; }

.cxv-footer td {
    background: #f5f7fb;
    border-top: 2px solid #1e3a5f !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   .tcb-*  Bancos y sus cuentas — /tesoreria/bancolistpage
   ═══════════════════════════════════════════════════════════════════════════ */

.tcb-tabs {
    border-bottom: 1px solid #e0e4ec;
    margin-bottom: 4px;
}

.tcb-tabs .nav-link {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #667085;
    border: none;
    border-bottom: 2px solid transparent;
}

.tcb-tabs .nav-link:hover { color: #2c5282; }

.tcb-tabs .nav-link.active {
    color: #1e3a5f;
    background: transparent;
    border-bottom-color: #d4af37;
}

/* Lo que falta configurar se muestra como acción, no como reproche */
.tcb-aviso {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    color: #654a00;
    background: #fffbf0;
    border: 1px solid #f0dca8;
    border-left: 4px solid #d4af37;
    border-radius: 8px;
}

.tcb-aviso__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   .vch-*  Bandeja de Vouchers — /tesoreria/voucherspage

   La pantalla es un tablero de tarjetas: cada comprobante se ve, y al lado
   estan sus datos y el boton para registrarlo. La imagen manda, porque es lo
   que el usuario reconoce de un vistazo.
   ═══════════════════════════════════════════════════════════════════════════ */

.vch-drop {
    position: relative;
    margin: 0 15px 10px;
    padding: 18px;
    background: #fff;
    border: 2px dashed #c3ccdb;
    border-radius: 10px;
    transition: all .15s;
}

.vch-drop:hover,
.vch-drop--activo {
    border-color: #1976d2;
    background: #f5f9ff;
}

.vch-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.vch-drop__contenido {
    display: flex;
    align-items: center;
    gap: 14px;
    pointer-events: none;
}

.vch-drop__icono {
    font-size: 26px;
    color: #2c5282;
}

.vch-drop__hint {
    display: block;
    font-size: 12px;
    color: #667085;
}

.vch-drop__estado {
    margin-top: 10px;
    font-size: 12.5px;
    color: #2c5282;
}

.vch-aviso {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 15px 10px;
    padding: 9px 14px;
    font-size: 12.5px;
    color: #1e3a5f;
    background: #eef4ff;
    border: 1px solid #cfe0f7;
    border-left: 4px solid #1976d2;
    border-radius: 8px;
}

.vch-aviso--error {
    color: #7a1c1c;
    background: #fdecea;
    border-color: #f3c6c2;
    border-left-color: #c62828;
}

/* Resumen */
.vch-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 0 15px;
    margin-bottom: 10px;
}

.vch-kpi {
    display: flex;
    flex-direction: column;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid #e0e4ec;
    border-left: 4px solid #98a2b3;
    border-radius: 8px;
}

.vch-kpi__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #667085;
}

.vch-kpi__valor {
    font-size: 20px;
    font-weight: 700;
    color: #1e3a5f;
}

.vch-kpi--pend { border-left-color: #1976d2; }
.vch-kpi--ileg { border-left-color: #c77700; }
.vch-kpi--monto { border-left-color: #d4af37; }
.vch-kpi--ok { border-left-color: #2e7d32; }

/* Tarjetas */
.vch-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 12px;
    padding: 0 15px 20px;
}

.vch-card {
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-areas: "img datos" "img acciones";
    gap: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e0e4ec;
    border-left: 4px solid #1976d2;
    border-radius: 10px;
}

.vch-card--ok { border-left-color: #2e7d32; }
.vch-card--ilegible { border-left-color: #c77700; }
.vch-card--descartado { border-left-color: #98a2b3; opacity: .65; }

.vch-card__img {
    grid-area: img;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    overflow: hidden;
    background: #f5f7fb;
    border-radius: 8px;
    cursor: pointer;
}

.vch-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vch-card__pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #c62828;
}

.vch-card__pdf i { font-size: 28px; }

.vch-card__datos { grid-area: datos; }

.vch-card__fila1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}

.vch-card__monto {
    font-size: 19px;
    font-weight: 700;
    color: #1e3a5f;
    line-height: 1.15;
}

.vch-card__detalle {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #475467;
}

.vch-card__detalle--sec {
    font-size: 11.5px;
    color: #98a2b3;
}

.vch-card__asiento {
    font-size: 11.5px;
    font-weight: 600;
    color: #2e7d32;
}

.vch-card__error {
    margin-top: 4px;
    font-size: 11.5px;
    color: #c77700;
}

.vch-card__acciones {
    grid-area: acciones;
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

/* Badges de estado */
.vch-badge {
    display: inline-block;
    padding: 1px 8px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 10px;
}

.vch-badge--pendiente { background: #eef4ff; color: #1976d2; }
.vch-badge--propuesto { background: #eef4ff; color: #1e3a5f; }
.vch-badge--ok { background: #e8f5e9; color: #2e7d32; }
.vch-badge--ilegible { background: #fff4e5; color: #c77700; }
.vch-badge--descartado { background: #f2f4f7; color: #667085; }
.vch-badge--duda { background: #fff4e5; color: #c77700; }
.vch-badge--dup { background: #fdecea; color: #c62828; }

/* Modal de registro */
.vch-modal__header {
    background: #1e3a5f;
    border-bottom: 3px solid #d4af37;
}

.vch-modal__header .modal-title,
.vch-modal__header .close { color: #fff; }

.vch-modal__img {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 6px;
    background: #f5f7fb;
    border: 1px solid #e0e4ec;
    border-radius: 8px;
}

.vch-modal__img img {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
}

.vch-modal__pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #c62828;
}

.vch-modal__pdf i { font-size: 40px; }

.vch-modal__confianza {
    margin-top: 6px;
    font-size: 11.5px;
    color: #667085;
    text-align: center;
}

.vch-modal__seccion {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e0e4ec;
}

.vch-modal__seccion-tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #1e3a5f;
}

.vch-modal__docs { font-size: 12px; }
.vch-modal__docs thead th { background: #1e3a5f; color: #fff; font-weight: 600; }
.vch-modal__doc--sel { background: #f5f9ff; }

.vch-modal__sindocs {
    font-size: 12px;
    color: #667085;
}

@media (max-width: 640px) {
    .vch-lista { grid-template-columns: 1fr; }
    .vch-card { grid-template-columns: 90px 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   .cext-*  Extractos y conciliación — /tesoreria/conciliacion (pestaña Extractos)

   Lista → carga (dos entradas, una vista previa) → conciliación (cuadre + tres
   columnas). El cuadre es lo primero que se ve: si cuadra, verde; si no, dice
   cuánto falta y las pestañas dicen dónde está.
   ═══════════════════════════════════════════════════════════════════════════ */

.cext-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 0 15px 10px;
}

.cext-toolbar__grupo { display: flex; flex-direction: column; gap: 2px; min-width: 220px; }
.cext-toolbar__grupo label { font-size: 11px; font-weight: 600; color: #667085; text-transform: uppercase; letter-spacing: .3px; }
.cext-toolbar__acciones { margin-left: auto; }

.cext-badge {
    display: inline-block;
    padding: 1px 8px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 10px;
}
.cext-badge--ia { background: #eef4ff; color: #1976d2; }
.cext-badge--plantilla { background: #f2f4f7; color: #475467; }
.cext-badge--abierto { background: #fff4e5; color: #c77700; }
.cext-badge--cerrado { background: #e8f5e9; color: #2e7d32; }

.cext-avance {
    display: flex;
    height: 6px;
    overflow: hidden;
    background: #eef1f6;
    border-radius: 3px;
}
.cext-avance__ok { background: #2e7d32; }
.cext-avance__sug { background: #1976d2; }

.cext-aviso {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 15px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: #1e3a5f;
    background: #eef4ff;
    border: 1px solid #cfe0f7;
    border-left: 4px solid #1976d2;
    border-radius: 8px;
}
.cext-aviso--warn { color: #654a00; background: #fffbf0; border-color: #f0dca8; border-left-color: #d4af37; }
.cext-aviso--error { color: #7a1c1c; background: #fdecea; border-color: #f3c6c2; border-left-color: #c62828; }

/* Nuevo */
.cext-nuevo { padding: 0 15px 20px; }
.cext-nuevo__cab { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cext-nuevo__cab h5 { margin: 0; color: #1e3a5f; font-weight: 700; }

.cext-entradas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.cext-entrada {
    padding: 14px;
    background: #fff;
    border: 1px solid #e0e4ec;
    border-top: 3px solid #1976d2;
    border-radius: 10px;
}
.cext-entrada--off { opacity: .6; border-top-color: #98a2b3; }
.cext-entrada__tit { font-weight: 700; color: #1e3a5f; margin-bottom: 4px; }
.cext-entrada__tit i { color: #1976d2; margin-right: 6px; }
.cext-entrada p { font-size: 12.5px; color: #667085; margin-bottom: 8px; }
.cext-entrada__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.cext-entrada__fila label { font-size: 11px; color: #667085; display: block; }
.cext-entrada__estado { margin-top: 8px; font-size: 12.5px; color: #2c5282; }
.cext-textarea { font-family: Consolas, monospace; font-size: 12px; }

.cext-preview {
    margin-top: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e0e4ec;
    border-left: 4px solid #d4af37;
    border-radius: 10px;
}
.cext-preview__cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cext-preview__tot { display: flex; gap: 14px; font-size: 12.5px; color: #475467; }
.cext-preview__saldos label { font-size: 11px; color: #667085; }
.cext-preview__saldos { margin-bottom: 8px; }
.cext-preview__pie { display: flex; align-items: center; margin-top: 10px; }

.cext-tabla { font-size: 12.5px; }
.cext-tabla thead th { background: #1e3a5f; color: #fff; font-weight: 600; white-space: nowrap; }
.cext-tabla .form-control-sm { font-size: 12px; padding: 2px 6px; height: 26px; }
.cext-fila--duda td { background: #fff8e6; }
.cext-fila--rota td { background: #fdecea; }

/* Conciliación */
.cext-conc { padding: 0 15px 20px; }
.cext-conc__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.cext-conc__tit { flex: 1 1 auto; }
.cext-conc__tit h5 { margin: 0; color: #1e3a5f; font-weight: 700; }
.cext-conc__tit > span { font-size: 12.5px; color: #475467; }
.cext-conc__acciones { display: flex; flex-wrap: wrap; gap: 6px; }

.cext-cuadre {
    display: grid;
    grid-template-columns: 1fr 1fr 200px;
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e0e4ec;
    border-left: 4px solid #c62828;
    border-radius: 10px;
}
.cext-cuadre--ok { border-left-color: #2e7d32; }
.cext-cuadre__tit { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #667085; margin-bottom: 4px; }
.cext-cuadre__fila { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: #475467; padding: 2px 0; }
.cext-cuadre__fila--tot { border-top: 1px solid #e0e4ec; margin-top: 4px; padding-top: 4px; color: #1e3a5f; font-weight: 700; }
.cext-cuadre__dif { display: flex; flex-direction: column; justify-content: center; padding-left: 14px; border-left: 1px solid #e0e4ec; }
.cext-cuadre__num { font-size: 24px; font-weight: 700; color: #c62828; }
.cext-cuadre--ok .cext-cuadre__num { color: #2e7d32; }
.cext-cuadre__txt { font-size: 12px; color: #667085; }

.cext-tabs { border-bottom: 1px solid #e0e4ec; margin-bottom: 6px; }
.cext-tabs .nav-link { padding: 6px 14px; font-size: 13px; font-weight: 600; color: #667085; border: none; border-bottom: 2px solid transparent; }
.cext-tabs .nav-link.active { color: #1e3a5f; background: transparent; border-bottom-color: #d4af37; }
.cext-tabs .badge { font-size: 10px; }

.cext-vinc { font-size: 12px; color: #475467; white-space: nowrap; }
.cext-vinc--roto { color: #c62828; text-decoration: line-through; }

.cext-nota { padding: 6px 12px 10px; font-size: 12px; color: #667085; }

.cext-panel {
    margin-top: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e0e4ec;
    border-left: 4px solid #1976d2;
    border-radius: 10px;
}
.cext-panel__cab { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #1e3a5f; margin-bottom: 6px; }
.cext-panel__cab .close { margin-left: auto; }
.cext-panel__sum { font-size: 12.5px; margin-bottom: 6px; }
.cext-panel__tabla { max-height: 260px; overflow: auto; }
.cext-panel__pie { display: flex; justify-content: flex-end; margin-top: 8px; }

@media (max-width: 900px) {
    .cext-cuadre { grid-template-columns: 1fr; }
    .cext-cuadre__dif { border-left: none; border-top: 1px solid #e0e4ec; padding: 8px 0 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   .pcaj-*  Proyección de Caja — /tesoreria/proyeccioncajapage

   Lo primero que se ve es si la caja alcanza. La distinción entre COMPROMISO y
   ESTIMACIÓN es visual y permanente: decidir con una estimación creyendo que es
   un compromiso es peor que no tener la proyección.
   ═══════════════════════════════════════════════════════════════════════════ */

.pcaj-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 15px 10px;
}
.pcaj-toolbar__grupo { display: flex; flex-direction: column; gap: 2px; min-width: 190px; }
.pcaj-toolbar__grupo label { font-size: 11px; font-weight: 600; color: #667085; text-transform: uppercase; letter-spacing: .3px; }
.pcaj-toolbar__grupo--check { min-width: auto; }
.pcaj-check { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #475467; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 500; }
.pcaj-toolbar__acciones { margin-left: auto; display: flex; gap: 6px; }

.pcaj-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px; padding: 0 15px; margin-bottom: 10px;
}
.pcaj-kpi {
    display: flex; flex-direction: column; padding: 10px 14px;
    background: #fff; border: 1px solid #e0e4ec; border-left: 4px solid #98a2b3; border-radius: 8px;
}
.pcaj-kpi__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: #667085; }
.pcaj-kpi__valor { font-size: 20px; font-weight: 700; color: #1e3a5f; line-height: 1.2; }
.pcaj-kpi__valor--sm { font-size: 18px; }
.pcaj-kpi__pie { font-size: 11px; color: #98a2b3; }
.pcaj-kpi--hoy { border-left-color: #1976d2; }
.pcaj-kpi--in { border-left-color: #2e7d32; }
.pcaj-kpi--out { border-left-color: #c77700; }
.pcaj-kpi--fin { border-left-color: #d4af37; }
.pcaj-kpi--ok { border-left-color: #2e7d32; }
.pcaj-kpi--rojo { border-left-color: #c62828; background: #fdecea; }
.pcaj-kpi--rojo .pcaj-kpi__valor { color: #c62828; }

.pcaj-informe {
    margin: 0 15px 10px; padding: 12px 14px; background: #fff;
    border: 1px solid #e0e4ec; border-left: 4px solid #1976d2; border-radius: 8px;
}
.pcaj-informe__tit { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #1976d2; margin-bottom: 4px; }
.pcaj-informe p { margin: 0; font-size: 13px; color: #344054; line-height: 1.55; }

.pcaj-aviso {
    display: flex; align-items: flex-start; gap: 8px; margin: 0 15px 8px; padding: 8px 12px;
    font-size: 12.5px; color: #654a00; background: #fffbf0;
    border: 1px solid #f0dca8; border-left: 4px solid #d4af37; border-radius: 8px;
}

.pcaj-card { margin: 0 15px 10px; }
.pcaj-tabla { font-size: 12.5px; }
.pcaj-fila--rojo td { background: #fdecea; }
.pcaj-fila--warn td { background: #fff4e5; }

.pcaj-fuente {
    display: inline-block; margin: 1px 4px 1px 0; padding: 1px 7px;
    font-size: 11px; border-radius: 10px; white-space: nowrap;
}
.pcaj-fuente--firme { background: #eef4ff; color: #1e3a5f; border: 1px solid #cfe0f7; }
.pcaj-fuente--est { background: #f8f5ee; color: #7a6320; border: 1px dashed #d4af37; }

.pcaj-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid #eef1f6; }

/* ═══════════════════════════════════════════════════════════════════════════
   .pres-*  Presupuesto — /tesoreria/presupuestopage
   ═══════════════════════════════════════════════════════════════════════════ */

.pres-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 15px 10px; }
.pres-toolbar__grupo { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.pres-toolbar__grupo label { font-size: 11px; font-weight: 600; color: #667085; text-transform: uppercase; letter-spacing: .3px; }
.pres-toolbar__acciones { margin-left: auto; }

.pres-badge {
    display: inline-block; padding: 1px 8px; font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px; border-radius: 10px;
}
.pres-badge--borrador { background: #f2f4f7; color: #475467; }
.pres-badge--vigente { background: #e8f5e9; color: #2e7d32; }
.pres-badge--cerrado { background: #eef4ff; color: #1e3a5f; }

.pres-det { padding: 0 15px 20px; }
.pres-det__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.pres-det__tit { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; }
.pres-det__tit h5 { margin: 0; color: #1e3a5f; font-weight: 700; }
.pres-det__acciones { display: flex; flex-wrap: wrap; gap: 6px; }

.pres-aviso {
    display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; padding: 8px 12px;
    font-size: 12.5px; color: #1e3a5f; background: #eef4ff;
    border: 1px solid #cfe0f7; border-left: 4px solid #1976d2; border-radius: 8px;
}
.pres-aviso--ok { color: #1b5e20; background: #e8f5e9; border-color: #c5e1c8; border-left-color: #2e7d32; }
.pres-aviso--error { color: #7a1c1c; background: #fdecea; border-color: #f3c6c2; border-left-color: #c62828; }

.pres-tabla { font-size: 12px; }
.pres-tabla thead th { background: #1e3a5f; color: #fff; font-weight: 600; white-space: nowrap; }
.pres-tabla--resumen { background: #fff; }
.pres-tabla--resumen td:first-child { font-weight: 600; color: #344054; white-space: nowrap; }
.pres-fila--ing td { background: #f4fbf5; }
.pres-fila--egr td { background: #fdf6f5; }
.pres-fila--ejec td { color: #667085; font-style: italic; }
.pres-fila--res td { border-top: 2px solid #1e3a5f; font-weight: 700; color: #1e3a5f; }

.pres-grid__cab { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; color: #1e3a5f; }
.pres-concepto { min-width: 200px; }
.pres-mes { width: 88px; font-size: 11.5px; padding: 2px 4px; height: 26px; }

.pres-sug {
    margin-bottom: 8px; padding: 10px 14px; background: #fffbf0;
    border: 1px solid #f0dca8; border-left: 4px solid #d4af37; border-radius: 8px;
}
.pres-sug p { margin: 0 0 6px; font-size: 12.5px; color: #654a00; }
.pres-sug__lista { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 900px) {
    .pcaj-toolbar__acciones, .pres-toolbar__acciones { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   .gst-*  Foto del comprobante en el gasto de rendición (ModalGastoRinde)
   La foto se adjunta siempre; la lectura es un extra que puede fallar sin
   que el gasto quede sin sustento.
   ═══════════════════════════════════════════════════════════════════════════ */

.gst-foto { margin-bottom: 10px; }

.gst-foto__zona {
    position: relative;
    padding: 10px 12px;
    background: #fff;
    border: 2px dashed #c3ccdb;
    border-radius: 8px;
    transition: all .15s;
}
.gst-foto__zona:hover { border-color: #1976d2; background: #f5f9ff; }

.gst-foto__input {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}

.gst-foto__contenido { display: flex; align-items: center; gap: 12px; pointer-events: none; }
.gst-foto__icono { font-size: 20px; color: #2c5282; }
.gst-foto__hint { display: block; font-size: 11.5px; color: #667085; }

.gst-foto__estado { margin-top: 6px; font-size: 12px; color: #2c5282; }

.gst-foto__aviso {
    display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; padding: 6px 10px;
    font-size: 12px; color: #1b5e20; background: #e8f5e9;
    border: 1px solid #c5e1c8; border-left: 3px solid #2e7d32; border-radius: 6px;
}
.gst-foto__aviso--warn { color: #654a00; background: #fffbf0; border-color: #f0dca8; border-left-color: #d4af37; }
.gst-foto__aviso--error { color: #7a1c1c; background: #fdecea; border-color: #f3c6c2; border-left-color: #c62828; }

/* ============================================================================
   Alertas de Tesorería (.tal-) — pestaña "Alertas" de /tesoreria/bancolistpage
   Es la misma cuenta que muestra la campanita: los KPI de arriba son el
   desglose del badge, y el panel de la derecha son los umbrales que lo deciden.
   ============================================================================ */
.tal-wrap {
    padding: 14px 16px 18px;
}

.tal-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.tal-kpi {
    background: #fff;
    border: 1px solid var(--linea-suave, #e0e4ec);
    border-left: 4px solid #9aa5b8;
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tal-kpi--alerta { border-left-color: #c62828; }
.tal-kpi--warn   { border-left-color: #c77700; }
.tal-kpi--ok     { border-left-color: #2e7d32; }

.tal-kpi__n {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--primario, #1e3a5f);
}

.tal-kpi__t {
    font-size: 12px;
    color: #5a6478;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.tal-kpi__m {
    font-size: 13px;
    font-weight: 600;
    color: #1e3a5f;
}

.tal-cols {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 992px) {
    .tal-cols { grid-template-columns: 1fr; }
}

.tal-h {
    font-weight: 700;
    color: var(--primario, #1e3a5f);
    border-bottom: 2px solid var(--secundario, #d4af37);
    padding-bottom: 6px;
    margin-bottom: 12px;
    font-size: 14px;
}

.tal-lista { min-width: 0; }

.tal-item {
    background: #fff;
    border: 1px solid var(--linea-suave, #e0e4ec);
    border-left: 4px solid #9aa5b8;
    border-radius: 5px;
    padding: 9px 12px;
    margin-bottom: 8px;
}

.tal-item--s3 { border-left-color: #c62828; background: #fff7f7; }
.tal-item--s2 { border-left-color: #c77700; }
.tal-item--s1 { border-left-color: #1976d2; }

.tal-item__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.tal-item__tipo {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
    background: #5a6478;
    border-radius: 3px;
    padding: 2px 6px;
}

.tal-item--s3 .tal-item__tipo { background: #c62828; }
.tal-item--s2 .tal-item__tipo { background: #c77700; }

.tal-item__monto {
    margin-left: auto;
    font-weight: 700;
    color: var(--primario, #1e3a5f);
}

.tal-item__desc {
    font-size: 12.5px;
    color: #5a6478;
    margin-top: 3px;
}

.tal-item__fecha { color: #8a93a5; }

.tal-vacio {
    text-align: center;
    color: #2e7d32;
    padding: 34px 12px;
    border: 1px dashed #cfd6e3;
    border-radius: 6px;
    background: #fbfdfb;
}

.tal-vacio i { display: block; font-size: 26px; margin-bottom: 8px; }

.tal-config {
    background: #f8fafc;
    border: 1px solid var(--linea-suave, #e0e4ec);
    border-radius: 6px;
    padding: 14px;
}

.tal-config__nota {
    font-size: 12px;
    color: #5a6478;
    margin-bottom: 12px;
}

.tal-lbl {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #3c4657;
    margin: 10px 0 3px;
}

/* Campos DERIVADOS de la cuenta contable en la ficha de caja/banco (SQL 85).
   No son editables a propósito: la cuenta del plan es su dueña. Se muestran en gris
   para que se lea de un vistazo que son informativos, no un campo más que llenar. */
.tcb-derivado {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 31px;
    padding: 0 2px;
}

.tcb-derivado small {
    color: #8a93a5;
    font-size: 11px;
}

.tcb-derivado b {
    color: var(--primario, #1e3a5f);
}