/* ==========================================================================
   HE-010 — Visor XML de Compra (Banking Bold)
   ========================================================================== */

:root {
    --bnk-bg: #d9e2ec; --bnk-surface: #fff; --bnk-surface-2: #edf2f7; --bnk-surface-3: #e2e8f0;
    --bnk-border: #94a3b8; --bnk-border-2: #64748b; --bnk-border-3: #475569;
    --bnk-text: #000; --bnk-text-2: #1e293b; --bnk-text-muted: #1e293b; --bnk-text-soft: #475569;
    --bnk-primary: #0047AB; --bnk-primary-2: #003a8c; --bnk-primary-3: #dbeafe;
    --bnk-accent: #2563eb; --bnk-accent-2: #1d4ed8;
    --bnk-ok-bg: #dcfce7; --bnk-ok-tx: #15803d;
    --bnk-err-bg: #fee2e2; --bnk-err-tx: #b91c1c;
    --bnk-warn-bg: #fef3c7; --bnk-warn-tx: #b45309;
    --bnk-neu-bg: #e2e8f0; --bnk-neu-tx: #334155;
    --bnk-info-bg: #dbeafe; --bnk-info-tx: #1e40af;
    --bnk-focus: 0 0 0 3px rgba(0,71,171,.18);
    --bnk-shadow-1: 0 1px 2px rgba(15,23,42,.06);
    --bnk-shadow-2: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --bnk-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bnk-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bnk-bg) !important; height: 100%; overflow: hidden; }
body { font-family: var(--bnk-font); font-size: 13px; color: var(--bnk-text); }
*:focus-visible { outline: none; box-shadow: var(--bnk-focus); }

/* ===== Ficha principal ===== */
.ficha-principal {
    position: fixed;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: var(--bnk-surface);
    border: 1px solid var(--bnk-border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--bnk-shadow-2);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "titulo"
        "upload"
        "contenido"
        "totales";
}
.ficha-titulo    { grid-area: titulo; }
.ficha-upload    { grid-area: upload; }
.ficha-contenido { grid-area: contenido; overflow: auto; background: var(--bnk-surface); padding: 10px; }
.ficha-totales   { grid-area: totales; min-height: 30px; }

/* ===== Titulo ===== */
.ficha-titulo {
    background: var(--bnk-primary);
    color: #fff;
    padding: 4px 10px;
    min-height: 32px;
    border-bottom: 1.5px solid var(--bnk-primary-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.ficha-titulo h1 {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.2px;
}
.ficha-titulo h1 i { font-size: 13px; opacity: 0.85; }
.version, .modulo-codigo {
    font-size: 10px;
    font-weight: 600;
    background: rgba(255,255,255,0.14);
    padding: 2px 8px;
    font-family: var(--bnk-mono);
    letter-spacing: 0.5px;
}
.version { background: rgba(255,255,255,0.10); }
.titulo-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.separador-acciones { display: inline-block; width: 1px; height: 18px; background: rgba(255,255,255,0.25); margin: 0 4px; }

.btn-export {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px; height: 24px; padding: 0 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.20);
    color: #fff; font-size: 11px; font-weight: 500;
    border-radius: 0; cursor: pointer; transition: all 0.12s;
    text-decoration: none; font-family: var(--bnk-font); white-space: nowrap;
}
.btn-export i { font-size: 12px; }
.btn-export:hover:not(:disabled) { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.38); }
.btn-export:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-export.alerta { background: rgba(245,158,11,0.22); border-color: rgba(245,158,11,0.45); }
.btn-export.alerta:hover:not(:disabled) { background: rgba(245,158,11,0.38); border-color: rgba(245,158,11,0.70); }
.btn-export.salir { background: rgba(239,68,68,0.20); border-color: rgba(239,68,68,0.40); }
.btn-export.salir:hover:not(:disabled) { background: rgba(239,68,68,0.35); border-color: rgba(239,68,68,0.70); }

