@import '_content/LionBytes.UI/LionBytes.UI.yucv3by808.bundle.scp.css';
@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-1py2qwk703],
.components-reconnect-repeated-attempt-visible[b-1py2qwk703],
.components-reconnect-failed-visible[b-1py2qwk703],
.components-pause-visible[b-1py2qwk703],
.components-resume-failed-visible[b-1py2qwk703],
.components-rejoining-animation[b-1py2qwk703] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-1py2qwk703],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-1py2qwk703],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-1py2qwk703],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-1py2qwk703],
#components-reconnect-modal.components-reconnect-retrying[b-1py2qwk703],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-1py2qwk703],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-1py2qwk703],
#components-reconnect-modal.components-reconnect-failed[b-1py2qwk703],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-1py2qwk703] {
    display: block;
}


#components-reconnect-modal[b-1py2qwk703] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-1py2qwk703 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-1py2qwk703 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-1py2qwk703 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-1py2qwk703]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-1py2qwk703 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-1py2qwk703 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-1py2qwk703 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-1py2qwk703 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-1py2qwk703] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-1py2qwk703] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-1py2qwk703] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-1py2qwk703] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-1py2qwk703] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-1py2qwk703] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-1py2qwk703] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-1py2qwk703 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-1py2qwk703] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-1py2qwk703 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Borradores/Agenda.razor.rz.scp.css */
/* Agenda del vendedor: la lista de hoy y la semana en siete columnas. */
.ag-row[b-q3gsoeawfm] { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.ag-row:last-child[b-q3gsoeawfm] { border-bottom: none; }
.ag-ic[b-q3gsoeawfm] { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--draft-bg); color: var(--draft); }
.ag-ic[b-q3gsoeawfm]  svg { width: 16px; height: 16px; }
.ag-row.venc .ag-ic[b-q3gsoeawfm] { background: var(--bad-bg); color: var(--bad); }
.ag-row.venc .muted[b-q3gsoeawfm] { color: var(--bad); font-weight: 600; }
.ag-t[b-q3gsoeawfm] { flex: 1; min-width: 0; }

