/* ==========================================================================
   Cuenta con Sistecrédito · Liquid Glass (js/modules/financieras-module.js)
   Mismo lenguaje que cierre-caja-liquid-glass.css: blur solo en el panel,
   tarjetas uniformes translúcidas con un punto de color, curva de resorte.
   Aplica a #fin-cuenta y #fin-cuota.
   ========================================================================== */

#fin-cuenta,
#fin-cuota,
#fin-editar {
    --fin-spring: cubic-bezier(.22, 1, .36, 1);
    --fin-texto: #0f172a;
    --fin-suave: #475569;
    --fin-borde: rgba(148, 163, 184, .35);
    --fin-card: rgba(248, 250, 252, .9);
    --fin-azul: #0369a1;
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 15, 30, .62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#fin-cuota { z-index: 10060; }
#fin-editar { z-index: 10070; }

#fin-cuenta .fin-panel,
#fin-cuota .fin-panel,
#fin-editar .fin-panel {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    color: var(--fin-texto);
    background: linear-gradient(155deg, rgba(255, 255, 255, .97), rgba(248, 250, 252, .94));
    backdrop-filter: blur(28px) saturate(1.8);
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .95),
        0 36px 70px -26px rgba(10, 15, 40, .5),
        0 12px 28px -14px rgba(10, 15, 40, .28);
    animation: fin-entrar .32s var(--fin-spring);
}
#fin-cuota .fin-panel-sm,
#fin-editar .fin-panel-sm { width: min(520px, 100%); }

#fin-cuenta .fin-panel::before,
#fin-cuota .fin-panel::before,
#fin-editar .fin-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(46% 40% at 6% -6%, rgba(14, 165, 233, .16), transparent 68%),
        radial-gradient(40% 36% at 104% 0%, rgba(99, 102, 241, .12), transparent 68%),
        radial-gradient(46% 40% at 100% 108%, rgba(16, 185, 129, .1), transparent 70%);
}
#fin-cuenta .fin-panel::after,
#fin-cuota .fin-panel::after,
#fin-editar .fin-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .25) 46%, transparent 62%);
    mix-blend-mode: screen;
}
.fin-panel > * { position: relative; z-index: 1; }

@keyframes fin-entrar {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: none; }
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.fin-panel .fin-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--fin-borde);
}
.fin-panel .fin-logo {
    height: 34px;
    width: auto;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
    flex-shrink: 0;
}
.fin-panel .fin-head h2 { margin: 0; font-size: 1.08rem; font-weight: 800; }
.fin-panel .fin-head p { margin: 2px 0 0; font-size: .8rem; color: var(--fin-suave); }
.fin-panel .fin-head > div { flex: 1; min-width: 0; }
.fin-panel .fin-x {
    border: 0;
    background: rgba(255, 255, 255, .5);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--fin-suave);
    display: grid;
    place-items: center;
    transition: transform .2s var(--fin-spring), background .2s;
}
.fin-panel .fin-x:hover { transform: scale(1.08); background: rgba(255, 255, 255, .8); }

.fin-panel .fin-body { padding: 18px 20px; overflow-y: auto; }
.fin-panel .fin-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--fin-borde);
}

