/* Estilos base de MonitorExternos — los tokens viven en tokens.css (Praxiom, Graphite & Brass). */

body {
    font-family: var(--font-sans, 'Inter', system-ui);
    margin: 0;
    background: var(--surface-secondary, #FAFAF7);
    color: var(--text-primary, #1A1F2E);
}

.mono { font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.serif { font-family: var(--font-serif, 'Newsreader', serif); }

/* Icono SVG inline (componente Ico) — sustituye a la icon-font Material Symbols (en LAN
   sin Google Fonts el ligature se veia como texto). En contenedores flex se alinea solo;
   en contextos inline el vertical-align lo baja a la linea base del texto. */
.ico { flex: none; vertical-align: -0.18em; }

/* --- Shell (nav rail + main) --- */

.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; padding: var(--main-canvas-padding, 20px 56px 48px); }

.nav-rail {
    width: var(--sidebar-width-expanded, 176px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
    background: var(--sidebar-bg, #FAFAF7);
    border-right: 1px solid var(--sidebar-border, #E8E5DD);
    box-sizing: border-box;
}
.nav-brand { font-size: 17px; color: var(--text-heading); margin: 0 6px 16px; }
.nav-link {
    display: block;
    padding: 8px 10px;
    border-radius: var(--radius-md, 8px);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
}
.nav-link:hover { background: var(--nav-item-active-bg, #fff); color: var(--text-primary); }
.nav-spacer { flex: 1; }
.nav-user { font-size: 13px; color: var(--text-muted); padding: 0 10px 6px; }
.nav-logout {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}
.nav-logout:hover { background: var(--nav-item-active-bg, #fff); color: var(--text-primary); }

/* --- Login --- */

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { background: #fff; border: 0.5px solid rgba(0,0,0,.12); border-radius: 14px; padding: 32px; width: 320px; display: flex; flex-direction: column; gap: 8px; }
.login-card input { height: 38px; border: 0.5px solid rgba(0,0,0,.2); border-radius: 8px; padding: 0 10px; }
.login-card button { height: 40px; border: none; border-radius: 8px; background: #26215C; color: #fff; cursor: pointer; margin-top: 8px; }
.login-logo { font-size: 22px; } .login-sub { color: #888; font-size: 12px; margin: 0 0 8px; }
.login-error { background: #FCEBEB; color: #791F1F; padding: 8px 10px; border-radius: 8px; font-size: 13px; }

/* --- ContratoPicker (port del AsuntoPicker de Praxiom) --- */

.cp-wrap { position: relative; min-width: 220px; }
.cp-input {
    width: 100%;
    box-sizing: border-box;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-primary, #fff);
    color: var(--text-primary);
    font-size: 13px;
}
.cp-input:focus { border-color: var(--color-brass-600, #B08D57); }
.cp-input::placeholder { color: var(--text-muted, #8B92A1); }
.cp-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 100%;
    width: max-content;
    max-width: 460px;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--surface-elevated, #fff);
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-md);
}
.cp-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm, 6px);
    font-size: 13px;
    cursor: pointer;
}
.cp-item.sel { background: var(--color-graphite-100, #F2F0EA); }
.cp-item mark { background: var(--color-brass-300, #EFDFC4); color: inherit; border-radius: 2px; padding: 0 1px; }
.cp-cliente { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.cp-asunto {
    flex: 1;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 60px;
}
.cp-id { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.cp-empty { padding: 8px 10px; font-size: 13px; color: var(--text-muted); }

/* --- Pantalla de carga (/cargar) --- */

.page-title { font-size: 28px; margin: 0 0 20px; }

.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 32px 24px;
    border: 2px dashed var(--border-subtle, #DDDFE3);
    border-radius: var(--radius-lg, 10px);
    background: var(--surface-primary, #fff);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.dropzone:hover { border-color: var(--color-brass-600, #B08D57); }
.dropzone input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.dz-texto { font-size: 14px; color: var(--text-primary); }
.dz-hint { font-size: 12px; color: var(--text-muted); }

.aviso-error, .aviso-warn, .aviso-ok, .aviso-info {
    margin: 12px 0;
    padding: 9px 12px;
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
}
.aviso-error { background: #FCEBEB; color: var(--color-error, #9B2D2D); }
.aviso-warn  { background: #FBF3E0; color: var(--color-warning, #B8741B); }
.aviso-ok    { background: #E9F4EF; color: var(--color-success, #2E7D5B); }
.aviso-info  { background: var(--color-graphite-100, #F2F0EA); color: var(--text-secondary); }

/* --- Revisión de carga --- */

.rev-card {
    margin-top: 20px;
    padding: 20px 24px;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--shadow-sm);
}
.rev-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.rev-despacho { font-size: 20px; color: var(--text-heading); }
.rev-id { margin-left: 10px; font-size: 12px; color: var(--text-muted); }
.rev-archivo { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.rev-tot { font-size: 24px; color: var(--text-heading); white-space: nowrap; letter-spacing: var(--serif-display-tracking, -0.02em); }

/* ── Lista de partidas de la revision — tarjeta-zona por renglon (patron Praxiom):
   renglon superior compacto (incluir + fecha + clave, importe al margen), descripcion a lo
   ancho, campos de trabajo etiquetados abajo. Sustituye a la tabla de 7 columnas. ── */
.pr-list { margin-top: 14px; }
.pr { padding: 14px 2px 16px; border-top: 1px solid var(--color-graphite-100, #F2F0EA); }
.pr-list .pr:first-child { border-top: none; padding-top: 6px; }
.pr.excluida > *:not(.pr-top) { opacity: .45; pointer-events: none; }
/* En filas manuales los inputs de fecha/clave viven en .pr-top: tambien se bloquean
   (solo el checkbox de re-incluir queda activo). */
.pr.excluida .pr-top > *:not(.pr-check) { opacity: .45; pointer-events: none; }

.pr-top { display: flex; align-items: center; gap: 10px; }
.pr-check { width: 15px; height: 15px; accent-color: var(--color-brass-600, #B08D57); cursor: pointer; flex: none; }
.pr-fecha { font-size: 10px; color: var(--text-secondary, #5A6072); white-space: nowrap; }
.pr-clave {
    font-size: 9.5px;
    padding: 1px 7px;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-graphite-100, #F2F0EA);
    color: var(--text-secondary, #5A6072);
    white-space: nowrap;
}
.pr-spacer { flex: 1; }
.pr-amt {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-graphite-900, #14171F);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pr-desc { margin-top: 8px; }
.pr-desc .rev-desc-input { min-height: 52px; font-size: 12.5px; color: var(--text-primary); }

.pr-fields { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.pr-field { min-width: 0; }
.pr-field-abogado { flex: 1 1 240px; max-width: 320px; border-radius: var(--radius-sm, 6px); }
.pr-field-abogado.falta .abg-select { background: #FBF3E0; border-color: var(--color-warning, #B8741B); }
.pr-field-num { flex: none; }
.pr-lbl {
    display: block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted, #8B92A1);
    margin-bottom: 3px;
}
.pr-ro {
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
    font-size: 12px;
    text-align: right;
    color: var(--text-secondary, #5A6072);
    background: var(--color-graphite-100, #F2F0EA);
    border-radius: var(--radius-sm, 6px);
    width: 64px;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
}
/* Boton Traducir integrado a la fila de campos (no gasta un renglon propio); cuando
   esta presente, el toma el margen automatico y Gasto queda a su derecha. */
.pr-traducir { margin-left: auto; display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
.pr-gasto-toggle { margin-left: auto; padding-bottom: 7px; }
.pr-traducir ~ .pr-gasto-toggle { margin-left: 0; }
.pr .rev-gasto-campos { margin-top: 10px; }
.pr .fld-ledes { margin: 10px 0 0; }

.abg-select {
    width: 100%;
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-primary, #fff);
    color: var(--text-primary);
    font-size: 12px;
}
.rev-desc textarea, .rev-desc-input {
    width: 100%;
    min-height: 38px;
    padding: 4px 8px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-primary, #fff);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    resize: vertical;
}
.rev-num {
    width: 80px;
    height: 30px;
    padding: 0 8px;
    text-align: right;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
}

/* Captura de gasto (regla legacy tipo B): toggle compacto + dos selects que
   solo aparecen cuando la partida está marcada como gasto. */
.rev-gasto { margin-top: 6px; }
.rev-gasto-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.rev-gasto-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    padding: 6px;
    border-radius: var(--radius-sm, 6px);
}
.rev-gasto-campos.falta { background: #FBF3E0; box-shadow: inset 0 0 0 1px var(--color-warning, #B8741B); }
.rev-gasto-sel {
    flex: 1 1 140px;
    min-width: 140px;
    max-width: 220px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-primary, #fff);
    color: var(--text-primary);
    font-size: 12px;
}

/* ── LEDES (sección azul por partida) — portado de Praxiom NuevoTiempoModal.razor.css
   .fld-ledes; colores derivados de tokens (--color-info, --color-info-soft). Va en una fila propia bajo el renglón. ── */
.rev-ledes-row > td { padding-top: 0; }
.fld-ledes {
    border: 1px solid var(--color-info, #2C5F8D);
    border-radius: var(--radius-sm, 8px);
    padding: 8px 12px;
    margin: 2px 0 8px;
    background: var(--color-info-soft, #DCE8F5);
}
.fld-ledes.falta {
    border-color: var(--color-warning, #B8741B);
    background: #FBF3E0;
}
.fld-ledes .ledes-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.fld-ledes .ledes-ico { font-size: 16px; color: var(--color-info); }
.fld-ledes .ledes-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-info);
}
.fld-ledes .ledes-req {
    font-size: 11px;
    color: var(--color-error, #9B2D2D);
    margin-left: auto;
}
.fld-ledes .ledes-selects {
    display: flex;
    gap: 12px;
}
.fld-ledes .ledes-field { flex: 1; }
.fld-ledes .fld-label-sm {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary, #4A5468);
    margin-bottom: 2px;
    display: block;
}
.fld-ledes .ledes-select {
    width: 100%;
    max-width: none;
    height: 36px;
    font-size: 13px;
}

.btn-import {
    margin-top: 16px;
    padding: 10px 22px;
    border: none;
    border-radius: var(--radius-md, 8px);
    background: var(--color-graphite-800, #1A1F2E);
    color: var(--text-on-dark, #fff);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.btn-import:hover:not(:disabled) { background: var(--color-graphite-700, #2A3142); }
.btn-import:disabled { opacity: .45; cursor: not-allowed; }

/* Botón "Traducir" — compartido entre PartidaRow (por fila) y RevisionCarga (Traducir todas).
   Solo las clases de contenedor (.rev-traducir, .rev-traducir-todas) quedan scoped en sus
   respectivos .razor.css. */
.btn-traducir {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-primary, #fff);
    color: var(--color-brass-700, #7A5F37);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-traducir:hover:not(:disabled) {
    background: var(--color-graphite-100, #F2F0EA);
    border-color: var(--color-brass-500, #B89455);
}
.btn-traducir:disabled { opacity: .55; cursor: not-allowed; }

/* Traducción propuesta (ES→EN) pendiente de revisar: el textarea resalta en brass y
   abajo va la barra con el original + Aceptar / Original. Compartido con PartidaRow. */
.rev-desc-input.propuesta {
    border-color: var(--color-brass-600, #B08D57);
    background: #FBF7EE;
}
.trad-propuesta {
    margin-top: 4px;
    border: 1px solid var(--color-brass-300, #EFDFC4);
    border-radius: var(--radius-sm, 6px);
    background: #FBF7EE;
    padding: 5px 8px;
    font-size: 12px;
}
.trad-propuesta-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.trad-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .03em;
    color: var(--color-brass-700, #7A5F37);
    text-transform: uppercase;
}
.trad-hint { color: var(--text-muted, #8A8FA3); font-size: 11px; }
.trad-aceptar, .trad-restaurar {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 6px);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.trad-aceptar {
    margin-left: auto;
    border: 1px solid var(--color-brass-600, #B08D57);
    background: var(--color-brass-700, #7A5F37);
    color: var(--text-on-dark, #fff);
}
.trad-aceptar:hover { background: var(--color-brass-600, #B08D57); }
.trad-restaurar {
    border: 1px solid var(--border-default, #E8E5DD);
    background: var(--surface-primary, #fff);
    color: var(--text-secondary, #4A5468);
}
.trad-restaurar:hover { border-color: var(--color-brass-600, #B08D57); background: var(--color-graphite-100, #F2F0EA); }
.trad-original {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--color-brass-300, #EFDFC4);
    color: var(--text-muted, #8A8FA3);
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Recibo en contabilidad (notas/avisos de cargo) — panel por carga, estilo hermano
   del .fld-ledes pero en brass (es dinero del despacho, no un requisito del cliente). ── */
.rev-recibo {
    border: 1px solid var(--color-brass-600, #B08D57);
    border-radius: var(--radius-sm, 8px);
    padding: 10px 14px;
    margin: 10px 0;
    background: #FBF7EE;
}
.rev-recibo.falta {
    border-color: var(--color-warning, #B8741B);
    background: #FBF3E0;
}
.rev-recibo .recibo-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.rev-recibo .recibo-ico { display: inline-flex; color: var(--color-brass-700, #7A5F37); }
.rev-recibo .recibo-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-brass-700, #7A5F37);
}
.rev-recibo .recibo-resumen { font-size: 14px; color: var(--text-heading); }
.rev-recibo .recibo-req {
    margin-left: auto;
    font-size: 11px;
    color: var(--color-error, #9B2D2D);
}
.rev-recibo .recibo-aviso-conta {
    font-size: 12px;
    color: var(--color-warning, #B8741B);
    margin-bottom: 6px;
}
.rev-recibo .recibo-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.rev-recibo .recibo-field { flex: 1 1 200px; min-width: 200px; }
.rev-recibo .recibo-field-cliente { flex: 2 1 280px; }
.rev-recibo .recibo-inp {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-primary, #fff);
    color: var(--text-primary);
    font-size: 13px;
}
.rev-tipocargo { font-weight: 600; }
.rev-recibo .recibo-concepto-preview {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-brass-300, #EFDFC4);
}
.rev-recibo .concepto-linea { display: flex; gap: 6px; font-size: 12.5px; margin-top: 2px; }
.rev-recibo .concepto-tipo { font-weight: 600; color: var(--color-brass-700, #7A5F37); flex: none; }
.rev-recibo .concepto-texto { color: var(--text-secondary); }

/* Switch de moneda de la carga (ADR-006) — junto al total del hero de revision */
.rev-tot-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rev-moneda { display: inline-flex; gap: 4px; }
.moneda-chip {
    padding: 3px 12px;
    border: 1px solid var(--border-default, #E6E2D8);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-primary, #fff);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.moneda-chip:hover { border-color: var(--color-brass-600, #B08D57); }
.moneda-chip.on {
    background: var(--color-graphite-800, #211E18);
    border-color: var(--color-graphite-800, #211E18);
    color: var(--text-on-dark, #fff);
}

/* --- Captura manual (formato no reconocido / PDF escaneado) --- */

.manual-card {
    margin-top: 14px;
    padding: 16px 20px;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-default, #E8E5DD);
    border-left: 3px solid var(--color-brass-600, #B08D57);
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--shadow-sm);
}
.manual-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-heading);
}
.manual-title .manual-ico { display: inline-flex; color: var(--color-brass-700, #7A5F37); }
.manual-desc { margin: 6px 0 10px; font-size: 13px; color: var(--text-secondary); }
.manual-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.manual-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.manual-sel, .manual-inp {
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-primary, #fff);
    color: var(--text-primary);
    font-size: 13px;
    min-width: 240px;
}
.manual-go { margin-top: 0; }

/* Vista del documento escaneado dentro de la revisión (captura manual) */
.rev-doc {
    margin: 10px 0;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-secondary, #FAFAF7);
}
.rev-doc > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.rev-doc > summary .rev-doc-ico { display: inline-flex; color: var(--color-brass-700, #7A5F37); }
.rev-doc-paginas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 12px;
    max-height: 540px;
    overflow-y: auto;
}
.rev-doc-paginas img {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    border: 1px solid var(--border-subtle, #DDDFE3);
    border-radius: var(--radius-sm, 6px);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

/* Agregar partida (manual) + inputs de filas manuales */
.btn-agregar-partida {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 5px 12px;
    border: 1px dashed var(--color-brass-600, #B08D57);
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--color-brass-700, #7A5F37);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-agregar-partida:hover { background: var(--color-graphite-100, #F2F0EA); }
.rev-fecha-inp {
    width: 118px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-primary, #fff);
    color: var(--text-primary);
    font-size: 12px;
}
.rev-clave-inp {
    width: 100%;
    max-width: 110px;
    height: 26px;
    padding: 0 6px;
    margin-bottom: 2px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-primary, #fff);
    color: var(--text-primary);
    font-size: 12px;
}

/* --- Monitor (página principal) --- */

.monitor { display: flex; flex-direction: column; }

.kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 18px;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--shadow-sm);
}
.kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.kpi-val {
    font-size: 26px;
    color: var(--text-heading);
    letter-spacing: var(--serif-display-tracking, -0.02em);
}

/* --- CargaDrawer (panel lateral, port del dw-* de Praxiom) --- */

.dw-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(20, 23, 31, .34);
    animation: dw-fade var(--dur-3, 240ms) var(--ease-out-quint, cubic-bezier(.23, 1, .32, 1)) both;
}
.dw-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: 560px;
    max-width: 96vw;
    display: flex;
    flex-direction: column;
    background: var(--surface-elevated, #fff);
    box-shadow: var(--shadow-lg, 0 16px 40px rgba(20, 23, 31, .14));
    animation: dw-slide var(--dur-4, 320ms) var(--ease-out-quint, cubic-bezier(.23, 1, .32, 1)) both;
}
@keyframes dw-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes dw-slide { from { transform: translateX(102%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .dw-scrim { animation: none; }
    .dw-panel { animation: dw-fade var(--dur-3, 240ms) var(--ease-standard, ease) both; }
}

.dw-head {
    position: relative;
    flex-shrink: 0;
    padding: 18px 20px 14px;
    background: var(--surface-primary, #fff);
    border-bottom: 1px solid var(--border-default, #E8E5DD);
}
.dw-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-graphite-100, #F2F0EA);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.dw-close:hover { background: var(--color-graphite-200, #E8E5DD); color: var(--text-primary); }
.dw-bread {
    padding-right: 36px; /* no chocar con la x */
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.dw-bread .mono { text-transform: none; }
.dw-hero {
    margin-top: 6px;
    font-size: 30px;
    line-height: 1.1;
    color: var(--text-heading);
    letter-spacing: var(--serif-display-tracking, -0.02em);
}
.dw-etapa {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 10px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-graphite-100, #F2F0EA);
    border: 1px solid var(--border-default, #E8E5DD);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Cuerpo en papel calido con tarjetas blancas (patron DrillDownDrawer de Praxiom):
   el fondo tenue agrupa; cada seccion respira dentro de su tarjeta. */
.dw-body { flex: 1; overflow-y: auto; padding: 2px 16px 24px; background: var(--surface-secondary, #FAFAF7); }
.dw-body h3 {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 18px 2px 7px;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #8B92A1);
}
.dw-count {
    padding: 0 7px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-graphite-200, #E8E5DD);
    color: var(--text-secondary, #5A6072);
    font-size: 10px;
    line-height: 16px;
}
.dw-loading { padding: 12px 2px; font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted); }

.dw-card {
    background: var(--surface-primary, #fff);
    border: 1px solid var(--color-graphite-100, #F2F0EA);
    border-radius: var(--radius-lg, 10px);
    padding: 2px 12px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(20,23,31,.04));
}
.dw-card-pad { padding: 12px; }

/* Fila de partida: descripcion arriba + metadata mono abajo, importe a la derecha
   (patron MovimientoRow de Praxiom). */
.pt-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 2px;
    border-bottom: 1px solid var(--color-graphite-100, #F2F0EA);
    transition: background var(--transition-fast, 120ms ease);
}
.pt-row:last-child { border-bottom: none; }
.pt-body { min-width: 0; }
.pt-desc {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-graphite-800, #1A1F2E);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-meta {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 9.5px;
    color: var(--text-muted, #8B92A1);
}
.pt-mov { color: var(--text-secondary, #5A6072); }
.pt-amt {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-graphite-900, #14171F);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Badge de moneda diminuto (bd-* de Praxiom): brass suave para MXN, graphite para USD. */
.bd {
    font-family: var(--font-mono, monospace);
    font-size: 8px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: var(--radius-sm, 4px);
    letter-spacing: .03em;
}
.bd-mxn { color: var(--color-brass-700, #7A5F37); background: var(--color-brass-300, #EFDFC4); }
.bd-usd { color: var(--color-graphite-600, #5A6072); background: var(--color-graphite-100, #F2F0EA); }

/* --- Eliminar carga / rollback (drawer, accion sutil) --- */

.dw-foot {
    flex-shrink: 0;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border-default, #E8E5DD);
    background: var(--surface-primary, #fff);
}
/* Boton discreto: sin relleno, texto tenue; solo se tine de rojo al pasar el mouse. */
.dw-del {
    border: 0;
    background: none;
    padding: 4px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
}
.dw-del:hover:not(:disabled) { color: var(--color-error, #9B2D2D); }
.dw-del:disabled { opacity: .5; cursor: default; }

.dw-del-confirm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-error, #9B2D2D);
    border-radius: var(--radius-lg, 10px);
    background: var(--color-error-soft, #F7EAEA);
}
.dw-del-msg { font-size: 12.5px; line-height: 1.4; color: var(--text-primary); }
.dw-del-acts { display: flex; gap: 8px; justify-content: flex-end; }
.dw-del-cancel {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-primary, #fff);
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.dw-del-go {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--color-error, #9B2D2D);
    border-radius: var(--radius-md, 8px);
    background: var(--color-error, #9B2D2D);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.dw-del-go:disabled, .dw-del-cancel:disabled { opacity: .6; cursor: default; }
.dw-del-error {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-md, 8px);
    background: var(--color-error-soft, #F7EAEA);
    color: var(--color-error, #9B2D2D);
    font-size: 12.5px;
    line-height: 1.4;
}

/* --- Factura del externo (drawer) --- */

.factura-asociada {
    padding: 12px 14px;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-lg, 10px);
    font-size: 13px;
    color: var(--text-primary);
    overflow-wrap: anywhere; /* el UUID es largo */
}
.pago-ok { margin-top: 6px; font-size: 13px; color: var(--color-success, #2E7D5B); }
.pago-pend { margin-top: 6px; font-size: 13px; color: var(--color-warning, #B8741B); }

.factura-asociar > button {
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-primary, #fff);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.factura-asociar > button:hover { border-color: var(--color-brass-600, #B08D57); }

.cfdi-list { margin: 10px 0 0; padding: 0; list-style: none; }
.cfdi-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    font-size: 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--color-graphite-100, #F2F0EA);
}
.cfdi-list li:last-child { border-bottom: none; }
.cfdi-list .serif { font-size: 14px; color: var(--text-heading); margin-left: auto; white-space: nowrap; }
.cfdi-pagado {
    padding: 1px 8px;
    border-radius: var(--radius-pill, 999px);
    background: #E9F4EF;
    color: var(--color-success, #2E7D5B);
    font-size: 11px;
    font-weight: 600;
}
.cfdi-list li button {
    height: 26px;
    padding: 0 12px;
    border: none;
    border-radius: var(--radius-md, 8px);
    background: var(--color-graphite-800, #1A1F2E);
    color: var(--text-on-dark, #fff);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.cfdi-list li button:hover { background: var(--color-graphite-700, #2A3142); }
.cfdi-empty { margin-top: 10px; font-size: 13px; color: var(--text-muted); }

/* --- Drawer: En SABE (movimientos) + En contabilidad (recibos) — edicion post-import --- */

.dw-body .fld-label-sm { display: block; font-size: 11px; font-weight: 500; color: var(--text-secondary, #4A5468); margin-bottom: 2px; }

/* Movimiento SABE — patron MovimientoRow de Praxiom: grid cuerpo | importe | accion,
   dos lineas (descripcion sans + metadata mono 9.5px), hairline entre filas, hover suave. */
.mv-row { border-bottom: 1px solid var(--color-graphite-100, #F2F0EA); }
.mv-row:last-child { border-bottom: none; }
.mv-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 9px 2px;
    transition: background var(--transition-fast, 120ms ease);
}
.mv-row:not(.on) .mv-grid:hover { background: var(--surface-secondary, #FAFAF7); }
.mv-body { min-width: 0; }
.mv-desc {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-graphite-800, #1A1F2E);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mv-meta {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 9.5px;
    color: var(--text-muted, #8B92A1);
}
.mv-sep { color: var(--color-graphite-300, #DDDFE3); }
.mv-id { color: var(--text-secondary, #5A6072); }
.mv-tag {
    font-size: 8px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: var(--radius-sm, 4px);
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--color-graphite-100, #F2F0EA);
    color: var(--color-graphite-600, #5A6072);
}
.mv-tag.b-hon    { background: var(--color-graphite-800, #211E18); color: var(--text-on-dark, #fff); }
.mv-tag.b-gasto  { background: var(--color-brass-300, #EFDFC4); color: var(--color-brass-700, #7A5F37); }
.mv-tag.b-recibo { background: #E7EEF6; color: var(--color-info, #2C5F8D); }
.mv-amt-wrap { text-align: right; }
.mv-amt {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-graphite-900, #14171F);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mv-act { width: 26px; display: flex; justify-content: flex-end; }
.mv-lock {
    font-family: var(--font-mono, monospace);
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 1px 5px;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-graphite-100, #F2F0EA);
    color: var(--text-muted, #8B92A1);
    white-space: nowrap;
}
.mv-edit {
    border: 0;
    background: none;
    cursor: pointer;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 6px);
    color: var(--color-graphite-400, #B5BAC4);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.mv-edit:hover { color: var(--color-brass-700, #7A5F37); background: var(--color-graphite-100, #F2F0EA); }
.mv-desync {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 5px;
    border-radius: var(--radius-sm, 4px);
    background: #FBF3E0;
    color: var(--color-warning, #B8741B);
}
.mv-flag { color: var(--color-brass-700, #7A5F37); font-weight: 600; }

/* Form de edicion in-place: panel inset en papel calido dentro de la tarjeta blanca. */
.mv-form { margin: 2px 0 10px; padding: 10px 12px; background: var(--surface-secondary, #FAFAF7); border: 1px solid var(--color-graphite-100, #F2F0EA); border-radius: var(--radius-md, 8px); }
.mv-ta, .rc-ta { width: 100%; box-sizing: border-box; min-height: 44px; resize: vertical; font-family: inherit; line-height: 1.4; padding-top: 6px; }
.mv-form-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mv-form-grid > div { flex: 1 1 120px; min-width: 110px; }
.mv-num { width: 110px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.mv-err, .rc-err { margin-top: 8px; padding: 7px 10px; border-radius: var(--radius-sm, 6px); background: var(--color-error-soft, #F7EAEA); color: var(--color-error, #9B2D2D); font-size: 12px; line-height: 1.4; }
.mv-acts, .rc-form-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.mv-save, .rc-form-acts .btn-import { margin-top: 0; padding: 7px 16px; font-size: 13px; }

/* Recibo en contabilidad: tarjeta blanca con acento brass a la izquierda (dinero del
   despacho); folio+status en microtipo, total hero en serif a la derecha (dw-cli Praxiom). */
.rc-card {
    margin: 0 0 8px;
    padding: 11px 14px 10px;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--color-graphite-100, #F2F0EA);
    border-left: 3px solid var(--color-brass-600, #B08D57);
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(20,23,31,.04));
}
.rc-card.desync { border-color: var(--color-warning, #B8741B); border-left-color: var(--color-warning, #B8741B); }
.rc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rc-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.rc-tipo {
    font-family: var(--font-mono, monospace);
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 5px;
    border-radius: var(--radius-sm, 4px);
}
.rc-tipo.nota  { background: var(--color-brass-300, #EFDFC4); color: var(--color-brass-700, #7A5F37); }
.rc-tipo.aviso { background: #E7EEF6; color: var(--color-info, #2C5F8D); }
.rc-folio { font-size: 11px; font-weight: 600; color: var(--color-graphite-800, #1A1F2E); }
.rc-status {
    font-family: var(--font-mono, monospace);
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 5px;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-graphite-100, #F2F0EA);
    color: var(--text-secondary);
}
.rc-status.s-P { background: #E9F4EF; color: var(--color-success, #2E7D5B); }
.rc-status.s-C { background: var(--color-error-soft, #F7EAEA); color: var(--color-error, #9B2D2D); }
.rc-poliza { font-size: 9.5px; color: var(--color-brass-700, #7A5F37); }
.rc-hero { display: flex; align-items: baseline; gap: 5px; flex-shrink: 0; }
.rc-total {
    font-size: 19px;
    color: var(--color-graphite-900, #14171F);
    letter-spacing: var(--serif-display-tracking, -0.02em);
    white-space: nowrap;
}
.rc-meta {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 9.5px;
    color: var(--text-muted, #8B92A1);
}
.rc-cob { color: var(--color-warning, #B8741B); font-weight: 600; }
.rc-desync { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 7px 10px; border-radius: var(--radius-sm, 6px); background: #FBF3E0; color: var(--color-warning, #B8741B); font-size: 12px; }
.rc-resync { margin-left: auto; padding: 3px 12px; border: 1px solid var(--color-warning, #B8741B); border-radius: var(--radius-sm, 6px); background: var(--surface-primary, #fff); color: var(--color-warning, #B8741B); font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); }
.rc-resync:hover:not(:disabled) { background: var(--color-warning, #B8741B); color: #fff; }
.rc-concepto { margin-top: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.rc-renglones { margin: 6px 0 0; padding: 0; list-style: none; }
.rc-renglones li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--color-graphite-100, #F2F0EA); font-size: 11.5px; }
.rc-r-desc { flex: 1; min-width: 0; color: var(--text-secondary); }
.rc-r-imp { flex: none; font-size: 11px; font-weight: 600; color: var(--color-graphite-900, #14171F); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-acts { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-graphite-100, #F2F0EA); }
.rc-lock {
    font-family: var(--font-mono, monospace);
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 1px 5px;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-graphite-100, #F2F0EA);
    color: var(--text-muted, #8B92A1);
}
.rc-editar {
    margin-left: auto;
    padding: 4px 12px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-primary, #fff);
    color: var(--color-brass-700, #7A5F37);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.rc-editar + .rc-editar { margin-left: 0; }
.rc-editar:hover { background: var(--color-graphite-100, #F2F0EA); border-color: var(--color-brass-500, #B89455); }
.rc-form { margin-top: 10px; padding: 10px 12px; background: var(--surface-secondary, #FAFAF7); border: 1px solid var(--color-graphite-100, #F2F0EA); border-radius: var(--radius-md, 8px); }
.rc-form .fld-label-sm { margin-top: 8px; }
.rc-form .fld-label-sm:first-child { margin-top: 0; }
.rc-reng-edit { display: flex; gap: 8px; margin-bottom: 6px; }
.rc-reng-desc { flex: 1; }
.rc-total-edit { margin-top: 6px; font-size: 13px; color: var(--text-secondary); }
.rc-total-edit b { color: var(--text-heading); }
.rc-sync-prev { margin-left: 8px; color: var(--color-brass-700, #7A5F37); font-size: 12px; }

/* --- Catálogos (/catalogos) --- */

.cat-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading, #1F2430);
    margin: 24px 0 12px;
}
.cat-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-subtle, #DDDFE3);
    border-radius: var(--radius-lg, 10px);
    overflow: hidden;
    font-size: 13px;
}
.cat-table thead th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #6B7280);
    background: var(--color-graphite-100, #F2F0EA);
    border-bottom: 1px solid var(--border-subtle, #DDDFE3);
}
.cat-table tbody td {
    padding: 11px 14px;
    color: var(--text-primary, #2A3142);
    border-bottom: 1px solid var(--border-subtle, #DDDFE3);
}
.cat-table tbody tr:last-child td { border-bottom: none; }
.cat-table tbody tr:hover { background: var(--color-graphite-100, #F2F0EA); }
.cat-table .mono { font-size: 12px; color: var(--text-secondary, #4B5263); }

/* --- FiltroBar (Monitor) --- */

.filtro-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 12px;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--shadow-sm);
}
.fb-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 220px;
    min-width: 180px;
    height: 32px;
    padding: 0 10px;
    background: var(--surface-secondary, #FAFAF7);
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-md, 8px);
}
.fb-search:focus-within { border-color: var(--color-brass-600, #B08D57); }
.fb-search svg { color: var(--text-muted); flex-shrink: 0; }
.fb-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
}
.fb-search input:focus-visible { box-shadow: none; }
.fb-search input::placeholder { color: var(--text-muted, #8B92A1); }
.filtro-bar select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-primary, #fff);
    color: var(--text-primary);
    font-size: 13px;
}
.fb-chips { display: flex; gap: 6px; }
.chip {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-primary, #fff);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.chip:hover { border-color: var(--color-graphite-400, #B5BAC4); }
.chip.on {
    background: var(--color-graphite-800, #1A1F2E);
    border-color: var(--color-graphite-800, #1A1F2E);
    color: var(--text-on-dark, #fff);
}
.fb-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.fb-clear {
    height: 28px;
    padding: 0 10px;
    border: none;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--color-brass-700, #7A5F37);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.fb-clear:hover { background: var(--color-brass-300, #EFDFC4); }

/* --- Kanban (Monitor) --- */

.kanban {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    margin-top: 16px;
}
.kanban-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: var(--color-graphite-100, #F2F0EA);
    border-radius: var(--radius-lg, 10px);
    min-height: 120px;
}
.kanban-col-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.kanban-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c, var(--color-graphite-500));
    flex-shrink: 0;
}
.kanban-count {
    margin-left: auto;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-default, #E8E5DD);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}
.kanban-empty {
    padding: 14px 0 10px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.kcard {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    text-align: left;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-default, #E8E5DD);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font: inherit;
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.kcard:hover {
    border-color: var(--color-brass-600, #B08D57);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.kcard-cli {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kcard-meta {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
}
.kcard-foot {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 8px;
}
.kcard-foot .serif {
    font-size: 15px;
    color: var(--text-heading);
    letter-spacing: var(--serif-display-tracking, -0.02em);
    margin-right: auto;
}
.kcard-badge {
    padding: 1px 7px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-graphite-100, #F2F0EA);
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    color: var(--text-secondary);
    white-space: nowrap;
}
.kcard-badge.factura {
    background: var(--color-brass-300, #EFDFC4);
    color: var(--color-brass-700, #7A5F37);
    font-family: var(--font-sans);
}

/* --- Defaults de Blazor (plantilla) --- */

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}