.ag-week[b-q3gsoeawfm] { display: grid; grid-template-columns: repeat(7, minmax(96px, 1fr)); gap: 8px; overflow-x: auto; }
.ag-day[b-q3gsoeawfm] { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 230px; }
.ag-day.hoy[b-q3gsoeawfm] { border-color: var(--draft); box-shadow: 0 0 0 3px var(--draft-bg); }
.ag-dh[b-q3gsoeawfm] { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 8px; }
.ag-dh b[b-q3gsoeawfm] { font-size: 15px; color: var(--ink); margin-left: 3px; }
.ag-chip[b-q3gsoeawfm] { font-size: 11px; line-height: 1.3; padding: 5px 7px; border-radius: 7px; margin-bottom: 5px;
           background: var(--draft-bg); color: var(--ink); border-left: 3px solid var(--draft);
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.ag-chip span[b-q3gsoeawfm] { font-weight: 700; color: var(--draft); }
.ag-chip.prueba[b-q3gsoeawfm] { border-left-color: var(--ok); } .ag-chip.prueba span[b-q3gsoeawfm] { color: var(--ok); }
.ag-chip.entrega[b-q3gsoeawfm] { border-left-color: var(--warn); } .ag-chip.entrega span[b-q3gsoeawfm] { color: var(--warn); }
.ag-chip.venc[b-q3gsoeawfm] { background: var(--bad-bg); border-left-color: var(--bad); } .ag-chip.venc span[b-q3gsoeawfm] { color: var(--bad); }
/* /Components/Pages/Borradores/CodigosFalla.razor.rz.scp.css */
/* Sistemas a la izquierda, sus códigos a la derecha. */
.cf-grid[b-7nbifggztw] { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .cf-grid[b-7nbifggztw] { grid-template-columns: 1fr; } }
.cf-sis[b-7nbifggztw] { display: flex; flex-direction: column; padding: 6px 10px 12px; }
.cf-sis button[b-7nbifggztw] { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-align: left; color: var(--ink-2); font-size: 13px; }
.cf-sis button:hover[b-7nbifggztw] { background: var(--card-2); }
.cf-sis button.on[b-7nbifggztw] { background: var(--draft-bg); color: var(--draft); font-weight: 600; }
.cf-sis .mono[b-7nbifggztw] { font-family: var(--font-mono); font-size: 11.5px; width: 34px; }
.cf-sis .n[b-7nbifggztw] { flex: 1; }
.cf-sis .c[b-7nbifggztw] { font-size: 11px; color: var(--ink-3); }
/* /Components/Pages/Borradores/Cotizaciones.razor.rz.scp.css */
/* Totales de la cotización, al pie del formulario. */
.cot-tot[b-rkn511db1j] { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.cot-tot div[b-rkn511db1j] { flex: 1 1 160px; background: var(--draft-bg); border-radius: 10px; padding: 10px 13px; }
.cot-tot span[b-rkn511db1j] { display: block; font-size: 11px; color: var(--ink-2); }
.cot-tot b[b-rkn511db1j] { font-family: var(--font-display); font-size: 19px; }
/* /Components/Pages/Borradores/EstadoCuenta.razor.rz.scp.css */
/* El distribuidor cuyo estado de cuenta está abierto arriba se marca en la cartera. */
.tbl tr.ec-sel td[b-us5l6q6kpa] { background: var(--draft-bg); }
/* /Components/Pages/Borradores/GarantiasCobertura.razor.rz.scp.css */
.cob-list[b-92ntsz9umb] { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); }
/* /Components/Pages/Borradores/GarantiasPanel.razor.rz.scp.css */
/* El recorrido de la reclamación: cinco pasos en fila, con quién actúa en cada uno. */
.gar-flujo[b-00x7um4m98] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .gar-flujo[b-00x7um4m98] { grid-template-columns: 1fr; } }
.gf[b-00x7um4m98] { border: 1px dashed var(--draft-line); background: var(--draft-bg); border-radius: 12px; padding: 12px 14px; }
.gf-t[b-00x7um4m98] { font-weight: 700; font-size: 13px; color: var(--draft); }
.gf-q[b-00x7um4m98] { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

/* Evidencia fotográfica: marcos vacíos, porque es un borrador. */
.gar-fotos[b-00x7um4m98] { display: flex; gap: 10px; flex-wrap: wrap; }
.gar-foto[b-00x7um4m98] { width: 108px; height: 80px; border-radius: 10px; border: 1.5px dashed var(--line); background: var(--card-2);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-3); font-size: 11px; }
.gar-foto[b-00x7um4m98]  svg, .gar-foto svg[b-00x7um4m98] { width: 20px; height: 20px; }
/* /Components/Pages/Borradores/ProspectosPanel.razor.rz.scp.css */
/* Tablero por etapas del distribuidor: siete columnas que se desplazan a lo ancho en pantallas chicas. */
.kanban[b-evyu9pej27] { display: grid; grid-template-columns: repeat(7, minmax(180px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kb-col[b-evyu9pej27] { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 320px; }
.kb-col.ganado[b-evyu9pej27] { background: var(--ok-bg); }
.kb-col.perdido[b-evyu9pej27] { background: var(--neutral-bg); opacity: .8; }
.kb-h[b-evyu9pej27] { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700;
        letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 2px 4px 10px; }
.kb-n[b-evyu9pej27] { background: var(--draft-bg); color: var(--draft); border-radius: 99px; padding: 1px 8px; font-size: 11px; }
.kb-card[b-evyu9pej27] { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--draft); border-radius: 10px;
           padding: 10px 11px; margin-bottom: 8px; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.kb-card:hover[b-evyu9pej27] { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.kb-card.tarde[b-evyu9pej27] { border-left-color: var(--warn); }
.kb-card.tarde .kb-d[b-evyu9pej27] { color: var(--warn); font-weight: 700; }
.kb-n1[b-evyu9pej27] { font-weight: 600; font-size: 13px; line-height: 1.3; }
.kb-m[b-evyu9pej27] { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.kb-f[b-evyu9pej27] { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--ink-2); margin-top: 8px; }
.kb-f span[b-evyu9pej27] { display: inline-flex; align-items: center; gap: 4px; }
.kb-f[b-evyu9pej27]  svg { width: 12px; height: 12px; }
.kb-hist[b-evyu9pej27] { display: flex; flex-direction: column; gap: 12px; }
.kb-hr[b-evyu9pej27] { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; }
.kb-hi[b-evyu9pej27] { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--draft-bg); color: var(--draft); }
.kb-hi[b-evyu9pej27]  svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .kb-card[b-evyu9pej27] { transition: none; } }
/* /Components/Pages/Borradores/RefaccionesPedidoPlanta.razor.rz.scp.css */
/* Flujo del pedido: seis estaciones en fila, la actual en azul de borrador. */
.pp-flow[b-wvnlu89vvz] { display: flex; gap: 0; margin-bottom: 18px; }
.pp-st[b-wvnlu89vvz] { flex: 1; position: relative; text-align: center; font-size: 11.5px; color: var(--ink-3); }
.pp-st[b-wvnlu89vvz]::before { content: ""; position: absolute; top: 8px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.pp-st:first-child[b-wvnlu89vvz]::before { display: none; }
.pp-st i[b-wvnlu89vvz] { position: relative; z-index: 1; display: block; width: 18px; height: 18px; margin: 0 auto 6px; border-radius: 50%;
    background: var(--card); border: 2px solid var(--line); }
.pp-st.done[b-wvnlu89vvz] { color: var(--ink-2); }
.pp-st.done i[b-wvnlu89vvz] { background: var(--ok); border-color: var(--ok); }
.pp-st.done[b-wvnlu89vvz]::before, .pp-st.cur[b-wvnlu89vvz]::before { background: var(--ok); }
.pp-st.cur[b-wvnlu89vvz] { color: var(--draft); font-weight: 700; }
.pp-st.cur i[b-wvnlu89vvz] { background: var(--draft); border-color: var(--draft); box-shadow: 0 0 0 4px var(--draft-bg); }

.pp-meta[b-wvnlu89vvz] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.pp-meta span[b-wvnlu89vvz] { display: block; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.pp-meta b[b-wvnlu89vvz] { font-size: 13px; }
@media (max-width: 900px) { .pp-meta[b-wvnlu89vvz] { grid-template-columns: 1fr 1fr; } .pp-st span[b-wvnlu89vvz] { display: none; } }
/* /Components/Pages/Borradores/ReportesDist.razor.rz.scp.css */
/* Tres cifras en línea encima de la gráfica de cada tarjeta. */
.rd-kpis[b-9n3cutbd0n] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.rd-kpis div[b-9n3cutbd0n] { background: var(--draft-bg); border-radius: 10px; padding: 8px 11px; }
.rd-kpis b[b-9n3cutbd0n] { display: block; font-family: var(--font-display); font-size: 17px; }
.rd-kpis span[b-9n3cutbd0n] { font-size: 11px; color: var(--ink-2); }
h3[b-9n3cutbd0n]  svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; color: var(--draft); }
/* /Components/Pages/Borradores/ReportesInventario.razor.rz.scp.css */
/* Barra apilada de antigüedad por distribuidor. */
.inv-bar[b-b6ixzuykm1] { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--neutral-bg); }
.inv-bar span[b-b6ixzuykm1] { display: block; height: 100%; }
/* /Components/Pages/Borradores/TrazabilidadVin.razor.rz.scp.css */
/* Encabezado de la unidad. */
.vin-head[b-pksxql7fvg] { display: flex; align-items: center; gap: 14px; }
.vin-ico[b-pksxql7fvg] { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
    background: var(--draft-bg); color: var(--draft); }
.vin-ico[b-pksxql7fvg]  svg { width: 22px; height: 22px; }
.vin-n[b-pksxql7fvg] { font-size: 17px; font-weight: 700; }
.vin-meta[b-pksxql7fvg] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid var(--line-2); }
.vin-meta span[b-pksxql7fvg] { display: block; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.vin-meta b[b-pksxql7fvg] { font-size: 13px; }
@media (max-width: 900px) { .vin-meta[b-pksxql7fvg] { grid-template-columns: 1fr 1fr; } }

/* Línea de tiempo vertical: un riel a la izquierda y un punto por evento. */
.vtl[b-pksxql7fvg] { position: relative; padding-left: 4px; }
.vtl[b-pksxql7fvg]::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.vtl-i[b-pksxql7fvg] { display: flex; gap: 14px; padding: 8px 0 14px; position: relative; }
.vtl-dot[b-pksxql7fvg] { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--card); border: 2px solid var(--draft); color: var(--draft); position: relative; z-index: 1; }
.vtl-dot[b-pksxql7fvg]  svg { width: 15px; height: 15px; }
.vtl-i.al .vtl-dot[b-pksxql7fvg] { border-color: var(--bad); color: var(--bad); }
.vtl-c[b-pksxql7fvg] { min-width: 0; flex: 1; }
.vtl-h[b-pksxql7fvg] { display: flex; justify-content: space-between; gap: 10px; }
.vtl-h b[b-pksxql7fvg] { font-size: 13.5px; }
.vtl-h span[b-pksxql7fvg] { font-size: 12px; flex: none; }

.vr[b-pksxql7fvg] { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.vr[b-pksxql7fvg]  svg { width: 15px; height: 15px; color: var(--draft); flex: none; margin-top: 2px; }

.al-h[b-pksxql7fvg] { color: var(--bad); display: flex; align-items: center; gap: 8px; }
.al-h[b-pksxql7fvg]  svg { width: 17px; height: 17px; }
/* /Components/Pages/Despacho/DespachoPanel.razor.rz.scp.css */
/* Acta de entrega al transportista. Pensada para TABLETA: una sola columna de bloques grandes, controles
   generosos y nada que dependa de apuntar con precisión — quien la usa está de pie junto a un camión. */

.lede .sep[b-636s17tnwz] { margin: 0 8px; opacity: .45; }
.lede .mono[b-636s17tnwz] { font-family: var(--font-mono); }
.lede .strong[b-636s17tnwz] { font-weight: 700; color: var(--ink); }

.dsp-sec[b-636s17tnwz] { margin-top: 14px; }
.dsp-h[b-636s17tnwz] {
    font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 8px;
}
.dsp-lede[b-636s17tnwz] { font-size: 12.4px; line-height: 1.5; margin: 0 0 14px; }
.dsp-vacio[b-636s17tnwz] { font-size: 12.6px; padding: 14px 0; }

.dsp-meta[b-636s17tnwz] {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    margin-top: 14px; padding-top: 12px; border-top: 1px dotted var(--line);
}
@media (max-width: 760px) { .dsp-meta[b-636s17tnwz] { grid-template-columns: 1fr; } }
.dsp-meta .ocl[b-636s17tnwz] { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }

/* Subir: la descripción manda, así que ocupa el renglón entero y los dos botones van debajo, grandes. */
.dsp-sube[b-636s17tnwz] { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.dsp-sube .f[b-636s17tnwz] { display: flex; flex-direction: column; gap: 5px; }
.dsp-sube .f label[b-636s17tnwz] { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.dsp-sube input[b-636s17tnwz] {
    width: 100%; font: inherit; font-size: 14px; padding: 11px 12px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}

/* El desplegable, igual de grande que los campos: se toca con el dedo. */
.dsp-sube select[b-636s17tnwz] {
    width: 100%; font: inherit; font-size: 14px; padding: 11px 12px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}
.dsp-nota[b-636s17tnwz] { font-size: 11.5px; margin-top: 5px; }

.dsp-btns[b-636s17tnwz] { display: flex; flex-wrap: wrap; gap: 10px; }
/* El <label> ES el botón: envuelve un InputFile oculto, que es la única forma de que «Tomar foto» abra la
   cámara y «Subir archivo» abra el explorador desde controles con el mismo aspecto. */
.dsp-lbl[b-636s17tnwz] { cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
           padding: 12px 18px; font-size: 14px; }

.dsp-ev[b-636s17tnwz] { display: flex; flex-direction: column; gap: 10px; }
.dsp-ev-i[b-636s17tnwz] {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--card);
}
.dsp-ev-th[b-636s17tnwz] {
    width: 76px; height: 76px; flex: 0 0 auto; border-radius: 9px; overflow: hidden;
    display: grid; place-items: center; background: var(--neutral-bg, #EFEDEA);
}
.dsp-ev-th img[b-636s17tnwz] { width: 100%; height: 100%; object-fit: cover; }
.dsp-ev-th.doc svg[b-636s17tnwz] { width: 26px; height: 26px; color: var(--ink-3); }
.dsp-ev-t[b-636s17tnwz] { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.dsp-ev-t .muted[b-636s17tnwz] { font-size: 11.5px; }

/* Las dos firmas, lado a lado como el calce del papel; en tableta vertical se apilan. */
.dsp-firmas[b-636s17tnwz] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .dsp-firmas[b-636s17tnwz] { grid-template-columns: 1fr; gap: 30px; } }

.dsp-firma[b-636s17tnwz] { display: flex; flex-direction: column; gap: 12px; }
.dsp-firma .frm[b-636s17tnwz] { display: flex; flex-direction: column; gap: 10px; }
.dsp-firma .f label[b-636s17tnwz] { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.dsp-firma input[b-636s17tnwz] {
    width: 100%; font: inherit; font-size: 14px; padding: 11px 12px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}
.dsp-firma input[readonly][b-636s17tnwz] { background: transparent; color: var(--ink-2); }

.dsp-guardar[b-636s17tnwz] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 14px; border-top: 1px dotted var(--line);
}
.dsp-guardar .muted[b-636s17tnwz] { font-size: 12px; }

.err-list[b-636s17tnwz] { margin: 6px 0 0; padding-left: 18px; font-size: 12.6px; line-height: 1.55; }
.msg > .res[b-636s17tnwz] { flex: 1 1 auto; min-width: 0; }
.res-t[b-636s17tnwz] { font-weight: 700; }
/* /Components/Pages/Home/Dashboard.razor.rz.scp.css */
/* Tablero corporativo — SÓLO el ranking, que es lo único que no comparte con el del distribuidor.
   `.kpis6` y `.soon` vivían aquí y se movieron a app.css: el CSS aislado de Blazor sólo marca el marcado
   que ESTE componente renderiza, así que el tablero del distribuidor pintaba su `.kpis6` sin la regla y las
   tarjetas se le apilaban a todo lo ancho. Una utilidad que usan dos pantallas no puede ser de una. */

/* Ranking de distribuidores: número de lugar, nombre, unidades y barra de avance contra su meta. */
.rank[b-o2cnnt7ufa] { display: flex; flex-direction: column; }

.rank .r[b-o2cnnt7ufa] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-2);
}
.rank .r:last-child[b-o2cnnt7ufa] { border-bottom: none; }

.rank .pos[b-o2cnnt7ufa] {
    width: 24px; height: 24px; flex: none;
    border-radius: 8px;
    display: grid; place-items: center;
    font-size: 11.5px; font-weight: 700;
    background: var(--neutral-bg); color: var(--ink-2);
}
/* Los tres primeros lugares se leen antes que el resto. */
.rank .r:nth-child(-n+3) .pos[b-o2cnnt7ufa] { background: var(--red-050); color: var(--red-600); }

.rank .who[b-o2cnnt7ufa] { min-width: 0; flex: 1; }
.rank .who .n[b-o2cnnt7ufa] {
    font-weight: 600; font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank .who .c[b-o2cnnt7ufa] { font-size: 11.5px; color: var(--ink-3); }

.rank .val[b-o2cnnt7ufa] { text-align: right; width: 116px; flex: none; }
.rank .val .q[b-o2cnnt7ufa] { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.rank .val .q .u[b-o2cnnt7ufa] { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-left: 3px; }

/* Avance contra la meta. Verde al cumplirla: el color es el que dice si el mes fue bueno, no el número. */
.rank .val .prog[b-o2cnnt7ufa] { margin-top: 5px; }
.rank .val .prog > span.ok[b-o2cnnt7ufa] { background: var(--ok); }

.rank .pct[b-o2cnnt7ufa] { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.rank .pct.ok[b-o2cnnt7ufa] { color: var(--ok); font-weight: 600; }

/* Tarjeta cuyo módulo todavía no existe: se ve, pero no finge tener un dato. */
.soon[b-o2cnnt7ufa] { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.soon .kval[b-o2cnnt7ufa] { color: var(--ink-3); }

/* ── La red por estado (vista de alcance) ── */
.mapa-tabs[b-o2cnnt7ufa] { margin-bottom: 14px; flex-wrap: wrap; }
.mapa-grid[b-o2cnnt7ufa] { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .mapa-grid[b-o2cnnt7ufa] { grid-template-columns: 1fr; } }

.mapa-panel[b-o2cnnt7ufa] { border-left: 1px solid var(--line); padding-left: 20px; min-height: 260px; }
@media (max-width: 1000px) { .mapa-panel[b-o2cnnt7ufa] { border-left: none; padding-left: 0; } }
.mapa-panel .mp-t[b-o2cnnt7ufa] { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--draft); }
.mapa-panel .mp-kpis[b-o2cnnt7ufa] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 16px; }
.mapa-panel .mp-kpis div[b-o2cnnt7ufa] { background: var(--draft-bg); border-radius: 10px; padding: 9px 11px; }
.mapa-panel .mp-kpis b[b-o2cnnt7ufa] { display: block; font-family: var(--font-display); font-size: 19px; }
.mapa-panel .mp-kpis span[b-o2cnnt7ufa] { font-size: 11px; color: var(--ink-2); }
.mapa-panel .mp-l[b-o2cnnt7ufa] { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.mapa-panel .mp-r[b-o2cnnt7ufa] { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.mapa-panel .mp-r i[b-o2cnnt7ufa] { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.mapa-panel .mp-r em[b-o2cnnt7ufa] { margin-left: auto; font-style: normal; color: var(--ink-3); font-size: 11px; }
.mapa-panel .mp-op[b-o2cnnt7ufa] { margin-top: 14px; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--draft); }
.mapa-panel .mp-op[b-o2cnnt7ufa]  svg, .mapa-panel .mp-op svg[b-o2cnnt7ufa] { width: 16px; height: 16px; }

/* ── Filtros del tablero ── */
.tb-filtros[b-o2cnnt7ufa] { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; padding: 12px 16px; position: relative; }
.tb-f-grupo[b-o2cnnt7ufa] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tb-f-l[b-o2cnnt7ufa] { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tb-f-a[b-o2cnnt7ufa] { color: var(--ink-3); }
.tb-seg[b-o2cnnt7ufa] { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; padding: 3px; background: var(--card); gap: 2px; }
.tb-seg button[b-o2cnnt7ufa] {
    border: 0; background: transparent; color: var(--ink-2); font: 600 12.5px var(--font); padding: 6px 12px;
    border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.tb-seg button small[b-o2cnnt7ufa] { font-weight: 500; opacity: .75; }
.tb-seg button[b-o2cnnt7ufa]  svg, .tb-seg button svg[b-o2cnnt7ufa] { width: 15px; height: 15px; }
.tb-seg button:hover[b-o2cnnt7ufa] { color: var(--ink); background: var(--neutral-bg); }
.tb-seg button.on[b-o2cnnt7ufa] { background: var(--ink); color: var(--card); }
.tb-nav[b-o2cnnt7ufa] { display: inline-flex; align-items: center; gap: 6px; }
.tb-nav b[b-o2cnnt7ufa] { min-width: 150px; text-align: center; font-size: 13.5px; }
.tb-nav button[b-o2cnnt7ufa] {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--card);
    color: var(--ink-2); font-size: 17px; line-height: 1; cursor: pointer;
}
.tb-nav button:disabled[b-o2cnnt7ufa] { opacity: .35; cursor: default; }
.tb-hoy[b-o2cnnt7ufa] { border: 0; background: none; color: var(--red-600); font: 600 12.5px var(--font); cursor: pointer; }
.tb-sel[b-o2cnnt7ufa], .tb-fecha[b-o2cnnt7ufa] {
    height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink);
    font: 13px var(--font); padding: 0 10px; min-width: 150px;
}
.tb-sel[b-o2cnnt7ufa] { min-width: 260px; max-width: 360px; }
.tb-cargando[b-o2cnnt7ufa] { margin-left: auto; }
.tb-cargando .spin[b-o2cnnt7ufa] { width: 18px; height: 18px; }
.kval-sm[b-o2cnnt7ufa] { font-size: 22px !important; }
.rank .r.yo[b-o2cnnt7ufa] { background: var(--red-050); border-radius: 10px; padding-left: 8px; padding-right: 8px; }

/* ── Mapa: barra de vista, CRM y embudo ── */
.mapa-barra[b-o2cnnt7ufa] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mapa-nota[b-o2cnnt7ufa] { font-size: 12px; color: var(--draft); font-weight: 600; }
.mapa-tabs .tab b[b-o2cnnt7ufa] { margin-left: 6px; font-weight: 700; opacity: .7; }
.dot[b-o2cnnt7ufa] { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.mapa-panel .mp-kpis .ancho[b-o2cnnt7ufa] { grid-column: span 2; }

.embudo[b-o2cnnt7ufa] { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.em-r[b-o2cnnt7ufa] { display: grid; grid-template-columns: 96px 1fr 44px 38px; align-items: center; gap: 8px; font-size: 12.3px; }
.em-l[b-o2cnnt7ufa] { color: var(--ink-2); }
.em-b[b-o2cnnt7ufa] { height: 10px; border-radius: 99px; background: var(--neutral-bg); overflow: hidden; }
.em-b i[b-o2cnnt7ufa] { display: block; height: 100%; border-radius: 99px; }
.em-r b[b-o2cnnt7ufa] { text-align: right; font-variant-numeric: tabular-nums; }
.em-r em[b-o2cnnt7ufa] { font-style: normal; color: var(--ink-3); font-size: 11px; text-align: right; }
.em-ef[b-o2cnnt7ufa] { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: var(--draft-bg); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.em-ef span[b-o2cnnt7ufa] { font-size: 11.5px; color: var(--ink-2); }
.em-ef b[b-o2cnnt7ufa] { font-family: var(--font-display); font-size: 22px; color: var(--draft); }

.embudo-edo[b-o2cnnt7ufa] { margin-top: 22px; }
.ee-h[b-o2cnnt7ufa] { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ee-h h4[b-o2cnnt7ufa] { margin: 0; font-size: 15px; }
.ee-tbl tbody tr[b-o2cnnt7ufa] { cursor: pointer; }
.ee-tbl tbody tr.sel td[b-o2cnnt7ufa] { background: var(--draft-bg); }
.ee-tbl tbody tr.tot td[b-o2cnnt7ufa] { font-weight: 700; border-bottom: 2px solid var(--line); }
.ee-tbl .num[b-o2cnnt7ufa] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ee-n[b-o2cnnt7ufa] { font-weight: 600; }
.ee-p[b-o2cnnt7ufa] { display: inline-block; min-width: 36px; margin-left: 6px; color: var(--ink-3); font-size: 11px; }
.ee-ef[b-o2cnnt7ufa] { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ee-bar[b-o2cnnt7ufa] { width: 70px; height: 7px; border-radius: 99px; background: var(--neutral-bg); overflow: hidden; }
.ee-bar i[b-o2cnnt7ufa] { display: block; height: 100%; background: var(--ok); }

.mapa-ley-etapas[b-o2cnnt7ufa] { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 11.5px; color: var(--ink-2); }
/* /Components/Pages/Menu/OrganizarMenu.razor.rz.scp.css */
.om-secs[b-rb42i7oqhv],.om-ops[b-rb42i7oqhv]{padding:18px 20px}
.om-grid[b-rb42i7oqhv]{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:20px;align-items:start}
@media (max-width:980px){.om-grid[b-rb42i7oqhv]{grid-template-columns:1fr}}
.om-secs[b-rb42i7oqhv]{position:sticky;top:84px}
@media (max-width:980px){.om-secs[b-rb42i7oqhv]{position:static}}
.om-h[b-rb42i7oqhv]{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink)}
.om-note[b-rb42i7oqhv]{font-size:12px;color:var(--ink-3);margin:4px 0 12px;line-height:1.45}
.om-top[b-rb42i7oqhv]{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}

.om-seg[b-rb42i7oqhv]{display:flex;align-items:center;gap:2px;background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:3px}
.om-seg-l[b-rb42i7oqhv]{font-size:11.5px;color:var(--ink-3);padding:0 8px 0 10px}
.om-seg button[b-rb42i7oqhv]{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);padding:6px 14px;border-radius:var(--radius-pill)}
.om-seg button.on[b-rb42i7oqhv]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

.om-list[b-rb42i7oqhv]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.om-row[b-rb42i7oqhv]{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);min-height:44px}
.om-row:hover[b-rb42i7oqhv]{border-color:var(--line-2)}
.om-row.draft[b-rb42i7oqhv]{border-style:dashed;border-color:var(--draft-line)}
.om-row.draft .om-ic[b-rb42i7oqhv]{color:var(--draft)}
.om-n[b-rb42i7oqhv]{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:700;
  background:var(--card-2);color:var(--ink-3);flex:none}
.om-ic[b-rb42i7oqhv]{display:grid;place-items:center;color:var(--ink-3);flex:none}
.om-ic[b-rb42i7oqhv]  svg{width:17px;height:17px}
.om-lbl[b-rb42i7oqhv]{flex:1;min-width:0;font-size:13.5px;color:var(--ink);font-weight:500}
.om-lbl small[b-rb42i7oqhv]{display:inline-block;margin-left:8px;font-size:10.5px;color:var(--ink-3);font-weight:500;
  padding:1px 7px;border-radius:var(--radius-pill);background:var(--card-2)}
.om-btns[b-rb42i7oqhv]{display:flex;gap:4px;flex:none}
.om-b[b-rb42i7oqhv]{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink-2);
  border:1px solid var(--line);background:var(--card)}
.om-b:hover:not(:disabled)[b-rb42i7oqhv]{color:var(--ink);border-color:var(--line-2);background:var(--card-2)}
.om-b:disabled[b-rb42i7oqhv]{opacity:.35;cursor:default}
.om-b[b-rb42i7oqhv]  svg{width:14px;height:14px}
.om-b.up[b-rb42i7oqhv]  svg{transform:rotate(-90deg)}
.om-b.dn[b-rb42i7oqhv]  svg{transform:rotate(90deg)}
.om-mv[b-rb42i7oqhv]{font-family:inherit;font-size:12px;color:var(--ink-2);background:var(--card-2);border:1px solid var(--line);
  border-radius:8px;padding:5px 8px;width:170px;flex:none}

.om-sec[b-rb42i7oqhv]{margin-top:16px}
.om-sec-h[b-rb42i7oqhv]{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:8px}
.om-cnt[b-rb42i7oqhv]{font-size:10px;letter-spacing:0;padding:1px 7px;border-radius:var(--radius-pill);background:var(--card-2)}
.om-empty[b-rb42i7oqhv]{font-size:12.5px;color:var(--ink-3);padding:12px;border:1px dashed var(--line);border-radius:10px}

.om-bar[b-rb42i7oqhv]{position:sticky;bottom:0;margin-top:20px;display:flex;align-items:center;justify-content:flex-end;gap:10px;
  flex-wrap:wrap;padding:12px 0;background:linear-gradient(to bottom,transparent,var(--page) 30%)}
.om-state[b-rb42i7oqhv]{margin-right:auto;font-size:12.5px;color:var(--ink-3)}
.om-state.dirty[b-rb42i7oqhv]{color:var(--warn)}
.om-msg[b-rb42i7oqhv]{margin:0}
@media (max-width:640px){.om-mv[b-rb42i7oqhv]{width:120px}.om-row[b-rb42i7oqhv]{flex-wrap:wrap}}
/* /Components/Pages/Pdi/PdiEntregaCapturaPanel.razor.rz.scp.css */
/* PDI de entrega — la captura. El cuerpo del formato lo pinta ChecklistCaptura (núcleo); aquí sólo vive la
   cabecera, que es lo que este formato tiene de propio: la fecha de entrega, las dos firmas y la leyenda. */

.lede .sep[b-228fn92r6c] { margin: 0 8px; opacity: .45; }
.lede .mono[b-228fn92r6c] { font-family: var(--font-mono); }
.lede .strong[b-228fn92r6c] { font-weight: 700; color: var(--ink); }

.pdi-cab[b-228fn92r6c] { position: relative; }
.pdi-cab .frm.cols[b-228fn92r6c] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .pdi-cab .frm.cols[b-228fn92r6c] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pdi-cab .frm.cols[b-228fn92r6c] { grid-template-columns: 1fr; } }

.pdi-est[b-228fn92r6c] {
    position: absolute; top: 14px; right: 16px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
}
.pdi-est.draft[b-228fn92r6c] { background: var(--neutral-bg, #EFEDEA); color: var(--ink-2); }
.pdi-est.ok[b-228fn92r6c]    { background: rgb(58 110 165 / .14); color: var(--info, #3A6EA5); }

.pdi-instr[b-228fn92r6c], .pdi-sello[b-228fn92r6c] { font-size: 12.2px; margin: 12px 0 0; }
.pdi-sello .sep[b-228fn92r6c] { margin: 0 7px; opacity: .5; }

/* La leyenda, siempre visible —también en una entrega cerrada—: quien la lee meses después no tiene por qué
   saber qué querían decir esas dos marcas. */
.pdi-leyenda[b-228fn92r6c] {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px dotted var(--line);
    font-size: 12.4px; color: var(--ink-2);
}
.pdi-leyenda span[b-228fn92r6c] { display: inline-flex; align-items: center; gap: 7px; }
.pdi-leyenda .lg[b-228fn92r6c] {
    width: 24px; height: 24px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: #FFF;
}
.pdi-leyenda .lg.ok[b-228fn92r6c] { background: var(--info, #3A6EA5); }
.pdi-leyenda .lg.no[b-228fn92r6c] { background: var(--red, #EF3340); }

.chip-no[b-228fn92r6c] {
    margin-left: 10px; padding: 2px 9px; border-radius: 999px;
    background: rgb(239 51 64 / .12); color: var(--red, #EF3340);
    font-size: 11px; font-weight: 700;
}

/* El texto que el cliente se lleva. Se lee como lo que es —un mensaje, no un campo— así que va en cursiva
   apagada y ocupando el ancho del formato. */
.pdi-gracias[b-228fn92r6c] {
    margin-top: 14px;
    font-size: 12.6px; line-height: 1.65; color: var(--ink-2); font-style: italic;
}

.err-list[b-228fn92r6c] { margin: 6px 0 0; padding-left: 18px; font-size: 12.6px; line-height: 1.55; }
.msg > .res[b-228fn92r6c] { flex: 1 1 auto; min-width: 0; }
.res-t[b-228fn92r6c] { font-weight: 700; }
/* /Components/Pages/Pdi/PdiEntregaPanel.razor.rz.scp.css */
/* PDI de entrega — la lista. El tablero de arriba es el resumen y el filtro a la vez: el número que interesa
   se lee y se pulsa en el mismo sitio, que es como la gente lo usa de todas formas. */

.pdi-kpis[b-y89svy9i2s] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 760px) {
    .pdi-kpis[b-y89svy9i2s] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kpi[b-y89svy9i2s] {
    border: 1px solid var(--line);
    border-radius: var(--radius, 14px);
    background: var(--card);
    padding: 14px 16px;
    text-align: left;
    font-family: inherit;
    color: var(--ink);
}

/* Las tres primeras filtran, así que son botones y se comportan como tales. */
button.kpi[b-y89svy9i2s] { cursor: pointer; }
button.kpi:hover[b-y89svy9i2s] { border-color: var(--ink-3); }
button.kpi.on[b-y89svy9i2s] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.kpi .kn[b-y89svy9i2s] { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kpi .kl[b-y89svy9i2s] {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); margin-top: 5px;
}

/* Con hallazgos sólo se colorea cuando hay algo que atender; en cero es un dato más. */
.kpi.warn[b-y89svy9i2s] { border-color: var(--red, #EF3340); }
.kpi.warn .kn[b-y89svy9i2s] { color: var(--red, #EF3340); }
.kpi.muted .kn[b-y89svy9i2s] { color: var(--ink-3); font-weight: 700; }

.cellhead[b-y89svy9i2s] { display: inline-flex; align-items: center; gap: 7px; }

.chip-no[b-y89svy9i2s] {
    margin-left: 8px; padding: 2px 9px; border-radius: 999px;
    background: rgb(239 51 64 / .12); color: var(--red, #EF3340);
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
/* /Components/Pages/Promociones/PromocionesPanel.razor.rz.scp.css */
/* Tarjeta del saldo de bonificaciones (返利) del distribuidor. */
.rebate[b-2bog2iy8hb] { border: 1.5px solid var(--info); }
.rebate .klabel[b-2bog2iy8hb] { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rb-v[b-2bog2iy8hb] { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--info); margin: 6px 0 2px; }
.rb-split[b-2bog2iy8hb] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.rb-split div[b-2bog2iy8hb] { background: var(--neutral-bg); border-radius: 10px; padding: 8px 11px; }
.rb-split span[b-2bog2iy8hb] { display: block; font-size: 11px; color: var(--ink-2); }
.rb-split b[b-2bog2iy8hb] { font-family: var(--font-display); font-size: 16px; }

/* Tarjeta de promoción. */
.promo.off[b-2bog2iy8hb] { opacity: .6; }
.pr-t[b-2bog2iy8hb] { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 8px 0 4px; }
.pr-d[b-2bog2iy8hb] { font-size: 12.5px; color: var(--ink-2); min-height: 56px; }
.pr-f[b-2bog2iy8hb] { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2);
    font-size: 12px; color: var(--ink-2); }
.pr-f span[b-2bog2iy8hb] { display: flex; align-items: center; gap: 7px; }
.pr-f[b-2bog2iy8hb]  svg { width: 14px; height: 14px; color: var(--info); flex: none; }

/* Reglas de la política. */
.pol[b-2bog2iy8hb] { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.pol:last-child[b-2bog2iy8hb] { border-bottom: none; }
.pol-i[b-2bog2iy8hb] { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center;
    background: var(--neutral-bg); color: var(--info); }
.pol-i[b-2bog2iy8hb]  svg { width: 16px; height: 16px; }
.pol b[b-2bog2iy8hb] { font-size: 13.5px; }

.promo.clic[b-2bog2iy8hb] { cursor: pointer; }
.promo.clic:hover[b-2bog2iy8hb] { box-shadow: 0 0 0 2px rgb(58 110 165 / .35), var(--shadow); }
.pr-tipo[b-2bog2iy8hb] { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--info); margin-bottom: 6px; }
.rg-r[b-2bog2iy8hb] { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.rg-r em[b-2bog2iy8hb] { font-style: normal; color: var(--ink-3); font-size: 12px; }
.rg-add[b-2bog2iy8hb] { display: flex; gap: 6px; margin-top: 10px; }
.rg-add input[b-2bog2iy8hb], .rg-sel[b-2bog2iy8hb] { height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: 13px var(--font); padding: 0 8px; }
.rg-add input[b-2bog2iy8hb] { flex: 1; }
.pa-mot[b-2bog2iy8hb] { font-size: 12px; color: var(--ink-2); max-width: 320px; }
tr.tot td[b-2bog2iy8hb] { font-weight: 700; border-top: 2px solid var(--line); }
.chips[b-2bog2iy8hb] { display: flex; flex-wrap: wrap; gap: 6px; }
.chip[b-2bog2iy8hb] { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; }
.chip input[b-2bog2iy8hb] { accent-color: var(--info); }
.chip.on[b-2bog2iy8hb] { border-color: var(--info); background: rgb(58 110 165 / .08); }
.chk[b-2bog2iy8hb] { display: flex; align-items: center; gap: 8px; font-weight: 600; }

.pa-res[b-2bog2iy8hb] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pa-res > div[b-2bog2iy8hb] { display: flex; flex-direction: column; }
.pa-res i[b-2bog2iy8hb] { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pa-res b[b-2bog2iy8hb] { font-size: 14px; }
.pa-res span[b-2bog2iy8hb] { font-size: 12px; color: var(--ink-2); }
/* /Components/Pages/Refacciones/PreReciboNuevo.razor.rz.scp.css */
.mono[b-91m6r1oopc] { font-family: var(--font-mono); }
.hint[b-91m6r1oopc] { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.pr-leido[b-91m6r1oopc] { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; }
.pr-leido-t[b-91m6r1oopc] { font-weight: 700; margin-bottom: 4px; word-break: break-all; }
.pr-leido-s[b-91m6r1oopc] { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.pr-leido-a[b-91m6r1oopc] { font-size: 12px; color: #8A6100; margin-top: 4px; }
/* /Components/Pages/Refacciones/PreReciboVista.razor.rz.scp.css */
/* Pre-recibo de China. Las reglas del mostrador (.rec, .rec-eco, .ent-kpis, .ent-ren…) son las mismas de
   RefaccionesEntradasPanel.razor.css, repetidas aquí porque el CSS con alcance de Blazor no cruza a un componente
   hijo. Si se cambia una, cambiar la otra. Lo propio del pre-recibo va al final. */

.sel-alm[b-hjqv9ywgzf] {
    height: 34px;
    min-width: 180px;
    max-width: 320px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
    font-family: inherit;
}

/* ── estado del documento ──────────────────────────────────────────────────────────────── */
.est[b-hjqv9ywgzf] {
    display: inline-block;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
    background: var(--neutral-bg, #EFEDEA); color: var(--ink-2);
    white-space: nowrap;
}

.est.borrador[b-hjqv9ywgzf]  { background: rgb(58 110 165 / .14); color: var(--info, #3A6EA5); }
.est.aplicada[b-hjqv9ywgzf]  { background: rgb(46 125 70 / .14);  color: var(--ok, #2E7D46); }
.est.cancelada[b-hjqv9ywgzf] { background: var(--neutral-bg, #EFEDEA); color: var(--ink-3); }

.ent-titulo[b-hjqv9ywgzf] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ent-titulo h1[b-hjqv9ywgzf] { margin: 0; }

.ent-tbl code.fuerte[b-hjqv9ywgzf] { font-family: var(--font-mono); font-size: 12.4px; font-weight: 700; color: var(--ink); }
.ent-tbl .acts[b-hjqv9ywgzf] { text-align: right; white-space: nowrap; }

.ent-kpis[b-hjqv9ywgzf] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 760px) {
    .ent-kpis[b-hjqv9ywgzf] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ent-kpis .kpi[b-hjqv9ywgzf] {
    border: 1px solid var(--line);
    border-radius: var(--radius, 14px);
    background: var(--card);
    padding: 14px 16px;
}

.ent-kpis .kn[b-hjqv9ywgzf] { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.ent-kpis .kl[b-hjqv9ywgzf] {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); margin-top: 5px;
}
.ent-kpis .kpi.muted .kn[b-hjqv9ywgzf] { font-size: 17px; font-weight: 700; color: var(--ink-2); padding-top: 5px; }

/* ── el mostrador de conteo ────────────────────────────────────────────────────────────── */
/* Marco de acento: en una pantalla llena de tarjetas iguales, esta es la única con la que se interactúa
   mientras se recibe, y tiene que encontrarse de reojo. */
/* El espacio que faltaba: la tarjeta del mostrador quedaba pegada a los indicadores de abajo. */
/* Y aquí se le dice al control del núcleo de qué color es "activo" en ESTA aplicación. El control usa
   --accent y no lo define; SHIDA no lo tenía, así que se estaba pintando del azul marino de Lion Bytes
   dentro de una pantalla de Shineray. Se mapea al azul informativo de la casa: rojo ya significa
   «algo está mal» en todos los formularios, y no es lo que un campo enfocado quiere decir. */
.rec[b-hjqv9ywgzf] {
    --accent: var(--info, #3A6EA5);
    border-color: var(--accent);
    margin-bottom: 14px;
}

.rec-fila[b-hjqv9ywgzf] { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.rec-esc[b-hjqv9ywgzf] { flex: 1 1 380px; min-width: 0; }
.rec-cant[b-hjqv9ywgzf] { flex: 0 0 auto; }

/* ── cuál de las dos casillas está activa ──────────────────────────────────────────────── */
/* Escribir el número de parte dentro de la cantidad no produce ningún error: sólo cuenta mal. Así que
   la casilla activa tiene que verse desde lejos, no adivinarse. Todo con :focus-within — el navegador ya
   sabe dónde está el cursor y no hace falta preguntárselo al servidor. */
.rec-esc > label[b-hjqv9ywgzf],
.rec-cant > label[b-hjqv9ywgzf] {
    display: flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 6px;
    transition: color .12s ease;
}

/* La tecla que alterna, escrita donde se necesita saberla. */
.rec-esc > label .k[b-hjqv9ywgzf],
.rec-cant > label .k[b-hjqv9ywgzf] {
    font-family: var(--font-mono);
    font-size: 9.5px; font-weight: 700; letter-spacing: 0;
    padding: 1px 5px; border-radius: 5px;
    border: 1px solid var(--line); color: var(--ink-3); background: var(--card);
}

.rec-esc:focus-within > label[b-hjqv9ywgzf],
.rec-cant:focus-within > label[b-hjqv9ywgzf] { color: var(--accent); }

.rec-esc:focus-within > label .k[b-hjqv9ywgzf],
.rec-cant:focus-within > label .k[b-hjqv9ywgzf] {
    border-color: var(--accent); color: #fff; background: var(--accent);
}

/* El aro grueso es la señal principal: se ve de reojo, sin leer nada. */
.rec-esc:focus-within[b-hjqv9ywgzf]  .esc-campo,
.rec-cant:focus-within .rec-cant-ctl[b-hjqv9ywgzf] {
    box-shadow: 0 0 0 4px rgb(58 110 165 / .28);
    border-radius: 12px;
}

/* Y la que NO está activa se apaga, para que el contraste sea evidente. */
.rec-esc:not(:focus-within)[b-hjqv9ywgzf]  .esc-campo { border-color: var(--line); }
.rec-cant:not(:focus-within) .rec-cant-ctl[b-hjqv9ywgzf] { opacity: .72; }

/* Botones grandes a los lados del número: en una tableta se ajusta con el pulgar, sin teclado. */
.rec-cant-ctl[b-hjqv9ywgzf] {
    display: flex; align-items: stretch; height: 54px;
    border-radius: 12px;
    transition: box-shadow .15s ease, opacity .12s ease;
}

.rec-cant-ctl button[b-hjqv9ywgzf] {
    width: 46px;
    border: 2px solid var(--line);
    background: var(--card);
    color: var(--ink);
    font-size: 22px; font-weight: 700; line-height: 1;
    cursor: pointer;
}
.rec-cant-ctl button:first-child[b-hjqv9ywgzf] { border-radius: 12px 0 0 12px; }
.rec-cant-ctl button:last-child[b-hjqv9ywgzf]  { border-radius: 0 12px 12px 0; }
.rec-cant-ctl button:hover[b-hjqv9ywgzf] { background: var(--neutral-bg, #EFEDEA); }

.rec-cant-ctl input[b-hjqv9ywgzf] {
    width: 76px;
    border: 2px solid var(--line);
    border-left: 0; border-right: 0;
    background: var(--card);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 22px; font-weight: 700;
    text-align: center;
}
.rec-cant-ctl input:focus[b-hjqv9ywgzf] { outline: none; }

/* Sin las flechitas nativas: ya hay − y + de tamaño de pulgar, y ocupaban justo donde uno hace clic
   para reescribir la cantidad. */
.rec-cant-ctl input[b-hjqv9ywgzf]::-webkit-outer-spin-button,
.rec-cant-ctl input[b-hjqv9ywgzf]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rec-cant-ctl input[b-hjqv9ywgzf] { -moz-appearance: textfield; appearance: textfield; }
.rec-cant:focus-within .rec-cant-ctl button[b-hjqv9ywgzf],
.rec-cant:focus-within .rec-cant-ctl input[b-hjqv9ywgzf] { border-color: var(--accent); }

/* ── el eco de la última lectura ───────────────────────────────────────────────────────── */
/* Tamaño de cartel a propósito. Es la mitad visual del bip: el sonido dice que pasó algo, esto dice qué,
   y tiene que leerse desde donde está parado quien recibe. */
.rec-eco[b-hjqv9ywgzf] {
    display: flex; align-items: center; gap: 16px;
    margin-top: 16px; padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
}

.rec-eco.ok[b-hjqv9ywgzf]    { background: rgb(46 125 70 / .10);  border-color: rgb(46 125 70 / .28); }
.rec-eco.aviso[b-hjqv9ywgzf] { background: rgb(214 158 46 / .12); border-color: rgb(214 158 46 / .34); }
.rec-eco.bad[b-hjqv9ywgzf]   { background: rgb(200 53 63 / .10);  border-color: rgb(200 53 63 / .30); }

.rec-eco-ic[b-hjqv9ywgzf] { flex: 0 0 auto; line-height: 0; }
.rec-eco-ic[b-hjqv9ywgzf]  svg { width: 30px; height: 30px; }
.rec-eco.ok    .rec-eco-ic[b-hjqv9ywgzf] { color: var(--ok, #2E7D46); }
.rec-eco.aviso .rec-eco-ic[b-hjqv9ywgzf] { color: #B8860B; }
.rec-eco.bad   .rec-eco-ic[b-hjqv9ywgzf] { color: var(--bad, #C8353F); }

.rec-eco-txt[b-hjqv9ywgzf] { flex: 1 1 auto; min-width: 0; }
.rec-eco-cod[b-hjqv9ywgzf] {
    font-family: var(--font-mono); font-size: 19px; font-weight: 700; letter-spacing: .01em;
    color: var(--ink);
    word-break: break-all;
}
.rec-eco-nom[b-hjqv9ywgzf] { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.rec-eco-nota[b-hjqv9ywgzf] { font-size: 12.4px; color: #B8860B; margin-top: 4px; font-weight: 600; }

.rec-eco-num[b-hjqv9ywgzf] { flex: 0 0 auto; text-align: right; }
.rec-eco-num b[b-hjqv9ywgzf] { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.rec-eco.ok    .rec-eco-num b[b-hjqv9ywgzf] { color: var(--ok, #2E7D46); }
.rec-eco.aviso .rec-eco-num b[b-hjqv9ywgzf] { color: #B8860B; }
.rec-eco-num i[b-hjqv9ywgzf] {
    display: block; font-style: normal; margin-top: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}

/* ── los renglones ─────────────────────────────────────────────────────────────────────── */
.inv-scroll[b-hjqv9ywgzf] { overflow: auto; max-height: 52vh; border-radius: 10px; }

.inv-bar[b-hjqv9ywgzf] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.inv-q[b-hjqv9ywgzf] {
    flex: 1 1 240px; min-width: 0; height: 36px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); color: var(--ink); font-size: 13px; font-family: inherit;
}

.ent-ren thead th[b-hjqv9ywgzf] { position: sticky; top: 0; z-index: 1; background: var(--card); box-shadow: inset 0 -1px 0 var(--line); }
.ent-ren .num[b-hjqv9ywgzf] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ent-ren .fuerte[b-hjqv9ywgzf] { font-weight: 700; color: var(--ink); }
.ent-ren .nom[b-hjqv9ywgzf] { max-width: 320px; }
.ent-ren .ubi[b-hjqv9ywgzf] { color: var(--ink-3); font-size: 12.4px; }
.ent-ren code[b-hjqv9ywgzf] { font-family: var(--font-mono); font-size: 11.8px; white-space: nowrap; }
.ent-ren td input.num[b-hjqv9ywgzf] { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }

/* El renglón que llegó con una etiqueta distinta a la del catálogo: no es un error, pero es lo que hay que
   cotejar contra el papel antes de firmar. */
.ent-ren tr.sust td:first-child[b-hjqv9ywgzf] { box-shadow: inset 3px 0 0 #D69E2E; }
.ent-ren .mv-sub[b-hjqv9ywgzf] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.4px; color: #B8860B; margin-top: 3px;
}
.ent-ren .mv-sub[b-hjqv9ywgzf]  svg { width: 12px; height: 12px; }

.ent-ren .acts[b-hjqv9ywgzf] { text-align: right; white-space: nowrap; }
.ent-ren .ic[b-hjqv9ywgzf] {
    background: none; border: 0; cursor: pointer; padding: 4px 5px; border-radius: 7px;
    color: var(--ink-3); line-height: 0;
}
.ent-ren .ic:hover[b-hjqv9ywgzf] { background: rgb(200 53 63 / .12); color: var(--bad, #C8353F); }
.ent-ren .ic[b-hjqv9ywgzf]  svg { width: 15px; height: 15px; }

.empty.sm[b-hjqv9ywgzf] { padding: 28px 10px; }

/* Un enlace no se deshabilita solo: sin renglones que exportar, se apaga y deja de recibir clics. */
.btn.disabled[b-hjqv9ywgzf] { opacity: .45; pointer-events: none; }

/* ═══════════════════════════════ lo propio del pre-recibo ═══════════════════════════════ */
.pr-tipo[b-hjqv9ywgzf] {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.mono[b-hjqv9ywgzf] { font-family: var(--font-mono); }

/* Los papeles del contenedor, en una tira. */
.pr-docs[b-hjqv9ywgzf] {
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    padding: 12px 16px; margin-bottom: 14px;
    border: 1px solid var(--line); border-radius: var(--radius, 14px); background: var(--card);
}
.pr-docs > div[b-hjqv9ywgzf] { display: flex; flex-direction: column; min-width: 0; }
.pr-docs i[b-hjqv9ywgzf] {
    font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.pr-docs b[b-hjqv9ywgzf] { font-size: 14px; color: var(--ink); }
.pr-docs small[b-hjqv9ywgzf] { font-size: 11px; color: var(--ink-3); }
.pr-docs .pr-arch[b-hjqv9ywgzf] { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 12.5px; }

/* El folio terminado: es lo que va en las etiquetas, así que se muestra en grande. */
.pr-fin[b-hjqv9ywgzf] {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 16px 20px; margin-bottom: 14px;
    border-radius: var(--radius, 14px);
    background: rgb(46 125 70 / .08); border: 1px solid rgb(46 125 70 / .3);
}
.pr-fin-id[b-hjqv9ywgzf] { display: flex; flex-direction: column; }
.pr-fin-id i[b-hjqv9ywgzf] { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ok, #2E7D46); }
.pr-fin-id b[b-hjqv9ywgzf] { font-family: var(--font-mono); font-size: 30px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1.1; }
.pr-fin-id span[b-hjqv9ywgzf] { font-size: 12px; color: var(--ink-2); }
.pr-fin-acc[b-hjqv9ywgzf] { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pr-disc[b-hjqv9ywgzf] { color: var(--bad, #C8353F); border-color: rgb(200 53 63 / .35); }
.pr-sin-disc[b-hjqv9ywgzf] { display: inline-flex; align-items: center; gap: 6px; color: var(--ok, #2E7D46); font-weight: 600; font-size: 13px; }
.pr-sin-disc[b-hjqv9ywgzf]  svg { width: 16px; height: 16px; }

.pr-kpis .kn small[b-hjqv9ywgzf] { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.pr-kpis .kpi.warn[b-hjqv9ywgzf] { border-color: rgb(214 158 46 / .5); background: rgb(214 158 46 / .07); }
.pr-kpis .kpi.info[b-hjqv9ywgzf] { border-color: rgb(58 110 165 / .4); background: rgb(58 110 165 / .06); }
.pr-bar[b-hjqv9ywgzf] { height: 5px; border-radius: 99px; background: var(--neutral-bg, #EFEDEA); margin-top: 8px; overflow: hidden; }
.pr-bar i[b-hjqv9ywgzf] { display: block; height: 100%; background: var(--ok, #2E7D46); border-radius: 99px; transition: width .3s ease; }

/* Filtros como chips con su cuenta. */
.pr-filtros[b-hjqv9ywgzf] { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-filtros button[b-hjqv9ywgzf] {
    border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
    border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.pr-filtros button span[b-hjqv9ywgzf] { margin-left: 4px; color: var(--ink-3); font-weight: 700; }
.pr-filtros button.on[b-hjqv9ywgzf] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.pr-filtros button.on span[b-hjqv9ywgzf] { color: inherit; opacity: .75; }

/* ── la tabla contra el papel ─────────────────────────────────────────────────────────────── */
.pr-scroll[b-hjqv9ywgzf] { max-height: 62vh; }
.pr-tbl td[b-hjqv9ywgzf] { transition: background-color .15s ease; }
.pr-tbl .pr-cel[b-hjqv9ywgzf] { cursor: pointer; }
.pr-tbl .pr-cajas[b-hjqv9ywgzf] { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.pr-tbl .pr-sub[b-hjqv9ywgzf] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: 11.2px; color: var(--ink-3); }
.pr-lab[b-hjqv9ywgzf] {
    font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 1px 6px; border-radius: 5px;
    background: #FFF3CD; color: #8A6100; border: 1px solid #F0D48A; white-space: nowrap;
}
.pr-extra[b-hjqv9ywgzf] { font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 1px 6px; border-radius: 5px;
    background: rgb(58 110 165 / .12); color: var(--info, #3A6EA5); text-transform: uppercase; }

.pr-dot[b-hjqv9ywgzf] { width: 18px; }
.pr-dot i[b-hjqv9ywgzf] { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--line); margin: auto; }

/* Verde claro = llegó completo, como pidió Shineray. Ámbar = llegó con diferencia. Rojo = no llegó. */
.pr-tbl tr.ok td[b-hjqv9ywgzf]      { background: #EAF6EC; }
.pr-tbl tr.ok .pr-dot i[b-hjqv9ywgzf] { background: var(--ok, #2E7D46); }
.pr-tbl tr.dif td[b-hjqv9ywgzf]     { background: #FFF6E0; }
.pr-tbl tr.dif .pr-dot i[b-hjqv9ywgzf] { background: #D69E2E; }
.pr-tbl tr.falta td[b-hjqv9ywgzf]   { background: #FDECEC; }
.pr-tbl tr.falta .pr-dot i[b-hjqv9ywgzf] { background: var(--bad, #C8353F); }
.pr-tbl tr.extra td[b-hjqv9ywgzf]   { background: #EEF4FB; }
.pr-tbl tr.extra .pr-dot i[b-hjqv9ywgzf] { background: var(--info, #3A6EA5); }
.pr-tbl .pr-dif[b-hjqv9ywgzf] { font-weight: 700; }
.pr-tbl tr.dif .pr-dif[b-hjqv9ywgzf], .pr-tbl tr.falta .pr-dif[b-hjqv9ywgzf] { color: var(--bad, #C8353F); }
.pr-tbl tr.ok .pr-dif[b-hjqv9ywgzf] { color: var(--ok, #2E7D46); }

/* El renglón que se está contando: se ve de lejos. */
.pr-tbl tr.activo td[b-hjqv9ywgzf] { box-shadow: inset 0 2px 0 var(--info, #3A6EA5), inset 0 -2px 0 var(--info, #3A6EA5); }
.pr-tbl tr.activo td:first-child[b-hjqv9ywgzf] { box-shadow: inset 4px 0 0 var(--info, #3A6EA5), inset 0 2px 0 var(--info, #3A6EA5), inset 0 -2px 0 var(--info, #3A6EA5); }

.pr-tbl input.lb-cant[b-hjqv9ywgzf] {
    width: 86px; height: 32px; text-align: right; font-family: var(--font-mono); font-size: 14px; font-weight: 700;
    border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); padding: 0 8px;
}
.pr-tbl input.lb-cant.sug[b-hjqv9ywgzf] { color: var(--ink-3); font-weight: 500; border-style: dashed; }
.pr-tbl input.lb-cant:focus[b-hjqv9ywgzf] { outline: none; border-color: var(--info, #3A6EA5); box-shadow: 0 0 0 4px rgb(58 110 165 / .25); color: var(--ink); font-weight: 700; border-style: solid; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pr-tbl tr.ok td[b-hjqv9ywgzf] { background: rgb(46 125 70 / .18); }
    :root:not([data-theme="light"]) .pr-tbl tr.dif td[b-hjqv9ywgzf] { background: rgb(214 158 46 / .16); }
    :root:not([data-theme="light"]) .pr-tbl tr.falta td[b-hjqv9ywgzf] { background: rgb(200 53 63 / .16); }
    :root:not([data-theme="light"]) .pr-tbl tr.extra td[b-hjqv9ywgzf] { background: rgb(58 110 165 / .16); }
}
:root[data-theme="dark"] .pr-tbl tr.ok td[b-hjqv9ywgzf] { background: rgb(46 125 70 / .18); }
:root[data-theme="dark"] .pr-tbl tr.dif td[b-hjqv9ywgzf] { background: rgb(214 158 46 / .16); }
:root[data-theme="dark"] .pr-tbl tr.falta td[b-hjqv9ywgzf] { background: rgb(200 53 63 / .16); }
:root[data-theme="dark"] .pr-tbl tr.extra td[b-hjqv9ywgzf] { background: rgb(58 110 165 / .16); }

/* ── acomodo sugerido ─────────────────────────────────────────────────────────────────────── */
.pr-zonas[b-hjqv9ywgzf] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pr-zona[b-hjqv9ywgzf] { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pr-zona-h[b-hjqv9ywgzf] { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 12px; background: var(--ink); color: var(--card); }
.pr-zona-h b[b-hjqv9ywgzf] { font-size: 14px; }
.pr-zona-h span[b-hjqv9ywgzf] { font-size: 11.5px; opacity: .8; }
.pr-zona ul[b-hjqv9ywgzf] { list-style: none; margin: 0; padding: 4px 0; max-height: 260px; overflow: auto; }
.pr-zona li[b-hjqv9ywgzf] { display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.pr-zona li:last-child[b-hjqv9ywgzf] { border-bottom: 0; }
.pr-zona li code[b-hjqv9ywgzf] { font-family: var(--font-mono); font-size: 11.2px; white-space: nowrap; }
.pr-zona li .nm[b-hjqv9ywgzf] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.pr-zona li b[b-hjqv9ywgzf] { font-variant-numeric: tabular-nums; }

/* ── diálogos ─────────────────────────────────────────────────────────────────────────────── */
.pr-resumen[b-hjqv9ywgzf] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.pr-resumen > div[b-hjqv9ywgzf] { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.pr-resumen i[b-hjqv9ywgzf] { display: block; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pr-resumen b[b-hjqv9ywgzf] { font-size: 18px; }

.pr-etq-top[b-hjqv9ywgzf] { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 12px; }
.pr-etq-id i[b-hjqv9ywgzf], .pr-etq-tot label[b-hjqv9ywgzf] { display: block; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pr-etq-id b[b-hjqv9ywgzf] { font-family: var(--font-mono); font-size: 22px; font-weight: 800; }
.pr-etq-tot b[b-hjqv9ywgzf] { font-size: 22px; font-weight: 800; margin-right: 8px; }
.pr-etq-tot span[b-hjqv9ywgzf] { font-size: 12px; color: var(--ink-3); }
.pr-etq-rap[b-hjqv9ywgzf] { margin-left: auto; display: flex; gap: 6px; }

.pr-tbl .pr-quitar[b-hjqv9ywgzf] { text-align: right; white-space: nowrap; width: 44px; }
.pr-tbl .pr-quitar .ic[b-hjqv9ywgzf] { display: inline-block; }
.pr-etq-tbl td select[b-hjqv9ywgzf], .pr-etq-tbl td input[b-hjqv9ywgzf] { padding-top: 6px; padding-bottom: 6px; }
.pr-etq-tbl td.num input[b-hjqv9ywgzf] { text-align: right; }
/* /Components/Pages/Refacciones/RefaccionesCatalogoPanel.razor.rz.scp.css */
/* Catálogo de refacciones — tres tableros a pantalla completa.

   La pantalla renuncia al ancho máximo del resto de las vistas (ver .view:has(.cat-wide) en app.css): un
   despiece necesita ancho para la tabla y alto para el dibujo, y partirlo en dos scrolls lo vuelve inútil.
   Todo el color sale de las variables del tema, así que el modo oscuro no necesita una sola regla extra. */

.cat-wide[b-13wvhn51wd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    min-height: 0;
}

/* ── barra superior ─────────────────────────────────────────────────────────── */
.cat-top[b-13wvhn51wd] { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; flex-wrap: wrap; }

.cat-title[b-13wvhn51wd] { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cat-title .ic[b-13wvhn51wd] {
    width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px;
    background: var(--red-050); color: var(--red);
    display: flex; align-items: center; justify-content: center;
}
.cat-title .ic[b-13wvhn51wd]  svg { width: 19px; height: 19px; }
.cat-title .t[b-13wvhn51wd] { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.cat-title .s[b-13wvhn51wd] { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

.cat-modelo[b-13wvhn51wd] {
    background: var(--card); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 8px 11px; font-size: 12.5px; font-family: var(--font); outline: none; cursor: pointer;
    max-width: 340px;
}
.cat-modelo:focus[b-13wvhn51wd] { box-shadow: var(--ring); }

.cat-busca[b-13wvhn51wd] { position: relative; flex: 1; min-width: 240px; max-width: 520px; }
.cat-busca input[b-13wvhn51wd] {
    width: 100%;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill);
    color: var(--ink); padding: 9px 15px 9px 38px; font-size: 12.5px; font-family: var(--font); outline: none;
}
.cat-busca input:focus[b-13wvhn51wd] { box-shadow: var(--ring); border-color: transparent; }
.cat-busca .mag[b-13wvhn51wd] {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--ink-3); pointer-events: none; display: flex;
}
.cat-busca .mag[b-13wvhn51wd]  svg { width: 15px; height: 15px; }

.cat-drop[b-13wvhn51wd] {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); max-height: 420px; overflow: auto;
}
.cat-drop .sr[b-13wvhn51wd] {
    padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--line-2);
    display: flex; flex-direction: column; gap: 2px;
}
.cat-drop .sr:last-child[b-13wvhn51wd] { border-bottom: 0; }
.cat-drop .sr:hover[b-13wvhn51wd] { background: var(--red-050); }
.cat-drop .sr .c[b-13wvhn51wd] { font-family: var(--font-mono); font-size: 12px; color: var(--red-600); font-weight: 600; }
.cat-drop .sr .n[b-13wvhn51wd] { font-size: 12.5px; color: var(--ink); }
.cat-drop .sr .w[b-13wvhn51wd] { font-size: 11px; color: var(--ink-3); }
.cat-drop .none[b-13wvhn51wd] { padding: 14px; color: var(--ink-3); text-align: center; font-size: 12.5px; }

.cat-seg[b-13wvhn51wd] {
    display: flex; gap: 2px; padding: 3px; white-space: nowrap;
    background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.cat-seg button[b-13wvhn51wd] {
    border: 0; background: transparent; color: var(--ink-3);
    font-size: 11.5px; font-family: var(--font); font-weight: 600;
    padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer;
}
.cat-seg button.on[b-13wvhn51wd] { background: var(--red); color: #fff; }
.cat-seg button:not(.on):hover[b-13wvhn51wd] { color: var(--ink); }

/* ── contadores ─────────────────────────────────────────────────────────────── */
.cat-kpis[b-13wvhn51wd] { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.cat-kpis .kpi[b-13wvhn51wd] {
    display: flex; align-items: baseline; gap: 6px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill);
    padding: 4px 12px; font-size: 11.5px; color: var(--ink-2); box-shadow: var(--shadow);
}
.cat-kpis .kpi b[b-13wvhn51wd] { color: var(--ink); font-size: 12.5px; }
.cat-kpis .kpi .dot[b-13wvhn51wd] { width: 6px; height: 6px; border-radius: 50%; background: var(--red); align-self: center; }

/* ── los tres tableros ──────────────────────────────────────────────────────── */
/* minmax(0, …) en las dos columnas elásticas y NO un mínimo en px: con un mínimo duro, una ventana
   angosta empuja la rejilla más allá del ancho de la página y aparece un scroll horizontal en toda la
   pantalla. Cada tablero tiene su propio scroll; ninguno desborda al de junto. */
.cat-grid[b-13wvhn51wd] {
    flex: 1;
    display: grid;
    grid-template-columns: 248px minmax(0, 1.45fr) minmax(0, .9fr);
    gap: 12px;
    min-height: 0;
}
@media (max-width: 1320px) { .cat-grid[b-13wvhn51wd] { grid-template-columns: 210px minmax(0, 1.35fr) minmax(0, 1fr); } }

.cat-panel[b-13wvhn51wd] {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.cat-ph[b-13wvhn51wd] {
    flex: 0 0 auto; min-height: 44px;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-bottom: 1px solid var(--line);
}
.cat-ph .t[b-13wvhn51wd] {
    font-weight: 700; font-size: 12.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-ph .chip[b-13wvhn51wd] {
    margin-left: auto; white-space: nowrap;
    font-family: var(--font-mono); font-size: 10.5px;
    background: var(--neutral-bg); color: var(--ink-2); border-radius: 6px; padding: 2px 7px;
}

.cat-vacio[b-13wvhn51wd] { padding: 36px 20px; text-align: center; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }

/* 1 · árbol */
.cat-tree[b-13wvhn51wd] { overflow: auto; padding: 6px 0 14px; scrollbar-width: thin; }
.cat-tree .sh[b-13wvhn51wd] {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; cursor: pointer; user-select: none;
}
.cat-tree .sh:hover[b-13wvhn51wd] { background: var(--card-2); }
.cat-tree .chev[b-13wvhn51wd] { display: flex; color: var(--ink-3); transition: transform .18s; }
.cat-tree .chev[b-13wvhn51wd]  svg { width: 13px; height: 13px; }
.cat-tree .sys.open .chev[b-13wvhn51wd] { transform: rotate(90deg); }
.cat-tree .sn[b-13wvhn51wd] {
    flex: 1; font-weight: 700; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-tree .cnt[b-13wvhn51wd] {
    font-size: 10.5px; color: var(--ink-3);
    background: var(--neutral-bg); border-radius: var(--radius-pill); padding: 1px 8px;
}
.cat-tree .asm[b-13wvhn51wd] {
    display: flex; align-items: center; gap: 8px;
    padding: 6.5px 14px 6.5px 30px; cursor: pointer;
    border-left: 3px solid transparent; color: var(--ink-2); font-size: 12.5px;
}
.cat-tree .asm:hover[b-13wvhn51wd] { background: var(--card-2); color: var(--ink); }
.cat-tree .asm.on[b-13wvhn51wd] { border-left-color: var(--red); background: var(--red-050); color: var(--ink); font-weight: 600; }
.cat-tree .an[b-13wvhn51wd] { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-tree .pc[b-13wvhn51wd] { font-size: 10px; color: var(--ink-3); }

/* 2 · renglones
   min-height:0 explícito: sin él, un elemento flex no puede encogerse por debajo de su contenido y la
   tabla se derrama fuera del tablero, arrastrando el scroll a la página entera. Con él, la lista larga
   se queda dentro de su propia caja — que es justo lo que se quiere: el árbol y el esquema no se mueven. */
.cat-tbl[b-13wvhn51wd] { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; outline: none; }
.cat-tbl table[b-13wvhn51wd] { width: 100%; border-collapse: collapse; }
.cat-tbl thead th[b-13wvhn51wd] {
    position: sticky; top: 0; z-index: 5;
    background: var(--card-2); text-align: left;
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
    padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.cat-tbl tbody td[b-13wvhn51wd] { padding: 7px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.cat-tbl tbody tr[b-13wvhn51wd] { cursor: pointer; }
.cat-tbl tbody tr:hover[b-13wvhn51wd] { background: var(--card-2); }
.cat-tbl tbody tr.sel[b-13wvhn51wd] { background: var(--red-050); }
.cat-tbl tbody tr.sel td:first-child[b-13wvhn51wd] { box-shadow: inset 3px 0 0 var(--red); }
.cat-tbl .num[b-13wvhn51wd] { text-align: right; font-variant-numeric: tabular-nums; }
.cat-tbl th.num[b-13wvhn51wd] { text-align: right; }

.cat-tbl .globo[b-13wvhn51wd] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 4px; border-radius: var(--radius-pill);
    border: 1.5px solid var(--ink-3); color: var(--ink-2);
    font-size: 11px; font-weight: 700; background: var(--card);
}
.cat-tbl tr.sel .globo[b-13wvhn51wd] { border-color: var(--red); color: var(--red-600); }
.cat-tbl .cod[b-13wvhn51wd] {
    font-family: var(--font-mono); font-size: 11.8px; color: var(--ink); white-space: nowrap;
    border-bottom: 1px dashed transparent; cursor: pointer;
}
.cat-tbl .cod:hover[b-13wvhn51wd] { color: var(--red-600); border-bottom-color: var(--red); }
.cat-tbl .nm[b-13wvhn51wd] { max-width: 320px; }
.cat-tbl .nm .n1[b-13wvhn51wd] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-tbl .nm .n2[b-13wvhn51wd] {
    display: block; font-size: 11px; color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-tbl .precio[b-13wvhn51wd] { font-weight: 600; white-space: nowrap; }
.cat-tbl .precio.na[b-13wvhn51wd] { color: var(--ink-3); font-weight: 400; }

/* insignias — también las usa la ficha */
.badges[b-13wvhn51wd] { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* Dentro de la TABLA van en una sola línea. Envueltas, tres chips de modelo apilados hacían renglones de
   ~66 px y la lista de un conjunto grande no cabía en pantalla; en línea el renglón vuelve a ~30 px.
   La celda no se estira: si no caben, la columna deja de crecer y el resto de la tabla no se deforma. */
.cat-tbl td .badges[b-13wvhn51wd] { flex-wrap: nowrap; }
.cat-tbl td[b-13wvhn51wd] { white-space: nowrap; }
.cat-tbl td.nm[b-13wvhn51wd] { white-space: normal; }   /* el nombre sí puede recortarse con ellipsis */
.b[b-13wvhn51wd] {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: .02em;
    border-radius: 6px; padding: 2px 6px; white-space: nowrap;
}
.b-mdl[b-13wvhn51wd] { background: var(--neutral-bg); color: var(--ink-2); }
.b-moq[b-13wvhn51wd] { background: var(--warn-bg); color: var(--warn); }
.b-rep[b-13wvhn51wd] { background: var(--info-bg); color: var(--info); }
.b-xr[b-13wvhn51wd]  { background: var(--red-050); color: var(--red-600); }

/* 3 · esquema */
.cat-aviso[b-13wvhn51wd] {
    flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-start;
    padding: 8px 12px; font-size: 11.5px; line-height: 1.45;
    background: var(--warn-bg); color: var(--warn);
    border-bottom: 1px solid rgba(185, 121, 26, .22);
}
.cat-aviso .ic[b-13wvhn51wd] { display: flex; flex: 0 0 auto; }
.cat-aviso .ic[b-13wvhn51wd]  svg { width: 15px; height: 15px; }

.cat-fotos[b-13wvhn51wd] {
    flex: 0 0 auto; height: 92px;
    border-top: 1px solid var(--line); background: var(--card-2);
    display: flex; flex-direction: column; min-height: 0;
}
.cat-fotos .fh[b-13wvhn51wd] {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px 4px;
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 700;
}
.cat-fotos .fh .who[b-13wvhn51wd] {
    font-family: var(--font-mono); text-transform: none; letter-spacing: 0;
    color: var(--ink-2); font-weight: 600;
}
.cat-fotos .fh .n[b-13wvhn51wd] {
    font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--ok-bg); color: var(--ok); border-radius: var(--radius-pill); padding: 1px 7px;
}
.cat-fotos .fb[b-13wvhn51wd] {
    flex: 1; display: flex; align-items: center; gap: 8px;
    padding: 0 12px 10px; color: var(--ink-3); font-size: 12px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
/* Miniatura: fondo papel fijo, como el despiece — son fotos de estudio sobre blanco y en modo noche
   un recorte claro flotando sobre lienzo oscuro se ve sucio; el marco las asienta. */
.cat-fotos .th[b-13wvhn51wd] {
    flex: 0 0 auto; width: 62px; height: 62px; padding: 0;
    border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
    background: #FFFFFF; cursor: pointer;
}
.cat-fotos .th:hover[b-13wvhn51wd] { border-color: var(--red); }
.cat-fotos .th img[b-13wvhn51wd] { width: 100%; height: 100%; object-fit: contain; display: block; }

.foto-full[b-13wvhn51wd] {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 10px; min-height: 200px;
}
.foto-full img[b-13wvhn51wd] { max-width: 100%; max-height: 62vh; object-fit: contain; }

/* Flechas SOBRE la foto, no debajo: la vista se queda en la pieza y no hay que bajar la mirada para
   cambiarla. Colores fijos porque van sobre el papel blanco de la foto, no sobre el tema. */
.foto-full .fnav[b-13wvhn51wd] {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(45,41,38,.14); background: rgba(255,255,255,.92);
    color: #3A3532; cursor: pointer;
    box-shadow: 0 1px 2px rgba(30,27,24,.08), 0 4px 14px rgba(30,27,24,.10);
}
.foto-full .fnav:hover[b-13wvhn51wd] { background: #fff; color: #D4212E; border-color: rgba(45,41,38,.24); }
.foto-full .fnav[b-13wvhn51wd]  svg { width: 17px; height: 17px; }
.foto-full .fnav.prev[b-13wvhn51wd] { left: 12px; }
.foto-full .fnav.next[b-13wvhn51wd] { right: 12px; }

.foto-pies[b-13wvhn51wd] { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; }
.foto-pies .pt[b-13wvhn51wd] {
    width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 0; background: var(--line); transition: .14s;
}
.foto-pies .pt:hover[b-13wvhn51wd] { background: var(--ink-3); }
.foto-pies .pt.on[b-13wvhn51wd] { background: var(--ink-2); transform: scale(1.25); }
.foto-pies .cnt[b-13wvhn51wd] { margin-left: 8px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cat-fotos .fb .ic[b-13wvhn51wd] { display: flex; opacity: .45; }
.cat-fotos .fb .ic[b-13wvhn51wd]  svg { width: 20px; height: 20px; }

.cat-hint[b-13wvhn51wd] {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-top: 1px solid var(--line);
    font-size: 11px; color: var(--ink-3);
}
.cat-hint .nav[b-13wvhn51wd] { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.cat-hint .nav > span[b-13wvhn51wd] { font-size: 10.5px; margin-right: 2px; }
.cat-hint .nav button[b-13wvhn51wd] {
    width: 26px; height: 24px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: var(--card); border-radius: 7px;
    color: var(--ink-2); cursor: pointer;
}
.cat-hint .nav button[b-13wvhn51wd]  svg { width: 13px; height: 13px; }
.cat-hint .nav button:hover:not(:disabled)[b-13wvhn51wd] { color: var(--red-600); border-color: var(--red); }
.cat-hint .nav button:disabled[b-13wvhn51wd] { opacity: .4; cursor: default; }

/* ── listas personalizadas (plan 7d.2) ──────────────────────────────────────── */

.cat-listas[b-13wvhn51wd] {
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 8px 13px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill);
    color: var(--ink-2); font-size: 12.5px; font-weight: 600; font-family: var(--font);
    cursor: pointer;
}
.cat-listas:hover[b-13wvhn51wd] { color: var(--ink); border-color: rgba(45,41,38,.2); }
.cat-listas[b-13wvhn51wd]  svg { width: 15px; height: 15px; }
.cat-listas .n[b-13wvhn51wd] {
    font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--neutral-bg); color: var(--ink-2); border-radius: var(--radius-pill); padding: 1px 7px;
}

/* El marcador del renglón: discreto hasta que la pieza está guardada, y entonces relleno. */
.cat-tbl .mark[b-13wvhn51wd] {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border: 0; border-radius: 8px;
    background: transparent; color: var(--ink-3); cursor: pointer; opacity: .35;
}
.cat-tbl tr:hover .mark[b-13wvhn51wd] { opacity: 1; }
.cat-tbl .mark:hover[b-13wvhn51wd] { background: var(--red-050); color: var(--red-600); }
.cat-tbl .mark[b-13wvhn51wd]  svg { width: 15px; height: 15px; }
.cat-tbl .mark.on[b-13wvhn51wd] { opacity: 1; color: var(--red); }
.cat-tbl .mark.on[b-13wvhn51wd]  svg { fill: currentColor; }

/* Selector de lista y panel */
.pick[b-13wvhn51wd] { display: flex; flex-direction: column; gap: 6px; }
.pick-row[b-13wvhn51wd] {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 8px 12px; cursor: pointer;
    background: var(--card-2); border: 1px solid var(--line-2); border-radius: 10px;
    font-family: var(--font);
}
/* Seleccionado ≠ error. El rojo de la marca funciona para acciones y alertas, pero sobre una lista de
   piezas guardadas se lee como "algo salió mal": el estado elegido va en el gris neutral del tema. */
.pick-row:hover[b-13wvhn51wd] { background: var(--card-2); border-color: var(--line); }
.pick-row.on[b-13wvhn51wd], .pick-row.open[b-13wvhn51wd] { background: var(--neutral-bg); border-color: var(--line); }
.pick-row .tick[b-13wvhn51wd] { margin-left: auto; display: flex; color: var(--ink-3); }
.pick-row.on .tick[b-13wvhn51wd] { color: var(--red-600); }
.pick-row .tick[b-13wvhn51wd]  svg { width: 15px; height: 15px; }
.pick-row .iconbtn[b-13wvhn51wd] { margin-left: auto; }

/* Alta de lista */
.nueva[b-13wvhn51wd] { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.nueva .lbl[b-13wvhn51wd] {
    font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-3); margin: 14px 0 7px;
}
.grid-ic[b-13wvhn51wd] { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.grid-ic .opt[b-13wvhn51wd] {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1; border: 1px solid var(--line); border-radius: 9px;
    background: var(--card); color: var(--ink-2); cursor: pointer;
}
.grid-ic .opt:hover[b-13wvhn51wd] { border-color: var(--red); color: var(--red-600); }
.grid-ic .opt.on[b-13wvhn51wd] { border-color: var(--red); background: var(--red-050); color: var(--red-600); }
.grid-ic .opt[b-13wvhn51wd]  svg { width: 16px; height: 16px; }

.grid-co[b-13wvhn51wd] { display: flex; gap: 8px; flex-wrap: wrap; }
.grid-co .sw[b-13wvhn51wd] {
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; background: rgb(var(--lc) / .38);
}
.grid-co .sw.on[b-13wvhn51wd] { border-color: var(--ink-2); }
/* Misma paleta que ListaChip; aquí sólo se necesita el canal del tinte. */
.grid-co .c-ambar[b-13wvhn51wd]   { --lc: 201 150 30; }
.grid-co .c-cielo[b-13wvhn51wd]   { --lc: 58 110 165; }
.grid-co .c-menta[b-13wvhn51wd]   { --lc: 46 158 107; }
.grid-co .c-durazno[b-13wvhn51wd] { --lc: 214 122 84; }
.grid-co .c-lila[b-13wvhn51wd]    { --lc: 138 108 190; }
.grid-co .c-rosa[b-13wvhn51wd]    { --lc: 201 90 128; }
.grid-co .c-arena[b-13wvhn51wd]   { --lc: 160 138 106; }
.grid-co .c-pizarra[b-13wvhn51wd] { --lc: 106 122 138; }

.vista[b-13wvhn51wd] { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

/* insignias de la tabla */
.badges[b-13wvhn51wd] { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.b[b-13wvhn51wd] {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: .02em;
    border-radius: 6px; padding: 2px 6px; white-space: nowrap;
}
.b-mdl[b-13wvhn51wd] { background: var(--neutral-bg); color: var(--ink-2); }
.b-moq[b-13wvhn51wd] { background: var(--warn-bg); color: var(--warn); }
.b-rep[b-13wvhn51wd] { background: var(--info-bg); color: var(--info); }
.b-xr[b-13wvhn51wd]  { background: var(--red-050); color: var(--red-600); }
.cat-tbl td .badges[b-13wvhn51wd] { flex-wrap: nowrap; }

/* Confirmación de «agregado a la orden de compra». */
.cat-flash[b-13wvhn51wd] {
  font-size: 12.5px; font-weight: 600; color: var(--ok); background: var(--ok-bg);
  border-radius: 999px; padding: 5px 12px; animation: catFlash-b-13wvhn51wd .18s ease;
}
.cat-flash.err[b-13wvhn51wd] { color: var(--bad); background: var(--bad-bg); }
@keyframes catFlash-b-13wvhn51wd { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cat-flash[b-13wvhn51wd] { animation: none; } }

/* ── popup «agregar a la orden de compra» ── */
.oc-pop-h[b-13wvhn51wd] { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.oc-pop-h .c[b-13wvhn51wd] { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; color: var(--ink); }
.oc-pop-h .n[b-13wvhn51wd] { font-size: 13.5px; color: var(--ink-2); }
.oc-pop-row[b-13wvhn51wd] { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.oc-pop-q label[b-13wvhn51wd] { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.oc-step[b-13wvhn51wd] { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.oc-step button[b-13wvhn51wd] { width: 40px; font-size: 18px; font-weight: 600; color: var(--ink-2); background: var(--card-2); }
.oc-step button:hover:not(:disabled)[b-13wvhn51wd] { color: var(--ink); background: var(--line-2); }
.oc-step button:disabled[b-13wvhn51wd] { opacity: .4; cursor: default; }
.oc-step input[b-13wvhn51wd] {
  width: 76px; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); background: var(--card);
  padding: 8px 4px; -moz-appearance: textfield;
}
.oc-step input[b-13wvhn51wd]::-webkit-outer-spin-button, .oc-step input[b-13wvhn51wd]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.oc-step input:focus[b-13wvhn51wd] { outline: none; box-shadow: inset 0 0 0 2px rgba(239,51,64,.28); }
.oc-pop-m[b-13wvhn51wd] { display: grid; grid-template-columns: auto auto; gap: 3px 14px; align-items: baseline; font-size: 13px; }
.oc-pop-m .l[b-13wvhn51wd] { color: var(--ink-3); }
.oc-pop-m .v[b-13wvhn51wd] { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.oc-pop-m .v.t[b-13wvhn51wd] { font-size: 16px; font-weight: 700; }
.oc-pop-dest[b-13wvhn51wd] { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.oc-ir[b-13wvhn51wd] { margin-right: auto; }
.oc-ir-n[b-13wvhn51wd] {
  font-size: 10.5px; font-weight: 700; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: var(--red-050); color: var(--red-600); text-align: center;
}
/* /Components/Pages/Refacciones/RefaccionesEntradasPanel.razor.rz.scp.css */
/* Entradas de refacciones. Dos pantallas: la lista, que se lee sentado, y la recepción, que se usa de pie
   con un lector en la mano. Casi todo lo que sigue es de la segunda. */

.sel-alm[b-z41nzjmb0m] {
    height: 34px;
    min-width: 180px;
    max-width: 320px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
    font-family: inherit;
}

/* ── estado del documento ──────────────────────────────────────────────────────────────── */
.est[b-z41nzjmb0m] {
    display: inline-block;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
    background: var(--neutral-bg, #EFEDEA); color: var(--ink-2);
    white-space: nowrap;
}

.est.borrador[b-z41nzjmb0m]  { background: rgb(58 110 165 / .14); color: var(--info, #3A6EA5); }
.est.aplicada[b-z41nzjmb0m]  { background: rgb(46 125 70 / .14);  color: var(--ok, #2E7D46); }
.est.cancelada[b-z41nzjmb0m] { background: var(--neutral-bg, #EFEDEA); color: var(--ink-3); }

.ent-titulo[b-z41nzjmb0m] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ent-titulo h1[b-z41nzjmb0m] { margin: 0; }

.ent-tbl code.fuerte[b-z41nzjmb0m] { font-family: var(--font-mono); font-size: 12.4px; font-weight: 700; color: var(--ink); }
.ent-tbl .acts[b-z41nzjmb0m] { text-align: right; white-space: nowrap; }

.ent-kpis[b-z41nzjmb0m] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 760px) {
    .ent-kpis[b-z41nzjmb0m] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ent-kpis .kpi[b-z41nzjmb0m] {
    border: 1px solid var(--line);
    border-radius: var(--radius, 14px);
    background: var(--card);
    padding: 14px 16px;
}

.ent-kpis .kn[b-z41nzjmb0m] { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.ent-kpis .kl[b-z41nzjmb0m] {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); margin-top: 5px;
}
.ent-kpis .kpi.muted .kn[b-z41nzjmb0m] { font-size: 17px; font-weight: 700; color: var(--ink-2); padding-top: 5px; }

/* ── el mostrador de conteo ────────────────────────────────────────────────────────────── */
/* Marco de acento: en una pantalla llena de tarjetas iguales, esta es la única con la que se interactúa
   mientras se recibe, y tiene que encontrarse de reojo. */
/* El espacio que faltaba: la tarjeta del mostrador quedaba pegada a los indicadores de abajo. */
/* Y aquí se le dice al control del núcleo de qué color es "activo" en ESTA aplicación. El control usa
   --accent y no lo define; SHIDA no lo tenía, así que se estaba pintando del azul marino de Lion Bytes
   dentro de una pantalla de Shineray. Se mapea al azul informativo de la casa: rojo ya significa
   «algo está mal» en todos los formularios, y no es lo que un campo enfocado quiere decir. */
.rec[b-z41nzjmb0m] {
    --accent: var(--info, #3A6EA5);
    border-color: var(--accent);
    margin-bottom: 14px;
}

.rec-fila[b-z41nzjmb0m] { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.rec-esc[b-z41nzjmb0m] { flex: 1 1 380px; min-width: 0; }
.rec-cant[b-z41nzjmb0m] { flex: 0 0 auto; }

/* ── cuál de las dos casillas está activa ──────────────────────────────────────────────── */
/* Escribir el número de parte dentro de la cantidad no produce ningún error: sólo cuenta mal. Así que
   la casilla activa tiene que verse desde lejos, no adivinarse. Todo con :focus-within — el navegador ya
   sabe dónde está el cursor y no hace falta preguntárselo al servidor. */
.rec-esc > label[b-z41nzjmb0m],
.rec-cant > label[b-z41nzjmb0m] {
    display: flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 6px;
    transition: color .12s ease;
}

/* La tecla que alterna, escrita donde se necesita saberla. */
.rec-esc > label .k[b-z41nzjmb0m],
.rec-cant > label .k[b-z41nzjmb0m] {
    font-family: var(--font-mono);
    font-size: 9.5px; font-weight: 700; letter-spacing: 0;
    padding: 1px 5px; border-radius: 5px;
    border: 1px solid var(--line); color: var(--ink-3); background: var(--card);
}

.rec-esc:focus-within > label[b-z41nzjmb0m],
.rec-cant:focus-within > label[b-z41nzjmb0m] { color: var(--accent); }

.rec-esc:focus-within > label .k[b-z41nzjmb0m],
.rec-cant:focus-within > label .k[b-z41nzjmb0m] {
    border-color: var(--accent); color: #fff; background: var(--accent);
}

/* El aro grueso es la señal principal: se ve de reojo, sin leer nada. */
.rec-esc:focus-within[b-z41nzjmb0m]  .esc-campo,
.rec-cant:focus-within .rec-cant-ctl[b-z41nzjmb0m] {
    box-shadow: 0 0 0 4px rgb(58 110 165 / .28);
    border-radius: 12px;
}

/* Y la que NO está activa se apaga, para que el contraste sea evidente. */
.rec-esc:not(:focus-within)[b-z41nzjmb0m]  .esc-campo { border-color: var(--line); }
.rec-cant:not(:focus-within) .rec-cant-ctl[b-z41nzjmb0m] { opacity: .72; }

/* Botones grandes a los lados del número: en una tableta se ajusta con el pulgar, sin teclado. */
.rec-cant-ctl[b-z41nzjmb0m] {
    display: flex; align-items: stretch; height: 54px;
    border-radius: 12px;
    transition: box-shadow .15s ease, opacity .12s ease;
}

.rec-cant-ctl button[b-z41nzjmb0m] {
    width: 46px;
    border: 2px solid var(--line);
    background: var(--card);
    color: var(--ink);
    font-size: 22px; font-weight: 700; line-height: 1;
    cursor: pointer;
}
.rec-cant-ctl button:first-child[b-z41nzjmb0m] { border-radius: 12px 0 0 12px; }
.rec-cant-ctl button:last-child[b-z41nzjmb0m]  { border-radius: 0 12px 12px 0; }
.rec-cant-ctl button:hover[b-z41nzjmb0m] { background: var(--neutral-bg, #EFEDEA); }

.rec-cant-ctl input[b-z41nzjmb0m] {
    width: 76px;
    border: 2px solid var(--line);
    border-left: 0; border-right: 0;
    background: var(--card);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 22px; font-weight: 700;
    text-align: center;
}
.rec-cant-ctl input:focus[b-z41nzjmb0m] { outline: none; }

/* Sin las flechitas nativas: ya hay − y + de tamaño de pulgar, y ocupaban justo donde uno hace clic
   para reescribir la cantidad. */
.rec-cant-ctl input[b-z41nzjmb0m]::-webkit-outer-spin-button,
.rec-cant-ctl input[b-z41nzjmb0m]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rec-cant-ctl input[b-z41nzjmb0m] { -moz-appearance: textfield; appearance: textfield; }
.rec-cant:focus-within .rec-cant-ctl button[b-z41nzjmb0m],
.rec-cant:focus-within .rec-cant-ctl input[b-z41nzjmb0m] { border-color: var(--accent); }

/* ── el eco de la última lectura ───────────────────────────────────────────────────────── */
/* Tamaño de cartel a propósito. Es la mitad visual del bip: el sonido dice que pasó algo, esto dice qué,
   y tiene que leerse desde donde está parado quien recibe. */
.rec-eco[b-z41nzjmb0m] {
    display: flex; align-items: center; gap: 16px;
    margin-top: 16px; padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
}

.rec-eco.ok[b-z41nzjmb0m]    { background: rgb(46 125 70 / .10);  border-color: rgb(46 125 70 / .28); }
.rec-eco.aviso[b-z41nzjmb0m] { background: rgb(214 158 46 / .12); border-color: rgb(214 158 46 / .34); }
.rec-eco.bad[b-z41nzjmb0m]   { background: rgb(200 53 63 / .10);  border-color: rgb(200 53 63 / .30); }

.rec-eco-ic[b-z41nzjmb0m] { flex: 0 0 auto; line-height: 0; }
.rec-eco-ic[b-z41nzjmb0m]  svg { width: 30px; height: 30px; }
.rec-eco.ok    .rec-eco-ic[b-z41nzjmb0m] { color: var(--ok, #2E7D46); }
.rec-eco.aviso .rec-eco-ic[b-z41nzjmb0m] { color: #B8860B; }
.rec-eco.bad   .rec-eco-ic[b-z41nzjmb0m] { color: var(--bad, #C8353F); }

.rec-eco-txt[b-z41nzjmb0m] { flex: 1 1 auto; min-width: 0; }
.rec-eco-cod[b-z41nzjmb0m] {
    font-family: var(--font-mono); font-size: 19px; font-weight: 700; letter-spacing: .01em;
    color: var(--ink);
    word-break: break-all;
}
.rec-eco-nom[b-z41nzjmb0m] { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.rec-eco-nota[b-z41nzjmb0m] { font-size: 12.4px; color: #B8860B; margin-top: 4px; font-weight: 600; }

.rec-eco-num[b-z41nzjmb0m] { flex: 0 0 auto; text-align: right; }
.rec-eco-num b[b-z41nzjmb0m] { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.rec-eco.ok    .rec-eco-num b[b-z41nzjmb0m] { color: var(--ok, #2E7D46); }
.rec-eco.aviso .rec-eco-num b[b-z41nzjmb0m] { color: #B8860B; }
.rec-eco-num i[b-z41nzjmb0m] {
    display: block; font-style: normal; margin-top: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}

/* ── los renglones ─────────────────────────────────────────────────────────────────────── */
.inv-scroll[b-z41nzjmb0m] { overflow: auto; max-height: 52vh; border-radius: 10px; }

.inv-bar[b-z41nzjmb0m] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.inv-q[b-z41nzjmb0m] {
    flex: 1 1 240px; min-width: 0; height: 36px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); color: var(--ink); font-size: 13px; font-family: inherit;
}

.ent-ren thead th[b-z41nzjmb0m] { position: sticky; top: 0; z-index: 1; background: var(--card); box-shadow: inset 0 -1px 0 var(--line); }
.ent-ren .num[b-z41nzjmb0m] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ent-ren .fuerte[b-z41nzjmb0m] { font-weight: 700; color: var(--ink); }
.ent-ren .nom[b-z41nzjmb0m] { max-width: 320px; }
.ent-ren .ubi[b-z41nzjmb0m] { color: var(--ink-3); font-size: 12.4px; }
.ent-ren code[b-z41nzjmb0m] { font-family: var(--font-mono); font-size: 11.8px; white-space: nowrap; }
.ent-ren td input.num[b-z41nzjmb0m] { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }

/* El renglón que llegó con una etiqueta distinta a la del catálogo: no es un error, pero es lo que hay que
   cotejar contra el papel antes de firmar. */
.ent-ren tr.sust td:first-child[b-z41nzjmb0m] { box-shadow: inset 3px 0 0 #D69E2E; }
.ent-ren .mv-sub[b-z41nzjmb0m] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.4px; color: #B8860B; margin-top: 3px;
}
.ent-ren .mv-sub[b-z41nzjmb0m]  svg { width: 12px; height: 12px; }

.ent-ren .acts[b-z41nzjmb0m] { text-align: right; white-space: nowrap; }
.ent-ren .ic[b-z41nzjmb0m] {
    background: none; border: 0; cursor: pointer; padding: 4px 5px; border-radius: 7px;
    color: var(--ink-3); line-height: 0;
}
.ent-ren .ic:hover[b-z41nzjmb0m] { background: rgb(200 53 63 / .12); color: var(--bad, #C8353F); }
.ent-ren .ic[b-z41nzjmb0m]  svg { width: 15px; height: 15px; }

.empty.sm[b-z41nzjmb0m] { padding: 28px 10px; }

/* Un enlace no se deshabilita solo: sin renglones que exportar, se apaga y deja de recibir clics. */
.btn.disabled[b-z41nzjmb0m] { opacity: .45; pointer-events: none; }

.ent-tbl .mono[b-z41nzjmb0m] { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
/* /Components/Pages/Refacciones/RefaccionesInventarioPanel.razor.rz.scp.css */
/* Inventario de refacciones. Una tabla densa que se lee de corrido: la fila que importa es la que está
   bajo mínimo, y todo lo demás tiene que quitarse de en medio para que ésa salte. */

.sel-alm[b-1d9z1ovu4s] {
    height: 34px;
    min-width: 200px;
    max-width: 320px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
    font-family: inherit;
}

/* ── el estado del almacén ─────────────────────────────────────────────────────────────── */
.inv-kpis[b-1d9z1ovu4s] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 760px) {
    .inv-kpis[b-1d9z1ovu4s] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kpi[b-1d9z1ovu4s] {
    border: 1px solid var(--line);
    border-radius: var(--radius, 14px);
    background: var(--card);
    padding: 14px 16px;
}

.kpi .kn[b-1d9z1ovu4s] { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kpi .kl[b-1d9z1ovu4s] {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); margin-top: 5px;
}

/* Bajo mínimo es lo único que se colorea, y sólo cuando hay algo que atender. */
.kpi.warn[b-1d9z1ovu4s] { border-color: var(--red, #EF3340); }
.kpi.warn .kn[b-1d9z1ovu4s] { color: var(--red, #EF3340); }
.kpi.muted .kn[b-1d9z1ovu4s] { color: var(--ink-3); font-weight: 700; }

/* ── barra de filtros ──────────────────────────────────────────────────────────────────── */
.inv-bar[b-1d9z1ovu4s] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.inv-q[b-1d9z1ovu4s] {
    flex: 1 1 260px;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
    font-family: inherit;
}

.inv-bar .chk[b-1d9z1ovu4s] { display: inline-flex; align-items: center; gap: 7px; font-size: 12.8px; color: var(--ink-2); white-space: nowrap; }

/* ── la tabla ──────────────────────────────────────────────────────────────────────────── */
/* El scroll se queda DENTRO del panel: un catálogo de 2,000 partes no debe arrastrar la página entera. */
.inv-scroll[b-1d9z1ovu4s] { overflow: auto; max-height: 58vh; border-radius: 10px; }

.inv-tbl[b-1d9z1ovu4s] { width: 100%; }
.inv-tbl thead th[b-1d9z1ovu4s] {
    position: sticky; top: 0; z-index: 1;
    background: var(--card);
    box-shadow: inset 0 -1px 0 var(--line);
}

.inv-tbl .num[b-1d9z1ovu4s] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-tbl .fuerte[b-1d9z1ovu4s] { font-weight: 700; color: var(--ink); }
.inv-tbl .nom[b-1d9z1ovu4s] { max-width: 340px; }
.inv-tbl .ubi[b-1d9z1ovu4s] { color: var(--ink-3); font-size: 12.4px; }
.inv-tbl code[b-1d9z1ovu4s] { font-family: var(--font-mono); font-size: 11.8px; white-space: nowrap; }

/* La fila bajo mínimo se marca con un filo a la izquierda, no con fondo rojo: la lista no está mal,
   sólo pide reposición. */
.inv-tbl tr.bajo td:first-child[b-1d9z1ovu4s] { box-shadow: inset 3px 0 0 var(--red, #EF3340); }
.inv-tbl tr.bajo .fuerte[b-1d9z1ovu4s] { color: var(--red, #EF3340); }
.inv-tbl .sug[b-1d9z1ovu4s] { color: var(--info, #3A6EA5); font-weight: 700; }

.inv-tbl .acts[b-1d9z1ovu4s] { text-align: right; white-space: nowrap; }
.inv-tbl .ic[b-1d9z1ovu4s] {
    background: none; border: 0; cursor: pointer; padding: 4px 5px; border-radius: 7px;
    color: var(--ink-3); line-height: 0;
}
.inv-tbl .ic:hover[b-1d9z1ovu4s] { background: var(--neutral-bg, #EFEDEA); color: var(--ink); }
.inv-tbl .ic[b-1d9z1ovu4s]  svg { width: 15px; height: 15px; }

/* ── kardex ────────────────────────────────────────────────────────────────────────────── */
.mv[b-1d9z1ovu4s] {
    display: inline-block; font-size: 12.4px; font-weight: 600;
    padding: 1px 8px; border-radius: 999px; background: var(--neutral-bg, #EFEDEA); color: var(--ink-2);
}
.mv.entrada[b-1d9z1ovu4s] { background: rgb(58 110 165 / .14); color: var(--info, #3A6EA5); }
.mv.salida[b-1d9z1ovu4s]  { background: rgb(200 53 63 / .12);  color: var(--bad, #C8353F); }
.mv.ajuste[b-1d9z1ovu4s]  { background: var(--neutral-bg, #EFEDEA); color: var(--ink-2); }
.mv.traspaso[b-1d9z1ovu4s]{ background: rgb(120 110 165 / .14); color: #6A5FA5; }

.mv-sub[b-1d9z1ovu4s] { display: block; font-size: 11.6px; color: var(--ink-3); margin-top: 2px; }

.pos[b-1d9z1ovu4s] { color: var(--info, #3A6EA5); }
.neg[b-1d9z1ovu4s] { color: var(--bad, #C8353F); }

.err-list[b-1d9z1ovu4s] { margin: 6px 0 0; padding-left: 18px; font-size: 12.6px; line-height: 1.55; }

.empty.sm[b-1d9z1ovu4s] { padding: 28px 10px; }

/* ── el resultado de una carga ─────────────────────────────────────────────────────────── */
/* .msg es un flex row con align-items:center. Todo el bloque de resultado va como UN hijo, y por
   dentro se maqueta solo; si no, cada número y cada separador se vuelve una celda del flex y la
   línea se desalinea. */
.msg > .res[b-1d9z1ovu4s] { flex: 1 1 auto; min-width: 0; }

.res-t[b-1d9z1ovu4s] { font-weight: 800; margin-bottom: 9px; }

.res-stats[b-1d9z1ovu4s] { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cada contador es su propio bloque etiqueta/valor: se leen en columna aunque la fila se rompa. */
.res-stats .st[b-1d9z1ovu4s] {
    display: inline-flex; flex-direction: column; gap: 1px;
    padding: 6px 11px; border-radius: 9px;
    background: rgb(255 255 255 / .55);
    min-width: 74px;
}
html.theme-dark .res-stats .st[b-1d9z1ovu4s] { background: rgb(255 255 255 / .07); }

.res-stats .st i[b-1d9z1ovu4s] {
    font-style: normal; font-size: 10px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; opacity: .72;
}
.res-stats .st b[b-1d9z1ovu4s] { font-size: 16px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* El único contador que pide acción se marca; los demás son informativos. */
.res-stats .st.warn b[b-1d9z1ovu4s] { color: var(--red, #EF3340); }

.msg .err-list[b-1d9z1ovu4s] { margin: 0; padding-left: 18px; font-size: 12.6px; line-height: 1.6; font-weight: 400; }
.msg .err-list li[b-1d9z1ovu4s] { margin: 1px 0; }

/* Texto a la izquierda, la salida a la derecha. */
.aviso-desc[b-1d9z1ovu4s] { justify-content: space-between; gap: 16px; }
.aviso-desc > span[b-1d9z1ovu4s] { flex: 1 1 auto; min-width: 0; }

/* Un enlace no se deshabilita solo: sin filas que exportar, se apaga y deja de recibir clics. */
.btn.disabled[b-1d9z1ovu4s] { opacity: .45; pointer-events: none; }
/* /Components/Pages/Refacciones/RefaccionesListasPanel.razor.rz.scp.css */
/* Mis listas: la columna de listas a la izquierda, el contenido a la derecha. Dos tarjetas y no tres
   tableros a pantalla completa como el catálogo — aquí sí conviene que la página scrollee normal. */

.lst-wrap[b-9gnjprp1du] { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .lst-wrap[b-9gnjprp1du] { grid-template-columns: 1fr; } }

.lst-side[b-9gnjprp1du] { display: flex; flex-direction: column; gap: 7px; }
.lst-item[b-9gnjprp1du] {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 9px 11px; border-radius: 10px;
    background: transparent; border: 1px solid transparent; font-family: var(--font);
}
/* Seleccionado ≠ error: el rojo de la marca, sobre una lista de piezas guardadas, se lee como alerta.
   El elegido va en el gris neutral del tema (muy claro en día, cálido oscuro en noche) y el borde apenas
   se insinúa — el chip de color ya identifica la lista, no hace falta subrayarlo dos veces. */
.lst-item:hover[b-9gnjprp1du] { background: var(--card-2); border-color: var(--line-2); }
.lst-item.on[b-9gnjprp1du] { background: var(--neutral-bg); border-color: var(--line); }

.lst-head[b-9gnjprp1du] {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.lst-head .actions[b-9gnjprp1du] { margin-left: auto; display: flex; gap: 8px; }

/* Miniatura del renglón: fondo papel fijo, como en el catálogo. */
.lst-th[b-9gnjprp1du] {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; overflow: hidden;
    border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF;
}
.lst-th img[b-9gnjprp1du] { width: 100%; height: 100%; object-fit: contain; display: block; }
.lst-th.vacia[b-9gnjprp1du] { background: var(--card-2); color: var(--ink-3); }
.lst-th.vacia[b-9gnjprp1du]  svg { width: 16px; height: 16px; opacity: .45; }

.lbl-sec[b-9gnjprp1du] {
    font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-3); margin: 14px 0 7px;
}
.grid-ic[b-9gnjprp1du] { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.grid-ic .opt[b-9gnjprp1du] {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
    border: 1px solid var(--line); border-radius: 9px; background: var(--card);
    color: var(--ink-2); cursor: pointer;
}
.grid-ic .opt:hover[b-9gnjprp1du] { border-color: var(--red); color: var(--red-600); }
.grid-ic .opt.on[b-9gnjprp1du] { border-color: var(--red); background: var(--red-050); color: var(--red-600); }
.grid-ic .opt[b-9gnjprp1du]  svg { width: 16px; height: 16px; }

.grid-co[b-9gnjprp1du] { display: flex; gap: 8px; flex-wrap: wrap; }
.grid-co .sw[b-9gnjprp1du] {
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; background: rgb(var(--lc) / .38);
}
.grid-co .sw.on[b-9gnjprp1du] { border-color: var(--ink-2); }
.grid-co .c-ambar[b-9gnjprp1du]   { --lc: 201 150 30; }
.grid-co .c-cielo[b-9gnjprp1du]   { --lc: 58 110 165; }
.grid-co .c-menta[b-9gnjprp1du]   { --lc: 46 158 107; }
.grid-co .c-durazno[b-9gnjprp1du] { --lc: 214 122 84; }
.grid-co .c-lila[b-9gnjprp1du]    { --lc: 138 108 190; }
.grid-co .c-rosa[b-9gnjprp1du]    { --lc: 201 90 128; }
.grid-co .c-arena[b-9gnjprp1du]   { --lc: 160 138 106; }
.grid-co .c-pizarra[b-9gnjprp1du] { --lc: 106 122 138; }

.vista[b-9gnjprp1du] { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

.cat-vacio[b-9gnjprp1du] { padding: 40px 20px; text-align: center; color: var(--ink-3); font-size: 12.5px; }

.cat-seg[b-9gnjprp1du] {
    display: flex; gap: 2px; padding: 3px; white-space: nowrap;
    background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.cat-seg button[b-9gnjprp1du] {
    border: 0; background: transparent; color: var(--ink-3);
    font-size: 11.5px; font-family: var(--font); font-weight: 600;
    padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer;
}
.cat-seg button.on[b-9gnjprp1du] { background: var(--red); color: #fff; }

.cod[b-9gnjprp1du] { font-family: var(--font-mono); font-size: 11.8px; white-space: nowrap; }
/* /Components/Pages/Refacciones/RefaccionesOrdenesPanel.razor.rz.scp.css */
/* Orden de compra de refacciones. Lo general (tablas, tarjetas de envío, bitácora, formularios) sale de app.css;
   aquí sólo lo que esta pantalla tiene de propio: los campos numéricos dentro de la tabla, los totales y el
   buscador de piezas de la captura. */

.ro-sel[b-rbme4h371t] {
  height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; font-size: 13px;
}

.ro-num[b-rbme4h371t] {
  width: 84px; text-align: right; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
}
.ro-num:focus[b-rbme4h371t] { outline: none; box-shadow: var(--ring); border-color: transparent; }
.ro-precio[b-rbme4h371t] { width: 108px; }

/* Lo que no alcanza: existencia menor que lo pedido, o una pieza sin precio. */
.ro-corto[b-rbme4h371t] { color: var(--bad); font-weight: 600; }

/* El ancho lo fija el BLOQUE, no cada renglón: así las tres etiquetas arrancan en la misma vertical y los tres
   importes terminan en la misma. Con el mínimo en cada renglón, el de «Descuento / nota de crédito» —más largo que
   los otros dos— se pasaba del mínimo, crecía él solo y, pegado a la derecha, su etiqueta se salía hacia la
   izquierda. max-content mide el renglón más ancho y los demás se estiran hasta él. */
.ro-tot[b-rbme4h371t] {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  width: max-content; max-width: 100%; min-width: 260px; margin: 10px 0 0 auto; font-size: 13px;
}
.ro-tot > div[b-rbme4h371t] { display: flex; justify-content: space-between; gap: 18px; color: var(--ink-2); }
.ro-tot b[b-rbme4h371t] { font-variant-numeric: tabular-nums; color: var(--ink); }
.ro-tot .t[b-rbme4h371t] { color: var(--ink); font-size: 14.5px; border-top: 1px solid var(--line); padding-top: 5px; margin-top: 2px; }

.ro-acts[b-rbme4h371t] { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ro-links[b-rbme4h371t] { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ro-links:empty[b-rbme4h371t] { display: none; }

/* ── captura: buscador con resultados desplegados debajo ── */
.ro-cap-bar[b-rbme4h371t] { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.ro-search[b-rbme4h371t] { position: relative; flex: 1; min-width: 260px; }
.ro-drop[b-rbme4h371t] {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
  max-height: 320px; overflow-y: auto; padding: 4px;
}
.ro-opt[b-rbme4h371t] {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: center;
  width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--ink);
}
.ro-opt:hover[b-rbme4h371t], .ro-opt:focus-visible[b-rbme4h371t] { background: var(--card-2); }
.ro-opt .n[b-rbme4h371t] { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-opt .p[b-rbme4h371t] { color: var(--ink-3); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .ro-opt[b-rbme4h371t] { grid-template-columns: 1fr auto; }
  .ro-opt .n[b-rbme4h371t] { grid-column: 1 / -1; }
  .ro-tot[b-rbme4h371t] { width: auto; min-width: 0; }
}

/* ── detalle: más ancho para la tabla de renglones ──
   La línea de tiempo de refacciones lleva textos cortos, así que en esta pantalla su columna baja de los 330px
   que app.css le da a .ocsplit (pensados para la OC de vehículos) a 210px. Sólo arriba de 1100px: por debajo
   app.css apila las dos columnas y aquí no se toca. */
@media (min-width: 1101px) {
  .ro-split[b-rbme4h371t] { grid-template-columns: 210px minmax(0, 1fr); gap: 22px; }
}

/* Celdas más juntas y el número de parte en un solo renglón: partido en tres líneas estiraba cada fila y empujaba
   la tabla a scroll horizontal. La descripción sí se parte, pero con un ancho mínimo legible. */
.ro-tbl thead th[b-rbme4h371t], .ro-tbl tbody td[b-rbme4h371t] { padding-left: 8px; padding-right: 8px; }
.ro-tbl thead th:first-child[b-rbme4h371t], .ro-tbl tbody td:first-child[b-rbme4h371t] { padding-left: 14px; }
.ro-tbl .mono[b-rbme4h371t] { white-space: nowrap; }
.ro-tbl tbody td:nth-child(2)[b-rbme4h371t] { min-width: 150px; }
/* Medido en Chrome con la orden confirmada (10 columnas) en el ancho real del diálogo: con 10px de relleno se pasaba
   17px; con 8px cabe. Los encabezados numéricos pueden partirse en dos renglones («EN / ENVÍOS») si hiciera falta,
   que es el margen para cuando la fuente real mida un poco más que la de la prueba. */
.ro-tbl thead th.num[b-rbme4h371t] { white-space: normal; vertical-align: bottom; }
/* /Components/Pages/Refacciones/RefaccionesSalidasPanel.razor.rz.scp.css */
/* Salidas de refacciones.

   OJO: el CSS aislado de Blazor sólo marca el marcado que ESTE componente dibuja. Clases como `.mv`,
   `.fuerte`, `.nom` o `.err-list` existen en el CSS aislado de OTROS paneles y desde aquí no valen nada —
   se redeclaran abajo a propósito. (Es la misma trampa que dejó `.kpis6` y `.rowacts` sin efecto.) */

/* ── los tres números de arriba ───────────────────────────────────────────────────────────── */
.sal-kpis[b-uf44benuuh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 720px) {
    .sal-kpis[b-uf44benuuh] { grid-template-columns: 1fr; }
}

.kpi[b-uf44benuuh] {
    border: 1px solid var(--line);
    border-radius: var(--radius, 14px);
    background: var(--card);
    padding: 14px 16px;
}

.kpi .kn[b-uf44benuuh] { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kpi .kl[b-uf44benuuh] {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); margin-top: 5px;
}

/* ── la barra de filtros ──────────────────────────────────────────────────────────────────── */
/* Rejilla propia y NO `.frm`: `.frm` es de dos columnas y mandaría el buscador a una mitad y las fechas
   a la otra. Un buscador va ENCIMA de lo que filtra, y los acotadores a su lado. */
.sal-bar[b-uf44benuuh] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* El buscador se lleva el espacio sobrante; los demás campos ocupan lo suyo y no más. */
.sal-q[b-uf44benuuh] { flex: 1 1 280px; min-width: 0; }

.sal-f[b-uf44benuuh] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.sal-f > span[b-uf44benuuh] {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3);
}

.sal-f > input[b-uf44benuuh],
.sal-f > select[b-uf44benuuh] {
    height: 36px;
    min-width: 150px;
    max-width: 260px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
    font-family: inherit;
    transition: .14s;
}

.sal-f > input:focus[b-uf44benuuh],
.sal-f > select:focus[b-uf44benuuh] { outline: none; border-color: var(--red, #EF3340); box-shadow: var(--ring); }

.sal-clear[b-uf44benuuh] { align-self: flex-end; white-space: nowrap; }

/* ── la tabla ─────────────────────────────────────────────────────────────────────────────── */
/* El scroll se queda DENTRO del panel: un trimestre de movimientos no debe arrastrar la página entera. */
.sal-scroll[b-uf44benuuh] { overflow: auto; max-height: 58vh; border-radius: 10px; }

.sal-tbl[b-uf44benuuh] { width: 100%; }
.sal-tbl thead th[b-uf44benuuh] {
    position: sticky; top: 0; z-index: 1;
    background: var(--card);
    box-shadow: inset 0 -1px 0 var(--line);
}

.sal-tbl .num[b-uf44benuuh] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sal-tbl .fuerte[b-uf44benuuh] { font-weight: 700; color: var(--ink); }
.sal-tbl .muted[b-uf44benuuh] { color: var(--ink-3); }
.sal-tbl .nom[b-uf44benuuh] { max-width: 320px; }
.sal-tbl .ubi[b-uf44benuuh] { color: var(--ink-3); font-size: 12.4px; }
.sal-tbl .nowrap[b-uf44benuuh] { white-space: nowrap; }
.sal-tbl code[b-uf44benuuh] { font-family: var(--font-mono); font-size: 11.8px; white-space: nowrap; }

/* Lo que es un IDENTIFICADOR no se parte: un «SAL-2026-0003» cortado en dos renglones por el guion se lee
   como dos cosas. El nombre del distribuidor y la descripción de la pieza sí envuelven —son prosa— y son
   los que ceden el ancho para que los identificadores quepan enteros. */
.sal-tbl .mv[b-uf44benuuh], .sal-tbl .lnk[b-uf44benuuh], .sal-tbl td:first-child[b-uf44benuuh] { white-space: nowrap; }

/* El folio de una salida capturada abre su documento; el de una orden de servicio no, porque su pantalla
   es otra. Se pinta como enlace sólo cuando de verdad lleva a algún sitio. */
.lnk[b-uf44benuuh] {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-family: var(--font-mono); font-size: 11.8px; font-weight: 600;
    color: var(--red, #EF3340);
    text-decoration: underline; text-underline-offset: 2px;
    white-space: nowrap;
}
.lnk:hover[b-uf44benuuh] { color: var(--ink); }

.sal-tbl .mono[b-uf44benuuh] { font-family: var(--font-mono); font-size: 11.8px; color: var(--ink-3); white-space: nowrap; }

/* La etiqueta del motivo, con el mismo trazo que la del kardex. Aquí todos los renglones son salidas,
   así que no hay más variante que ésa. */
.mv[b-uf44benuuh] {
    display: inline-block; font-size: 12.4px; font-weight: 600; white-space: nowrap;
    padding: 1px 8px; border-radius: 999px; background: var(--neutral-bg, #EFEDEA); color: var(--ink-2);
}
.mv.salida[b-uf44benuuh] { background: rgb(200 53 63 / .12); color: var(--bad, #C8353F); }

.empty.sm[b-uf44benuuh] { padding: 28px 10px; }

/* ── el alta ──────────────────────────────────────────────────────────────────────────────── */
/* Aire entre el formulario y la lista de piezas: pegados parecen el mismo bloque, y no lo son. */
.sal-sec[b-uf44benuuh] { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }

.sal-sec-h[b-uf44benuuh] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 10px;
}
.sal-sec-h h3[b-uf44benuuh] { margin: 0; font-size: 14px; font-weight: 700; }

.sal-tabla-cap[b-uf44benuuh] { width: 100%; table-layout: fixed; margin: 0; }
.sal-tabla-cap th:nth-child(1)[b-uf44benuuh], .sal-tabla-cap td:nth-child(1)[b-uf44benuuh] { width: 26%; }
.sal-tabla-cap th:nth-child(2)[b-uf44benuuh], .sal-tabla-cap td:nth-child(2)[b-uf44benuuh] { width: 40%; }
.sal-tabla-cap th:nth-child(3)[b-uf44benuuh], .sal-tabla-cap td:nth-child(3)[b-uf44benuuh] { width: 13%; }
.sal-tabla-cap th:nth-child(4)[b-uf44benuuh], .sal-tabla-cap td:nth-child(4)[b-uf44benuuh] { width: 14%; }
.sal-tabla-cap th:nth-child(5)[b-uf44benuuh], .sal-tabla-cap td:nth-child(5)[b-uf44benuuh] { width: 7%; }

.sal-tabla-cap .num[b-uf44benuuh] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sal-tabla-cap .muted[b-uf44benuuh] { color: var(--ink-3); }
.sal-tabla-cap .mono[b-uf44benuuh] { font-family: var(--font-mono); font-size: 11.8px; overflow-wrap: anywhere; }

/* La cantidad, con el mismo trazo que cualquier campo de la casa — no el input pelón del navegador. */
.sal-qty[b-uf44benuuh] {
    width: 76px;
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 6px 9px;
    text-align: right;
    transition: .14s;
}
.sal-qty:focus[b-uf44benuuh] { outline: none; border-color: var(--red, #EF3340); box-shadow: var(--ring); }

.rowacts[b-uf44benuuh] { text-align: right; white-space: nowrap; }
.rowacts .ic[b-uf44benuuh] {
    background: none; border: 0; cursor: pointer; padding: 4px 5px; border-radius: 7px;
    color: var(--ink-3); line-height: 0;
}
.rowacts .ic:hover[b-uf44benuuh] { background: var(--neutral-bg, #EFEDEA); color: var(--bad, #C8353F); }
.rowacts .ic[b-uf44benuuh]  svg { width: 15px; height: 15px; }

/* ── el selector de refacciones ───────────────────────────────────────────────────────────── */
.sal-picker[b-uf44benuuh] { display: flex; flex-direction: column; gap: 14px; }

/* El cuadro no crece con los resultados: la lista se desplaza dentro. `overflow-x: hidden` va EXPLÍCITO
   porque al declarar sólo `overflow-y:auto` el navegador convierte la otra en `auto` también, y entonces
   el ancho de la propia barra vertical basta para sacar una barra horizontal de nada. */
.sal-picker-lista[b-uf44benuuh] {
    max-height: 44vh;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
}

/* `table-layout: fixed` + anchos en PORCENTAJE: la tabla se ajusta al cuadro en vez de exigir el ancho de
   su contenido más largo, que es lo que empuja la barra horizontal. */
.sal-picker-lista table[b-uf44benuuh] { margin: 0; width: 100%; table-layout: fixed; }
.sal-picker-lista thead th[b-uf44benuuh] { position: sticky; top: 0; z-index: 1; background: var(--card); }

.sal-tabla-partes th:nth-child(1)[b-uf44benuuh], .sal-tabla-partes td:nth-child(1)[b-uf44benuuh] { width: 28%; }
.sal-tabla-partes th:nth-child(2)[b-uf44benuuh], .sal-tabla-partes td:nth-child(2)[b-uf44benuuh] { width: 48%; }
.sal-tabla-partes th:nth-child(3)[b-uf44benuuh], .sal-tabla-partes td:nth-child(3)[b-uf44benuuh] { width: 14%; }
.sal-tabla-partes th:nth-child(4)[b-uf44benuuh], .sal-tabla-partes td:nth-child(4)[b-uf44benuuh] { width: 10%; }

.sal-tabla-partes .num[b-uf44benuuh] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sal-tabla-partes .mono[b-uf44benuuh] { font-family: var(--font-mono); font-size: 11.8px; overflow-wrap: anywhere; }

/* Lo que ya está en la salida se marca: el cuadro no se cierra al agregar, así que sin esta señal es fácil
   agregar dos veces la misma pieza sin darse cuenta. */
.sal-tabla-partes tr.ya[b-uf44benuuh] { background: rgb(58 110 165 / .07); }

/* ── mensajes ─────────────────────────────────────────────────────────────────────────────── */
/* `.msg` es un flex row con align-items:center. Todo el bloque va como UN hijo y por dentro se maqueta
   solo; si no, cada renglón se vuelve una celda del flex y la lista se desalinea. */
.msg > .res[b-uf44benuuh] { flex: 1 1 auto; min-width: 0; }
.res-t[b-uf44benuuh] { font-weight: 800; margin-bottom: 7px; }
.err-list[b-uf44benuuh] { margin: 0; padding-left: 18px; font-size: 12.6px; line-height: 1.6; font-weight: 400; }
.err-list li[b-uf44benuuh] { margin: 1px 0; }
/* /Components/Pages/Refacciones/RefaccionFichaModal.razor.rz.scp.css */
/* Estilos de la ficha. Viajan con el componente: el aislamiento CSS de Blazor es por componente, así que
   dejarlos en el panel del catálogo habría dejado la ficha sin formato en la pantalla de listas. */

/* ── ficha ──────────────────────────────────────────────────────────────────── */
.cat-specs[b-c4a7wlnhvy] { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.cat-specs .sp[b-c4a7wlnhvy] { background: var(--card-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px; }
.cat-specs .sp .l[b-c4a7wlnhvy] { font-size: 10.5px; color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase; }
.cat-specs .sp .v[b-c4a7wlnhvy] { font-size: 13px; font-weight: 600; margin-top: 2px; word-break: break-word; }

.cat-ladder[b-c4a7wlnhvy] { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cat-ladder .lr[b-c4a7wlnhvy] {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; border-bottom: 1px solid var(--line-2);
}
.cat-ladder .lr:last-child[b-c4a7wlnhvy] { border-bottom: 0; }
.cat-ladder .lr.final[b-c4a7wlnhvy] { background: var(--red-050); }
.cat-ladder .ll[b-c4a7wlnhvy] { flex: 1; color: var(--ink-2); font-size: 12.5px; }
.cat-ladder .lf[b-c4a7wlnhvy] { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.cat-ladder .lv[b-c4a7wlnhvy] { min-width: 118px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.cat-usos[b-c4a7wlnhvy] { display: flex; flex-direction: column; gap: 6px; }
.cat-usos .uso[b-c4a7wlnhvy] {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    background: var(--card-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px;
}
.cat-usos .uso:hover[b-c4a7wlnhvy] { border-color: var(--red); background: var(--red-050); }
.cat-usos .s1[b-c4a7wlnhvy] { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.cat-usos .s2[b-c4a7wlnhvy] { font-size: 13px; font-weight: 600; }
.cat-usos .go[b-c4a7wlnhvy] { margin-left: auto; color: var(--red-600); font-size: 12px; font-weight: 700; white-space: nowrap; }

.cat-reps[b-c4a7wlnhvy] { display: flex; flex-direction: column; gap: 6px; }
.cat-reps .rep[b-c4a7wlnhvy] {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--card-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px;
}
.cat-reps .rc[b-c4a7wlnhvy] { font-family: var(--font-mono); font-size: 12px; }
.cat-reps .old[b-c4a7wlnhvy] { color: var(--ink-3); text-decoration: line-through; }
.cat-reps .ar[b-c4a7wlnhvy] { color: var(--red-600); font-weight: 800; }
.cat-reps .new[b-c4a7wlnhvy] { color: var(--ink); font-weight: 700; }
.cat-reps .rd[b-c4a7wlnhvy] { margin-left: auto; font-size: 11px; color: var(--ink-3); }

/* insignias — también las usa la ficha */
.badges[b-c4a7wlnhvy] { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* Dentro de la TABLA van en una sola línea. Envueltas, tres chips de modelo apilados hacían renglones de
   ~66 px y la lista de un conjunto grande no cabía en pantalla; en línea el renglón vuelve a ~30 px.
   La celda no se estira: si no caben, la columna deja de crecer y el resto de la tabla no se deforma. */
.cat-tbl td .badges[b-c4a7wlnhvy] { flex-wrap: nowrap; }
.cat-tbl td[b-c4a7wlnhvy] { white-space: nowrap; }
.cat-tbl td.nm[b-c4a7wlnhvy] { white-space: normal; }   /* el nombre sí puede recortarse con ellipsis */
.b[b-c4a7wlnhvy] {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: .02em;
    border-radius: 6px; padding: 2px 6px; white-space: nowrap;
}
.b-mdl[b-c4a7wlnhvy] { background: var(--neutral-bg); color: var(--ink-2); }
.b-moq[b-c4a7wlnhvy] { background: var(--warn-bg); color: var(--warn); }
.b-rep[b-c4a7wlnhvy] { background: var(--info-bg); color: var(--info); }
.b-xr[b-c4a7wlnhvy]  { background: var(--red-050); color: var(--red-600); }


/* ── ficha en dos columnas: los datos a la izquierda, la pieza a la derecha ────────────────── */
/* Sin fotografía la ficha se queda de una columna y el modal angosto: una columna vacía al lado
   de los datos se lee como que falta algo, no como que no hay nada que mostrar. */
.fch.con-foto[b-c4a7wlnhvy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 26px;
    align-items: start;
}

@media (max-width: 1080px) {
    .fch.con-foto[b-c4a7wlnhvy] { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

.fch-datos[b-c4a7wlnhvy] { min-width: 0; }

/* La columna se queda a la vista mientras se recorren las especificaciones y la escalera. */
.fch-fotos[b-c4a7wlnhvy] { min-width: 0; position: sticky; top: 0; }

.fv[b-c4a7wlnhvy] {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    /* Fondo de papel fijo, igual que el despiece: las fotos del EPC vienen recortadas sobre blanco y
       en tema oscuro se perderían contra el fondo. */
    background: linear-gradient(160deg, #FFFFFF 0%, #FAFAF9 55%, #F1F1EF 100%);
    padding: 14px;
    min-height: 260px;
}

.fv img[b-c4a7wlnhvy] { max-width: 100%; max-height: 46vh; object-fit: contain; }

.fv .fnav[b-c4a7wlnhvy] {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgb(255 255 255 / .92);
    border: 1px solid rgb(45 41 38 / .12);
    color: var(--ink-2); cursor: pointer; padding: 0;
    box-shadow: 0 1px 4px rgb(0 0 0 / .1);
    transition: .12s;
}
.fv .fnav:hover[b-c4a7wlnhvy] { background: #fff; color: var(--red, #EF3340); border-color: rgb(45 41 38 / .24); }
.fv .fnav[b-c4a7wlnhvy]  svg { width: 17px; height: 17px; }
.fv .fnav.prev[b-c4a7wlnhvy] { left: 10px; }
.fv .fnav.next[b-c4a7wlnhvy] { right: 10px; }

.fv-pies[b-c4a7wlnhvy] { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 11px; }
.fv-pies .pt[b-c4a7wlnhvy] {
    width: 7px; height: 7px; border-radius: 50%; padding: 0;
    background: var(--line); border: 0; cursor: pointer; transition: .12s;
}
.fv-pies .pt:hover[b-c4a7wlnhvy] { background: var(--ink-3); }
.fv-pies .pt.on[b-c4a7wlnhvy] { background: var(--ink-2); transform: scale(1.25); }
.fv-pies .cnt[b-c4a7wlnhvy] { margin-left: 8px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.fv-tiras[b-c4a7wlnhvy] { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 11px; }
.fv-tiras .th[b-c4a7wlnhvy] {
    width: 54px; height: 54px; padding: 3px;
    border: 1.5px solid var(--line); border-radius: 9px;
    background: #FCFCFB; cursor: pointer; transition: .12s;
}
.fv-tiras .th:hover[b-c4a7wlnhvy] { border-color: var(--ink-3); }
.fv-tiras .th.on[b-c4a7wlnhvy] { border-color: var(--ink-2); }
.fv-tiras .th img[b-c4a7wlnhvy] { width: 100%; height: 100%; object-fit: contain; display: block; }

.fv-nom[b-c4a7wlnhvy] { text-align: center; margin: 10px 0 0; font-size: 12px; }
/* /Components/Pages/Servicio/MantenimientoCapturaPanel.razor.rz.scp.css */
/* Mantenimiento de almacenaje — la captura. El cuerpo del formato lo pinta ChecklistFormulario (núcleo); aquí
   sólo vive la cabecera: la fecha límite, la de recepción y la firma del técnico. Mismos nombres de clase que
   el PDI de entrega a propósito — los dos formatos se leen igual porque son la misma clase de documento. */

.lede .sep[b-t319unov28] { margin: 0 8px; opacity: .45; }
.lede .mono[b-t319unov28] { font-family: var(--font-mono); }
.lede .strong[b-t319unov28] { font-weight: 700; color: var(--ink); }

.pdi-cab[b-t319unov28] { position: relative; }
.pdi-cab .frm.cols[b-t319unov28] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .pdi-cab .frm.cols[b-t319unov28] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pdi-cab .frm.cols[b-t319unov28] { grid-template-columns: 1fr; } }

.pdi-est[b-t319unov28] {
    position: absolute; top: 14px; right: 16px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
}
.pdi-est.draft[b-t319unov28] { background: var(--neutral-bg, #EFEDEA); color: var(--ink-2); }
.pdi-est.ok[b-t319unov28]    { background: rgb(58 110 165 / .14); color: var(--info, #3A6EA5); }

.pdi-instr[b-t319unov28] { font-size: 12.2px; margin: 12px 0 0; }

/* La leyenda, siempre visible —también en una revisión cerrada—: quien la lee meses después no tiene por qué
   saber qué querían decir esas dos marcas. */
.pdi-leyenda[b-t319unov28] {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px dotted var(--line);
    font-size: 12.4px; color: var(--ink-2);
}
.pdi-leyenda span[b-t319unov28] { display: inline-flex; align-items: center; gap: 7px; }
.pdi-leyenda .lg[b-t319unov28] {
    width: 24px; height: 24px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: #FFF;
}
.pdi-leyenda .lg.ok[b-t319unov28] { background: var(--info, #3A6EA5); }
.pdi-leyenda .lg.no[b-t319unov28] { background: var(--red, #EF3340); }

.err-list[b-t319unov28] { margin: 6px 0 0; padding-left: 18px; font-size: 12.6px; line-height: 1.55; }
.msg > .res[b-t319unov28] { flex: 1 1 auto; min-width: 0; }
.res-t[b-t319unov28] { font-weight: 700; }
/* /Components/Pages/Servicio/OrdenesServicioPanel.razor.rz.scp.css */
/* La tira de pasos de la orden de servicio.

   Vive en el CSS AISLADO de este panel y no en app.css a propósito: la usa una sola pantalla. La regla de la
   casa es al revés de como suele leerse — lo que comparten DOS pantallas sube a app.css (porque el aislamiento
   de Blazor marca sólo el marcado que ESTE componente renderiza, así que una utilidad compartida puesta aquí
   no coincidiría allá). Una tira que sólo existe aquí se queda aquí.

   Por lo mismo el marcado de la tira se renderiza en el panel y no dentro de un componente hijo: si lo pintara
   un hijo, el atributo de ámbito no llegaría y estas reglas no aplicarían. */

.os-pasos[b-87fw0fwqhv] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.os-paso[b-87fw0fwqhv] {
    flex: 1 1 150px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #DDD8D4;
    border-radius: 10px;
    background: #FFF;
    color: #7A7370;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.os-paso:hover[b-87fw0fwqhv] { border-color: #B9B4B0; }

/* El número del paso, o la palomita cuando ya quedó atrás. */
.os-paso .n[b-87fw0fwqhv] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.os-paso .t[b-87fw0fwqhv] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

/* Ya recorrido. */
.os-paso.done[b-87fw0fwqhv] {
    color: #2F7D4F;
    border-color: #BFE0CC;
    background: #F3FAF5;
}

/* Donde la orden está DE VERDAD: el único paso que se edita. */
.os-paso.on[b-87fw0fwqhv] {
    color: #211E1C;
    border-color: #EF3340;
    background: #FFF;
    box-shadow: inset 0 0 0 1px #EF3340;
}

.os-paso.on .n[b-87fw0fwqhv] {
    background: #EF3340;
    border-color: #EF3340;
    color: #FFF;
}

/* El que se está MIRANDO, que no siempre es donde la orden está: los pasos anteriores se consultan.
   Se marca con una línea inferior y no con color de fondo para que no compita con `.on`. */
.os-paso.ver[b-87fw0fwqhv] { box-shadow: inset 0 -3px 0 0 #211E1C; }
.os-paso.on.ver[b-87fw0fwqhv] { box-shadow: inset 0 0 0 1px #EF3340, inset 0 -3px 0 0 #211E1C; }

/* Un grupo de refacciones: una tarjeta dentro de la tarjeta del paso. */
.os-grupo[b-87fw0fwqhv] {
    margin: 10px 0;
    border: 1px solid #E6E1DD;
    border-radius: 10px;
    background: #FCFBFA;
}

.os-grupo.off[b-87fw0fwqhv] { opacity: .55; }

/* Encabezado de sección con su acción a la derecha: el botón que opera sobre una sección va junto a su
   título, no al final de una lista de treinta puntos. */
/* Tarjetas apiladas: sin esto quedan pegadas una a otra y la ficha se lee como un solo bloque. */
.card + .card[b-87fw0fwqhv] { margin-top: 16px; }

/* ── El selector (refacciones y operaciones) ────────────────────────────────────────────────── */
.os-picker[b-87fw0fwqhv] { display: flex; flex-direction: column; gap: 14px; }

/* El cuadro no crece con los resultados: la lista se desplaza dentro. 1,300 refacciones harían un
   diálogo de varios metros y los botones del pie quedarían fuera de la pantalla.
   `overflow-x: hidden` va EXPLÍCITO: al declarar sólo `overflow-y:auto` el navegador convierte la otra
   en `auto` también, y entonces el ancho de la propia barra vertical bastaba para sacar una barra
   horizontal de nada. */
.os-picker-lista[b-87fw0fwqhv] {
    max-height: 46vh;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #E6E1DD;
    border-radius: 10px;
}

/* `table-layout: fixed` + anchos en PORCENTAJE: así la tabla se ajusta al cuadro en vez de exigir el
   ancho de su contenido más largo, que es lo que empujaba la barra horizontal. */
.os-picker-lista table[b-87fw0fwqhv] {
    margin: 0;
    width: 100%;
    table-layout: fixed;
}

/* El encabezado se queda a la vista al desplazar: sin esto se pierde qué columna es cuál. */
.os-picker-lista thead th[b-87fw0fwqhv] {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Anchos en porcentaje, no en píxeles: el diálogo cambia de ancho con la pantalla y unos píxeles fijos
   que caben hoy sacan barra horizontal mañana. El código se lleva lo suyo —es largo y monoespaciado—
   y la descripción todo lo que sobra. */
.os-tabla-partes th:nth-child(1)[b-87fw0fwqhv], .os-tabla-partes td:nth-child(1)[b-87fw0fwqhv] { width: 26%; }
.os-tabla-partes th:nth-child(2)[b-87fw0fwqhv], .os-tabla-partes td:nth-child(2)[b-87fw0fwqhv] { width: 42%; }
.os-tabla-partes th:nth-child(3)[b-87fw0fwqhv], .os-tabla-partes td:nth-child(3)[b-87fw0fwqhv] { width: 11%; }
.os-tabla-partes th:nth-child(4)[b-87fw0fwqhv], .os-tabla-partes td:nth-child(4)[b-87fw0fwqhv] { width: 13%; }
.os-tabla-partes th:nth-child(5)[b-87fw0fwqhv], .os-tabla-partes td:nth-child(5)[b-87fw0fwqhv] { width: 8%; }

/* El código parte por el guion si hiciera falta, en vez de forzar el ancho de la columna. */
.os-picker-lista .mono[b-87fw0fwqhv] { overflow-wrap: anywhere; }

/* La cantidad, con el mismo trazo que cualquier campo de la casa — no el input pelón del navegador. */
.os-qty[b-87fw0fwqhv] {
    width: 72px;
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 6px 9px;
    text-align: right;
    transition: .14s;
}

.os-qty:focus[b-87fw0fwqhv] { outline: none; border-color: var(--red); box-shadow: var(--ring); }

/* Operaciones: código corto, horas a la derecha, descripción al centro. */
.os-tabla-op th:nth-child(1)[b-87fw0fwqhv], .os-tabla-op td:nth-child(1)[b-87fw0fwqhv] { width: 12%; }
.os-tabla-op th:nth-child(2)[b-87fw0fwqhv], .os-tabla-op td:nth-child(2)[b-87fw0fwqhv] { width: 64%; }
.os-tabla-op th:nth-child(3)[b-87fw0fwqhv], .os-tabla-op td:nth-child(3)[b-87fw0fwqhv] { width: 14%; }
.os-tabla-op th:nth-child(4)[b-87fw0fwqhv], .os-tabla-op td:nth-child(4)[b-87fw0fwqhv] { width: 10%; }

.os-sec-h[b-87fw0fwqhv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    /* El aire va en el RENGLÓN, no en el `h2`: dentro de un flex el margen del título separa al título de sus
       hermanos, pero no empuja al renglón entero — y el botón se quedaba pegado al campo de arriba. */
    margin: 30px 0 12px;
}

.os-sec-h .sec[b-87fw0fwqhv] { margin: 0; }

/* Encabezado de sección dentro de la ficha. */
.sec[b-87fw0fwqhv] {
    margin: 18px 0 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #211E1C;
}

.sec:first-child[b-87fw0fwqhv] { margin-top: 0; }

/* `.frm` de la casa es de DOS columnas; `.cols` la pasa a TRES, y cada pantalla la define en su propio CSS
   aislado —así está en ReporteDano, Mantenimiento y los dos PDI—. Sin esta regla, un bloque marcado `cols`
   se queda en dos columnas sin avisar, que es justo lo que le pasaba al paso de Recepción (la fecha
   compromiso se caía sola a un renglón) y al de Cierre. */
.frm.cols[b-87fw0fwqhv] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 16px; }
.frm.cols .f.col-2[b-87fw0fwqhv] { grid-column: span 2; }
@media (max-width: 900px) { .frm.cols[b-87fw0fwqhv] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .frm.cols[b-87fw0fwqhv] { grid-template-columns: 1fr; } .frm.cols .f.col-2[b-87fw0fwqhv] { grid-column: span 1; } }

/* El alta de una orden: un poco más de aire que el formulario estándar. Son pocos campos y el cuadro los
   apretaba de más; la rejilla de la casa sigue siendo la misma, sólo respira. */
.os-alta[b-87fw0fwqhv] { gap: 20px 18px; }

/* Las unidades que coinciden con lo tecleado. Cada una es un BOTÓN —se elige con el teclado igual que con el
   ratón— y ocupa su propio renglón a lo ancho: el nombre del cliente es largo y en una tabla de columnas
   automáticas terminaba partido en cuatro líneas. */
.os-unidades[b-87fw0fwqhv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 210px;
    overflow-y: auto;
    padding: 2px;
}

.os-unidad[b-87fw0fwqhv] {
    display: grid;
    grid-template-columns: minmax(150px, auto) minmax(90px, auto) 1fr;
    align-items: baseline;
    gap: 4px 14px;
    width: 100%;
    padding: 10px 13px;
    border: 1px solid #E6E1DD;
    border-radius: 10px;
    background: #FFF;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .14s, background .14s;
}

.os-unidad:hover[b-87fw0fwqhv] { border-color: #B9B4B0; background: #FCFBFA; }

/* La elegida, con el rojo de la casa — el mismo trazo que el paso activo de la tira. */
.os-unidad.on[b-87fw0fwqhv] {
    border-color: #EF3340;
    box-shadow: inset 0 0 0 1px #EF3340;
    background: #FFF;
}

/* Ya está en el taller: se ve, pero no se elige. */
.os-unidad.off[b-87fw0fwqhv] { opacity: .6; cursor: not-allowed; background: #F7F5F3; }
.os-unidad.off:hover[b-87fw0fwqhv] { border-color: #E6E1DD; background: #F7F5F3; }
.os-unidad .ya[b-87fw0fwqhv] { color: #C0000E; font-weight: 600; }

.os-unidad .vin[b-87fw0fwqhv] { font-size: 13px; font-weight: 600; color: #211E1C; }
.os-unidad .mod[b-87fw0fwqhv] { font-size: 12.5px; color: #4A4441; }
/* El cliente se queda en UNA línea y se recorta: es el dato más largo y el que menos decide la elección. */
.os-unidad .cli[b-87fw0fwqhv] {
    font-size: 12px;
    color: #7A7370;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 620px) {
    .os-unidad[b-87fw0fwqhv] { grid-template-columns: 1fr; gap: 2px; }
    .os-unidad .cli[b-87fw0fwqhv] { text-align: left; }
}

/* La galería del paso. Rejilla que se acomoda sola: un diagnóstico deja una foto y una hojalatería deja
   quince, y una rejilla fija se vería mal en los dos casos. */
.os-fotos[b-87fw0fwqhv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.os-foto[b-87fw0fwqhv] {
    margin: 0;
    border: 1px solid #E6E1DD;
    border-radius: 10px;
    overflow: hidden;
    background: #FCFBFA;
}

/* `aspect-ratio` + `object-fit` para que una foto vertical de teléfono y una horizontal de cámara ocupen el
   mismo recuadro: sin esto la rejilla queda dentada. */
.os-foto img[b-87fw0fwqhv] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #EFEBE8;
}

.os-foto figcaption[b-87fw0fwqhv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 9px;
    font-size: 12px;
    line-height: 1.35;
    color: #4A4441;
}

.os-foto figcaption .iconbtn[b-87fw0fwqhv] { flex: 0 0 auto; }

@media (max-width: 860px) {
    .os-paso[b-87fw0fwqhv] { flex: 1 1 100%; }
    .os-fotos[b-87fw0fwqhv] { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
/* /Components/Pages/Servicio/PdiVentaCapturaPanel.razor.rz.scp.css */
/* PDI técnico (AS-WT-001-22) — la captura. El cuerpo del formato lo pinta ChecklistFormulario (núcleo); aquí
   sólo vive la cabecera: la venta, las DOS firmas del calce del papel y la leyenda de las tres marcas.

   La tercera marca de la leyenda («requiere atención») es la segunda casilla de cada renglón, y por eso la
   leyenda de este formato tiene tres renglones y no dos. */

.lede .sep[b-27fxc584rn] { margin: 0 8px; opacity: .45; }
.lede .mono[b-27fxc584rn] { font-family: var(--font-mono); }
.lede .strong[b-27fxc584rn] { font-weight: 700; color: var(--ink); }

.pdi-cab[b-27fxc584rn] { position: relative; }
.pdi-cab .frm.cols[b-27fxc584rn] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .pdi-cab .frm.cols[b-27fxc584rn] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pdi-cab .frm.cols[b-27fxc584rn] { grid-template-columns: 1fr; } }

.pdi-est[b-27fxc584rn] {
    position: absolute; top: 14px; right: 16px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
}
.pdi-est.draft[b-27fxc584rn] { background: var(--neutral-bg, #EFEDEA); color: var(--ink-2); }
.pdi-est.ok[b-27fxc584rn]    { background: rgb(58 110 165 / .14); color: var(--info, #3A6EA5); }
/* Esperando el visto bueno del gerente: ni borrador ni cerrado, y eso hay que poder verlo desde la puerta. */
.pdi-est.warn[b-27fxc584rn]  { background: rgb(239 51 64 / .12); color: var(--red, #EF3340); }

.pdi-instr[b-27fxc584rn] { font-size: 12.2px; margin: 12px 0 0; }

/* La leyenda, siempre visible —también en una revisión cerrada—: quien la lee meses después no tiene por qué
   saber qué querían decir esas dos marcas. */
.pdi-leyenda[b-27fxc584rn] {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px dotted var(--line);
    font-size: 12.4px; color: var(--ink-2);
}
.pdi-leyenda span[b-27fxc584rn] { display: inline-flex; align-items: center; gap: 7px; }
.pdi-leyenda .lg[b-27fxc584rn] {
    width: 24px; height: 24px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: #FFF;
}
.pdi-leyenda .lg.ok[b-27fxc584rn] { background: var(--info, #3A6EA5); }
.pdi-leyenda .lg.no[b-27fxc584rn] { background: var(--red, #EF3340); }

/* .rowacts se movió a app.css (2026-09-18): es una utilidad de layout y la ficha de la venta también la usa. */

.err-list[b-27fxc584rn] { margin: 6px 0 0; padding-left: 18px; font-size: 12.6px; line-height: 1.55; }
.msg > .res[b-27fxc584rn] { flex: 1 1 auto; min-width: 0; }
.res-t[b-27fxc584rn] { font-weight: 700; }
/* /Components/Pages/Servicio/ReporteDanoPanel.razor.rz.scp.css */
/* Complemento PDI · Reporte de daños. Es una tabla que se escribe, no una que se lee: cada celda es un campo,
   así que los controles ocupan el ancho de su columna y la descripción —que es lo largo— crece hacia abajo. */

.lede .sep[b-cjzybp0i5p] { margin: 0 8px; opacity: .45; }
.lede .mono[b-cjzybp0i5p] { font-family: var(--font-mono); }
.lede .strong[b-cjzybp0i5p] { font-weight: 700; color: var(--ink); }

.pdi-est[b-cjzybp0i5p] {
    display: inline-block; margin-bottom: 12px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
}
.pdi-est.draft[b-cjzybp0i5p] { background: var(--neutral-bg, #EFEDEA); color: var(--ink-2); }
.pdi-est.ok[b-cjzybp0i5p]    { background: rgb(58 110 165 / .14); color: var(--info, #3A6EA5); }

.frm.cols[b-cjzybp0i5p] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .frm.cols[b-cjzybp0i5p] { grid-template-columns: 1fr; } }
.frm.cols .f.col-2[b-cjzybp0i5p] { grid-column: span 2; }
@media (max-width: 900px) { .frm.cols .f.col-2[b-cjzybp0i5p] { grid-column: span 1; } }

.tbl td input[type="text"][b-cjzybp0i5p],
.tbl td input[type="date"][b-cjzybp0i5p],
.tbl td textarea[b-cjzybp0i5p] {
    width: 100%; min-width: 0;
    font: inherit; font-size: 12.6px;
    padding: 6px 8px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: var(--ink);
}
.tbl td textarea[b-cjzybp0i5p] { resize: vertical; line-height: 1.45; }
.tbl td input:disabled[b-cjzybp0i5p], .tbl td textarea:disabled[b-cjzybp0i5p] { background: transparent; border-color: transparent; padding-left: 0; }

/* La descripción y la solución son las que llevan el texto; las demás columnas se quedan estrechas para que
   no se lo roben. */
.tbl th:nth-child(4)[b-cjzybp0i5p], .tbl td:nth-child(4)[b-cjzybp0i5p] { min-width: 260px; }
.tbl th:nth-child(5)[b-cjzybp0i5p], .tbl td:nth-child(5)[b-cjzybp0i5p] { min-width: 200px; }

.tbl td input[type="file"][b-cjzybp0i5p] { font-size: 11.5px; max-width: 190px; }
/* /Components/Pages/Servicio/TallerPanel.razor.rz.scp.css */
/* La bandeja del taller — la lista. El tablero de arriba cuenta, no filtra: los estados de un trabajo son
   pocos y la casilla «Mostrar completos» ya hace el único filtro que la gente usa. Cuatro números que se leen
   de un vistazo valen más que cuatro botones que hay que descubrir. */

.tkpis[b-1uath6n5vz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 760px) {
    .tkpis[b-1uath6n5vz] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kpi[b-1uath6n5vz] {
    border: 1px solid var(--line);
    border-radius: var(--radius, 14px);
    background: var(--card);
    padding: 14px 16px;
    text-align: left;
    font-family: inherit;
    color: var(--ink);
}

.kpi .kn[b-1uath6n5vz] { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kpi .kl[b-1uath6n5vz] {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); margin-top: 5px;
}

/* Sólo se colorea lo que pide una mano: pendiente y por validar. En cero es un dato más. */
.kpi.warn[b-1uath6n5vz] { border-color: var(--red, #EF3340); }
.kpi.warn .kn[b-1uath6n5vz] { color: var(--red, #EF3340); }
.kpi.muted .kn[b-1uath6n5vz] { color: var(--ink-3); font-weight: 700; }

/* «Mostrar completos» vive en la barra de herramientas, junto al buscador, porque es lo mismo: acotar lo que
   la tabla enseña. */
.toolbar label.chk[b-1uath6n5vz] {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.8px; font-weight: 600; color: var(--ink-2);
    white-space: nowrap; cursor: pointer;
}
.toolbar label.chk input[b-1uath6n5vz] { width: 15px; height: 15px; accent-color: var(--red); margin: 0; }

/* Dos acciones por renglón (asignar · capturar) que no deben partirse en dos líneas al angostar. */
/* .rowacts se movió a app.css (2026-09-18): es una utilidad de layout y la ficha de la venta también la usa. */

.cellhead[b-1uath6n5vz] { display: inline-flex; align-items: center; gap: 7px; }
/* /Components/Pages/Traspasos/TraspasosPanel.razor.rz.scp.css */
/* Avance del traspaso: cuatro pasos en vertical, el actual en azul. */
.tr-steps[b-qcxebogy7f] { display: flex; flex-direction: column; gap: 4px; }
.tr-st[b-qcxebogy7f] { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; position: relative; }
.tr-st i[b-qcxebogy7f] {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700;
    background: var(--neutral-bg); color: var(--ink-3);
}
.tr-st i[b-qcxebogy7f]  svg { width: 14px; height: 14px; }
.tr-st.done i[b-qcxebogy7f] { background: var(--ok-bg); color: var(--ok); }
.tr-st.cur i[b-qcxebogy7f] { background: var(--info); color: #fff; box-shadow: 0 0 0 4px rgb(58 110 165 / .18); }
.tr-st b[b-qcxebogy7f] { display: block; font-size: 13px; }
.tr-st span[b-qcxebogy7f] { font-size: 11.5px; color: var(--ink-3); }
.tr-st.cur b[b-qcxebogy7f] { color: var(--info); }

.tr-barra[b-qcxebogy7f] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tr-sel[b-qcxebogy7f], .tr-q[b-qcxebogy7f] { height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); font: 13px var(--font); padding: 0 10px; }
.tr-q[b-qcxebogy7f] { flex: 1 1 220px; }
.tr-fila[b-qcxebogy7f] { cursor: pointer; }
.tr-fila.sel td[b-qcxebogy7f] { background: rgb(58 110 165 / .08); }
.tr-dato[b-qcxebogy7f] { display: flex; flex-direction: column; margin-bottom: 10px; }
.tr-dato i[b-qcxebogy7f] { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tr-dato b[b-qcxebogy7f] { font-size: 13.5px; }
.tr-dato span[b-qcxebogy7f] { font-size: 12.5px; color: var(--ink-2); }
.tr-steps[b-qcxebogy7f] { margin-top: 8px; }
.tr-acc[b-qcxebogy7f] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tr-bit-h[b-qcxebogy7f] { margin-top: 18px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tr-bit[b-qcxebogy7f] { list-style: none; padding: 0; margin: 6px 0 0; font-size: 12px; }
.tr-bit li[b-qcxebogy7f] { padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.tr-bit li:last-child[b-qcxebogy7f] { border-bottom: 0; }
.chk[b-qcxebogy7f] { display: flex; align-items: center; gap: 8px; font-weight: 600; }
/* /Components/Pages/Vehiculos/ActaRecepcionPanel.razor.rz.scp.css */
/* Acta de recepción. Densa a propósito: son treinta puntos y la persona los recorre de pie con la unidad
   enfrente, así que lo que importa es que quepan a la vista y que un "M" salte desde el otro lado del andén. */

.lede .sep[b-e0tlz10prh] { margin: 0 8px; opacity: .45; }
.lede .mono[b-e0tlz10prh] { font-family: var(--font-mono); }
.lede .strong[b-e0tlz10prh] { font-weight: 700; color: var(--ink); }

.acta-cab[b-e0tlz10prh] { position: relative; }
.acta-cab .frm.cols[b-e0tlz10prh] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .acta-cab .frm.cols[b-e0tlz10prh] { grid-template-columns: 1fr; } }

.acta-est[b-e0tlz10prh] {
    position: absolute; top: 14px; right: 16px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
}
.acta-est.draft[b-e0tlz10prh] { background: var(--neutral-bg, #EFEDEA); color: var(--ink-2); }
.acta-est.ok[b-e0tlz10prh]    { background: rgb(58 110 165 / .14); color: var(--info, #3A6EA5); }

.acta-instr[b-e0tlz10prh], .acta-sello[b-e0tlz10prh] { font-size: 12.2px; margin: 12px 0 0; }

/* La leyenda del papel. Va arriba y siempre visible —también en un acta cerrada—: quien la lee meses
   después no tiene por qué saber qué querían decir esas dos letras. */
.acta-leyenda[b-e0tlz10prh] {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px dotted var(--line);
    font-size: 12.4px; color: var(--ink-2);
}
.acta-leyenda span[b-e0tlz10prh] { display: inline-flex; align-items: center; gap: 7px; }
.acta-leyenda .lg[b-e0tlz10prh] {
    width: 24px; height: 24px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 800; color: #FFF;
}
.acta-leyenda .lg.b[b-e0tlz10prh] { background: var(--info, #3A6EA5); }
.acta-leyenda .lg.m[b-e0tlz10prh] { background: var(--red, #EF3340); }
.acta-sello .sep[b-e0tlz10prh] { margin: 0 7px; opacity: .5; }

.chip-mal[b-e0tlz10prh] {
    margin-left: 10px; padding: 2px 9px; border-radius: 999px;
    background: rgb(239 51 64 / .12); color: var(--red, #EF3340);
    font-size: 11px; font-weight: 700;
}

.err-list[b-e0tlz10prh] { margin: 6px 0 0; padding-left: 18px; font-size: 12.6px; line-height: 1.55; }
.msg > .res[b-e0tlz10prh] { flex: 1 1 auto; min-width: 0; }
.res-t[b-e0tlz10prh] { font-weight: 700; }
/* /Components/Pages/Ventas/ClientesPanel.razor.rz.scp.css */
/* Padrón de clientes. Lo que la pantalla tiene que dejar claro es una sola cosa: si el cliente YA existe. */

.chk[b-mqmpw8pujn] { display: inline-flex; align-items: center; gap: 7px; font-size: 12.8px; color: var(--ink-2); white-space: nowrap; }

/* La CSF llena el alta de un tirón; va arriba del formulario porque es el primer movimiento, no un extra. */
.cli-csf[b-mqmpw8pujn] {
    border: 1px dashed var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--neutral-bg, #EFEDEA);
}
.cli-csf-t[b-mqmpw8pujn] { font-size: 12.6px; font-weight: 700; }
.cli-csf-s[b-mqmpw8pujn] { font-size: 12px; color: var(--ink-3); margin: 3px 0 9px; }

/* El aviso de RFC repetido. Naranja y no rojo: no es un error todavía —el vendedor puede estar buscando a ese
   mismo cliente— y lo que hace falta es el atajo para abrirlo, no un regaño. */
.cli-dup[b-mqmpw8pujn] {
    margin-top: 7px; padding: 8px 11px; border-radius: 9px;
    background: var(--warn-bg, #FAF0DC); color: #8a5a10;
    font-size: 12.4px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.chip-ppal[b-mqmpw8pujn] {
    margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    background: rgb(58 110 165 / .14); color: var(--info, #3A6EA5);
    font-size: 10.5px; font-weight: 700;
}

/* La fila de alta de contactos: seis campos cortos que caben en un renglón y se rompen con orden. */
.cli-con[b-mqmpw8pujn] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .cli-con[b-mqmpw8pujn] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cli-con[b-mqmpw8pujn] { grid-template-columns: 1fr; } }

/* El CP no es parte del domicilio: es la otra mitad de la llave fiscal, y la pista lo dice donde se captura. */
.cli-hint[b-mqmpw8pujn] { font-size: 11.4px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }

/* Un cliente sin CP no se puede facturar. Se marca en la lista en vez de descubrirlo al timbrar. */
.cli-falta[b-mqmpw8pujn] {
    padding: 1px 8px; border-radius: 999px;
    background: var(--warn-bg, #FAF0DC); color: #8a5a10;
    font-size: 10.5px; font-weight: 700; font-family: inherit;
}
/* /Components/Pages/Ventas/VentaPromociones.razor.rz.scp.css */
.vp-tope[b-6y7eejhxcm] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 9px 12px; border-radius: 10px;
    background: var(--neutral-bg); font-size: 12.5px; margin-bottom: 10px; }
.vp-tope.fuera[b-6y7eejhxcm] { background: var(--warn-bg, #FFF4D6); }
.vp-tope-l[b-6y7eejhxcm] { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.vp-aviso[b-6y7eejhxcm] { display: inline-flex; align-items: center; gap: 5px; color: #8A6100; font-weight: 600; }
.vp-aviso[b-6y7eejhxcm]  svg, .vp-aviso svg[b-6y7eejhxcm] { width: 15px; height: 15px; }
.vp-lista[b-6y7eejhxcm] { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.vp-r[b-6y7eejhxcm] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.vp-r code[b-6y7eejhxcm] { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; }
.vp-n[b-6y7eejhxcm] { flex: 1; min-width: 0; color: var(--ink-2); }
.vp-r b[b-6y7eejhxcm] { font-variant-numeric: tabular-nums; }
.vp-tot[b-6y7eejhxcm] { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--neutral-bg); font-size: 13px; }
.vp-add[b-6y7eejhxcm] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vp-add select[b-6y7eejhxcm], .vp-add input[b-6y7eejhxcm] { height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--card);
    color: var(--ink); font: 13px var(--font); padding: 0 10px; }
.vp-add select[b-6y7eejhxcm] { flex: 1 1 260px; }
.vp-add input[type=number][b-6y7eejhxcm] { width: 130px; }
.vp-add input:not([type])[b-6y7eejhxcm] { flex: 1 1 180px; }
/* /Components/Pages/Ventas/VentasPanel.razor.rz.scp.css */
/* Venta al cliente final. El alta se ve como lo que es: dos listas donde se PICA una unidad y un cliente, no
   dos desplegables — el vendedor reconoce el VIN y el nombre de un vistazo, y un select los esconde. */

.vta-picks[b-k68mape7xj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
    max-height: 240px;
    overflow: auto;
}

.vta-pick[b-k68mape7xj] {
    display: flex; flex-direction: column; gap: 2px;
    text-align: left; cursor: pointer;
    padding: 9px 12px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); color: var(--ink);
    font-family: inherit; font-size: 12.6px;
}
.vta-pick:hover[b-k68mape7xj] { border-color: var(--ink-3); }
.vta-pick.on[b-k68mape7xj] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.vta-pick .strong[b-k68mape7xj] { font-weight: 700; }
.vta-pick .mono[b-k68mape7xj] { font-family: var(--font-mono); }
.vta-pick .sub[b-k68mape7xj] { color: var(--ink-3); font-size: 11.8px; }
.vta-pick .pr[b-k68mape7xj] { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; }

/* La cabecera de la ficha: las tres cosas que definen la venta, sin tener que leer el formulario. */
.vta-cab[b-k68mape7xj] {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line); border-radius: var(--radius, 14px);
    background: var(--neutral-bg, #EFEDEA);
}
@media (max-width: 760px) { .vta-cab[b-k68mape7xj] { grid-template-columns: 1fr; } }

.vta-cab .k[b-k68mape7xj] {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 4px;
}
.vta-cab .strong[b-k68mape7xj] { font-weight: 700; }
.vta-cab .mono[b-k68mape7xj] { font-family: var(--font-mono); }
.vta-cab .muted[b-k68mape7xj] { font-size: 12px; color: var(--ink-3); }

/* El total no se captura, se calcula: se pinta como dato y no como campo para que nadie lo busque para
   escribirlo. */
.vta-total[b-k68mape7xj] {
    height: 38px; display: flex; align-items: center;
    font-size: 17px; font-weight: 800; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

/* Lo que falta para poder entregar. Va ARRIBA de la tabla de documentos, que es donde se resuelve. */
.vta-faltan[b-k68mape7xj] {
    margin-bottom: 10px; padding: 9px 12px; border-radius: 9px;
    background: var(--warn-bg, #FAF0DC); color: #8a5a10;
    font-size: 12.4px; line-height: 1.5;
}

.chip-req[b-k68mape7xj], .chip-libre[b-k68mape7xj] {
    display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
}
.chip-req[b-k68mape7xj]   { background: rgb(239 51 64 / .12); color: var(--red, #EF3340); }
.chip-libre[b-k68mape7xj] { background: var(--neutral-bg, #EFEDEA); color: var(--ink-3); }

.vta-subir[b-k68mape7xj] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .vta-subir[b-k68mape7xj] { grid-template-columns: 1fr; } }

.err-list[b-k68mape7xj] { margin: 6px 0 0; padding-left: 18px; font-size: 12.6px; line-height: 1.55; }
.msg > .res[b-k68mape7xj] { flex: 1 1 auto; min-width: 0; }
.res-t[b-k68mape7xj] { font-weight: 700; }

/* ── el resultado de una carga ─────────────────────────────────────────────── */
/* .msg es un flex row con align-items:center. Todo el bloque de resultado va como UN hijo y por dentro se
   maqueta solo; si no, cada número y cada separador se vuelve una celda del flex y la línea se desalinea. */
.res-stats[b-k68mape7xj] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.res-stats .st[b-k68mape7xj] {
    display: inline-flex; flex-direction: column; gap: 1px;
    padding: 6px 11px; border-radius: 9px;
    background: rgb(255 255 255 / .55);
    min-width: 74px;
}
html.theme-dark .res-stats .st[b-k68mape7xj] { background: rgb(255 255 255 / .07); }

.res-stats .st i[b-k68mape7xj] {
    font-style: normal; font-size: 10px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; opacity: .72;
}
.res-stats .st b[b-k68mape7xj] { font-size: 16px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* El único contador que pide acción se marca; los demás son informativos. */
.res-stats .st.warn b[b-k68mape7xj] { color: var(--red, #EF3340); }

/* ── el aviso de por qué la lista es corta ────────────────────────────────── */
/* Va ANTES de la lista, no después: la pregunta «¿por qué no está mi VIN?» aparece al mirarla, y una nota al
   pie llega tarde. */
.vta-nota[b-k68mape7xj] {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 12px; padding: 9px 12px; border-radius: 9px;
    background: var(--warn-bg, #FAF0DC); color: #8a5a10;
    font-size: 12.4px; line-height: 1.45;
}
.vta-nota[b-k68mape7xj]  svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Buscar y dar de alta, en el mismo renglón: son las dos salidas del mismo momento. */
.vta-cli-bar[b-k68mape7xj] { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; flex-wrap: wrap; }
.vta-cli-bar .finput[b-k68mape7xj] { flex: 1 1 260px; min-width: 0; }

/* El alta en línea. Enmarcada para que se lea como un desvío del que se vuelve, no como otra pantalla. */
.vta-alta[b-k68mape7xj] {
    border: 1px solid var(--line); border-radius: var(--radius, 14px);
    padding: 14px 16px; margin-top: 8px;
}
.vta-alta-h[b-k68mape7xj] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-2);
    padding-bottom: 8px; margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.vta-alta-h .btn[b-k68mape7xj] { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* El alta en línea reusa el vocabulario visual del catálogo de clientes. Se repite aquí porque el CSS de
   Blazor es POR COMPONENTE: las reglas de ClientesPanel no alcanzan a este marcado. */
.cli-csf[b-k68mape7xj] {
    border: 1px dashed var(--line); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 14px;
    background: var(--neutral-bg, #EFEDEA);
}
.cli-csf-t[b-k68mape7xj] { font-size: 12.6px; font-weight: 700; }
.cli-csf-s[b-k68mape7xj] { font-size: 12px; color: var(--ink-3); margin: 3px 0 9px; }

.cli-dup[b-k68mape7xj] {
    margin-top: 7px; padding: 8px 11px; border-radius: 9px;
    background: var(--warn-bg, #FAF0DC); color: #8a5a10;
    font-size: 12.4px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.cli-hint[b-k68mape7xj] { font-size: 11.4px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }

/* ── la ficha, más ancha y menos vertical ─────────────────────────────────── */
/* Los datos de la venta son cortos: en una columna se comían media ficha y dejaban el expediente —que sí
   crece con los documentos obligatorios— fuera de la vista. Cuatro por renglón, y NO todo en uno: las
   observaciones siguen ocupando el ancho completo porque son prosa. */
.vta-datos[b-k68mape7xj] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
@media (max-width: 900px) { .vta-datos[b-k68mape7xj] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vta-datos[b-k68mape7xj] { grid-template-columns: 1fr; } }
.vta-datos .col-2[b-k68mape7xj] { grid-column: span 2; }
.vta-datos .col-3[b-k68mape7xj] { grid-column: 1 / -1; }

/* Un botón pegado al campo de arriba se lee como parte de él. */
.vta-guardar[b-k68mape7xj] { margin-top: 14px; }

/* Las acciones de un renglón van en fila: apiladas parecen dos renglones distintos. */
.acts[b-k68mape7xj] { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }

/* ── el rango de fechas ───────────────────────────────────────────────────── */
.rango[b-k68mape7xj] { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rango label[b-k68mape7xj] { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.rango input[type=date][b-k68mape7xj] {
    height: 34px; padding: 0 8px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--card); color: var(--ink);
    font-size: 12.6px; font-family: inherit;
}

/* ── contadores dentro del segmento ───────────────────────────────────────── */
/* El número que decide si vale la pena entrar a un estatus se lee donde se pulsa, no en otra tarjeta. */
.seg-cuenta[b-k68mape7xj] { margin-bottom: 14px; flex-wrap: wrap; }
.seg-cuenta .n[b-k68mape7xj] {
    margin-left: 6px; padding: 0 6px; border-radius: 999px;
    background: rgb(128 128 128 / .18);
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.seg-cuenta button.on .n[b-k68mape7xj] { background: rgb(255 255 255 / .22); }

/* La ficha a dos columnas usa .ocsplit/.ocflow/.ocdata, que son GLOBALES (app.css) y las mismas de la Orden de
   Compra — a propósito: el proceso se lee igual en las dos pantallas. Aquí sólo se corrige lo que cambia por
   estar dentro de un diálogo más ancho. */

/* Dentro del split, la primera sección de datos ya no necesita el filete superior: la columna la separa. */
.ocsplit > .ocdata > .vta-cab[b-k68mape7xj] { margin-top: 0; }

/* El bloque de subida es el último de la columna de datos; sin este respiro queda pegado al borde del
   diálogo cuando la línea de tiempo es más alta que los datos. */
.vta-subir-fin[b-k68mape7xj] { margin-bottom: 4px; }

/* Autorizar / rechazar en línea: la confirmación aparece en el pie de la ficha, sin otra ventana encima. */
.vta-resolver[b-k68mape7xj] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.vta-resolver textarea[b-k68mape7xj] { flex: 1 1 320px; min-height: 38px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px;
    font: 13px var(--font); background: var(--card); color: var(--ink); }
.vta-resolver span[b-k68mape7xj] { font-size: 13px; font-weight: 600; }