/* ── Formulario ──────────────────────────────────────────────────────────── */
.fin-panel .fin-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fin-panel .fin-ancho { grid-column: 1 / -1; }
.fin-panel .fin-campo { position: relative; display: flex; flex-direction: column; gap: 5px; font-size: .74rem; font-weight: 700; color: var(--fin-suave); }
.fin-panel .fin-campo input,
.fin-panel .fin-campo select {
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: var(--fin-texto);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--fin-borde);
    background: #fff;
    transition: border-color .2s, box-shadow .2s var(--fin-spring);
}
.fin-panel .fin-campo input:focus,
.fin-panel .fin-campo select:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14, 165, 233, .2); }
.fin-ayuda { margin: 0; font-size: .78rem; color: var(--fin-suave, #64748b); }
.fin-ayuda.fin-ayuda-alerta { color: #b45309; font-weight: 700; }
.fin-panel .fin-check { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; }
.fin-panel .fin-error { margin: 0; color: #b91c1c; font-size: .85rem; font-weight: 600; }

.fin-panel .fin-sugerencias {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    margin-top: 4px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--fin-borde);
    box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .35);
}
.fin-panel .fin-sugerencias button {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--fin-texto);
}
.fin-panel .fin-sugerencias button:hover { background: rgba(14, 165, 233, .1); }
.fin-panel .fin-sugerencias small { color: var(--fin-suave); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.fin-panel .fin-btn-pri,
.fin-panel .fin-btn-sec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 12px;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s var(--fin-spring), box-shadow .2s var(--fin-spring);
}
.fin-panel .fin-btn-pri { border: 0; color: #fff; background: linear-gradient(135deg, #0ea5e9, #0369a1); box-shadow: 0 10px 20px -10px rgba(3, 105, 161, .7); }
.fin-panel .fin-btn-sec { border: 1px solid var(--fin-borde); color: var(--fin-texto); background: rgba(255, 255, 255, .55); }
.fin-panel .fin-btn-pri:hover,
.fin-panel .fin-btn-sec:hover { transform: translateY(-1px); }
.fin-panel .fin-btn-pri:disabled { opacity: .6; cursor: wait; transform: none; }
.fin-panel .fin-btn-pri .material-symbols-outlined,
.fin-panel .fin-btn-sec .material-symbols-outlined { font-size: 19px; }

/* ── Cuenta ──────────────────────────────────────────────────────────────── */
.fin-panel .fin-hero {
    text-align: center;
    padding: 16px 12px 18px;
    margin-bottom: 14px;
    border-radius: 18px;
    background: var(--fin-card);
    border: 1px solid var(--fin-borde);
}
.fin-panel .fin-hero span { display: block; font-size: .8rem; font-weight: 700; color: var(--fin-suave); text-transform: uppercase; letter-spacing: .05em; }
.fin-panel .fin-hero strong { display: block; font-size: 2.1rem; font-weight: 800; color: var(--fin-azul); margin: 4px 0; }
.fin-panel .fin-hero.fin-negativo strong { color: #b45309; }
.fin-panel .fin-hero small { color: var(--fin-suave); font-size: .78rem; }

.fin-panel .fin-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.fin-panel .fin-cards article {
    padding: 11px 12px;
    border-radius: 14px;
    background: var(--fin-card);
    border: 1px solid var(--fin-borde);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.fin-panel .fin-cards span { font-size: .72rem; font-weight: 700; color: var(--fin-suave); }
.fin-panel .fin-cards strong { font-size: 1rem; font-weight: 800; }
.fin-panel .fin-dot { width: 8px; height: 8px; border-radius: 50%; }
.fin-panel .fin-dot-azul { background: #64748b; }
.fin-panel .fin-dot-verde { background: #16a34a; }
.fin-panel .fin-dot-ambar { background: #f59e0b; }

.fin-panel .fin-alerta {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: rgba(254, 243, 199, .6);
    border: 1px solid rgba(245, 158, 11, .45);
    color: #92400e;
}
.fin-panel .fin-alerta p { margin: 2px 0 0; font-size: .8rem; }

.fin-panel .fin-subtitulo { margin: 0 0 8px; font-size: .85rem; font-weight: 800; color: var(--fin-suave); }

.fin-vacio { text-align: center; color: var(--fin-suave, #64748b); padding: 14px 0; margin: 0; }

.fin-panel .fin-inicio h3 { margin: 0 0 4px; }
.fin-panel .fin-inicio p { margin: 0 0 14px; color: var(--fin-suave); font-size: .88rem; }
.fin-panel .fin-inicio .fin-btn-pri { margin-top: 14px; }

/* ── Dos acciones grandes: qué hace el cajero y qué hace el dueño ─────────── */
.fin-panel .fin-accion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--fin-borde);
    background: var(--fin-card);
    color: var(--fin-texto);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: transform .2s var(--fin-spring), box-shadow .2s var(--fin-spring), border-color .2s;
}
.fin-panel .fin-accion:hover { transform: translateY(-2px); border-color: #0ea5e9; box-shadow: 0 12px 24px -14px rgba(3, 105, 161, .5); }
.fin-panel .fin-accion b { display: block; font-size: .95rem; }
.fin-panel .fin-accion small { display: block; margin-top: 2px; font-size: .78rem; color: var(--fin-suave); }
.fin-panel .fin-accion-ic {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
}
.fin-panel .fin-accion[data-accion="consignacion"] .fin-accion-ic { background: linear-gradient(135deg, #34d399, #047857); }
.fin-panel .fin-inline-ic { font-size: 16px; vertical-align: -3px; }


/* ── Acción principal, pasos y filtros ───────────────────────────────────── */
.fin-panel .fin-accion { width: 100%; margin-bottom: 14px; }
.fin-panel .fin-accion > span:nth-child(2) { flex: 1; }
.fin-panel .fin-accion-ir { color: var(--fin-azul); }
.fin-panel .fin-paso { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: .82rem; font-weight: 800; color: var(--fin-texto); }
.fin-panel .fin-paso b {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: .74rem; color: #fff; background: linear-gradient(135deg, #0ea5e9, #0369a1);
}
.fin-panel .fin-campo small { font-weight: 500; }
.fin-filtros { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fin-chips button {
    border: 1px solid var(--fin-borde); background: var(--fin-card); color: var(--fin-suave);
    padding: 7px 12px; border-radius: 999px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
    transition: transform .2s var(--fin-spring), background .2s;
}
.fin-chips button.activo { background: #0369a1; border-color: #0369a1; color: #fff; }
.fin-buscar {
    display: flex; align-items: center; gap: 6px; flex: 1 1 220px; max-width: 320px;
    padding: 0 10px; border-radius: 12px; border: 1px solid var(--fin-borde); background: #fff; color: var(--fin-suave);
}
.fin-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 0; font: inherit; font-size: .88rem; color: var(--fin-texto); outline: none; }
[data-theme="dark"] .fin-buscar { background: rgba(15, 23, 42, .5); }

/* ── Grupos por día ──────────────────────────────────────────────────────── */
.fin-grupo { margin-bottom: 14px; }
.fin-grupo > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 4px 6px; }
.fin-grupo > header b { font-size: .88rem; }
.fin-grupo > header span { font-size: .78rem; font-weight: 700; color: var(--fin-suave); }

/* ── Filas de cuota (ventana, historial del día y paciente) ──────────────── */
.fin-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fin-lista .fin-fila {
    display: grid; grid-template-columns: 78px 1fr auto 132px; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 12px; font-size: .85rem;
    background: var(--fin-card, rgba(248, 250, 252, .9)); border: 1px solid var(--fin-borde, rgba(148, 163, 184, .35));
}
.fin-lista .fin-pendiente { border-color: rgba(245, 158, 11, .6); box-shadow: inset 3px 0 0 #f59e0b; }
.fin-lista .fin-anulada { opacity: .55; }
.fin-lista .fin-anulada .fin-valor { text-decoration: line-through; }
.fin-lista .fin-hora { color: var(--fin-suave, #64748b); font-size: .76rem; font-weight: 700; }
.fin-lista .fin-texto { min-width: 0; overflow-wrap: anywhere; }
.fin-lista .fin-texto small { display: block; font-weight: 500; color: var(--fin-suave, #64748b); font-size: .74rem; }
.fin-lista .fin-valor { color: var(--fin-azul, #0369a1); font-weight: 800; }
.fin-lista .fin-mini { display: flex; justify-content: flex-end; gap: 2px; }
.fin-lista .fin-mini button {
    border: 0; background: transparent; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    color: var(--fin-suave, #64748b); display: grid; place-items: center;
}
.fin-lista .fin-mini button:hover { background: rgba(14, 165, 233, .12); color: #0369a1; }
.fin-lista .fin-mini .material-symbols-outlined { font-size: 19px; }
.fin-lista .fin-mini .fin-borrar:hover { background: rgba(220, 38, 38, .12); color: #b91c1c; }

/* ── Historial de ventas del día ─────────────────────────────────────────── */
.fin-dia {
    --fin-suave: #64748b; --fin-borde: rgba(148, 163, 184, .35); --fin-card: rgba(255, 255, 255, .85); --fin-azul: #0369a1;
    margin: 16px 0; padding: 14px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(224, 242, 254, .9), rgba(240, 249, 255, .85));
    border: 1px solid rgba(14, 165, 233, .35);
}
.fin-dia > header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fin-dia > header > div { flex: 1; min-width: 0; }
.fin-dia h3 { margin: 0; font-size: 1rem; font-weight: 800; color: #0c4a6e; }
.fin-dia p { margin: 2px 0 0; font-size: .8rem; color: #075985; }
.fin-dia > header > strong { font-size: 1.25rem; font-weight: 800; color: #0369a1; }
.fin-dia .fin-logo, .fin-paciente .fin-logo { height: 30px; width: auto; border-radius: 8px; background: #fff; padding: 3px; }
[data-theme="dark"] .fin-dia { --fin-card: rgba(15, 23, 42, .6); --fin-suave: #94a3b8; background: rgba(12, 74, 110, .35); }
[data-theme="dark"] .fin-dia h3, [data-theme="dark"] .fin-dia p { color: #bae6fd; }
.dia-cuadre-cuotas strong { color: #0369a1; }
/* La pestaña "Cuotas Sistecrédito" del detalle del día muestra solo las cuotas. */
#modal-dia:not([data-seccion-dia="cuotas"]) .fin-dia { display: none; }
#modal-dia[data-seccion-dia="cuotas"] #dia-vista-tarjetas,
#modal-dia[data-seccion-dia="cuotas"] #dia-vista-compacta,
#modal-dia[data-seccion-dia="cuotas"] #dia-vista-tabla,
#modal-dia[data-seccion-dia="cuotas"] #dia-gastos-section { display: none !important; }
#modal-dia[data-seccion-dia="cuotas"] .fin-dia { margin-top: 4px; }
.fin-pago-card { --pago-bg: #f0f9ff; --pago-color: #0369a1; --pago-borde: #7dd3fc; border-style: dashed !important; cursor: pointer; font: inherit; text-align: left; }


/* ── Historial del paciente ──────────────────────────────────────────────── */
#patient-history-financieras:empty { display: none; }
.fin-paciente { margin-top: 16px; }
.fin-paciente .fin-ayuda { margin-bottom: 8px; }

/* ── Buscar la compra con Sistecrédito ───────────────────────────────────── */
.fin-panel [hidden] { display: none !important; }
.fin-panel .fin-resultados {
    display: flex; flex-direction: column; gap: 4px; max-height: 236px; overflow-y: auto;
    padding: 4px; border-radius: 12px; border: 1px solid var(--fin-borde); background: var(--fin-card);
}
.fin-panel .fin-resultados button {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left;
    font: inherit; color: var(--fin-texto); cursor: pointer;
}
.fin-panel .fin-resultados button:hover { background: rgba(14, 165, 233, .1); }
.fin-panel .fin-resultados b { display: block; font-size: .9rem; }
.fin-panel .fin-resultados small { display: block; font-size: .76rem; font-weight: 500; color: var(--fin-suave); }
.fin-panel .fin-resultados strong { color: var(--fin-azul); white-space: nowrap; }
.fin-panel .fin-resultados .fin-vacio { padding: 10px; font-size: .84rem; }
.fin-panel .fin-elegida {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
    background: rgba(224, 242, 254, .8); border: 1px solid rgba(14, 165, 233, .45);
}
.fin-panel .fin-elegida > .material-symbols-outlined { color: #0369a1; font-size: 28px; }
.fin-panel .fin-elegida > div { flex: 1; min-width: 0; }
.fin-panel .fin-elegida small { display: block; font-size: .78rem; color: var(--fin-suave); }
.fin-panel .fin-elegida .fin-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-panel .fin-elegida .fin-btn-sec { padding: 7px 12px; font-size: .8rem; }
[data-theme="dark"] .fin-panel .fin-elegida { background: rgba(12, 74, 110, .45); }

/* ── Marca: el logo real en una etiqueta blanca, con su proporción ────────── */
.fin-marca {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    height: 38px; padding: 0 12px; border-radius: 11px; background: #fff;
    border: 1px solid rgba(148, 163, 184, .3); box-shadow: 0 2px 6px -3px rgba(15, 23, 42, .18);
}
.fin-marca img { display: block; height: 15px; width: auto; }
.fin-marca-sm { height: 24px; padding: 0 7px; border-radius: 7px; box-shadow: none; }
.fin-marca-sm img { height: 10px; }
/* En "Métodos de pago recibidos" el logo va arriba del valor, no en el cuadrito. */
#modal-dia.dia-panel-v2 .dia-strip-pagos-scroll > .fin-pago-card { grid-template-columns: auto !important; gap: 4px !important; padding-top: 8px; padding-bottom: 8px; }
.fin-pago-card .dia-pago-icono { width: auto; height: auto; background: transparent; justify-content: flex-start; }
.fin-pago-card .dia-pago-icono .fin-marca { height: 22px; padding: 0 7px; border-radius: 7px; box-shadow: none; }
.fin-pago-card .dia-pago-icono .fin-marca img { height: 10px; }
/* Las dos tarjetas de Sistecrédito en "Métodos de pago recibidos": la venta
   (Sistecrédito paga después) y la cuota (plata en caja que no es venta). */
#modal-dia.dia-panel-v2 .dia-strip-pagos-scroll > .fin-venta-card { grid-template-columns: auto !important; gap: 4px !important; padding-top: 8px; padding-bottom: 8px; }
.fin-venta-card .dia-pago-icono { width: auto; height: auto; background: transparent; justify-content: flex-start; }
.fin-venta-card .dia-pago-icono .fin-marca,
.fin-pago-card .dia-pago-icono .fin-marca { height: 22px; padding: 0 7px; border-radius: 7px; box-shadow: none; }
.fin-venta-card .dia-pago-icono .fin-marca img { height: 10px; }
.fin-pagos-sep { align-self: stretch; width: 1px; margin: 4px 6px; background: rgba(148, 163, 184, .45); flex-shrink: 0; }
#modal-dia.dia-panel-v2 .dia-strip-pagos-scroll > .fin-pagos-sep { display: block !important; padding: 0 !important; border: 0 !important; background: rgba(148, 163, 184, .45) !important; }

/* ── Logo de Sistecrédito en los selectores de medio de pago ──────────────
   Los demás logos son cuadrados y caben en el cuadrito de 28-40 px; el de
   Sistecrédito es solo letras y ahí quedaba diminuto. Se le da su ancho.
   - sistecredito-marca.png: ya viene recortado → alto fijo, ancho libre.
   - sistecredito.webp (ícono viejo guardado por alguna óptica): tiene mucho
     margen blanco → se recorta con object-fit: cover dejando solo las letras. */
.pago-icon img[src*="sistecredito-marca"],
#pago-selector-panel .pago-icon img[src*="sistecredito-marca"],
#hist-pago-selector-panel .pago-icon img[src*="sistecredito-marca"],
#pago-selector-panel.pago-panel-flotante .pago-icon img[src*="sistecredito-marca"] {
    width: auto !important; height: 15px !important; max-width: 104px !important; max-height: 15px !important;
    object-fit: contain !important; border-radius: 0 !important;
}
.pago-icon img[src*="sistecredito.webp"],
#pago-selector-panel .pago-icon img[src*="sistecredito.webp"],
#hist-pago-selector-panel .pago-icon img[src*="sistecredito.webp"],
#pago-selector-panel.pago-panel-flotante .pago-icon img[src*="sistecredito.webp"] {
    width: 96px !important; height: 16px !important; max-width: 96px !important; max-height: 16px !important;
    object-fit: cover !important; object-position: center !important; border-radius: 0 !important;
}
/* El del pago mixto va dentro del campo del valor: se queda en su ancho para no tapar lo que se escribe. */
.mixto-icon img[src*="sistecredito-marca"] { width: 34px !important; height: auto !important; max-height: none !important; object-fit: contain !important; }
.hist-pago-icon img[src*="sistecredito-marca"] { width: auto !important; height: 10px !important; }
.hist-pago-icon:has(img[src*="sistecredito"]),
.hist-pago-icon:has(.pago-logo-siste) { width: auto; }

/* Etiqueta blanca con el logo (payment-config.js → logoSistecredito). Varias
   listas fuerzan las imágenes a 16-20 px cuadrados; aquí se respeta su ancho. */
.pago-logo-siste img {
    width: auto !important; height: 8px !important; max-width: 96px !important; max-height: 8px !important;
    object-fit: contain !important; border-radius: 0 !important;
}
/* En la tarjeta de la venta (historial) va solo el logo, sin repetir el nombre. */
.tag-base.tag-siste { padding: 3px 4px !important; background: #fff !important; border: 1px solid rgba(148, 163, 184, .35) !important; }
.tag-base.tag-siste .pago-logo-siste { height: 22px !important; padding: 0 8px !important; border: 0 !important; }
.tag-base.tag-siste .pago-logo-siste img { height: 12px !important; max-height: 12px !important; }

/* ── Medio de pago con su logo (ventanas de cuota y corrección) ─────────── */
.fin-panel .fin-medios { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.fin-panel .fin-medio {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 70px; padding: 9px 6px; border-radius: 13px; cursor: pointer; text-align: center;
    border: 1px solid var(--fin-borde); background: #fff; color: var(--fin-texto);
    transition: transform .2s var(--fin-spring), border-color .2s, box-shadow .2s var(--fin-spring);
}
.fin-panel .fin-medio:hover { transform: translateY(-1px); border-color: #7dd3fc; }
.fin-panel .fin-medio input { position: absolute; opacity: 0; pointer-events: none; }
.fin-panel .fin-medio:has(input:checked) { border-color: #0284c7; background: #f0f9ff; box-shadow: 0 0 0 3px rgba(2, 132, 199, .16); }
.fin-panel .fin-medio:has(input:focus-visible) { outline: 2px solid #0284c7; outline-offset: 2px; }
.fin-panel .fin-medio-ic { height: 26px; display: grid; place-items: center; font-size: 1.35rem; }
.fin-panel .fin-medio-ic img { max-height: 26px !important; max-width: 44px !important; height: auto !important; width: auto !important; object-fit: contain; }
.fin-panel .fin-medio-txt { font-size: .76rem; font-weight: 700; line-height: 1.15; }
[data-theme="dark"] .fin-panel .fin-medio { background: rgba(15, 23, 42, .5); }
[data-theme="dark"] .fin-panel .fin-medio:has(input:checked) { background: rgba(2, 132, 199, .22); }

/* ── Datos de cada cuota en el historial: etiquetas con ícono ───────────── */
.fin-lista .fin-datos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.fin-lista .fin-dato {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 4px; border-radius: 999px;
    font-size: .74rem; font-weight: 600; color: #334155; background: rgba(241, 245, 249, .95); border: 1px solid rgba(148, 163, 184, .3);
}
.fin-lista .fin-dato .material-symbols-outlined { font-size: 15px; color: #0369a1; }
.fin-lista .fin-dato-ic { display: inline-grid; place-items: center; min-width: 18px; height: 18px; font-size: .9rem; }
.fin-lista .fin-dato-ic img { max-height: 16px !important; max-width: 30px !important; width: auto !important; height: auto !important; object-fit: contain; }
.fin-lista .fin-dato-ic .pago-logo-siste { height: 16px !important; }
.fin-lista .fin-dato-alerta { color: #92400e; background: rgba(254, 243, 199, .9); border-color: rgba(245, 158, 11, .45); }
.fin-lista .fin-dato-alerta .material-symbols-outlined { color: #d97706; }
.fin-lista .fin-estado {
    margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: .66rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .03em; color: #0369a1; background: rgba(14, 165, 233, .14); vertical-align: middle;
}
.fin-lista .fin-estado-anulada { color: #b91c1c; background: rgba(239, 68, 68, .12); }
[data-theme="dark"] .fin-lista .fin-dato { color: #e2e8f0; background: rgba(30, 41, 59, .7); }

/* Logo del medio junto al de Sistecrédito en la tarjeta de la cuota. */
.fin-pago-card .dia-pago-icono { gap: 6px; }
.fin-pago-medio { display: inline-grid; place-items: center; height: 22px; min-width: 22px; padding: 0 4px; border-radius: 7px; background: #fff; border: 1px solid rgba(148, 163, 184, .3); }
.fin-pago-medio img { max-height: 16px !important; max-width: 34px !important; width: auto !important; height: auto !important; object-fit: contain; }
.fin-pago-medio .pago-logo-siste { border: 0 !important; padding: 0 !important; }

/* Ícono de efectivo (img/pagos/efectivo.svg): las listas que achican las imágenes
   a 16-28 px lo dejan pequeño; se le da un poco más de alto. */
.tag-base img[src*="efectivo.svg"] { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; }
#pago-selector-panel .pago-icon img[src*="efectivo.svg"],
#hist-pago-selector-panel .pago-icon img[src*="efectivo.svg"],
#pago-selector-panel.pago-panel-flotante .pago-icon img[src*="efectivo.svg"],
.pago-icon img[src*="efectivo.svg"] { width: 34px !important; height: 34px !important; max-width: 34px !important; max-height: 34px !important; }
.hist-pago-icon img[src*="efectivo.svg"] { width: 22px; height: 22px; }
.mixto-icon img[src*="efectivo.svg"] { width: 26px !important; height: 26px !important; max-height: 26px !important; }
.dia-pago-icono img[src*="efectivo.svg"] { height: 26px !important; max-height: 26px !important; max-width: 30px !important; }
.fin-panel .fin-medio-ic img[src*="efectivo.svg"] { max-height: 30px !important; max-width: 34px !important; height: 30px !important; }

/* ── Compra del sistema anterior ─────────────────────────────────────────── */
.fin-panel .fin-enlace {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 0; border: 0; background: transparent;
    color: #0369a1; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; text-align: left;
}
.fin-panel .fin-enlace .material-symbols-outlined { font-size: 17px; }
.fin-panel .fin-anterior { padding: 12px 14px; border-radius: 14px; border: 1px dashed #94a3b8; background: var(--fin-card); }
.fin-panel .fin-anterior-head { display: flex; align-items: center; gap: 6px; }
.fin-panel .fin-anterior-head b { flex: 1; }
.fin-panel .fin-anterior-head .fin-enlace { margin-top: 0; }
.fin-panel .fin-anterior .fin-ayuda { margin: 4px 0 10px; }
.fin-panel .fin-anterior .fin-btn-pri { margin-top: 12px; }
.fin-panel .fin-campo span em { font-style: normal; font-weight: 600; color: #94a3b8; }
.fin-panel .fin-elegida-anterior { background: rgba(241, 245, 249, .9); border-color: rgba(100, 116, 139, .45); }
.fin-panel .fin-elegida-anterior > .material-symbols-outlined { color: #475569; }

/* ── Reportes ────────────────────────────────────────────────────────────── */
.fin-reporte { margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px dashed #7dd3fc; background: #f0f9ff; }
.fin-reporte header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.fin-reporte header > div { flex: 1; min-width: 0; }
.fin-reporte header b { display: block; color: #0c4a6e; font-size: .92rem; }
.fin-reporte header small { color: #0369a1; font-size: .76rem; }
.fin-reporte header > strong { color: #0369a1; font-size: 1.1rem; }
.fin-reporte-linea { display: flex; justify-content: space-between; padding: 3px 2px; font-size: .84rem; color: #334155; }
.fin-reporte-ver { margin-top: 6px; border: 0; background: transparent; color: #0369a1; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; padding: 0; }
[data-theme="dark"] .fin-reporte { background: rgba(12, 74, 110, .3); }
[data-theme="dark"] .fin-reporte header b, [data-theme="dark"] .fin-reporte-linea { color: #e0f2fe; }

/* ── Celular ─────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .fin-panel .fin-form { grid-template-columns: 1fr; }
    .fin-panel .fin-cards { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .fin-panel .fin-cards strong { font-size: .9rem; }
    .fin-filtros { flex-direction: column; align-items: stretch; }
    .fin-lista .fin-fila { grid-template-columns: 1fr auto; }
    .fin-lista .fin-hora { grid-column: 1 / -1; }
    .fin-lista .fin-mini { grid-column: 1 / -1; }
}

/* ── Modo oscuro ─────────────────────────────────────────────────────────── */
[data-theme="dark"] #fin-cuenta,
[data-theme="dark"] #fin-cuota,
[data-theme="dark"] #fin-editar {
    --fin-texto: #e2e8f0;
    --fin-suave: #94a3b8;
    --fin-borde: rgba(255, 255, 255, .12);
    --fin-card: rgba(15, 23, 42, .7);
    --fin-azul: #38bdf8;
}
[data-theme="dark"] .fin-panel {
    background: linear-gradient(155deg, rgba(30, 41, 59, .98), rgba(15, 23, 42, .96));
    border-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] .fin-panel::after { opacity: .25; }
[data-theme="dark"] .fin-panel .fin-campo input,
[data-theme="dark"] .fin-panel .fin-campo select,
[data-theme="dark"] .fin-panel .fin-btn-sec,
[data-theme="dark"] .fin-panel .fin-x { background: rgba(15, 23, 42, .5); color: var(--fin-texto); }
[data-theme="dark"] .fin-panel .fin-sugerencias { background: rgba(15, 23, 42, .96); }
[data-theme="dark"] .fin-panel .fin-alerta { background: rgba(120, 53, 15, .35); color: #fcd34d; }
[data-theme="dark"] .fin-panel .fin-mas { color: #4ade80; }
[data-theme="dark"] .fin-panel .fin-menos { color: #fbbf24; }

@media (prefers-reduced-motion: reduce) {
    #fin-cuenta, #fin-cuota, #fin-editar, .fin-panel {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        animation: none !important;
        transition: none !important;
    }
}