/* ===== Zona de carga ===== */
.ficha-upload {
    background: var(--bnk-surface-2);
    border-bottom: 1px solid var(--bnk-border);
    padding: 8px 10px;
}
.upload-form {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 10px;
    align-items: stretch;
}
.upload-zona {
    position: relative;
    background: var(--bnk-surface);
    border: 2px dashed var(--bnk-border-2);
    padding: 10px 12px;
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.upload-zona:hover,
.upload-zona.dragover {
    border-color: var(--bnk-primary);
    background: var(--bnk-primary-3);
}
.upload-zona i { font-size: 26px; color: var(--bnk-primary); }
.upload-zona .upload-texto { display: flex; flex-direction: column; gap: 1px; }
.upload-zona .upload-texto strong {
    font-size: 12px; font-weight: 700; color: var(--bnk-text);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.upload-zona .upload-texto span { font-size: 10px; color: var(--bnk-text-soft); }
.upload-zona input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

.paste-area {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 4px;
    background: var(--bnk-surface);
    border: 1px solid var(--bnk-border-2);
    padding: 6px 8px;
}
.paste-label {
    font-size: 11px; font-weight: 700; color: var(--bnk-text);
    text-transform: uppercase; letter-spacing: 0.4px;
    display: flex; align-items: center; gap: 4px;
}
.paste-area textarea {
    width: 100%;
    min-height: 56px;
    max-height: 140px;
    padding: 5px 7px;
    font-family: var(--bnk-mono);
    font-size: 11px;
    color: var(--bnk-text);
    background: #fff;
    border: 1px solid var(--bnk-border);
    border-radius: 0;
    resize: vertical;
}
.paste-area textarea:focus { border-color: var(--bnk-primary); box-shadow: var(--bnk-focus); outline: none; }
.btn-ver-xml {
    align-self: start;
    justify-self: end;
    height: 24px;
    padding: 0 12px;
    background: var(--bnk-primary);
    color: #fff;
    border: 1px solid var(--bnk-primary);
    border-radius: 0;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px;
    cursor: pointer;
    font-family: var(--bnk-font);
    display: inline-flex; align-items: center; gap: 4px;
}
.btn-ver-xml:hover { background: var(--bnk-primary-2); border-color: var(--bnk-primary-2); }

/* ===== Alertas ===== */
.alerta-error {
    background: var(--bnk-err-bg);
    border: 1.5px solid var(--bnk-err-tx);
    padding: 8px 12px;
    margin-bottom: 10px;
    display: flex; gap: 10px; align-items: center;
    color: var(--bnk-err-tx);
}
.alerta-error i { font-size: 20px; }
.alerta-error strong { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.alerta-error p { font-size: 11px; font-family: var(--bnk-mono); color: #7f1d1d; margin: 0; }

/* ===== Empty state ===== */
.empty-state {
    padding: 50px 20px;
    text-align: center;
    color: var(--bnk-text-soft);
    font-size: 13px;
    font-weight: 600;
}
.empty-state i { font-size: 3rem; opacity: 0.4; display: block; margin-bottom: 10px; color: var(--bnk-primary); }

/* ===== Validación de cálculos ===== */
.validacion-panel {
    background: var(--bnk-err-bg);
    border: 1.5px solid var(--bnk-err-tx);
    margin-bottom: 10px;
    overflow: hidden;
}
.validacion-header {
    background: var(--bnk-err-tx);
    color: #fff;
    padding: 5px 10px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    display: flex; align-items: center; gap: 8px;
}
.validacion-header i { font-size: 16px; }
.validacion-header strong { font-family: var(--bnk-mono); font-size: 14px; }
.validacion-header .validacion-tol {
    margin-left: auto;
    font-size: 10px; font-weight: 600;
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    font-family: var(--bnk-mono);
    text-transform: none;
    letter-spacing: 0.2px;
}
.validacion-body {
    padding: 6px 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 6px 14px;
}
.val-grupo { border-left: 3px solid var(--bnk-err-tx); padding-left: 8px; }
.val-grupo-titulo {
    font-size: 11px; font-weight: 700;
    color: var(--bnk-err-tx);
    display: flex; align-items: center; gap: 4px;
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.val-grupo-titulo i { font-size: 12px; }
.val-grupo ul { list-style: none; margin: 0; padding: 0; }
.val-grupo ul li {
    font-size: 11px;
    font-family: var(--bnk-mono);
    color: #7f1d1d;
    padding: 2px 0;
    line-height: 1.35;
    border-bottom: 1px dotted rgba(185,28,28,0.25);
}
.val-grupo ul li:last-child { border-bottom: none; }

.validacion-ok {
    background: var(--bnk-ok-bg);
    border: 1.5px solid var(--bnk-ok-tx);
    padding: 5px 10px;
    margin-bottom: 10px;
    font-size: 11px; font-weight: 700;
    color: var(--bnk-ok-tx);
    display: flex; align-items: center; gap: 6px;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.validacion-ok i { font-size: 14px; }

/* Fila con error de cálculo */
.tabla-lineas tr.fila-error-calculo { background: #fef2f2 !important; }
.tabla-lineas tr.fila-error-calculo:hover { background: #fee2e2 !important; }
.tabla-lineas tr.fila-error-calculo.fila-exonerada { background: #fef2f2 !important; }
.tabla-lineas tr.fila-error-calculo td:first-child {
    border-left: 3px solid var(--bnk-err-tx);
    padding-left: 4px;
}
.tabla-lineas .err-ico {
    color: var(--bnk-err-tx);
    font-size: 11px;
    margin-right: 3px;
    animation: pulso-err 1.5s infinite;
}
@keyframes pulso-err { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ===== Mini botones (Hacienda / Validar CABYS) ===== */
.btn-mini {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px;
    height: 20px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    border: 1px solid var(--bnk-primary);
    background: var(--bnk-surface);
    color: var(--bnk-primary);
    border-radius: 0;
    cursor: pointer;
    font-family: var(--bnk-font);
    transition: all 0.12s;
    margin-left: 6px;
    vertical-align: middle;
}
.btn-mini i { font-size: 11px; }
.btn-mini:hover:not(:disabled) { background: var(--bnk-primary); color: #fff; }
.btn-mini:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-mini.btn-hacienda { border-color: #2FAE60; color: #2FAE60; }
.btn-mini.btn-hacienda:hover:not(:disabled) { background: #2FAE60; color: #fff; }
.btn-mini.btn-validar-cabys { border-color: #fff; color: #fff; background: rgba(255,255,255,0.1); }
.btn-mini.btn-validar-cabys:hover:not(:disabled) { background: rgba(255,255,255,0.25); border-color: #fff; }
.btn-mini.btn-validar-clave { border-color: var(--bnk-primary); color: var(--bnk-primary); }
.btn-mini.btn-validar-clave:hover:not(:disabled) { background: var(--bnk-primary); color: #fff; }
.btn-mini.btn-copiar-clave { border-color: var(--bnk-border-2); color: var(--bnk-text); padding: 1px 5px; }
.btn-mini.btn-copiar-clave:hover:not(:disabled) { background: var(--bnk-surface-3); }
.btn-mini.btn-atv {
    border-color: #2FAE60; color: #2FAE60;
    text-decoration: none;
}
.btn-mini.btn-atv:hover { background: #2FAE60; color: #fff; text-decoration: none; }
.btn-mini.btn-mini-ok { background: var(--bnk-ok-tx) !important; color: #fff !important; border-color: var(--bnk-ok-tx) !important; }
.btn-mini.btn-mini-bad { background: var(--bnk-err-tx) !important; color: #fff !important; border-color: var(--bnk-err-tx) !important; }

/* Cédula + botón alineados */
.pline.pline-cedula { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* Actividad: código + descripción */
.actividad-cod {
    font-family: var(--bnk-mono);
    font-weight: 700;
    font-size: 11px;
    background: var(--bnk-surface-3);
    padding: 1px 5px;
}
.actividad-desc { font-size: 10px; color: var(--bnk-text-soft); font-style: italic; margin-left: 4px; }
.actividad-desc.ok { color: var(--bnk-ok-tx); font-style: normal; font-weight: 600; }
.actividad-desc.warn { color: var(--bnk-err-tx); font-style: normal; font-weight: 700; }

/* ===== Validación de clave ===== */
.clave-resultado {
    display: none;
    grid-column: 1 / -1;
    margin-top: 6px;
}
.clave-resultado.open { display: block; }
.clave-val-box {
    background: var(--bnk-surface);
    border: 1.5px solid var(--bnk-ok-tx);
    overflow: hidden;
}
.clave-val-box.conerr { border-color: var(--bnk-err-tx); }
.clave-val-titulo {
    background: var(--bnk-ok-tx); color: #fff;
    padding: 5px 10px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    display: flex; align-items: center; gap: 6px;
}
.clave-val-titulo strong { font-family: var(--bnk-font); }
.clave-val-titulo i { font-size: 14px; }
.clave-val-box.conerr .clave-val-titulo { background: var(--bnk-err-tx); }

.clave-val-checks {
    padding: 4px 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2px 14px;
}
.clave-val-row {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px;
    padding: 3px 0;
    border-bottom: 1px dotted var(--bnk-surface-3);
}
.clave-val-row:last-child { border-bottom: none; }
.clave-val-row i { font-size: 12px; flex-shrink: 0; }
.clave-val-row.ok i  { color: var(--bnk-ok-tx); }
.clave-val-row.bad i { color: var(--bnk-err-tx); }
.clave-val-row .cvl-lbl {
    font-weight: 700; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.3px;
    color: var(--bnk-text);
    min-width: 110px;
}
.clave-val-row .cvl-det { font-family: var(--bnk-mono); font-size: 11px; color: var(--bnk-text-2); flex: 1; }
.clave-val-row.bad .cvl-det { color: var(--bnk-err-tx); font-weight: 600; }

.clave-val-footer {
    padding: 4px 10px;
    font-size: 10px;
    color: var(--bnk-text-soft);
    background: var(--bnk-surface-2);
    border-top: 1px solid var(--bnk-border);
    display: flex; align-items: center; gap: 4px;
}
.clave-val-footer i { color: var(--bnk-primary); font-size: 12px; }
.clave-val-footer strong { color: var(--bnk-text); font-weight: 700; }

/* Consulta online Hacienda */
.clave-val-online {
    border-top: 1px solid var(--bnk-border);
    padding: 4px 10px;
    background: var(--bnk-surface-2);
}
.cvl-loading {
    font-size: 11px; color: var(--bnk-text-soft);
    display: flex; align-items: center; gap: 6px;
    padding: 4px 0;
}
.cvl-loading i { animation: hdxSpin 1s linear infinite; }
.cvl-online-box {
    padding: 6px 10px;
    border-left: 4px solid transparent;
    background: #fff;
}
.cvl-online-box.cvl-ok   { border-left-color: var(--bnk-ok-tx); background: var(--bnk-ok-bg); }
.cvl-online-box.cvl-bad  { border-left-color: var(--bnk-err-tx); background: var(--bnk-err-bg); }
.cvl-online-box.cvl-warn { border-left-color: var(--bnk-warn-tx); background: var(--bnk-warn-bg); }
.cvl-online-box.cvl-neu  { border-left-color: var(--bnk-neu-tx); background: var(--bnk-neu-bg); }
.cvl-online-titulo {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
}
.cvl-online-titulo i { font-size: 16px; }
.cvl-online-box.cvl-ok .cvl-online-titulo i   { color: var(--bnk-ok-tx); }
.cvl-online-box.cvl-bad .cvl-online-titulo i  { color: var(--bnk-err-tx); }
.cvl-online-box.cvl-warn .cvl-online-titulo i { color: var(--bnk-warn-tx); }
.cvl-online-titulo strong { font-weight: 700; letter-spacing: 0.3px; }
.cvl-online-amb {
    margin-left: auto;
    font-size: 9px; font-weight: 700;
    font-family: var(--bnk-mono);
    padding: 1px 6px;
    background: rgba(0,0,0,0.08);
    letter-spacing: 0.4px;
}
.cvl-online-detalles {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(0,0,0,0.15);
    font-size: 11px;
    display: flex; flex-direction: column; gap: 2px;
}
.cvl-online-detalles strong { font-weight: 700; color: var(--bnk-text); }
.cvl-online-fecha {
    margin-top: 3px;
    font-size: 10px;
    font-family: var(--bnk-mono);
    color: var(--bnk-text-soft);
}
.cvl-online-hint {
    margin-top: 4px;
    font-size: 10px;
    color: var(--bnk-text-2);
    font-style: italic;
}

/* ===== Resultado consulta Hacienda ===== */
.hacienda-resultado {
    display: none;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--bnk-border);
}
.hacienda-resultado.open { display: block; }
.hdx-loading {
    font-size: 11px;
    color: var(--bnk-text-soft);
    padding: 6px 0;
}
.hdx-loading i { animation: hdxSpin 1s linear infinite; }
@keyframes hdxSpin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.hdx-error {
    font-size: 11px;
    color: var(--bnk-err-tx);
    padding: 4px 8px;
    background: var(--bnk-err-bg);
    border-left: 3px solid var(--bnk-err-tx);
    display: flex; align-items: center; gap: 4px;
}
.hdx-box { display: flex; flex-direction: column; gap: 5px; }
.hdx-titulo {
    font-size: 12px; font-weight: 700;
    color: var(--bnk-text);
    display: flex; align-items: center; gap: 4px;
}
.hdx-titulo i { color: #2FAE60; font-size: 13px; }
.hdx-situacion {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.hdx-sit-badge {
    font-size: 9px; font-weight: 700;
    padding: 2px 6px;
    background: var(--bnk-ok-tx); color: #fff;
    text-transform: uppercase; letter-spacing: 0.3px;
    font-family: var(--bnk-mono);
}
.hdx-warn .hdx-sit-badge { background: var(--bnk-warn-tx); }
.hdx-err .hdx-sit-badge { background: var(--bnk-err-tx); }
.hdx-sit-badge.hdx-bad { background: var(--bnk-err-tx); }
.hdx-sit-meta { font-size: 10px; color: var(--bnk-text-2); margin-left: 6px; }
.hdx-sub-titulo {
    font-size: 10px; font-weight: 700;
    color: var(--bnk-text);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-top: 2px;
    display: flex; align-items: center; gap: 4px;
}
.hdx-sub-titulo i { color: var(--bnk-primary); }
.hdx-act-lista { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.hdx-act {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    font-size: 11px;
    padding: 2px 0;
    border-bottom: 1px dotted var(--bnk-surface-3);
}
.hdx-act:last-child { border-bottom: none; }
.hdx-act .hdx-cod {
    font-family: var(--bnk-mono);
    font-weight: 700;
    font-size: 11px;
    background: var(--bnk-surface-3);
    padding: 1px 5px;
    min-width: 62px; text-align: center;
}
.hdx-act-desc { color: var(--bnk-text); flex: 1; }
.hdx-act.hdx-act-inactiva { opacity: 0.55; }
.hdx-act.hdx-act-xml { background: #ecfdf5; border-left: 3px solid var(--bnk-ok-tx); padding-left: 4px; }
.hdx-act.hdx-act-xml .hdx-cod { background: var(--bnk-ok-tx); color: #fff; }

.hdx-chip {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 1px 5px;
    font-size: 8px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    font-family: var(--bnk-font);
    border-radius: 0;
}
.hdx-chip i { font-size: 9px; }
.hdx-chip-p { background: var(--bnk-primary); color: #fff; }
.hdx-chip-inactiva { background: var(--bnk-neu-bg); color: var(--bnk-neu-tx); }
.hdx-chip-match { background: var(--bnk-ok-tx); color: #fff; }

/* ===== Validar CABYS — flags en tabla ===== */
.lineas-header { justify-content: space-between; }
.cabys-flag {
    display: inline-flex; align-items: center;
    font-size: 12px;
    margin-left: 3px;
    vertical-align: middle;
}
.cabys-flag-ok { color: var(--bnk-ok-tx); }
.cabys-flag-bad { color: var(--bnk-err-tx); }
.cabys-flag-empty { color: var(--bnk-text-soft); font-size: 11px; }
.tabla-lineas td.cabys-ok { background: rgba(21,128,61,0.06); }
.tabla-lineas td.cabys-bad { background: rgba(185,28,28,0.08); }
.tabla-lineas td.cabys-vacio { background: rgba(71,85,105,0.06); }

/* ===== Factura wrap ===== */
.factura-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Encabezado */
.factura-encabezado {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    background: var(--bnk-surface);
    border: 1.5px solid var(--bnk-primary);
    border-left: 4px solid var(--bnk-primary);
    padding: 10px 14px;
}
.factura-encabezado .clave-resultado { grid-column: 1 / -1; }
.encab-izq { display: flex; flex-direction: column; gap: 4px; }
.tipo-doc {
    font-size: 15px; font-weight: 700; color: var(--bnk-primary);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.consec, .clave {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px;
}
.consec .lbl, .clave .lbl {
    font-size: 10px; font-weight: 700; color: var(--bnk-text);
    text-transform: uppercase; letter-spacing: 0.4px; min-width: 88px;
}
.consec code {
    font-family: var(--bnk-mono); font-weight: 700; color: var(--bnk-text);
    background: var(--bnk-surface-3); padding: 2px 8px; font-size: 13px;
}
.clave code.clave-val {
    font-family: var(--bnk-mono); font-weight: 500; color: var(--bnk-text-2);
    font-size: 10px; letter-spacing: 0.2px;
    word-break: break-all;
}
.encab-der {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 230px;
}
.encab-der .campo {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 11px;
}
.encab-der .campo .lbl {
    font-size: 10px; font-weight: 700; color: var(--bnk-text);
    text-transform: uppercase; letter-spacing: 0.4px;
    min-width: 110px; text-align: right;
}
.encab-der .campo .val {
    font-family: var(--bnk-mono); font-weight: 500; color: var(--bnk-text-2);
    font-size: 12px;
}

/* Emisor + Receptor */
.partes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.parte-card {
    background: var(--bnk-surface);
    border: 1.5px solid var(--bnk-border);
    overflow: hidden;
}
.parte-header {
    background: var(--bnk-primary);
    color: #fff;
    padding: 4px 10px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 1.5px solid var(--bnk-primary-2);
    display: flex; align-items: center; gap: 6px;
}
.parte-header i { font-size: 12px; }
.parte-body { padding: 6px 10px; display: flex; flex-direction: column; gap: 3px; }
.pline { font-size: 11px; color: var(--bnk-text-2); line-height: 1.35; }
.pline.pline-nombre { font-size: 13px; font-weight: 700; color: var(--bnk-text); }
.pline.pline-sub { font-size: 10px; color: var(--bnk-text-soft); font-style: italic; }
.pline .plbl {
    font-size: 9px; font-weight: 700; color: var(--bnk-text);
    text-transform: uppercase; letter-spacing: 0.3px;
    display: inline-block; min-width: 78px;
}
.pline code {
    font-family: var(--bnk-mono); font-weight: 600;
    background: var(--bnk-surface-3); padding: 1px 5px; font-size: 11px;
}

/* Líneas */
.lineas-card {
    background: var(--bnk-surface);
    border: 1.5px solid var(--bnk-border);
    overflow: hidden;
}
.lineas-header {
    background: var(--bnk-primary);
    color: #fff;
    padding: 4px 10px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 1.5px solid var(--bnk-primary-2);
    display: flex; align-items: center; gap: 6px;
}
.lineas-header i { font-size: 12px; }
.tabla-lineas {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    color: var(--bnk-text);
}
.tabla-lineas th {
    background: var(--bnk-primary);
    color: #fff;
    padding: 4px 6px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 1.5px solid var(--bnk-primary-2);
    border-right: 1px solid rgba(255,255,255,0.12);
    text-align: left;
    white-space: nowrap;
}
.tabla-lineas th:last-child { border-right: none; }
.tabla-lineas td {
    padding: 4px 6px;
    color: var(--bnk-text); font-size: 12px; font-weight: 500;
    border-bottom: 1px solid #cbd5e1;
    border-right: 1px solid #e2e8f0;
    line-height: 1.3;
    vertical-align: middle;
}
.tabla-lineas td:last-child { border-right: none; }
.tabla-lineas tbody tr { background: #fff; transition: background 0.12s; }
.tabla-lineas tbody tr:nth-child(even) { background: #f1f5f9; }
.tabla-lineas tbody tr:hover { background: #bfdbfe; }
.tabla-lineas .text-right { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-lineas .text-center { text-align: center; }
.tabla-lineas .mono { font-family: var(--bnk-mono); }
.tabla-lineas code.mono {
    font-family: var(--bnk-mono);
    font-weight: 600;
    color: var(--bnk-text);
    background: transparent;
    padding: 0;
    font-size: 11px;
}
.tabla-lineas .desc-col { white-space: normal; max-width: 320px; line-height: 1.3; }
.tabla-lineas .total-linea { font-weight: 700; color: var(--bnk-primary); }
.tabla-lineas .imp-extra {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 700;
    background: var(--bnk-warn-bg);
    color: var(--bnk-warn-tx);
    border: 1px solid var(--bnk-warn-tx);
    font-family: var(--bnk-mono);
    cursor: help;
}

/* Exoneración */
.tabla-lineas tr.fila-exonerada { background: #f0fdf4; }
.tabla-lineas tr.fila-exonerada:nth-child(even) { background: #dcfce7; }
.tabla-lineas tr.fila-exonerada:hover { background: #bbf7d0; }
.tabla-lineas .exon-col { color: var(--bnk-ok-tx); font-weight: 600; }
.tabla-lineas .exon-col .exon-val { font-weight: 700; }
.tabla-lineas .exon-col .exon-porc {
    display: block;
    font-size: 9px;
    font-weight: 500;
    color: var(--bnk-text-soft);
    font-family: var(--bnk-mono);
    margin-top: 1px;
}
.tabla-lineas tr.fila-exon-detalle { background: #f0fdf4 !important; }
.tabla-lineas tr.fila-exon-detalle td {
    padding: 3px 8px !important;
    border-top: none !important;
    border-bottom: 2px solid var(--bnk-ok-tx) !important;
    font-size: 10px;
    color: var(--bnk-text-2);
    line-height: 1.3;
}
.tabla-lineas tr.fila-exon-detalle .exon-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px;
    font-size: 9px; font-weight: 700;
    background: var(--bnk-ok-tx); color: #fff;
    text-transform: uppercase; letter-spacing: 0.4px;
    font-family: var(--bnk-font);
    margin-right: 8px;
}
.tabla-lineas tr.fila-exon-detalle .exon-chip i { font-size: 10px; }
.tabla-lineas tr.fila-exon-detalle .exon-meta {
    display: inline-block;
    margin-right: 10px;
    font-size: 10px;
    color: var(--bnk-text-2);
    font-weight: 500;
}
.tabla-lineas tr.fila-exon-detalle .exon-meta code {
    font-family: var(--bnk-mono);
    font-size: 10px;
    background: var(--bnk-surface-3);
    padding: 0 4px;
}

/* ===== Documentos Referenciados (InformacionReferencia) ===== */
.referencias-card {
    background: var(--bnk-surface);
    border: 1.5px solid var(--bnk-border);
    overflow: hidden;
}
.referencias-header {
    background: var(--bnk-primary);
    color: #fff;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1.5px solid var(--bnk-primary-2);
    display: flex;
    align-items: center;
    gap: 6px;
}
.referencias-header i { font-size: 12px; }
.tabla-refs {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    color: var(--bnk-text);
}
.tabla-refs th {
    background: var(--bnk-primary);
    color: #fff;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1.5px solid var(--bnk-primary-2);
    border-right: 1px solid rgba(255,255,255,0.12);
    text-align: left;
    white-space: nowrap;
}
.tabla-refs th:last-child { border-right: none; }
.tabla-refs td {
    padding: 4px 8px;
    color: var(--bnk-text);
    font-size: 12px;
    font-weight: 500;
    border-bottom: 1px solid #cbd5e1;
    border-right: 1px solid #e2e8f0;
    line-height: 1.3;
    vertical-align: middle;
    white-space: nowrap;
}
.tabla-refs td:last-child { border-right: none; }
.tabla-refs tbody tr { background: #fff; }
.tabla-refs tbody tr:nth-child(even) { background: #f1f5f9; }
.tabla-refs tbody tr:hover { background: #bfdbfe; }
.tabla-refs .text-center { text-align: center; }
.tabla-refs .mono { font-family: var(--bnk-mono); }
.tabla-refs .ref-cod {
    font-family: var(--bnk-mono);
    font-weight: 700;
    color: var(--bnk-text);
    background: var(--bnk-surface-3);
    padding: 1px 6px;
    font-size: 11px;
    margin-right: 4px;
}
.tabla-refs .ref-label { font-weight: 500; color: var(--bnk-text); }
.tabla-refs .ref-clave {
    font-family: var(--bnk-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--bnk-text-2);
    word-break: break-all;
    white-space: normal;
}
.tabla-refs .ref-razon {
    white-space: normal;
    font-size: 11px;
    color: var(--bnk-text-2);
    max-width: 260px;
}

/* ===== Medios de Pago ===== */
.mpago-card {
    background: var(--bnk-surface);
    border: 1.5px solid var(--bnk-border);
    overflow: hidden;
}
.mpago-header {
    background: var(--bnk-primary);
    color: #fff;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1.5px solid var(--bnk-primary-2);
    display: flex;
    align-items: center;
    gap: 6px;
}
.mpago-header i { font-size: 12px; }
.tabla-mpago {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    color: var(--bnk-text);
}
.tabla-mpago th {
    background: var(--bnk-primary);
    color: #fff;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1.5px solid var(--bnk-primary-2);
    border-right: 1px solid rgba(255,255,255,0.12);
    text-align: left;
    white-space: nowrap;
}
.tabla-mpago th:last-child { border-right: none; }
.tabla-mpago td {
    padding: 4px 8px;
    color: var(--bnk-text);
    font-size: 12px;
    font-weight: 500;
    border-bottom: 1px solid #cbd5e1;
    border-right: 1px solid #e2e8f0;
    line-height: 1.3;
    vertical-align: middle;
}
.tabla-mpago td:last-child { border-right: none; }
.tabla-mpago tbody tr { background: #fff; }
.tabla-mpago tbody tr:nth-child(even) { background: #f1f5f9; }
.tabla-mpago tbody tr:hover { background: #bfdbfe; }
.tabla-mpago .text-right { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-mpago .text-center { text-align: center; }
.tabla-mpago .mono { font-family: var(--bnk-mono); }
.tabla-mpago .mp-cod {
    font-family: var(--bnk-mono);
    font-weight: 700;
    color: var(--bnk-text);
    background: var(--bnk-surface-3);
    padding: 1px 6px;
    font-size: 11px;
}
.tabla-mpago .mpago-monto {
    font-weight: 700;
    color: var(--bnk-primary);
}
.tabla-mpago tfoot td {
    background: var(--bnk-surface-2) !important;
    border-top: 2px solid var(--bnk-primary);
    border-bottom: none;
    padding: 6px 8px;
}
.tabla-mpago .mpago-tot-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--bnk-primary);
}
.tabla-mpago .mpago-tot {
    font-family: var(--bnk-mono);
    font-weight: 700;
    font-size: 14px;
    color: var(--bnk-primary);
}
.mpago-nota {
    padding: 4px 10px;
    font-size: 10px;
    color: var(--bnk-text-soft);
    background: var(--bnk-warn-bg);
    border-top: 1px solid var(--bnk-warn-tx);
    display: flex;
    align-items: center;
    gap: 4px;
}
.mpago-nota i { color: var(--bnk-warn-tx); font-size: 11px; }

/* Resumen */
.resumen-wrap {
    display: flex;
    justify-content: flex-end;
}
.resumen-card {
    background: var(--bnk-surface);
    border: 1.5px solid var(--bnk-primary);
    overflow: hidden;
    min-width: 320px;
    max-width: 420px;
}
.resumen-header {
    background: var(--bnk-primary);
    color: #fff;
    padding: 4px 10px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 1.5px solid var(--bnk-primary-2);
    display: flex; align-items: center; gap: 6px;
}
.resumen-body { padding: 4px 10px; display: flex; flex-direction: column; gap: 0; }
.res-fila {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 0;
    border-bottom: 1px dashed var(--bnk-surface-3);
    font-size: 12px;
}
.res-fila:last-child { border-bottom: none; }
.res-fila .res-lbl {
    font-size: 11px; font-weight: 600; color: var(--bnk-text);
}
.res-fila .res-val {
    font-family: var(--bnk-mono); font-weight: 600; color: var(--bnk-text-2);
    font-size: 12px; font-variant-numeric: tabular-nums;
}
.res-fila.res-total {
    margin-top: 4px;
    padding: 6px 0;
    border-top: 2px solid var(--bnk-primary);
    border-bottom: none;
}
.res-fila.res-total .res-lbl { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--bnk-primary); }
.res-fila.res-total .res-val { font-size: 16px; font-weight: 700; color: var(--bnk-primary); }

/* Footer */
.ficha-totales {
    background: var(--bnk-surface);
    padding: 4px 10px;
    border-top: 1px solid var(--bnk-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--bnk-text);
}
.leyenda-estados {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: var(--bnk-text);
}
.leyenda-estados strong { color: var(--bnk-primary); font-weight: 700; }

/* Scrollbars */
.ficha-contenido::-webkit-scrollbar { width: 8px; }
.ficha-contenido::-webkit-scrollbar-track { background: var(--bnk-surface-3); }
.ficha-contenido::-webkit-scrollbar-thumb { background: var(--bnk-border-2); }
.ficha-contenido::-webkit-scrollbar-thumb:hover { background: var(--bnk-border-3); }

/* ===== Print (Paged.js simple: imprimir la factura) ===== */
@media print {
    html, body { background: #fff !important; height: auto; overflow: visible; }
    .ficha-titulo, .ficha-upload, .ficha-totales { display: none !important; }
    .ficha-principal {
        position: static !important;
        border: none !important;
        box-shadow: none !important;
        display: block !important;
    }
    .ficha-contenido {
        overflow: visible !important;
        padding: 0 !important;
    }
    .tabla-lineas tbody tr { page-break-inside: avoid; }
    .factura-encabezado, .parte-card, .lineas-card, .resumen-card { box-shadow: none !important; }
}

/* ============================================================
   DARK MODE (toggle vía body.dark-mode + preload html.dark-preload)
   ============================================================ */
html.dark-preload, html.dark-preload body { background: #0b1220 !important; }

body.dark-mode {
    --bnk-bg: #0b1220;
    --bnk-surface: #111827;
    --bnk-surface-2: #1f2937;
    --bnk-surface-3: #273344;
    --bnk-border: #334155;
    --bnk-border-2: #475569;
    --bnk-border-3: #64748b;
    --bnk-text: #e5e7eb;
    --bnk-text-2: #cbd5e1;
    --bnk-text-muted: #cbd5e1;
    --bnk-text-soft: #94a3b8;
    --bnk-primary: #3b82f6;
    --bnk-primary-2: #2563eb;
    --bnk-primary-3: #1e3a8a;
    --bnk-accent: #60a5fa;
    --bnk-accent-2: #3b82f6;
    --bnk-ok-bg: #064e3b;   --bnk-ok-tx: #4ade80;
    --bnk-err-bg: #450a0a;  --bnk-err-tx: #f87171;
    --bnk-warn-bg: #422006; --bnk-warn-tx: #fbbf24;
    --bnk-neu-bg: #1f2937;  --bnk-neu-tx: #cbd5e1;
    --bnk-info-bg: #1e3a8a; --bnk-info-tx: #93c5fd;
    --bnk-focus: 0 0 0 3px rgba(59,130,246,.35);
    --bnk-shadow-1: 0 1px 2px rgba(0,0,0,.45);
    --bnk-shadow-2: 0 1px 3px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35);
}

/* Zebra + hover de tablas en dark */
body.dark-mode .tabla-lineas tbody tr,
body.dark-mode .tabla-refs tbody tr,
body.dark-mode .tabla-mpago tbody tr { background: var(--bnk-surface); color: var(--bnk-text); }
body.dark-mode .tabla-lineas tbody tr:nth-child(even),
body.dark-mode .tabla-refs tbody tr:nth-child(even),
body.dark-mode .tabla-mpago tbody tr:nth-child(even) { background: var(--bnk-surface-2); }
body.dark-mode .tabla-lineas tbody tr:hover,
body.dark-mode .tabla-refs tbody tr:hover,
body.dark-mode .tabla-mpago tbody tr:hover { background: #1e3a8a; color: #e5e7eb; }

/* Fila exonerada en dark */
body.dark-mode .tabla-lineas tr.fila-exonerada { background: #064e3b; }
body.dark-mode .tabla-lineas tr.fila-exonerada:nth-child(even) { background: #065f46; }

/* Cards en dark */
body.dark-mode .factura-encabezado,
body.dark-mode .parte-card,
body.dark-mode .lineas-card,
body.dark-mode .resumen-card { background: var(--bnk-surface); color: var(--bnk-text); }

/* Ejemplos con texto rojo hardcodeado en alerta-error */
body.dark-mode .alerta-error p { color: #fecaca; }

/* Textarea en dark: fondo propio, no hereda var */
body.dark-mode .paste-area textarea { background: var(--bnk-surface-2); color: var(--bnk-text); }

/* Tema switcher */
.btn-theme { background: rgba(255,255,255,0.10); }
.btn-theme:hover { background: rgba(255,255,255,0.22); }
body.dark-mode .btn-theme { background: rgba(96,165,250,0.18); }
body.dark-mode .btn-theme:hover { background: rgba(96,165,250,0.32); }