/* Hoja COMPARTIDA de las pantallas de proceso y consulta (raíz `.pr`).

   Nació con Kardex: era la tercera pantalla de este tipo y la política de estructura.md pedía subir los estilos
   compuestos (.card, .kpis, .chip, .tbl, .btn…) a una hoja común en lugar de copiarlos otra vez.

   Pantallas que la usan: FrmKardex, FrmImportarSri y FrmFactElectProcesar (las dos últimas migradas después, con una
   comparación de estilos calculados antes/después en el navegador: lo propio de cada una quedó en su .razor.css).
   Una pantalla nueva de este tipo pone `class="pr <su-raíz>"` y solo escribe lo que la distingue.

   Usa solo los tokens de app.css. Lo propio de cada pantalla va en su .razor.css, con su propia raíz. */

.pr {
    --ok-weak: rgba(46, 125, 80, .12);
    --info-weak: rgba(31, 111, 168, .12);
    --mute-weak: rgba(120, 120, 130, .12);
    font-size: 13px;
    padding: 12px;
    min-width: 0;
}

[data-theme="dark"] .pr {
    --ok-weak: rgba(95, 191, 135, .15);
    --info-weak: rgba(100, 174, 224, .15);
    --mute-weak: rgba(160, 160, 170, .16);
}

.pr .mono { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; }
.pr .num { font-variant-numeric: tabular-nums; }
.pr .spacer { flex: 1; }
.pr .nowrap { white-space: nowrap; }
.pr .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Cabecera ---- */
.pr .dochead {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px; flex-wrap: wrap;
    background: var(--surface-1); border: 1px solid var(--border);
    border-radius: var(--radius-container); margin-bottom: 12px;
}
.pr .dochead > svg { color: var(--accent); flex: none; }
.pr .dochead__txt { flex: 1; min-width: 200px; }
.pr .dochead .ttl { font-size: 15px; font-weight: 500; display: block; }
.pr .dochead .sub { font-size: 11.5px; color: var(--text-2); margin-top: 2px; display: block; }

/* ---- Segmentado (cambio de vista) ---- */
.pr .seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; background: var(--surface-1); }
.pr .seg__b {
    font: inherit; font-size: 12px; padding: 6px 13px; border: 0; background: transparent; color: var(--text-2); cursor: pointer;
}
.pr .seg__b + .seg__b { border-left: 1px solid var(--border-strong); }
.pr .seg__b:hover { color: var(--text-1); }
.pr .seg__b[aria-pressed]:not([aria-pressed="false"]) { background: var(--accent-weak); color: var(--accent); font-weight: 500; }
.pr .seg__b:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pr .seg--sm .seg__b { font-size: 11.5px; padding: 4px 10px; }

/* ---- Cifras ---- */
.pr .kpis {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
    background: var(--border); border: 1px solid var(--border);
    border-radius: var(--radius-container); overflow: hidden; margin-bottom: 12px;
}
.pr .kpi { grid-column: auto; background: var(--surface-1); padding: 12px 14px; text-align: left; border: 0; font: inherit; color: inherit; display: block; }
.pr .kpi .l { font-size: 10.5px; color: var(--text-2); margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.pr .kpi .v { font-family: 'JetBrains Mono', monospace; font-size: 21px; font-weight: 500; display: block; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pr .kpi .s { font-size: 10.5px; color: var(--text-3); margin: 4px 0 0; display: block; }
/* Cifras que filtran (Importar SRI, Reprocesar): se pueden pulsar y la elegida queda marcada. El Kardex no las usa. */
.pr .kpis--filtro .kpi { cursor: pointer; }
.pr .kpis--filtro .kpi:hover { background: var(--surface-2); }
.pr .kpis--filtro .kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pr .kpis--filtro .kpi.on { background: var(--accent-weak); box-shadow: inset 0 -2px 0 var(--accent); }

.pr .kpi--warn .v { color: var(--warn); }
.pr .kpi--err .v { color: var(--error); }
.pr .kpi--info .v { color: var(--info); }
.pr .kpi--ok .v { color: var(--success); }

@media (max-width: 900px) { .pr .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Tarjetas ---- */
.pr .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-container); margin-bottom: 12px; overflow: hidden; }
.pr .card__head { display: flex; align-items: center; gap: 9px; padding: 9px 12px 9px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pr .card__head > svg { color: var(--text-2); flex: none; }
.pr .card__head .ttl { font-size: 12.5px; font-weight: 500; }
.pr .head__nota { font-size: 11.5px; color: var(--text-2); }
.pr .card__body { padding: 16px; }

.pr .main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.pr .main--detalle { grid-template-columns: minmax(0, 1fr) 372px; }
.pr .main .card { margin-bottom: 0; }
@media (max-width: 1180px) { .pr .main--detalle { grid-template-columns: minmax(0, 1fr); } }

/* ---- Chips ---- */
.pr .chip {
    font-family: inherit; font-size: 11.5px; padding: 4px 11px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: var(--surface-1); color: var(--text-2);
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.pr .chip:hover { color: var(--text-1); }
.pr .chip[aria-pressed]:not([aria-pressed="false"]) { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }
.pr .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pr .chip b { font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 10.5px; color: var(--text-3); }
.pr .sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }

/* ---- Barra de filtros y búsqueda ---- */
.pr .filters {
    display: flex; align-items: center; gap: 7px; padding: 10px 14px;
    background: var(--surface-2); border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.pr .srch {
    display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-control); padding: 5px 10px; background: var(--surface-1); min-width: 210px;
}
.pr .srch > svg { color: var(--text-3); }
.pr .srch input { border: 0; outline: 0; background: transparent; flex: 1; font-family: inherit; font-size: 11.5px; color: var(--text-1); min-width: 0; }

/* ---- Progreso de un proceso largo ---- */
.pr .progreso {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px; flex-wrap: wrap;
    background: var(--accent-weak); border-bottom: 1px solid var(--border); font-size: 12px;
}
.pr .progreso__txt { color: var(--text-1); }
.pr .barra { flex: 1; min-width: 120px; height: 5px; border-radius: 3px; background: var(--surface-1); overflow: hidden; }
.pr .barra__r { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .pr .barra__r { transition: none; } }

/* ---- Pie de una lista ---- */
.pr .foot {
    display: flex; align-items: center; gap: 10px; padding: 11px 16px;
    background: var(--surface-2); border-top: 1px solid var(--border); flex-wrap: wrap; font-size: 12px; color: var(--text-2);
}
.pr .foot b { color: var(--text-1); font-weight: 500; }

/* ---- Tabla ---- */
.pr .tblwrap { overflow: auto; max-height: min(64vh, 700px); }
.pr .tbl { width: 100%; border-collapse: collapse; }
.pr .tbl th {
    text-align: left; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-2); font-weight: 400; padding: 8px 10px; background: var(--surface-1);
    border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2;
}
.pr .tbl td { padding: 7px 10px; font-size: 12px; color: var(--text-1); border-top: 1px solid var(--border); vertical-align: middle; }
.pr .tbl tbody tr { cursor: pointer; }
.pr .tbl tbody tr:hover { background: var(--surface-2); }
.pr .tbl tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pr .tbl .r { text-align: right; }
.pr .prov { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr .ruc { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-2); margin-top: 2px; }
.pr .tbl tbody tr.tr--sel { background: var(--accent-weak); }

/* ---- Insignias ---- */
.pr .badge { font-size: 10.5px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-2); display: inline-block; max-width: 100%; }
.pr .badge--ok { background: var(--ok-weak); color: var(--success); }
.pr .badge--warn { background: var(--warn-weak); color: var(--warn); }
.pr .badge--err { background: var(--error-weak); color: var(--error); }
.pr .badge--info { background: var(--info-weak); color: var(--info); }
.pr .badge--ac { background: var(--accent-weak); color: var(--accent); }
.pr .badge--mute { background: var(--mute-weak); color: var(--text-2); }

/* ---- Vacíos y avisos ---- */
.pr .vacio { padding: 44px 24px; text-align: center; color: var(--text-3); }
.pr .vacio h4 { font-size: 14px; font-weight: 500; margin: 12px 0 4px; color: var(--text-1); }
.pr .vacio p { font-size: 12px; color: var(--text-2); margin: 0 0 10px; }

.pr .result { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-container); font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
.pr .result > svg { flex: none; margin-top: 1px; }
.pr .result--warn { background: var(--warn-weak); color: var(--warn); }
.pr .result--err { background: var(--error-weak); color: var(--error); }
.pr .result--ok { background: var(--ok-weak); color: var(--success); }
.pr .result strong { color: inherit; font-weight: 500; }
.pr .progline { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2); }
.pr .note { font-size: 11.5px; color: var(--text-2); line-height: 1.55; margin: 12px 0 0; max-width: 100ch; }
.pr .note strong { color: var(--text-1); font-weight: 500; }

.pr .spin {
    width: 12px; height: 12px; border: 1.5px solid currentColor; border-top-color: transparent;
    border-radius: 50%; display: inline-block; animation: pr-sp .7s linear infinite; flex: none;
}
@keyframes pr-sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pr .spin { animation-duration: 2s; } }

/* ---- Detalle ---- */
.pr .detalle { position: sticky; top: 8px; }
.pr .detalle__cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 150px); overflow: auto; }
.pr .datos { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 7px 10px; margin: 0; font-size: 12px; }
.pr .datos dt { color: var(--text-2); }
.pr .datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pr .datos dd small { display: block; font-size: 10.5px; color: var(--text-2); margin-top: 1px; }
.pr .acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Botones ---- */
.pr .btn {
    font-family: inherit; font-size: 12.5px; padding: 8px 13px; border-radius: var(--radius-control);
    border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.pr .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr .btn--primary { background: var(--action-bg); color: var(--action-fg); }
.pr .btn--secondary { background: var(--surface-1); border-color: var(--border-strong); color: var(--text-2); }
.pr .btn--secondary:hover { color: var(--text-1); }
.pr .btn--ghost { background: transparent; color: var(--accent); padding: 6px 9px; font-size: 12px; }
.pr .btn--sm { font-size: 11.5px; padding: 5px 10px; }
.pr .btn--icono { padding: 5px; color: var(--text-2); }
.pr .btn--icono:hover { color: var(--text-1); background: var(--surface-2); }
.pr .btn[disabled] { opacity: .4; pointer-events: none; }