/* _content/Distribuidora.Web/Components/Comunes/BotonGoogle.razor.rz.scp.css */
/* El botón sigue las pautas de marca de Google: fondo blanco, borde gris, texto
   oscuro y el logo a la izquierda. No se le pone el verde de Rutín a propósito. */
.btn-google[b-0baqt6969v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background-color: #fff;
    border: 1px solid #dadce0;
    color: #3c4043;
    font-weight: 500;
    padding: .55rem 1rem;
}

    .btn-google:hover[b-0baqt6969v] {
        background-color: #f8f9fa;
        border-color: #d2d5d9;
        color: #3c4043;
    }

.logo-google[b-0baqt6969v] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Separador con la palabra "o" centrada sobre una línea. */
.separador[b-0baqt6969v] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.1rem 0;
    color: #6c757d;
    font-size: .875rem;
}

    .separador[b-0baqt6969v]::before,
    .separador[b-0baqt6969v]::after {
        content: "";
        flex: 1;
        border-top: 1px solid #dee2e6;
    }
/* _content/Distribuidora.Web/Components/Comunes/CobroQr.razor.rz.scp.css */
/* ============================================================
   Cobro con QR / transferencia de Mercado Pago.

   Se mira desde dos lados: el cajero de frente y el cliente del otro lado del
   mostrador. Por eso el total va arriba y grande (lo primero que se chequea) y
   el QR ocupa todo el ancho útil, con un tope en píxeles para que en una PC no
   quede gigante y en una tablet se lea sin acercarse.

   El QR es SVG y escala sin perder nitidez. Va sobre blanco puro y con margen
   blanco alrededor: las billeteras lo leen peor sobre color.

   Colores: variables de admin.css (paleta clara de marca). Verde de marca para
   esperar y para PAGADO; coral para "cobrado y sin registrar", que es el cartel
   que no se puede pasar por alto.
   ============================================================ */

.cq[b-0wb758brjj] {
    position: fixed;
    inset: 0;
    z-index: 50;             /* por encima del pad y del comprobante */
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow-y: auto;
    background: rgba(23, 52, 43, .72);
}

.cq-caja[b-0wb758brjj] {
    width: 100%;
    max-width: 30rem;
    margin-block: auto;
    padding: 1.1rem 1.2rem 1.3rem;
    text-align: center;
    background: var(--surface, #fff);
    border: 2px solid var(--linea, #E2ECE7);
    border-radius: var(--r, 16px);
    box-shadow: var(--sh-lg, 0 20px 40px -24px rgba(23, 52, 43, .28));
}

.cq-esperando[b-0wb758brjj] { border-color: var(--v, #22A47F); }
.cq-ok[b-0wb758brjj] { border-color: var(--v2, #1A8060); }
.cq-mal[b-0wb758brjj] { border-color: var(--coral, #D6452F); }
.cq-frio[b-0wb758brjj] { border-color: var(--muted, #5A6E64); }

/* ---------- Encabezado: el total es lo más grande de la pantalla ---------- */

.cq-et[b-0wb758brjj] {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted, #5A6E64);
}

.cq-total[b-0wb758brjj] {
    margin: .1rem 0 .7rem;
    font-size: clamp(2.3rem, 9vw, 3.2rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--tinta, #17342B);
}

/* ---------- El QR ---------- */

.cq-qr[b-0wb758brjj] {
    background: #fff;
    border: 1px solid var(--linea, #E2ECE7);
    border-radius: 12px;
    padding: .75rem;
    margin-inline: auto;
    /* Lo más grande que entre SIN que la caja necesite scroll, que es lo que
       hace falta para que se lea del otro lado del mostrador.
       Lo que se resta es lo medido alrededor del QR (total, los dos textos, el
       reloj y el botón: 360 px con mouse, 370 con dedo) más el aire del velo.
       El mínimo de 9rem evita que en una pantalla muy baja el cálculo lo deje
       en cero; ahí la caja scrollea, que es mejor que un QR invisible.
       Medido: 342 px de lado en 1366×768, 358 en 1024×768, 454 en 820×1180. */
    max-width: min(26rem, max(9rem, calc(100vh - 23rem)));
}

    /* El ancho del atributo que escribe la biblioteca lo pisa esto.
       Va con ::deep porque el SVG entra como marcado crudo y no lleva el
       atributo de aislamiento: sin ::deep la regla no lo alcanza y el QR sale
       con su tamaño interno (450 px), desbordando la caja. */
    .cq-qr[b-0wb758brjj]  svg {
        display: block;
        width: 100%;
        height: auto;
        /* Los módulos son cuadrados perfectos: sin suavizado se leen mejor. */
        shape-rendering: crispEdges;
    }

.cq-sin-qr[b-0wb758brjj] {
    margin: 0;
    padding: 1.5rem .5rem;
    font-weight: 600;
    color: var(--coral-txt, #8E2A1B);
}

.cq-pedido[b-0wb758brjj] {
    margin: .7rem 0 0;
    font-size: 1rem;
    color: var(--muted, #5A6E64);
}

/* ---------- Que se vea que está trabajando ---------- */

.cq-espera[b-0wb758brjj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .9rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--verde-txt, #14614A);
}

.cq-reloj[b-0wb758brjj] {
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--papel, #F4F8F6);
    border: 1px solid var(--linea, #E2ECE7);
    font-variant-numeric: tabular-nums;
}

/* El pulso late por CSS: si el circuito se traba, el cajero igual ve
   movimiento y no una pantalla muerta. */
.cq-pulso[b-0wb758brjj] {
    width: .8rem;
    height: .8rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--v, #22A47F);
    animation: cq-latir-b-0wb758brjj 1.1s ease-in-out infinite;
}

@keyframes cq-latir-b-0wb758brjj {
    0%, 100% { transform: scale(.75); opacity: .55; }
    50% { transform: scale(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cq-pulso[b-0wb758brjj] { animation-duration: 3s; }
}

.cq-latido[b-0wb758brjj] {
    margin: .35rem 0 0;
    font-size: .85rem;
    color: var(--muted, #5A6E64);
}

.cq-aviso[b-0wb758brjj] {
    margin: .7rem 0 0;
    padding: .55rem .7rem;
    text-align: left;
    border-radius: 10px;
    background: #FDF6E7;
    border: 1px solid #F0DCA8;
    color: var(--ambar-txt, #8A5B06);
    font-size: .92rem;
}

/* ---------- Resultados ---------- */

.cq-pagado[b-0wb758brjj],
.cq-alarma[b-0wb758brjj] {
    margin: 0 0 .2rem;
    padding: .55rem .5rem;
    border-radius: 12px;
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff;
}

/* Verde oscuro de marca: con texto blanco da 4.88:1. */
.cq-pagado[b-0wb758brjj] { background: var(--v2, #1A8060); }

.cq-alarma[b-0wb758brjj] {
    background: var(--coral, #D6452F);
    font-size: clamp(1.15rem, 5vw, 1.5rem);
    line-height: 1.2;
}

.cq-detalle[b-0wb758brjj] {
    margin: .3rem 0 0;
    font-size: 1rem;
    color: var(--tinta, #17342B);
}

.cq-motivo[b-0wb758brjj] {
    margin: .5rem 0 0;
    font-size: .88rem;
    color: var(--muted, #5A6E64);
    overflow-wrap: anywhere;
}

/* ---------- Botones ---------- */

.cq-botones[b-0wb758brjj] {
    display: flex;
    gap: 10px;
    margin-top: 1.1rem;
}

    .cq-botones .btn[b-0wb758brjj] {
        flex: 1;
        min-height: 3.4rem;
        font-size: 1.05rem;
        font-weight: 600;
    }

/* Dedo, no mouse: todo lo que se toca, más grande. Los botones crecen, así que
   el QR tiene un poco menos de alto disponible. */
@media (pointer: coarse) {
    .cq-caja[b-0wb758brjj] { max-width: 34rem; }
    .cq-qr[b-0wb758brjj] { max-width: min(30rem, max(9rem, calc(100vh - 24rem))); }
    .cq-botones .btn[b-0wb758brjj] { min-height: 4rem; }
}

/* Pantalla muy baja (una notebook chica en horizontal): se recortan los textos
   que no hacen falta antes que el QR, que es lo que el cliente tiene que ver.
   El pulso y el reloj se quedan: son los que muestran que el sistema trabaja. */
@media (max-height: 620px) {
    .cq-total[b-0wb758brjj] { font-size: clamp(1.7rem, 5vw, 2.1rem); margin-bottom: .3rem; }
    .cq-latido[b-0wb758brjj] { display: none; }
    .cq-pedido[b-0wb758brjj] { font-size: .9rem; margin-top: .4rem; }
}
/* _content/Distribuidora.Web/Components/Comunes/GraficoBarras.razor.rz.scp.css */
.grafico[b-w8mwtkcg9n] {
    width: 100%;
}

.grafico-svg[b-w8mwtkcg9n] {
    width: 100%;
    height: 150px;
    display: block;
}

.grafico-eje[b-w8mwtkcg9n] {
    stroke: #d6ded3;
    stroke-width: 0.4;
    vector-effect: non-scaling-stroke;
}

.grafico-barra[b-w8mwtkcg9n] {
    fill: #1a8060;
    transition: fill .12s;
}

.grafico-barra:hover[b-w8mwtkcg9n] {
    fill: #12563f;
}

.grafico-pie[b-w8mwtkcg9n] {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: #6b7a6c;
    margin-top: 2px;
}
/* _content/Distribuidora.Web/Components/Comunes/PadNumerico.razor.rz.scp.css */
/* Teclado numérico del mostrador. Teclas de 64 px: se tocan con el dedo, de
   parado, sin mirar. Los colores salen de las variables del panel (admin.css). */

.pad[b-7eh0w90kt5] {
    width: 100%;
    max-width: 24rem;
}

.pad-caja[b-7eh0w90kt5] {
    background: var(--surface);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--sh-lg);
    padding: 1rem;
}

.pad-titulo[b-7eh0w90kt5] {
    margin: 0 0 .5rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted);
    font-weight: 700;
}

.pad-valor[b-7eh0w90kt5] {
    margin: 0;
    padding: .55rem .8rem;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 12px;
    color: var(--tinta);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: right;
    letter-spacing: -.01em;
}

/* El equivalente en la otra unidad ("= 1,3 kg"): se lee de reojo contra la
   balanza, así que va pegado al número grande y en verde. */
.pad-equivalente[b-7eh0w90kt5] {
    margin: .25rem 0 0;
    color: var(--verde-txt);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: right;
}

.pad-ayuda[b-7eh0w90kt5] {
    margin: .4rem 0 0;
    color: var(--muted);
    font-size: .85rem;
}

.pad-teclas[b-7eh0w90kt5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: .8rem;
}

    .pad-teclas button[b-7eh0w90kt5] {
        min-height: 4rem;
        background: var(--surface);
        border: 2px solid var(--linea);
        border-radius: 12px;
        color: var(--tinta);
        font-size: 1.55rem;
        font-weight: 700;
        cursor: pointer;
        /* El toque no tiene que seleccionar el número de la tecla. */
        user-select: none;
    }

        .pad-teclas button:active[b-7eh0w90kt5] {
            background: rgba(34, 164, 127, .12);
            border-color: var(--v);
        }

.pad-borrar[b-7eh0w90kt5] { color: var(--ambar-txt) !important; border-color: var(--ambar-txt) !important; }

/* Sin coma quedan 10 teclas + borrar: el 0 ocupa el lugar que dejó la coma, en
   vez de dejar un hueco al lado del borrar. */
.pad-enteros .pad-teclas button:nth-child(10)[b-7eh0w90kt5] { grid-column: span 2; }

.pad-botones[b-7eh0w90kt5] {
    display: flex;
    gap: 10px;
    margin-top: .8rem;
}

    .pad-botones .btn[b-7eh0w90kt5] {
        flex: 1;
        min-height: 3.5rem;
        font-size: 1.05rem;
    }
/* _content/Distribuidora.Web/Components/Layout/AdminLayout.razor.rz.scp.css */
/* Shell del panel: navegación ARRIBA, tema oscuro (modelo 4) con las secciones
   separadas por líneas verticales (estilo 11). Reemplaza a la barra lateral.

   La paleta del panel vive en admin.css, bajo .admin. Acá va solo la estructura
   del shell, que es lo que cambió. */

.admin[b-lnp6w9g00l] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------------- Barra superior ---------------- */
.admin-top[b-lnp6w9g00l] {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 18px;
    height: 58px;
    background: var(--barra);
    color: var(--barra-txt);
    box-shadow: 0 1px 0 0 var(--barra-linea), 0 6px 18px -12px rgba(0, 0, 0, .55);
}

.admin-brand[b-lnp6w9g00l] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    text-decoration: none;
    color: inherit;
}

.admin-brand-mark[b-lnp6w9g00l] {
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #2CB68C, #159068);
    color: #fff; font-weight: 800; font-size: .95rem;
}

.admin-brand-text[b-lnp6w9g00l] { font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }
.admin-brand-text b[b-lnp6w9g00l] { font-weight: 800; }

/* ---------------- Secciones ---------------- */
.admin-nav[b-lnp6w9g00l] {
    display: flex;
    align-items: center;
    /* Sin gap: la separación la hacen las líneas, no el espacio. */
    gap: 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .admin-nav[b-lnp6w9g00l]::-webkit-scrollbar { display: none; }

/* Las reglas de .admin-link viven en admin.css y NO acá: este archivo es CSS
   scopeado y el scope no alcanza al <a> que genera el componente NavLink, así
   que los links salían pegados y subrayados. */

/* ---------------- Derecha ---------------- */
.admin-top-right[b-lnp6w9g00l] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.admin-user[b-lnp6w9g00l] { display: flex; align-items: center; gap: 9px; }

.admin-avatar[b-lnp6w9g00l] {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #2CB68C, #159068);
    color: #fff; font-weight: 700; font-size: .85rem;
}

.admin-user-name[b-lnp6w9g00l] { font-size: .85rem; font-weight: 600; opacity: .9; }

/* ---------------- Cuerpo ---------------- */
.admin-main[b-lnp6w9g00l] {
    flex: 1;
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding: 18px 20px 48px;
}

.admin-crumb[b-lnp6w9g00l] {
    display: flex; align-items: center; gap: 7px;
    font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: 10px;
}

.admin-crumb-sep[b-lnp6w9g00l] { opacity: .5; }
.admin-section[b-lnp6w9g00l] { color: var(--v); }

/* ---------------- Pantallas chicas ---------------- */
@media (max-width: 900px) {
    .admin-top[b-lnp6w9g00l] {
        height: auto;
        flex-wrap: wrap;
        padding: 10px 14px;
        row-gap: 8px;
    }

    /* Las secciones bajan a su propia fila y se deslizan de costado: antes que
       esconderlas tras una hamburguesa, que suma un toque para llegar. */
    .admin-nav[b-lnp6w9g00l] {
        order: 3;
        width: 100%;
        border-top: 1px solid var(--barra-linea);
        padding-top: 6px;
    }

    .admin-user-name[b-lnp6w9g00l] { display: none; }
    .admin-main[b-lnp6w9g00l] { padding: 14px 14px 40px; }
}

@media (max-width: 480px) {
    .admin-brand-text[b-lnp6w9g00l] { display: none; }
    .admin-tienda[b-lnp6w9g00l] { display: none; }
}

/* Aviso de error del circuito: oculto hasta que Blazor lo muestre. Faltaba en el
   layout del admin y quedaba siempre visible abajo de todo. */
#blazor-error-ui[b-lnp6w9g00l] {
    background: lightyellow;
    color: #222;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-lnp6w9g00l] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/Distribuidora.Web/Components/Layout/LayoutPublico.razor.rz.scp.css */
.publico[b-1kd8g9oj1i] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #fff;
}

.barra[b-1kd8g9oj1i] {
    background: linear-gradient(90deg, #1A8060 0%, #22A47F 100%);
    color: #fff;
}

/* El logo es lo que identifica al negocio: va en grande, no como un detalle. */
.marca[b-1kd8g9oj1i] {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0.35rem;
}

.isotipo[b-1kd8g9oj1i] {
    width: 2.5rem;
    height: 2.5rem;
    display: block;
    /* Es el mismo isotipo del pack de marca, en blanco y con la ruta calada:
       funciona sobre el verde de la barra sin recortes raros. */
}

.marca-texto[b-1kd8g9oj1i] {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.marca-suave[b-1kd8g9oj1i] {
    font-weight: 400;
    opacity: 0.9;
}

@media (min-width: 768px) {
    .isotipo[b-1kd8g9oj1i] {
        width: 3.1rem;
        height: 3.1rem;
    }

    .marca-texto[b-1kd8g9oj1i] {
        font-size: 1.8rem;
    }
}

.acciones[b-1kd8g9oj1i] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.acciones .enlace[b-1kd8g9oj1i] {
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
}

    .acciones .enlace:hover[b-1kd8g9oj1i] {
        text-decoration: underline;
        color: #fff;
    }

/* El botón de salir es un formulario (FormSalir): se ve igual que los enlaces. */
.acciones[b-1kd8g9oj1i]  .btn-salir {
    background: none;
    border: 0;
    padding: 0;
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
}

    .acciones[b-1kd8g9oj1i]  .btn-salir:hover {
        text-decoration: underline;
    }

.acciones[b-1kd8g9oj1i]  .btn-light {
    color: #1A8060;
    font-weight: 600;
    border-color: transparent;
}

main[b-1kd8g9oj1i] {
    flex: 1;
}

.pie[b-1kd8g9oj1i] {
    background-color: #F4F8F6;
    border-top: 1px solid #DCE9E3;
    color: #4B665C;
}

#blazor-error-ui[b-1kd8g9oj1i] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-1kd8g9oj1i] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/Distribuidora.Web/Components/Layout/LayoutTienda.razor.rz.scp.css */
.tienda[b-xotjp1jebo] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--rutin-papel);
}

/* ---------- Barra ---------- */
.barra[b-xotjp1jebo] {
    position: sticky;
    top: 0;
    z-index: 30;
    background: linear-gradient(90deg, #1A8060 0%, #22A47F 100%);
    color: #fff;
    box-shadow: var(--rutin-sh-md);
}

.barra-caja[b-xotjp1jebo] {
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 1rem;
    height: var(--rutin-barra);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.marca[b-xotjp1jebo] {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
}

.isotipo[b-xotjp1jebo] {
    width: 2rem;
    height: 2rem;
    display: block;
}

.marca-texto[b-xotjp1jebo] {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* En el celular el nombre sobra: el isotipo ya identifica, y el espacio
   que libera es el que necesita el importe del carrito. */
@media (max-width: 575.98px) {
    .marca-texto[b-xotjp1jebo] {
        display: none;
    }
}

/* ---------- Secciones ---------- */
.secciones[b-xotjp1jebo] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.seccion[b-xotjp1jebo] {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.4rem 0.7rem;
    border-radius: 9px;
    white-space: nowrap;
}

    .seccion:hover[b-xotjp1jebo] {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.12);
    }

/* NavLink marca sola la sección donde estás parado. */
.seccion.active[b-xotjp1jebo] {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.18);
}

.derecha[b-xotjp1jebo] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.btn-ingresar[b-xotjp1jebo] {
    color: var(--rutin-verde-oscuro);
    font-weight: 700;
}

/* En pantallas chicas las secciones bajan a una fila propia abajo de la barra:
   antes que apretujar todo o esconderlo detrás de una hamburguesa, que suma
   un toque extra para llegar al catálogo. */
@media (max-width: 767.98px) {
    .barra-caja[b-xotjp1jebo] {
        flex-wrap: wrap;
        height: auto;
        padding-block: 0.5rem;
    }

    .secciones[b-xotjp1jebo] {
        order: 3;
        width: 100%;
        gap: 0.35rem;
        padding-top: 0.15rem;
    }

    .seccion[b-xotjp1jebo] {
        flex: 1;
        text-align: center;
    }
}

/* ---------- Carrito ---------- */
.carrito-pill[b-xotjp1jebo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #fff;
    color: var(--rutin-verde-oscuro);
    text-decoration: none;
    padding: 0.35rem 0.8rem 0.35rem 0.65rem;
    border-radius: 999px;
    box-shadow: var(--rutin-sh-sm);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

    .carrito-pill:hover[b-xotjp1jebo] {
        color: var(--rutin-verde-oscuro);
        transform: translateY(-1px);
        box-shadow: var(--rutin-sh-md);
    }

    /* Vacío no compite por atención: se apaga sobre el verde de la barra. */
    .carrito-pill.vacio[b-xotjp1jebo] {
        background-color: rgba(255, 255, 255, 0.16);
        color: #fff;
        box-shadow: none;
    }

.carrito-ico[b-xotjp1jebo] {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--ico-carrito) no-repeat center / contain;
    mask: var(--ico-carrito) no-repeat center / contain;
    --ico-carrito: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
}

.carrito-texto[b-xotjp1jebo] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.carrito-titulo[b-xotjp1jebo] {
    font-weight: 800;
    font-size: 0.95rem;
}

.carrito-sub[b-xotjp1jebo] {
    font-size: 0.68rem;
    opacity: 0.75;
    font-weight: 600;
}

/* ---------- Menú de cuenta ---------- */
.menu-cuenta[b-xotjp1jebo] {
    position: relative;
    flex: none;
}

    .menu-cuenta summary[b-xotjp1jebo] {
        list-style: none;
        cursor: pointer;
    }

        .menu-cuenta summary[b-xotjp1jebo]::-webkit-details-marker {
            display: none;
        }

.avatar[b-xotjp1jebo] {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
}

.menu-panel[b-xotjp1jebo] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 12rem;
    background-color: #fff;
    border: 1px solid var(--rutin-linea);
    border-radius: 12px;
    box-shadow: var(--rutin-sh-lg);
    padding: 0.6rem;
}

.menu-nombre[b-xotjp1jebo] {
    margin: 0 0 0.5rem;
    padding: 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--rutin-tinta);
    word-break: break-word;
}

.menu-panel[b-xotjp1jebo]  .menu-salir {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 8px;
    padding: 0.45rem 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--rutin-coral);
    cursor: pointer;
}

    .menu-panel[b-xotjp1jebo]  .menu-salir:hover {
        background-color: var(--rutin-coral-piso);
    }

/* ---------- Cuerpo ---------- */
.cuerpo[b-xotjp1jebo] {
    flex: 1;
    max-width: 1400px;
    width: 100%;
    margin-inline: auto;
    padding: 1.25rem 1rem 3rem;
}

#blazor-error-ui[b-xotjp1jebo] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-xotjp1jebo] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ---------- Vista previa del admin ---------- */
.sello-previa[b-xotjp1jebo] {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #FFE9A8;
    border: 1px solid rgba(255, 233, 168, 0.55);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

.volver-panel[b-xotjp1jebo] {
    background-color: #fff;
    color: var(--rutin-verde-oscuro);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    box-shadow: var(--rutin-sh-sm);
    white-space: nowrap;
}

    .volver-panel:hover[b-xotjp1jebo] {
        color: var(--rutin-verde-oscuro);
        box-shadow: var(--rutin-sh-md);
    }

@media (max-width: 575.98px) {
    .sello-previa[b-xotjp1jebo] {
        display: none;
    }
}
/* _content/Distribuidora.Web/Components/Pages/Admin/AdminPrecios.razor.rz.scp.css */
/* ============================================================
   Precios de venta al público (costo del bulto → precio por kilo).

   Mismo criterio que el punto de venta: tema CLARO de marca (variables de
   admin.css: fondo humo, tarjetas blancas, texto tinta, verde en los bordes),
   nada escondido detrás del mouse y, con puntero grueso (tablet), todo lo que
   se toca mide 56 px o más.

   Anchos: la tabla entra entera en 1366x768 y en 1024x768 se desplaza sola
   dentro de su contenedor (.table-responsive), sin romper el resto.
   ============================================================ */

.pr-titulo[b-k3b95swjc4] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pr-sub[b-k3b95swjc4] {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: .85rem;
}

.pr-aviso[b-k3b95swjc4] {
    border: 1px solid #F2DFAE;
    background: rgba(217, 147, 26, .12);
    color: var(--ambar-txt);
    border-radius: 10px;
    padding: .5rem .8rem;
    font-size: .85rem;
}

/* ---------- Barra de herramientas ---------- */
.pr-barra[b-k3b95swjc4] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.pr-campo[b-k3b95swjc4] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
}

.pr-campo > span[b-k3b95swjc4] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 700;
}

.pr-campo select[b-k3b95swjc4] { min-width: 9rem; }
.pr-buscar[b-k3b95swjc4] { max-width: 18rem; }

.pr-cuenta[b-k3b95swjc4] {
    margin-left: auto;
    color: var(--muted);
    font-size: .82rem;
}

/* Secciones: el fresco se cobra por kilo, el almacén por unidad. Son dos
   cuentas distintas, así que son dos tablas y no una con filas raras. */
.pr-tabs[b-k3b95swjc4] {
    display: flex;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 4px;
}

.pr-tabs button[b-k3b95swjc4] {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    border-radius: 9px;
    padding: .4rem .7rem;
    font-size: .85rem;
    font-weight: 600;
}

.pr-tabs button span[b-k3b95swjc4] {
    font-size: .72rem;
    font-weight: 700;
    background: var(--papel);
    border-radius: 999px;
    padding: 0 .4rem;
}

.pr-tabs button.activa[b-k3b95swjc4] {
    background: rgba(34, 164, 127, .1);
    border-color: var(--v2);
    color: var(--verde-txt);
}

/* ---------- Margen en masa ---------- */
.pr-masivo[b-k3b95swjc4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--v2);
    border-radius: 12px;
    padding: .6rem .9rem .7rem;
    margin-bottom: 12px;
}

.pr-masivo-accion[b-k3b95swjc4] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pr-masivo-accion > span[b-k3b95swjc4] {
    font-size: .85rem;
    font-weight: 700;
    color: var(--tinta);
}

.pr-masivo-campo[b-k3b95swjc4] { width: 7rem; }

.pr-masivo-ayuda[b-k3b95swjc4] {
    margin: 0;
    font-size: .76rem;
    color: var(--muted);
}

/* ---------- Tabla ---------- */
.pr-tabla[b-k3b95swjc4] { font-size: .88rem; }

.pr-tabla th[b-k3b95swjc4] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    white-space: nowrap;
}

/* Encabezado de DOS filas: arriba la lista (Minorista / Mayorista) y abajo sus
   columnas. El thead de admin.css es pegajoso con top:0; si las dos filas se
   pegaran ahí, la segunda taparía a la primera. Por eso la primera tiene alto
   fijo y la segunda se pega justo debajo. */
.pr-tabla thead tr:first-child th[b-k3b95swjc4] { height: 3rem; }
.pr-tabla thead tr:last-child th[b-k3b95swjc4] { top: 3rem; z-index: 1; }

/* El grupo de cada lista, separado del de al lado con una línea vertical: con
   dos listas pegadas no se sabe de cuál es cada columna. */
.pr-grupo[b-k3b95swjc4] {
    border-left: 2px solid var(--linea);
    color: var(--tinta);
    font-size: .78rem;
}

.pr-grupo-como[b-k3b95swjc4] {
    display: block;
    text-transform: none;
    letter-spacing: 0;
    font-size: .64rem;
    font-weight: 600;
    color: var(--muted);
}

.pr-tabla td[b-k3b95swjc4] { vertical-align: middle; }

.pr-meta[b-k3b95swjc4] {
    display: block;
    font-size: .72rem;
    color: var(--muted);
}

.pr-presentacion[b-k3b95swjc4] { font-size: .8rem; }

/* Angostos a propósito: con dos listas hay cinco campos por renglón y el ancho
   se va rápido. Entran cinco dígitos, que es lo que se carga. */
.pr-plata[b-k3b95swjc4] { width: 8rem; margin-left: auto; }
.pr-margen[b-k3b95swjc4] { width: 5.6rem; margin-left: auto; }
.pr-kilos[b-k3b95swjc4] { width: 5rem; margin-left: auto; }

/* Dato de apoyo (el precio exacto, la fecha del costo): se lee, no se toca. */
.pr-dato[b-k3b95swjc4] {
    display: block;
    font-size: .68rem;
    color: var(--muted);
    margin-top: .1rem;
}

.pr-calculado[b-k3b95swjc4] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--tinta);
}

/* El revendedor pierde plata con estos precios: se grita. */
.pr-calculado.mal[b-k3b95swjc4] { color: var(--coral-txt); font-weight: 800; }

.pr-precio[b-k3b95swjc4] {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1rem;
    color: var(--verde-txt);
}

/* Por debajo del costo: se vende perdiendo plata. Se grita. */
.pr-precio.bajo[b-k3b95swjc4] { color: var(--coral-txt); }

.pr-vacio[b-k3b95swjc4] { color: var(--coral-txt); font-weight: 700; }

/* La fila sin datos se marca al costado, no se esconde: hay que verla para
   saber qué falta cargar. */
.pr-tabla tr.pr-incompleta > td:first-child[b-k3b95swjc4] { box-shadow: inset 3px 0 0 0 var(--ambar); }

.pr-pastilla[b-k3b95swjc4] {
    display: inline-block;
    border: 1px solid;
    border-radius: 999px;
    padding: 0 .45rem;
    font-size: .66rem;
    font-weight: 700;
    white-space: nowrap;
    margin-left: .3rem;
}

.pr-pastilla.ambar[b-k3b95swjc4] { color: var(--ambar-txt); border-color: #F2DFAE; background: rgba(217, 147, 26, .12); }
button.pr-pastilla:hover[b-k3b95swjc4] { border-color: var(--v); color: var(--verde-txt); background: rgba(34, 164, 127, .12); }
.pr-pastilla.verde[b-k3b95swjc4] { color: var(--verde-txt); border-color: #a9dcc6; background: rgba(34, 164, 127, .1); }
.pr-pastilla.roja[b-k3b95swjc4] { color: var(--coral-txt); border-color: #F3C9C1; background: rgba(214, 69, 47, .1); }

/* Cotización del proveedor, debajo del costo: referencia, y con un toque la
   copia al campo. */
.pr-proveedor[b-k3b95swjc4] {
    display: block;
    margin: .15rem 0 0 auto;
    border: 1px dashed var(--linea);
    background: var(--surface);
    border-radius: 8px;
    padding: .1rem .4rem;
    font-size: .68rem;
    color: var(--muted);
    text-align: right;
    max-width: 100%;
}

.pr-proveedor:hover[b-k3b95swjc4] { border-color: var(--v); color: var(--verde-txt); }

/* ---------- Resumen previo a publicar ----------
   Es un diálogo por encima de la tabla: lo que se va a cobrar se lee antes de
   confirmar, no se descubre scrolleando. */
.pr-telon[b-k3b95swjc4] {
    position: fixed;
    inset: 0;
    background: rgba(23, 52, 43, .45);
    z-index: 1040;
}

.pr-resumen[b-k3b95swjc4] {
    position: fixed;
    z-index: 1041;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(48rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--surface);
    border: 2px solid var(--v2);
    border-radius: var(--r);
    padding: .9rem 1.1rem 1rem;
    box-shadow: var(--sh-lg);
}

.pr-resumen-titulo[b-k3b95swjc4] { font-size: 1.05rem; margin: 0 0 .2rem; }

.pr-resumen-alcance[b-k3b95swjc4] {
    font-size: .8rem;
    color: var(--muted);
    margin: 0 0 .6rem;
}

.pr-resumen-cifras[b-k3b95swjc4] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: .7rem;
}

.pr-cifra[b-k3b95swjc4] {
    border: 1px solid var(--linea);
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .8rem;
    color: var(--muted);
    background: var(--papel);
}

.pr-cifra strong[b-k3b95swjc4] { color: var(--tinta); font-size: .95rem; }
.pr-cifra.roja[b-k3b95swjc4] { color: var(--coral-txt); border-color: #F3C9C1; background: rgba(214, 69, 47, .08); }
.pr-cifra.roja strong[b-k3b95swjc4] { color: var(--coral-txt); }

/* La lista de cambios tiene su propio scroll: con 117 productos, si no, el
   botón de confirmar se va a tres pantallas de distancia. */
.pr-resumen-tabla[b-k3b95swjc4] {
    max-height: 17rem;
    overflow-y: auto;
    border: 1px solid var(--linea);
    border-radius: 10px;
}

.pr-resumen-tabla table[b-k3b95swjc4] { margin-bottom: 0; font-size: .85rem; }

.pr-resumen-afuera[b-k3b95swjc4] {
    margin: .6rem 0 0;
    font-size: .8rem;
    color: var(--muted);
}

.pr-confirmar[b-k3b95swjc4] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .7rem 0 0;
    border: 1px solid #F3C9C1;
    background: rgba(214, 69, 47, .07);
    border-radius: 10px;
    padding: .5rem .7rem;
    font-size: .85rem;
    color: var(--coral-txt);
}

.pr-resumen-botones[b-k3b95swjc4] {
    display: flex;
    gap: 10px;
    margin-top: .8rem;
    flex-wrap: wrap;
}

/* ---------- Barra de acciones ---------- */
.pr-pie[b-k3b95swjc4] {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: .6rem .9rem;
    margin-top: 12px;
    box-shadow: var(--sh-md);
}

.pr-pie-info[b-k3b95swjc4] { font-size: .88rem; color: var(--muted); }
.pr-pie .btn:nth-last-of-type(2)[b-k3b95swjc4] { margin-left: auto; }

/* ---------- Táctil ----------
   Media query de PUNTERO y no de ancho: una tablet horizontal mide lo mismo
   que una notebook y se opera con el dedo. 56 px es el mínimo. */
@media (pointer: coarse) {
    .pr-tabla input[b-k3b95swjc4],
    .pr-tabla .input-group-text[b-k3b95swjc4],
    .pr-tabs button[b-k3b95swjc4],
    .pr-barra select[b-k3b95swjc4],
    .pr-barra input[b-k3b95swjc4],
    .pr-masivo input[b-k3b95swjc4],
    .pr-masivo .input-group-text[b-k3b95swjc4],
    .pr-masivo .btn[b-k3b95swjc4],
    .pr-pie .btn[b-k3b95swjc4],
    .pr-resumen-botones .btn[b-k3b95swjc4] {
        min-height: 56px;
        font-size: 1rem;
    }

    /* Los dos atajos secundarios (copiar el costo del proveedor y confirmar los
       kilos) van a 44 px y no a 56: son ayudas, no la operación, y a 56 cada
       renglón de la tabla pasaría de 110 px. Lo que se opera —los campos y los
       botones de guardar y publicar— sí está en 56. */
    .pr-proveedor[b-k3b95swjc4] { min-height: 44px; padding: .4rem; }
    button.pr-pastilla[b-k3b95swjc4] { min-height: 44px; padding-inline: .8rem; }
    .pr-tabla td[b-k3b95swjc4] { padding-top: .5rem; padding-bottom: .5rem; }
    .pr-plata[b-k3b95swjc4] { width: 9.5rem; }
    .pr-margen[b-k3b95swjc4] { width: 7rem; }
    .pr-kilos[b-k3b95swjc4] { width: 6rem; }
}

/* La presentación solo se duplica cuando su columna se esconde. */
.pr-presentacion-chica[b-k3b95swjc4] { display: none; }

/* Con las dos listas al mismo tiempo la tabla tiene nueve columnas, así que el
   corte es alto: ya en una notebook de 1366 hay que esconder Presentación para
   que entre "al revendedor", que es la columna con la que se decide el precio
   mayorista. La presentación pasa al renglón del producto, al lado del rubro. */
@media (max-width: 1500px) {
    /* Solo la celda de Presentación: la del encabezado de arriba y la del
       cuerpo. La SEGUNDA fila del encabezado es otra cosa (ahí la segunda celda
       es "Precio por kilo") y esconderla descolocaba las dos listas. */
    .pr-tabla thead tr:first-child th:nth-child(2)[b-k3b95swjc4],
    .pr-tabla tbody td:nth-child(2)[b-k3b95swjc4] { display: none; }
    .pr-presentacion-chica[b-k3b95swjc4] { display: inline; }
}

@media (max-width: 900px) {
    .pr-cuenta[b-k3b95swjc4] { margin-left: 0; }
    .pr-buscar[b-k3b95swjc4] { max-width: 100%; }
    .pr-pie .btn:nth-last-of-type(2)[b-k3b95swjc4] { margin-left: 0; }
}
/* _content/Distribuidora.Web/Components/Pages/Admin/AdminVenta.razor.rz.scp.css */
/* ============================================================
   Punto de venta de mostrador. Se usa en PC y en tablet.

   LAYOUT
   ≥ 1024 px (PC y tablet horizontal): dos columnas. Buscador y resultados a la
       izquierda, ticket fijo a la derecha (sticky), con su propio scroll.
   < 1024 px (tablet vertical y celular): una columna. Resultados arriba, ticket
       abajo, y una barra FIJA al pie con el total y Cobrar, que no se pierde al
       hacer scroll.

   TÁCTIL
   Con puntero grueso (tablet) todo lo que se toca mide 56 px o más y se separa
   para no errarle con el dedo. Es una media query de puntero y no de ancho: una
   tablet horizontal mide lo mismo que una notebook y se opera distinto.

   Nada se esconde detrás del mouse: no hay información que aparezca solo al
   pasar por encima. El hover es decoración.

   Colores: variables de admin.css (paleta CLARA de marca, ver MOTION.md).
   Fondo humo, tarjetas blancas, texto tinta y el verde de marca en los bordes.
   Todo par de colores está verificado a 4.5:1 (texto) y 3:1 (bordes e iconos).
   ============================================================ */

.pv[b-3yq279fqm0] {
    outline: none;            /* el contenedor es focusable solo para los atajos */
    /* Lo que tapa la barra fija del pie, para que el final del ticket no quede
       debajo. En pantalla ancha no hay barra y vale 0 (ver más abajo). */
    --pie: 5.5rem;
    padding-bottom: var(--pie);
}

.pv-titulo[b-3yq279fqm0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

    .pv-titulo h1[b-3yq279fqm0] {
        font-size: 1.6rem;
        margin: 0;
    }

.pv-titulo-acciones[b-3yq279fqm0] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Los atajos, discretos pero a la vista: el cajero nuevo los necesita una
   semana y después no los mira más. */
.pv-teclas[b-3yq279fqm0] {
    color: var(--muted);
    font-size: .78rem;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

    .pv-teclas kbd[b-3yq279fqm0] {
        background: var(--surface);
        border: 1px solid var(--linea);
        border-bottom-width: 2px;
        border-radius: 6px;
        padding: 0 .3rem;
        color: var(--tinta);
        font-size: .72rem;
        font-family: inherit;
        font-weight: 700;
        margin-right: .2rem;
    }

/* Cobro a ciegas: el aviso más importante de la pantalla. */
.pv-alarma[b-3yq279fqm0] {
    background: rgba(217, 147, 26, .12);
    border: 2px solid var(--ambar-txt);
    border-radius: var(--r);
    padding: .85rem 1rem;
    margin-bottom: 12px;
    color: var(--ambar-txt);
    line-height: 1.45;
}

    .pv-alarma b[b-3yq279fqm0] { color: var(--tinta); }

    .pv-alarma strong[b-3yq279fqm0] { display: block; font-size: 1.05rem; margin-bottom: .2rem; }

.pv-cuerpo[b-3yq279fqm0] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

/* ---------------- Buscador ---------------- */
.pv-lupa-caja[b-3yq279fqm0] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1.5px solid var(--linea);
    border-radius: 14px;
    padding: 0 .9rem;
    position: sticky;
    top: 56px;                /* justo debajo de la barra del panel */
    z-index: 6;
    box-shadow: var(--sh-md);
}

    .pv-lupa-caja:focus-within[b-3yq279fqm0] {
        border-color: var(--v);
        box-shadow: 0 0 0 .22rem rgba(52, 197, 149, .35);
    }

.pv-lupa[b-3yq279fqm0] {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    fill: none;
    stroke: var(--v2);
    stroke-width: 2;
    stroke-linecap: round;
}

.pv-input[b-3yq279fqm0] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--tinta);
    font-size: 1.2rem;
    font-weight: 600;
    padding: .95rem 0;
}

    .pv-input[b-3yq279fqm0]::placeholder { color: var(--muted); font-weight: 500; }

    /* La X nativa del type=search no se ve sobre fondo oscuro: ponemos la nuestra. */
    .pv-input[b-3yq279fqm0]::-webkit-search-cancel-button { display: none; }

.pv-borrar[b-3yq279fqm0] {
    flex: none;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
    padding: .6rem;
    border-radius: 10px;
    cursor: pointer;
}

    .pv-borrar:hover[b-3yq279fqm0] { color: var(--coral-txt); background: rgba(214, 69, 47, .1); }

.pv-pie-buscador[b-3yq279fqm0] {
    color: var(--muted);
    font-size: .85rem;
    margin: .55rem .2rem .7rem;
}

.pv-vacio-busqueda[b-3yq279fqm0], .pv-t-vacio[b-3yq279fqm0] {
    background: var(--surface);
    border: 1px dashed var(--linea);
    border-radius: var(--r);
    padding: 1.4rem 1.1rem;
    color: var(--muted);
    text-align: center;
}

    .pv-vacio-busqueda strong[b-3yq279fqm0], .pv-t-vacio strong[b-3yq279fqm0] {
        display: block;
        color: var(--tinta);
        margin-bottom: .25rem;
    }

/* ---------------- Resultados ----------------
   Lo esencial y nada más: un punto de color con el estado del stock, el nombre
   y el precio final a la derecha. El detalle (cuánto hay) se lee solo en el
   renglón resaltado o bajo el cursor — con 198 renglones, mostrarlo en todos
   era ruido y obligaba a un renglón del doble de alto.

   El renglón ENTERO es el botón: fondo al apoyar el mouse y cursor de mano. En
   táctil, además, lleva un "+" explícito (ver el comentario del .razor). */
.pv-resultados[b-3yq279fqm0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pv-res[b-3yq279fqm0] {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--linea);
    border-radius: 9px;
    padding: .34rem .7rem;
    color: var(--tinta);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

    .pv-res:hover:not(:disabled)[b-3yq279fqm0] {
        background: rgba(34, 164, 127, .07);
        border-color: var(--v);
    }

    .pv-res:focus-visible[b-3yq279fqm0],
    /* El marcado con las flechas se ve igual que el que tiene el foco: en PC se
       navega con el teclado y hay que saber cuál va a agregar Enter. */
    .pv-res.elegido[b-3yq279fqm0] {
        outline: none;
        background: rgba(34, 164, 127, .07);
        border-color: var(--v);
        box-shadow: 0 0 0 .14rem rgba(52, 197, 149, .4);
    }

    /* Sin precio o sin stock: se ve, no se toca. */
    .pv-res.apagado[b-3yq279fqm0] { opacity: .55; cursor: default; }

/* El punto de estado. Es un objeto gráfico: los tonos son los oscuros de cada
   familia, porque los plenos no llegan a 3:1 sobre blanco (el ámbar da 2.58).
   El dato también va en texto en .pv-res-detalle, así que no es el único canal. */
.pv-punto[b-3yq279fqm0] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

.pv-punto.ok[b-3yq279fqm0]   { background: var(--v2); }
.pv-punto.poco[b-3yq279fqm0] { background: var(--ambar-txt); }
.pv-punto.sin[b-3yq279fqm0]  { background: var(--coral); }

.pv-res-nombre[b-3yq279fqm0] {
    font-weight: 600;
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Se atenúa con opacity y NO con display:none: así sigue en el árbol de
   accesibilidad y un lector de pantalla lo anuncia igual. */
.pv-res-detalle[b-3yq279fqm0] {
    color: var(--muted);
    font-size: .72rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s ease;
}

.pv-res:hover .pv-res-detalle[b-3yq279fqm0],
.pv-res.elegido .pv-res-detalle[b-3yq279fqm0] { opacity: 1; }

/* El precio final, que es lo que el cajero lee. */
.pv-res-precio[b-3yq279fqm0] {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--tinta);
    white-space: nowrap;
}

.pv-sin-precio[b-3yq279fqm0] {
    font-size: .78rem;
    font-weight: 700;
    color: var(--ambar-txt);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pv-res-mas[b-3yq279fqm0] {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(34, 164, 127, .12);
    color: var(--v2);
    font-size: 1.2rem;
    font-weight: 700;
}

.pv-res.apagado .pv-res-mas[b-3yq279fqm0] { visibility: hidden; }

/* La cantidad con su unidad, al lado del precio del renglón. */
.pv-r-cant-txt[b-3yq279fqm0] { white-space: nowrap; }

/* ---------------- Ticket ---------------- */
.pv-ticket[b-3yq279fqm0] {
    background: var(--surface);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--sh-md);
    padding: .9rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    /* El ancla de la barra del pie cae acá: que no quede tapado por la barra
       pegajosa del panel. */
    scroll-margin-top: 4.5rem;
}

.pv-t-cab[b-3yq279fqm0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .pv-t-cab h2[b-3yq279fqm0] { font-size: 1.2rem; margin: 0; }

.pv-t-cuenta[b-3yq279fqm0] {
    color: var(--muted);
    font-size: .82rem;
    margin-right: auto;
}

.pv-t-vaciar[b-3yq279fqm0], .pv-cerrar[b-3yq279fqm0] {
    background: var(--surface);
    border: 2px solid var(--coral);
    color: var(--coral-txt);
    font-size: .85rem;
    font-weight: 600;
    padding: .45rem .7rem;
    border-radius: 10px;
    cursor: pointer;
}

    .pv-t-vaciar:hover[b-3yq279fqm0], .pv-cerrar:hover[b-3yq279fqm0] { background: var(--coral-txt); border-color: var(--coral-txt); color: #fff; }

.pv-etiqueta[b-3yq279fqm0] {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: .3rem;
}

.pv-campo[b-3yq279fqm0] { margin: 0; min-width: 0; }

.pv-dos[b-3yq279fqm0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 10px;
}

/* Segmentado de lista y botones de medio de pago: misma pieza, dos usos. */
.pv-segmentado[b-3yq279fqm0], .pv-medios[b-3yq279fqm0] {
    display: grid;
    gap: 6px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 4px;
}

.pv-segmentado[b-3yq279fqm0] { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.pv-medios[b-3yq279fqm0] { grid-template-columns: 1fr 1fr; }

    .pv-segmentado button[b-3yq279fqm0], .pv-medios button[b-3yq279fqm0] {
        min-height: 2.9rem;
        background: transparent;
        border: 0;
        border-radius: 9px;
        color: var(--muted);
        font-weight: 700;
        font-size: .95rem;
        padding: .6rem .4rem;
        cursor: pointer;
        transition: background .14s ease, color .14s ease;
    }

        .pv-segmentado button:hover[b-3yq279fqm0], .pv-medios button:hover[b-3yq279fqm0] {
            color: var(--v2);
            background: rgba(34, 164, 127, .09);
        }

        .pv-segmentado button[aria-pressed="true"]:hover[b-3yq279fqm0],
        .pv-medios button[aria-pressed="true"]:hover[b-3yq279fqm0] { color: #fff; background: var(--v); }

        /* Lo elegido va LLENO de verde con texto blanco: la lista activa y el
           medio de pago son dos de las tres cosas que tienen que saltar a la
           vista (la tercera es Cobrar). Verde oscuro y no el principal porque
           el texto es chico y necesita 4.5:1. */
        .pv-segmentado button[aria-pressed="true"][b-3yq279fqm0], .pv-medios button[aria-pressed="true"][b-3yq279fqm0] {
            background: var(--v2);
            color: #fff;
            box-shadow: var(--sh-sm);
        }

        .pv-segmentado button:disabled[b-3yq279fqm0], .pv-medios button:disabled[b-3yq279fqm0] { opacity: .6; cursor: default; }

.pv-renglones[b-3yq279fqm0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pv-renglon[b-3yq279fqm0] {
    background: var(--surface);
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: .6rem .7rem;
}

.pv-r-arriba[b-3yq279fqm0], .pv-r-abajo[b-3yq279fqm0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Envuelve: con el dedo, el control de cantidad y Quitar ya ocupan el ancho del
   ticket, así que el equivalente en kilos se va solo al renglón de abajo en vez
   de comerse el botón de +. */
.pv-r-abajo[b-3yq279fqm0] { margin-top: .5rem; justify-content: space-between; flex-wrap: wrap; }

.pv-r-nombre[b-3yq279fqm0] {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 1.02rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-r-sub[b-3yq279fqm0] { font-weight: 800; font-size: 1.05rem; }

.pv-r-precio[b-3yq279fqm0] { margin: .15rem 0 0; color: var(--muted); font-size: .8rem; }

.pv-cant[b-3yq279fqm0] {
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border: 2px solid var(--v);
    border-radius: 11px;
    overflow: hidden;
}

    /* Solo + y −: el valor del medio es .pv-cant-valor y tiene su propio ancho.
       Sin el :not, esta regla le gana por especificidad cuando el valor es un
       botón (tablet) y el número queda apretado contra el +. */
    .pv-cant button:not(.pv-cant-valor)[b-3yq279fqm0] {
        width: 2.8rem;
        background: transparent;
        border: 0;
        color: var(--v2);
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
    }

        .pv-cant button:hover:not(:disabled)[b-3yq279fqm0] { background: rgba(34, 164, 127, .1); color: var(--v2); }
        .pv-cant button:disabled[b-3yq279fqm0] { opacity: .35; cursor: default; }

/* El mismo tamaño lo use un input (PC) o un botón que abre el pad (tablet). */
.pv-cant-valor[b-3yq279fqm0] {
    width: 4.4rem;
    min-height: 2.8rem;
    text-align: center;
    background: transparent;
    border: 0;
    border-inline: 2px solid var(--linea);
    outline: none;
    color: var(--tinta);
    font: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    padding: .45rem 0;
    cursor: text;
}

button.pv-cant-valor[b-3yq279fqm0] { cursor: pointer; }

/* "= 1,3 kg" al lado del campo: la cantidad se teclea en gramos y esto es lo
   que se mira contra la balanza. Es un dato, no un control: no se toca. */
.pv-cant-eq[b-3yq279fqm0] {
    flex: none;
    margin-right: auto;
    color: var(--verde-txt);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
}

    .pv-cant-valor:focus-visible[b-3yq279fqm0] {
        box-shadow: inset 0 0 0 .14rem rgba(52, 197, 149, .55);
    }

.pv-quitar[b-3yq279fqm0] {
    flex: none;
    display: flex;
    align-items: center;
    gap: .35rem;
    background: var(--surface);
    border: 2px solid var(--coral);
    border-radius: 11px;
    color: var(--coral-txt);
    font-weight: 600;
    font-size: .85rem;
    padding: .5rem .7rem;
    min-height: 2.8rem;
    cursor: pointer;
}

    .pv-quitar:hover[b-3yq279fqm0] { background: var(--coral-txt); border-color: var(--coral-txt); color: #fff; }

/* El texto va SIEMPRE visible, no solo cuando sobra lugar: el ✕ es decorativo
   (aria-hidden) y si se esconde el texto, el botón se queda sin nombre para un
   lector de pantalla. Y un ✕ solo, en un mostrador, se toca por error. */
.pv-quitar-txt[b-3yq279fqm0] { white-space: nowrap; }

/* ---------------- Cierre: descuento, pago, total ---------------- */
.pv-cierre[b-3yq279fqm0] {
    border-top: 1px solid var(--linea);
    padding-top: .8rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

/* Input (PC) o botón que abre el pad (tablet): se ven iguales. */
.pv-valor[b-3yq279fqm0] {
    width: 100%;
    min-height: 2.9rem;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--linea);
    border-radius: 10px;
    outline: none;
    color: var(--tinta);
    font: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    padding: .55rem .75rem;
}

button.pv-valor[b-3yq279fqm0] { cursor: pointer; text-align: left; }

    .pv-valor:focus[b-3yq279fqm0], .pv-valor:focus-visible[b-3yq279fqm0] {
        border-color: var(--v);
        box-shadow: 0 0 0 .18rem rgba(52, 197, 149, .35);
    }

    .pv-valor:disabled[b-3yq279fqm0] { opacity: .6; }

.pv-vuelto[b-3yq279fqm0] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: .5rem .7rem;
    border-radius: 11px;
    background: rgba(34, 164, 127, .1);
    color: var(--verde-txt);
    font-weight: 700;
}

    .pv-vuelto strong[b-3yq279fqm0] { font-size: 1.5rem; }

    /* Pagó menos que el total: no es un vuelto, es lo que falta. */
    .pv-vuelto.falta[b-3yq279fqm0] { background: rgba(217, 147, 26, .12); color: var(--ambar-txt); }

.pv-linea[b-3yq279fqm0] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
}

/* El botón más llamativo de la pantalla. Lleva el verde PRINCIPAL de marca
   (#22A47F) y no el oscuro del resto de los botones llenos: su texto es grande
   y en negrita, así que el mínimo de contraste que le aplica es 3:1 (da 3,14) y
   queda un tono más brillante que todo lo demás. Esa diferencia es la jerarquía:
   el ojo va primero acá, después al total, después al buscador. */
/* Va con `.pv` adelante a propósito: `.admin .btn-primary` de admin.css tiene la
   misma especificidad y se carga después, así que sin esto le ganaba y el botón
   salía con el verde oscuro del resto.

   El tamaño tampoco es decorativo: 1.2rem (19.2 px) en negrita es "texto
   grande" para WCAG, y es lo que habilita el mínimo de 3:1 que cumple el verde
   principal sobre blanco (3.14:1). Si se achica, hay que cambiarle el verde. */
.pv .pv-pie-cobrar[b-3yq279fqm0] {
    background: var(--v);
    border-color: var(--v);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: 0 6px 16px -8px rgba(34, 164, 127, .8);
}

    .pv .pv-pie-cobrar:hover:not(:disabled)[b-3yq279fqm0] { background: var(--v2); border-color: var(--v2); }

/* Sin ticket no se cobra, y tiene que verse: el verde encendido sobre un botón
   que no hace nada invita a tocarlo. */
.pv .pv-pie-cobrar:disabled[b-3yq279fqm0] {
    background: var(--linea2);
    border-color: var(--linea);
    color: var(--muted);
    box-shadow: none;
    opacity: 1;
}

/* ---------------- Barra fija del pie (pantalla angosta) ---------------- */
/* El total y Cobrar viven acá en TODOS los tamaños. Es la pieza que el cajero
   mira, y dentro de la columna del ticket se le iba abajo de la pantalla en
   cuanto el ticket tenía tres renglones (probado en 1366x768). */
.pv-pie-fijo[b-3yq279fqm0] {
    display: flex;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 25;
    align-items: center;
    gap: 12px;
    padding: .7rem 1rem;
    background: var(--surface);
    border-top: 1px solid var(--linea);
    box-shadow: 0 -6px 18px -12px rgba(23, 52, 43, .35);
}

.pv-pie-et[b-3yq279fqm0] {
    display: block;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted);
    font-weight: 700;
}

.pv-pie-ir[b-3yq279fqm0] {
    color: var(--v2);
    text-decoration: none;
    font-weight: 700;
    padding: .3rem .1rem;
}

.pv-pie-n[b-3yq279fqm0] { font-size: .95rem; }

.pv-pie-total[b-3yq279fqm0] { margin-left: auto; text-align: right; }

        /* El total, en tinta y grande: es lo segundo que mira el cajero. */
    .pv-pie-total strong[b-3yq279fqm0] { font-size: 1.6rem; line-height: 1.1; color: var(--tinta); }

.pv-pie-cobrar[b-3yq279fqm0] {
    flex: none;
    font-size: 1.1rem;
    padding: .8rem 1.4rem;
}

/* ============================================================
   PC y tablet horizontal: dos columnas, ticket fijo a la derecha.
   ============================================================ */
@media (min-width: 1024px) {
    .pv-cuerpo[b-3yq279fqm0] { grid-template-columns: minmax(0, 1fr) 25rem; }

    /* El ticket entra entero en la pantalla y lo único que scrollea son los
       renglones: así el TOTAL y Cobrar quedan siempre a la vista, igual que la
       barra fija de las pantallas angostas.

       El 150px que se resta es la barra del panel (56) más la fila del título:
       es lo que hay encima del ticket cuando la página está sin scrollear, que
       es el caso en el que el ticket se pasaría de largo. */
    .pv-ticket[b-3yq279fqm0] {
        position: sticky;
        top: 56px;
        max-height: calc(100vh - 118px - var(--pie));
        overflow: hidden;
    }

        /* Los renglones son lo único elástico: el encabezado y el cierre
           conservan su alto y lo que sobra (o falta) sale de acá. */
        .pv-ticket .pv-renglones[b-3yq279fqm0] {
            flex: 1 1 auto;
            /* Un piso para que los renglones no desaparezcan nunca: el ticket
               sin renglones a la vista no sirve para nada. */
            min-height: 7rem;
            overflow-y: auto;
        }

        .pv-ticket .pv-cierre[b-3yq279fqm0] { flex: 0 0 auto; }

    /* Con mouse los botones pueden ser más chicos: los cuatro medios entran en
       una fila y el ticket gana una fila entera de alto para los renglones. */
    .pv-medios[b-3yq279fqm0] { grid-template-columns: repeat(4, 1fr); }

        .pv-medios button[b-3yq279fqm0] { font-size: .82rem; padding-inline: .2rem; }

    /* ---------- Densidad de PC ----------
       Con un mouse no hace falta reservar 56 px por cosa: lo que importa es
       cuántos productos se ven de una. Con esto entran 14 o más renglones en
       una pantalla de 1366x768, y se siguen leyendo de parado. El modo
       táctil NO se toca: va más abajo, en @media (pointer: coarse), que al ser
       posterior en el archivo le gana a todo esto. */
    .pv-titulo[b-3yq279fqm0] { margin-bottom: 8px; }

        .pv-titulo h1[b-3yq279fqm0] { font-size: 1.15rem; }

    .pv-titulo-acciones .btn[b-3yq279fqm0] { padding: .3rem .8rem; font-size: .82rem; }

    .pv-lupa-caja[b-3yq279fqm0] { border-radius: 11px; padding: 0 .75rem; }

    .pv-lupa[b-3yq279fqm0] { width: 1.15rem; height: 1.15rem; }

    .pv-input[b-3yq279fqm0] { font-size: 1rem; padding: .55rem 0; }

    .pv-pie-buscador[b-3yq279fqm0] { font-size: .78rem; margin: .35rem .2rem .45rem; }

    .pv-resultados[b-3yq279fqm0] { gap: 2px; }

    /* Un renglón de una línea: punto, nombre y precio. Con esto entran 14 o más
       en 1366x768, que es lo que se pidió. */
    .pv-res[b-3yq279fqm0] {
        min-height: 0;
        gap: 10px;
        padding: .22rem .65rem;
        border-radius: 8px;
    }

    .pv-res-nombre[b-3yq279fqm0] { font-size: .92rem; }
    .pv-res-detalle[b-3yq279fqm0] { font-size: .72rem; }
    .pv-res-precio[b-3yq279fqm0] { font-size: .98rem; }

    /* La barra de abajo: más fina, pero el total sigue siendo el número grande. */
    .pv[b-3yq279fqm0] { --pie: 3.6rem; }
    .pv-pie-fijo[b-3yq279fqm0] { padding: .4rem 1rem; }
    .pv-pie-total strong[b-3yq279fqm0] { font-size: 1.3rem; }
    .pv .pv-pie-cobrar[b-3yq279fqm0] { font-size: 1.2rem; padding: .42rem 1.4rem; }
    .pv-pie-n[b-3yq279fqm0] { font-size: .85rem; }

    /* El ticket acompaña: lo que se gana de alto son renglones a la vista. */
    .pv-ticket[b-3yq279fqm0] { padding: .7rem; gap: .6rem; }

        .pv-ticket h2[b-3yq279fqm0] { font-size: 1.05rem; }

    .pv-renglon[b-3yq279fqm0] { padding: .45rem .6rem; }
    .pv-renglones[b-3yq279fqm0] { gap: 7px; }
    .pv-r-nombre[b-3yq279fqm0] { font-size: .95rem; }
    .pv-r-sub[b-3yq279fqm0] { font-size: 1rem; }
    .pv-cant button:not(.pv-cant-valor)[b-3yq279fqm0] { width: 2.2rem; font-size: 1.25rem; }
    .pv-cant-valor[b-3yq279fqm0] { width: 3.8rem; min-height: 2.2rem; font-size: .95rem; padding: .3rem 0; }
    .pv-quitar[b-3yq279fqm0] { min-height: 2.2rem; padding: .35rem .6rem; font-size: .8rem; }
    .pv-valor[b-3yq279fqm0] { min-height: 2.3rem; font-size: .95rem; padding: .35rem .6rem; }
    .pv-segmentado button[b-3yq279fqm0], .pv-medios button[b-3yq279fqm0] { min-height: 2.3rem; }
    .pv-vuelto[b-3yq279fqm0] { padding: .35rem .6rem; }
    .pv-vuelto strong[b-3yq279fqm0] { font-size: 1.2rem; }
    .pv-cierre[b-3yq279fqm0] { padding-top: .6rem; gap: .6rem; }
    .pv-etiqueta[b-3yq279fqm0] { font-size: .64rem; margin-bottom: .2rem; }
}

/* Pantallas grandes: se aprovecha el ancho sin estirar los textos. */
@media (min-width: 1600px) {
    .pv-cuerpo[b-3yq279fqm0] { grid-template-columns: minmax(0, 1fr) 28rem; }
    .pv-res-nombre[b-3yq279fqm0] { font-size: 1.15rem; }
}

/* ============================================================
   Pantalla táctil (tablet): 56 px mínimo en todo lo que se toca.
   Es por tipo de puntero, no por ancho.
   ============================================================ */
@media (pointer: coarse) {
    /* Con controles de 56 px el ticket no entra achicado en una tablet
       horizontal: si se lo obliga, se corta. Así que en táctil el ticket crece
       lo que necesita y scrollea la página; el total ya está en la barra fija. */
    .pv-ticket[b-3yq279fqm0] {
        position: static;
        max-height: none;
        overflow: visible;
    }

        .pv-ticket .pv-renglones[b-3yq279fqm0] { overflow: visible; }

    .pv-input[b-3yq279fqm0] { padding: 1.15rem 0; font-size: 1.3rem; }

    .pv-borrar[b-3yq279fqm0] { min-width: 3.5rem; min-height: 3.5rem; font-size: 1.4rem; }

    /* El mínimo táctil son 56 px de alto, y nada más: el acolchado que sobraba
       se fue, así que entran bastantes más renglones que antes sin perder un
       milímetro de objetivo.

       CINCO columnas y no cuatro: en táctil el renglón suma el "+" (ver el
       .razor). Sin declararlo, ese quinto hijo se iba a una segunda fila de la
       grilla y el renglón quedaba del doble de alto. */
    .pv-res[b-3yq279fqm0] {
        min-height: 3.5rem;
        gap: 14px;
        padding: .35rem .8rem;
        grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    }

    .pv-resultados[b-3yq279fqm0] { gap: 8px; }

    .pv-res-nombre[b-3yq279fqm0] { font-size: 1.1rem; }
    .pv-res-detalle[b-3yq279fqm0] { font-size: .85rem; }
    .pv-res-precio[b-3yq279fqm0] { font-size: 1.2rem; }

    .pv-punto[b-3yq279fqm0] { width: 11px; height: 11px; }

    /* En táctil no hay hover: el detalle se muestra siempre. */
    .pv-res .pv-res-detalle[b-3yq279fqm0] { opacity: 1; }

    .pv-res-mas[b-3yq279fqm0] { width: 2.6rem; height: 2.6rem; font-size: 1.5rem; }

    /* +/− grandes de verdad: son los que más se tocan. */
    .pv-cant button:not(.pv-cant-valor)[b-3yq279fqm0] { width: 3.5rem; min-height: 3.5rem; font-size: 1.9rem; }
    .pv-cant-valor[b-3yq279fqm0] { width: 5.5rem; min-height: 3.5rem; font-size: 1.25rem; }

    /* El equivalente ("= 1,3 kg") baja a su propio renglón: arriba no entra sin
       achicar los +/−, y esos no se achican. Va después de Quitar (order) para
       que la primera línea quede completa: [− 1300 +] [Quitar]. */
    .pv-cant-eq[b-3yq279fqm0] { order: 1; flex-basis: 100%; margin: .15rem 0 0; text-align: right; font-size: .95rem; }

    .pv-quitar[b-3yq279fqm0] { min-height: 3.5rem; min-width: 3.5rem; justify-content: center; font-size: .95rem; }

    .pv-valor[b-3yq279fqm0] { min-height: 3.5rem; font-size: 1.2rem; }

    .pv-segmentado button[b-3yq279fqm0], .pv-medios button[b-3yq279fqm0] { min-height: 3.5rem; font-size: 1.05rem; }
    .pv-segmentado[b-3yq279fqm0], .pv-medios[b-3yq279fqm0] { gap: 8px; padding: 6px; }

    .pv-t-vaciar[b-3yq279fqm0], .pv-cerrar[b-3yq279fqm0] { min-height: 3.5rem; padding: .6rem 1rem; font-size: .95rem; }

    .pv-renglon[b-3yq279fqm0] { padding: .8rem .85rem; }
    .pv-renglones[b-3yq279fqm0] { gap: 12px; }

    .pv .pv-pie-cobrar[b-3yq279fqm0] { min-height: 3.5rem; font-size: 1.25rem; padding-inline: 1.8rem; }
    .pv-pie-ir[b-3yq279fqm0] { min-height: 3.5rem; display: flex; flex-direction: column; justify-content: center; }
    .pv-pie-fijo[b-3yq279fqm0] { padding: .8rem 1.1rem; }

    .pv-dia-venta .btn[b-3yq279fqm0] { min-height: 3.2rem; }

    /* En táctil el hover no existe: que no quede un estado pegado al tocar. */
    .pv-res:hover:not(:disabled)[b-3yq279fqm0] { border-color: var(--linea); }
}

/* ============================================================
   Celular. No es el lugar donde se va a usar el mostrador, pero tiene que
   servir: el renglón se parte en dos filas para que el nombre del producto se
   lea entero en vez de salir cortado a tres letras.
   ============================================================ */
@media (max-width: 599px) {
    /* El nombre se parte en dos líneas antes que salir cortado a tres letras, y
       el detalle se va: en 390 px no entra sin apretar el nombre. */
    .pv-res[b-3yq279fqm0] { gap: 8px; }

    .pv-res-nombre[b-3yq279fqm0] { white-space: normal; line-height: 1.2; }

    .pv-res-detalle[b-3yq279fqm0] { display: none; }

    .pv-res-mas[b-3yq279fqm0] { display: none; }

    .pv-pie-fijo[b-3yq279fqm0] { gap: 8px; padding-inline: .7rem; }
    .pv-pie-total strong[b-3yq279fqm0] { font-size: 1.35rem; }
}

/* ---------------- Modales (pad, comprobante y día) ---------------- */
.pv-modal[b-3yq279fqm0] {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: start center;
    padding: 1rem;
    overflow-y: auto;
    /* Velo verde oscuro de marca, no un negro plano. */
    background: rgba(23, 52, 43, .55);
}

/* El pad va pegado abajo: en una tablet el pulgar llega ahí, no al centro. */
.pv-modal-pad[b-3yq279fqm0] { place-items: end center; }

.pv-modal-caja[b-3yq279fqm0] {
    width: 100%;
    max-width: 32rem;
    background: var(--surface);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--sh-lg);
    padding: 1.1rem;
    margin-block: auto;
}

.pv-dia[b-3yq279fqm0] { max-width: 48rem; }

/* Confirmación de una pesada grande (más de 50 kg en un renglón). Angosto y
   centrado: es una pregunta de sí o no, con el número bien grande. */
.pv-confirmar[b-3yq279fqm0] { max-width: 24rem; text-align: center; }

    .pv-confirmar h2[b-3yq279fqm0] {
        margin: 0 0 .6rem;
        font-size: 1.5rem;
        color: var(--ambar-txt);
    }

.pv-confirmar-detalle[b-3yq279fqm0] { margin: 0 0 .5rem; font-size: 1.05rem; }

.pv-confirmar-ayuda[b-3yq279fqm0] {
    margin: 0;
    color: var(--muted);
    font-size: .85rem;
}

.pv-modal-botones[b-3yq279fqm0] {
    display: flex;
    gap: 10px;
    margin-top: 1rem;
}

    .pv-modal-botones .btn[b-3yq279fqm0] { flex: 1; min-height: 3.2rem; }

.pv-dia-cab[b-3yq279fqm0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: .9rem;
}

    .pv-dia-cab h2[b-3yq279fqm0] { font-size: 1.2rem; margin: 0; }

.pv-dia-totales[b-3yq279fqm0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 10px;
    margin-bottom: 1rem;
}

.pv-dia-kpi[b-3yq279fqm0] {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: .65rem .75rem;
}

    .pv-dia-kpi strong[b-3yq279fqm0] { display: block; font-size: 1.3rem; line-height: 1.2; }

.pv-dia-det[b-3yq279fqm0] { color: var(--muted); font-size: .76rem; }

/* Lista y no tabla: una tabla con cinco columnas en una tablet vertical obliga
   a scrollear de costado, y eso no puede pasar. */
.pv-dia-lista[b-3yq279fqm0] { list-style: none; margin: 0; padding: 0; }

.pv-dia-venta[b-3yq279fqm0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    padding: .7rem .2rem;
    border-bottom: 1px solid var(--linea);
}

    .pv-dia-venta.anulada[b-3yq279fqm0] { opacity: .6; }

.pv-dv-num[b-3yq279fqm0] { font-weight: 700; }
.pv-dv-hora[b-3yq279fqm0], .pv-dv-medio[b-3yq279fqm0] { color: var(--muted); font-size: .88rem; }
.pv-dv-total[b-3yq279fqm0] { font-weight: 800; font-size: 1.1rem; margin-left: auto; }

.pv-dv-acciones[b-3yq279fqm0] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.pv-sello-anulada[b-3yq279fqm0] {
    color: var(--coral-txt);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* ============================================================
   Cobro con QR / transferencia de Mercado Pago.
   La pantalla del QR vive en su propio componente (CobroQr.razor.css); lo que
   queda acá es lo que pasa en la pantalla del mostrador.
   ============================================================ */

/* Cinco medios de pago: dos por fila, y si el último queda solo ocupa el ancho
   completo en vez de dejar un hueco. */
.pv-medios button:last-child:nth-child(odd)[b-3yq279fqm0] { grid-column: 1 / -1; }

/* La alarma de "entró un pago y no hay venta" es más grave que la de
   "no sabemos si la venta entró": coral en vez de ámbar. */
.pv-alarma-grave[b-3yq279fqm0] {
    background: rgba(214, 69, 47, .10);
    border-color: var(--coral);
    color: var(--coral-txt);
}

    .pv-alarma-grave b[b-3yq279fqm0], .pv-alarma-grave em[b-3yq279fqm0] { color: var(--tinta); }

    .pv-alarma-grave span[b-3yq279fqm0] { display: block; margin-block: .2rem; }

.pv-alarma-cerrar[b-3yq279fqm0] {
    margin-top: .5rem;
    min-height: 2.4rem;
    padding: .3rem .9rem;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 9px;
    color: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* Aviso al anular una venta cobrada por Mercado Pago: la plata no vuelve sola. */
.pv-dv-nota[b-3yq279fqm0] {
    flex: 1 0 100%;
    padding: .5rem .65rem;
    border-radius: 10px;
    background: rgba(214, 69, 47, .08);
    border: 1px solid var(--coral);
    color: var(--coral-txt);
    font-size: .88rem;
    line-height: 1.4;
}

/* Cobros del día que entraron y no llegaron a venta. */
.pv-dia-pendientes[b-3yq279fqm0] {
    margin-bottom: 1rem;
    padding: .8rem .9rem;
    border: 2px solid var(--coral);
    border-radius: 12px;
    background: rgba(214, 69, 47, .07);
    color: var(--coral-txt);
}

    .pv-dia-pendientes strong[b-3yq279fqm0] { display: block; margin-bottom: .5rem; font-size: 1rem; }

    .pv-dia-pendientes ul[b-3yq279fqm0] { list-style: none; margin: 0; padding: 0; }

    .pv-dia-pendientes li[b-3yq279fqm0] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem .8rem;
        padding: .5rem 0;
        border-top: 1px solid rgba(214, 69, 47, .25);
        color: var(--tinta);
    }

        .pv-dia-pendientes li .btn[b-3yq279fqm0] { margin-left: auto; min-height: 2.8rem; }

.pv-dp-id[b-3yq279fqm0] { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }

.pv-dp-motivo[b-3yq279fqm0] { flex: 1 0 100%; font-size: .85rem; color: var(--coral-txt); }

.pv-dp-ayuda[b-3yq279fqm0] { margin: .6rem 0 0; font-size: .85rem; }
/* _content/Distribuidora.Web/Components/Pages/Catalogo.razor.rz.scp.css */
/* Los filtros quedan pegados abajo de la barra: con más de cien productos,
   volver arriba para cambiar de rubro era un scroll largo en el celular.
   El offset sale del alto de la barra, que define app.css. */
.filtros[b-91sresratf] {
    position: sticky;
    top: var(--rutin-barra);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
    padding-block: 0.6rem;
    background-color: var(--rutin-papel);
    /* Sangra hasta el borde para que nada asome por los costados al scrollear. */
    margin-inline: -1rem;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--rutin-linea);
}

/* En el celular la barra crece (las secciones bajan a su propia fila), así que
   el pegajoso se corre más abajo. */
@media (max-width: 767.98px) {
    .filtros[b-91sresratf] {
        top: 6.1rem;
    }
}

.buscador[b-91sresratf] {
    flex: 1 1 16rem;
    max-width: 24rem;
}

.rubros[b-91sresratf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Dos columnas en el celular: con más de cien productos, una sola columna
   obliga a un scroll interminable. */
.grilla[b-91sresratf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

.tarjeta[b-91sresratf] {
    box-shadow: var(--rutin-sh-sm);
    display: flex;
    flex-direction: column;
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #fff;
    transition: box-shadow 0.15s ease;
}

    .tarjeta:hover[b-91sresratf] {
        box-shadow: 0 6px 18px rgba(15, 61, 46, 0.10);
    }

    .tarjeta.apagada[b-91sresratf] {
        opacity: 0.62;
    }

.foto[b-91sresratf] {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #F1F8F5;
}

    .foto img[b-91sresratf] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Marca de agua para el producto sin foto cargada: mejor un bloque prolijo que
   el ícono de imagen rota del navegador. */
.sin-foto[b-91sresratf] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, #D8EDE4 0%, #F1F8F5 70%);
}

.cinta[b-91sresratf] {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background-color: rgba(18, 40, 31, 0.82);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 0.35rem;
}

.cuerpo[b-91sresratf] {
    display: flex;
    flex-direction: column;
    padding: 0.7rem 0.75rem 0.8rem;
    flex: 1;
}

.nombre[b-91sresratf] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #12281F;
    margin: 0 0 0.15rem;
    line-height: 1.25;
}

.unidad[b-91sresratf] {
    font-size: 0.75rem;
    color: #7A8F86;
    margin: 0 0 0.5rem;
}

.precio[b-91sresratf] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1A8060;
    margin: 0 0 0.15rem;
}

.stock[b-91sresratf] {
    font-size: 0.75rem;
    color: #7A8F86;
    margin: 0 0 0.6rem;
    /* Empuja la fila de compra al fondo para que todas las tarjetas
       terminen alineadas aunque el nombre ocupe una o dos líneas. */
    flex: 1;
}

.compra[b-91sresratf] {
    display: flex;
    gap: 0.4rem;
}

    .compra input[b-91sresratf] {
        width: 4.5rem;
    }

    .compra .btn[b-91sresratf] {
        flex: 1;
        font-weight: 600;
    }

/* Confirmación en el lugar: el botón se queda en verde oscuro un par de
   segundos en vez de volver a "Agregar" como si no hubiera pasado nada. */
.compra .btn-listo[b-91sresratf] {
    background-color: var(--rutin-verde-oscuro);
    border-color: var(--rutin-verde-oscuro);
    color: #fff;
}

@media (min-width: 576px) {
    .grilla[b-91sresratf] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 992px) {
    .grilla[b-91sresratf] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1400px) {
    .grilla[b-91sresratf] {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ---------- Vista previa del admin ---------- */
.previa[b-91sresratf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    background-color: #FFF8E6;
    border: 1px solid #F2DFAE;
    border-radius: var(--rutin-r);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.previa-texto[b-91sresratf] {
    display: flex;
    flex-direction: column;
    font-size: 0.88rem;
    color: #6B4A06;
    line-height: 1.35;
}

    .previa-texto span[b-91sresratf] {
        font-size: 0.8rem;
        opacity: 0.85;
    }

.previa-lista[b-91sresratf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #6B4A06;
}

    .previa-lista select[b-91sresratf] {
        min-width: 11rem;
    }
/* _content/Distribuidora.Web/Components/Pages/Estilos.razor.rz.scp.css */
/* ---------------- Página ---------------- */
.pagina[b-esue6fxju2] {
    min-height: 100vh;
    background: #EEF2F0;
    padding: 2rem 1rem 4rem;
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #17342B;
}

.cabecera[b-esue6fxju2] { max-width: 62rem; margin: 0 auto 2rem; }

    .cabecera h1[b-esue6fxju2] {
        font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .5rem;
    }

    .cabecera p[b-esue6fxju2] { margin: 0 0 .4rem; color: #5C6F66; line-height: 1.55; max-width: 46rem; }

.nota[b-esue6fxju2] { font-size: .88rem; }

.galeria[b-esue6fxju2] {
    max-width: 96rem; margin: 0 auto;
    display: grid; gap: 1.5rem; grid-template-columns: 1fr;
}

@media (min-width: 1100px) { .galeria[b-esue6fxju2] { grid-template-columns: repeat(2, 1fr); } }

.ficha[b-esue6fxju2] {
    background: #fff; border: 1px solid #DFE6E2; border-radius: 16px;
    padding: 1rem; box-shadow: 0 1px 2px rgba(16, 51, 42, .05);
}

.ficha-cabeza[b-esue6fxju2] { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .85rem; }
.ficha-cabeza h2[b-esue6fxju2] { font-size: 1rem; font-weight: 800; margin: 0 0 .1rem; }
.ficha-cabeza p[b-esue6fxju2] { margin: 0; font-size: .82rem; color: #6B7D74; line-height: 1.4; }

.numero[b-esue6fxju2] {
    flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: #17342B; color: #fff; font-weight: 800;
    display: grid; place-items: center; font-size: .95rem;
}

.pie[b-esue6fxju2] { max-width: 62rem; margin: 2.5rem auto 0; text-align: center; color: #5C6F66; font-weight: 600; }

/* ================= Maqueta =================
   UNA sola paleta para las veinte: acá se compara la forma, no el color. */
.estilo[b-esue6fxju2] {
    --verde: #1A8060;
    --verde2: #22A47F;
    --tinta: #17342B;
    --suave: #7A8F86;
    --linea: #E2ECE7;
    --fondo: #F4F8F6;
    --papel: #fff;

    border: 1px solid var(--linea);
    border-radius: 12px;
    overflow: hidden;
    background: var(--fondo);
    color: var(--tinta);
    font-size: 13px;
}

/* ---- Barra ---- */
.e-barra[b-esue6fxju2] {
    display: flex; align-items: center; gap: .9rem;
    padding: .6rem .85rem;
    background: var(--verde); color: #fff;
}

.e-marca[b-esue6fxju2] { display: flex; align-items: center; gap: .45rem; flex: none; }

.e-logo[b-esue6fxju2] {
    width: 1.6rem; height: 1.6rem; border-radius: 7px;
    background: rgba(255, 255, 255, .22);
    display: grid; place-items: center; font-weight: 800; font-size: .8rem;
}

.e-marca-txt[b-esue6fxju2] { font-weight: 800; letter-spacing: -.01em; }

.e-nav[b-esue6fxju2] {
    display: flex; align-items: center; gap: .2rem;
    /* Nunca en dos líneas: al partirse, la marca y la cuenta quedaban
       descolocadas y la maqueta parecía rota. Los estilos que suman ancho
       (íconos, contadores, pestañas, barra alta) achican su propio espaciado. */
    flex-wrap: nowrap;
    min-width: 0;
}

.e-link[b-esue6fxju2] {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .6rem; border-radius: 7px;
    font-weight: 600; font-size: .78rem; opacity: .82; white-space: nowrap;
}

/* Por defecto no se muestran ni íconos ni contadores: cada estilo los enciende. */
.e-ico[b-esue6fxju2], .e-cuenta[b-esue6fxju2] { display: none; }

.e-derecha[b-esue6fxju2] { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: none; }

.e-avatar[b-esue6fxju2] {
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .3);
    display: grid; place-items: center; font-weight: 800; font-size: .72rem;
}

/* ---- Cuerpo ---- */
.e-cuerpo[b-esue6fxju2] { padding: .85rem; display: grid; gap: .7rem; }

.e-kpis[b-esue6fxju2] { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }

.e-kpi[b-esue6fxju2] {
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: 10px; padding: .55rem .6rem; display: grid; gap: .1rem;
}

.e-kpi-n[b-esue6fxju2] { font-weight: 800; font-size: .95rem; color: var(--verde); }
.e-kpi-l[b-esue6fxju2] { font-size: .65rem; color: var(--suave); }

.e-botones[b-esue6fxju2] { display: flex; gap: .4rem; flex-wrap: wrap; }

.e-btn[b-esue6fxju2] {
    padding: .32rem .7rem; border-radius: 8px;
    font-weight: 700; font-size: .75rem; white-space: nowrap;
}

.e-btn-1[b-esue6fxju2] { background: var(--verde); color: #fff; }
.e-btn-2[b-esue6fxju2] { background: transparent; color: var(--verde); border: 1px solid var(--verde); }
.e-btn-3[b-esue6fxju2] { background: transparent; color: var(--suave); }
.e-barra .e-btn-2[b-esue6fxju2] { color: #fff; border-color: rgba(255, 255, 255, .45); }

.e-tabla[b-esue6fxju2] {
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: 10px; overflow: hidden;
}

.e-fila[b-esue6fxju2] {
    display: grid; grid-template-columns: 2fr 1fr .6fr; gap: .5rem;
    padding: .38rem .6rem; border-bottom: 1px solid var(--linea); font-size: .74rem;
}

    .e-fila:last-child[b-esue6fxju2] { border-bottom: 0; }

.e-encab[b-esue6fxju2] {
    background: rgba(26, 128, 96, .07);
    font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
    font-weight: 800; color: var(--suave);
}

/* ================= Formas ================= */

/* --- Dónde va la navegación --- */
.nav-izq .e-nav[b-esue6fxju2] { margin-right: auto; }
.nav-centro .e-nav[b-esue6fxju2] { margin-inline: auto; }
.nav-der .e-nav[b-esue6fxju2] { margin-left: auto; }
.nav-der .e-derecha[b-esue6fxju2] { margin-left: 0; }

/* Dos filas: la barra se parte y la navegación baja a lo ancho. */
.dos-filas .e-barra[b-esue6fxju2] { flex-wrap: wrap; row-gap: .5rem; }
.dos-filas .e-derecha[b-esue6fxju2] { margin-left: auto; }
.dos-filas .e-nav[b-esue6fxju2] {
    order: 3; width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding-top: .45rem; gap: .35rem;
}
.dos-filas .e-link[b-esue6fxju2] { font-size: .82rem; }

/* --- Cómo se marca la sección activa --- */
.marca-activa .e-link.activo[b-esue6fxju2] { background: rgba(255, 255, 255, .22); opacity: 1; }

.pestanas .e-barra[b-esue6fxju2] { padding-bottom: 0; align-items: flex-end; }
.pestanas .e-marca[b-esue6fxju2], .pestanas .e-derecha[b-esue6fxju2] { padding-bottom: .6rem; }
.pestanas .e-link[b-esue6fxju2] { border-radius: 8px 8px 0 0; padding: .38rem .5rem; font-size: .74rem; }
.pestanas .e-link.activo[b-esue6fxju2] { background: var(--fondo); color: var(--tinta); opacity: 1; }

.capsula .e-nav[b-esue6fxju2] {
    background: rgba(255, 255, 255, .16); border-radius: 999px; padding: .18rem; gap: .1rem;
}
.capsula .e-link[b-esue6fxju2] { border-radius: 999px; }
.capsula .e-link.activo[b-esue6fxju2] { background: #fff; color: var(--verde); opacity: 1; }

/* --- Altura de la barra --- */
.alta .e-barra[b-esue6fxju2] { padding: 1.05rem .95rem; }
.alta .e-logo[b-esue6fxju2] { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
.alta .e-marca-txt[b-esue6fxju2] { font-size: 1.15rem; }
.alta .e-link[b-esue6fxju2] { padding: .3rem .45rem; font-size: .74rem; }

.fina .e-barra[b-esue6fxju2] { padding: .3rem .7rem; }
.fina .e-logo[b-esue6fxju2] { width: 1.3rem; height: 1.3rem; font-size: .7rem; }
.fina .e-link[b-esue6fxju2] { padding: .18rem .45rem; font-size: .72rem; }
.fina .e-avatar[b-esue6fxju2] { width: 1.4rem; height: 1.4rem; font-size: .65rem; }

/* --- Íconos y contadores --- */
.ico-arriba .e-link[b-esue6fxju2] { flex-direction: column; gap: .05rem; padding: .25rem .55rem; }
.ico-arriba .e-ico[b-esue6fxju2] { display: block; font-size: .95rem; line-height: 1; }
.ico-arriba .e-txt[b-esue6fxju2] { font-size: .68rem; }

.ico-lado .e-ico[b-esue6fxju2] { display: inline; font-size: .8rem; }
.ico-lado .e-link[b-esue6fxju2] { padding: .3rem .42rem; font-size: .73rem; }

.contadores .e-link[b-esue6fxju2] { padding: .3rem .45rem; font-size: .74rem; }
.contadores .e-cuenta[b-esue6fxju2] {
    display: inline-grid; place-items: center;
    min-width: 1.15rem; height: 1.15rem; padding-inline: .25rem;
    border-radius: 999px; background: rgba(255, 255, 255, .28);
    font-size: .62rem; font-weight: 800;
}

.separadores .e-nav[b-esue6fxju2] { gap: 0; }
.separadores .e-link[b-esue6fxju2] { border-radius: 0; padding-inline: .6rem; }
/* .35 y no .22: con menos opacidad la línea no se distinguía del verde. */
.separadores .e-link + .e-link[b-esue6fxju2] { box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, .35); }
.separadores .e-link.activo[b-esue6fxju2] { background: rgba(255, 255, 255, .22); }

/* --- Bordes, sombras y redondeo --- */
.duro[b-esue6fxju2] { border-width: 2px; border-color: var(--tinta); border-radius: 0; }
.duro .e-kpi[b-esue6fxju2], .duro .e-tabla[b-esue6fxju2] {
    border-width: 2px; border-color: var(--tinta); border-radius: 0;
    box-shadow: 3px 3px 0 0 var(--tinta);
}
.duro .e-btn[b-esue6fxju2] { border-radius: 0; }
.duro .e-btn-1[b-esue6fxju2] { box-shadow: 2px 2px 0 0 var(--tinta); }
.duro .e-btn-2[b-esue6fxju2] { border-width: 2px; }
.duro .e-link[b-esue6fxju2] { border-radius: 0; }

.pastilla[b-esue6fxju2] { border-radius: 20px; }
.pastilla .e-kpi[b-esue6fxju2], .pastilla .e-tabla[b-esue6fxju2] { border-radius: 16px; }
.pastilla .e-btn[b-esue6fxju2], .pastilla .e-link[b-esue6fxju2] { border-radius: 999px; }
.pastilla .e-logo[b-esue6fxju2] { border-radius: 12px; }

.sin-bordes .e-kpi[b-esue6fxju2], .sin-bordes .e-tabla[b-esue6fxju2] { border: 0; }
.sin-bordes .e-fila[b-esue6fxju2] { border-bottom: 0; }
.sin-bordes .e-encab[b-esue6fxju2] { background: transparent; }
.sin-bordes .e-btn-2[b-esue6fxju2] { border-color: transparent; background: rgba(26, 128, 96, .1); }
.sin-bordes .e-cuerpo[b-esue6fxju2] { gap: 1rem; }

.tarjetas .e-cuerpo[b-esue6fxju2] { gap: .85rem; }
.tarjetas .e-kpi[b-esue6fxju2], .tarjetas .e-tabla[b-esue6fxju2] {
    border-color: transparent; box-shadow: 0 6px 18px -10px rgba(16, 51, 42, .45);
}
.tarjetas .e-kpis[b-esue6fxju2] { gap: .7rem; }

/* Bloque único: los KPIs y la tabla comparten un solo marco continuo. */
.bloque .e-cuerpo[b-esue6fxju2] { padding: 0; gap: 0; }
.bloque .e-kpis[b-esue6fxju2] {
    gap: 0; background: var(--papel); border-bottom: 1px solid var(--linea);
}
.bloque .e-kpi[b-esue6fxju2] { border: 0; border-right: 1px solid var(--linea); border-radius: 0; }
.bloque .e-kpi:last-child[b-esue6fxju2] { border-right: 0; }
.bloque .e-botones[b-esue6fxju2] { padding: .55rem .7rem; background: var(--papel); border-bottom: 1px solid var(--linea); }
.bloque .e-tabla[b-esue6fxju2] { border: 0; border-radius: 0; }

/* --- Tabla --- */
.zebra .e-fila:nth-child(even)[b-esue6fxju2] { background: rgba(26, 128, 96, .04); }

.grilla .e-fila > span + span[b-esue6fxju2] { border-left: 1px solid var(--linea); padding-left: .5rem; }
.grilla .e-fila[b-esue6fxju2] { padding-block: .3rem; }

/* --- Densidad --- */
.denso .e-cuerpo[b-esue6fxju2] { padding: .5rem; gap: .4rem; }
.denso .e-kpi[b-esue6fxju2] { padding: .3rem .4rem; }
.denso .e-kpi-n[b-esue6fxju2] { font-size: .85rem; }
.denso .e-fila[b-esue6fxju2] { padding: .2rem .45rem; font-size: .7rem; }
.denso .e-btn[b-esue6fxju2] { padding: .22rem .55rem; font-size: .7rem; }
/* _content/Distribuidora.Web/Components/Pages/Home.razor.rz.scp.css */
/* Paleta: verde de marca #22A47F, oscuro #1A8060, profundo #0F3D2E,
   tinte #F1F8F5. Texto #12281F sobre claro, #4A6459 para el cuerpo. */

.caja[b-aca3hu3lic] {
    width: 100%;
    max-width: 74rem;
    margin: 0 auto;
    padding-inline: 1.25rem;
}

/* ---------- Hero ---------- */

.hero[b-aca3hu3lic] {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* dvh evita el salto por la barra del navegador en el celular. Se le suma
       espacio abajo porque las fichas se montan encima. */
    min-height: 34rem;
    min-height: 92dvh;
    max-height: 52rem;
    padding-bottom: 5.5rem;
    overflow: hidden;
    background-color: #0F3D2E;
}

.hero-foto[b-aca3hu3lic] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

/* Bien oscuro abajo: el texto tiene que leerse sin esfuerzo sobre la foto. */
.hero-velo[b-aca3hu3lic] {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(9, 38, 28, 0.55) 0%, rgba(9, 38, 28, 0.15) 30%, rgba(8, 32, 24, 0.93) 100%),
        linear-gradient(90deg, rgba(8, 32, 24, 0.72) 0%, rgba(8, 32, 24, 0.10) 70%);
}

.hero-caja[b-aca3hu3lic] {
    position: relative;
    width: 100%;
    max-width: 74rem;
    margin: 0 auto;
    padding-inline: 1.25rem;
}

.hero-texto[b-aca3hu3lic] {
    max-width: 40rem;
    color: #fff;
}

.rubrica[b-aca3hu3lic] {
    color: #7FDCBD;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-bottom: 0.85rem;
}

    .rubrica.verde[b-aca3hu3lic] {
        color: #1A8060;
    }

    .rubrica.claro[b-aca3hu3lic] {
        color: #7FDCBD;
    }

.hero h1[b-aca3hu3lic] {
    font-size: clamp(2.4rem, 7.5vw, 4.3rem);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.025em;
    margin-bottom: 1.1rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.bajada[b-aca3hu3lic] {
    font-size: clamp(1.05rem, 2.4vw, 1.3rem);
    line-height: 1.55;
    margin-bottom: 1.9rem;
    color: rgba(255, 255, 255, 0.92);
    max-width: 34rem;
}

.pie-hero[b-aca3hu3lic] {
    margin: 1.15rem 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.78);
}

.acciones[b-aca3hu3lic] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

    /* En el celular los botones ocupan el ancho: son el objetivo de la página. */
    .acciones[b-aca3hu3lic]  .btn {
        flex: 1 1 14rem;
        font-weight: 700;
        border-radius: 0.6rem;
        padding-block: 0.8rem;
    }

.acciones[b-aca3hu3lic]  .btn-claro {
    background-color: #fff;
    border-color: #fff;
    color: #12503C;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

    .acciones[b-aca3hu3lic]  .btn-claro:hover, .acciones[b-aca3hu3lic]  .btn-claro:focus {
        background-color: #E7F5F0;
        border-color: #E7F5F0;
        color: #0F3D2E;
    }

.acciones[b-aca3hu3lic]  .btn-borde {
    background-color: rgba(255, 255, 255, 0.10);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    backdrop-filter: blur(2px);
}

    .acciones[b-aca3hu3lic]  .btn-borde:hover, .acciones[b-aca3hu3lic]  .btn-borde:focus {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: #fff;
        color: #fff;
    }

/* ---------- Fichas montadas sobre el hero ---------- */

.franja[b-aca3hu3lic] {
    position: relative;
    z-index: 2;
    margin-top: -4.5rem;
    padding-bottom: 1rem;
}

.fichas[b-aca3hu3lic] {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.ficha[b-aca3hu3lic] {
    background-color: #fff;
    border-radius: 1rem;
    padding: 1.6rem 1.5rem;
    box-shadow: 0 12px 34px rgba(15, 61, 46, 0.14);
    border-top: 4px solid #22A47F;
}

    .ficha h2[b-aca3hu3lic] {
        font-size: 1.15rem;
        font-weight: 800;
        color: #12281F;
        margin-bottom: 0.5rem;
    }

    .ficha p[b-aca3hu3lic] {
        font-size: 0.98rem;
        line-height: 1.6;
        color: #4A6459;
        margin-bottom: 0;
    }

/* ---------- Bloques con foto a sangre ---------- */

.duo[b-aca3hu3lic] {
    display: grid;
    grid-template-columns: 1fr;
    background-color: #fff;
}

    .duo.tinte[b-aca3hu3lic] {
        background-color: #F1F8F5;
    }

.duo-foto[b-aca3hu3lic] {
    position: relative;
    min-height: 17rem;
}

    .duo-foto img[b-aca3hu3lic] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.duo-texto[b-aca3hu3lic] {
    display: flex;
    align-items: center;
    padding: 2.75rem 1.25rem;
}

.duo-interior[b-aca3hu3lic] {
    max-width: 34rem;
}

    .duo-interior h2[b-aca3hu3lic] {
        font-size: clamp(1.6rem, 4vw, 2.4rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #12281F;
        margin-bottom: 0.9rem;
        line-height: 1.15;
    }

    .duo-interior p[b-aca3hu3lic] {
        color: #4A6459;
        line-height: 1.68;
        font-size: 1.03rem;
        margin-bottom: 0.9rem;
    }

        .duo-interior p:last-child[b-aca3hu3lic] {
            margin-bottom: 0;
        }

/* ---------- Pasos ---------- */

.pasos[b-aca3hu3lic] {
    background: linear-gradient(160deg, #12503C 0%, #0F3D2E 100%);
    color: #fff;
    padding: 3.5rem 0 3.75rem;
}

    .pasos h2[b-aca3hu3lic] {
        font-size: clamp(1.7rem, 4.5vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-bottom: 2.25rem;
    }

.lista-pasos[b-aca3hu3lic] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.75rem;
    grid-template-columns: 1fr;
}

    .lista-pasos h3[b-aca3hu3lic] {
        font-size: 1.15rem;
        font-weight: 700;
        margin: 0.9rem 0 0.35rem;
    }

    .lista-pasos p[b-aca3hu3lic] {
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.6;
        margin: 0;
        font-size: 0.98rem;
    }

.numero[b-aca3hu3lic] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background-color: rgba(127, 220, 189, 0.16);
    border: 1.5px solid rgba(127, 220, 189, 0.55);
    color: #7FDCBD;
    font-weight: 800;
    font-size: 1.15rem;
}

/* ---------- Cierre ---------- */

.cierre[b-aca3hu3lic] {
    position: relative;
    overflow: hidden;
    padding: 3.75rem 0 4rem;
    background-color: #12503C;
}

.cierre-foto[b-aca3hu3lic] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cierre-velo[b-aca3hu3lic] {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(15, 61, 46, 0.96) 0%, rgba(26, 128, 96, 0.88) 100%);
}

.cierre-texto[b-aca3hu3lic] {
    position: relative;
    color: #fff;
}

    .cierre-texto h2[b-aca3hu3lic] {
        font-size: clamp(1.7rem, 4.5vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-bottom: 0.9rem;
    }

    .cierre-texto p[b-aca3hu3lic] {
        max-width: 42rem;
        line-height: 1.65;
        margin-bottom: 1.9rem;
        color: rgba(255, 255, 255, 0.92);
        font-size: 1.05rem;
    }

/* ---------- Escritorio ---------- */

@media (min-width: 768px) {
    .fichas[b-aca3hu3lic] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .lista-pasos[b-aca3hu3lic] {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.25rem;
    }

    .acciones[b-aca3hu3lic]  .btn {
        flex: 0 0 auto;
        padding-inline: 1.75rem;
    }
}

@media (min-width: 900px) {
    .hero[b-aca3hu3lic] {
        padding-bottom: 7rem;
    }

    .franja[b-aca3hu3lic] {
        margin-top: -5.5rem;
    }

    /* La foto pasa a ocupar media pantalla, de borde a borde y a toda altura.
       Es lo que saca a la página del aspecto de "foto suelta sobre blanco". */
    .duo[b-aca3hu3lic] {
        grid-template-columns: 1fr 1fr;
        min-height: 32rem;
    }

    .duo-foto[b-aca3hu3lic] {
        min-height: 100%;
    }

    .duo-texto[b-aca3hu3lic] {
        padding: 4rem clamp(2.5rem, 5vw, 5rem);
    }

    /* Se invierte solo el orden visual: en el HTML la foto sigue primero, así
       el lector de pantalla lee foto y texto juntos. */
    .duo.invertido .duo-foto[b-aca3hu3lic] {
        order: 2;
    }

    .duo.invertido .duo-texto[b-aca3hu3lic] {
        justify-content: flex-end;
    }

    .pasos[b-aca3hu3lic] {
        padding: 4.5rem 0 5rem;
    }
}

/* ============================================================
   Catálogo público (tienda apagada). Sin precios y sin stock: es información
   comercial y esta página se sirve sin cuenta.

   Mismo lenguaje que el resto de la landing —caja centrada, rúbrica, tarjetas
   livianas— pero la grilla es más chica que la de la tienda: acá no hay nada
   que tocar, solo mirar qué se vende.
   ============================================================ */
.pub-catalogo[b-aca3hu3lic] {
    background: var(--rutin-papel);
    padding: 3.2rem 0 3.6rem;
}

.pub-catalogo h2[b-aca3hu3lic] {
    font-size: clamp(1.6rem, 4.5vw, 2.3rem);
    margin: 0 0 .6rem;
}

.pub-bajada[b-aca3hu3lic] {
    max-width: 44rem;
    color: #4B665C;
    margin: 0 0 1.4rem;
}

.pub-aviso[b-aca3hu3lic] {
    color: #4B665C;
    background: #fff;
    border: 1px dashed var(--rutin-linea);
    border-radius: var(--rutin-r);
    padding: 1.2rem;
    text-align: center;
}

.pub-filtros[b-aca3hu3lic] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.1rem;
}

.pub-chip[b-aca3hu3lic] {
    background: #fff;
    border: 1.5px solid var(--rutin-linea);
    border-radius: 999px;
    color: var(--rutin-tinta);
    font-size: .85rem;
    font-weight: 600;
    padding: .35rem .9rem;
    cursor: pointer;
}

    .pub-chip:hover[b-aca3hu3lic] { border-color: var(--rutin-verde-claro); }

    .pub-chip.activo[b-aca3hu3lic] {
        background: var(--rutin-verde);
        border-color: var(--rutin-verde-oscuro);
        color: #fff;
    }

.pub-grilla[b-aca3hu3lic] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: .8rem;
}

.pub-item[b-aca3hu3lic] {
    background: #fff;
    border: 1px solid var(--rutin-linea);
    border-radius: var(--rutin-r);
    overflow: hidden;
    box-shadow: var(--rutin-sh-sm);
}

.pub-foto[b-aca3hu3lic] {
    aspect-ratio: 4 / 3;
    background: var(--rutin-humo);
    display: block;
}

    .pub-foto img[b-aca3hu3lic] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.pub-sin-foto[b-aca3hu3lic] {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--rutin-humo), var(--rutin-linea));
}

.pub-nombre[b-aca3hu3lic] {
    margin: .5rem .6rem .1rem;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.2;
}

.pub-meta[b-aca3hu3lic] {
    margin: 0 .6rem .6rem;
    color: #7A8F86;
    font-size: .74rem;
}

.pub-pie[b-aca3hu3lic] {
    margin: 1.2rem 0 0;
    color: #7A8F86;
    font-size: .85rem;
}
/* _content/Distribuidora.Web/Components/Pages/Ingresar.razor.rz.scp.css */
/* Va con .container de Bootstrap: acá solo el ancho de lectura y el aire
   vertical, sin tocar el padding lateral que el container ya pone. */
.caja[b-t2doxcunid] {
    max-width: 26rem;
    padding-top: 1.75rem;
    padding-bottom: 2.5rem;
}

    .caja h1[b-t2doxcunid] {
        font-size: 1.7rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
/* _content/Distribuidora.Web/Components/Pages/MiCarrito.razor.rz.scp.css */
/* El carrito arranca en tarjetas (celular) y recién en escritorio se acomoda
   como grilla tipo tabla. Es el orden inverso al que traía: la tabla de siete
   columnas obligaba a scroll horizontal justo en el paso donde se decide la compra. */

.renglones[b-abfg8lh6zw] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1.5rem;
}

.cabecera[b-abfg8lh6zw] {
    display: none;
}

.renglon[b-abfg8lh6zw] {
    background-color: #fff;
    border: 1px solid var(--rutin-linea);
    border-radius: var(--rutin-r);
    box-shadow: var(--rutin-sh-sm);
    padding: 0.85rem 0.9rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

    /* El renglón sin stock se marca con una barra lateral ámbar: se ve de un
       vistazo cuál hay que tocar, sin teñir toda la fila. */
    .renglon.falta[b-abfg8lh6zw] {
        border-color: #F2DFAE;
        box-shadow: inset 4px 0 0 0 var(--rutin-ambar), var(--rutin-sh-sm);
    }

.celda-producto[b-abfg8lh6zw] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.nombre[b-abfg8lh6zw] {
    font-weight: 700;
    font-size: 0.98rem;
}

.unidad[b-abfg8lh6zw] {
    font-size: 0.75rem;
    color: var(--rutin-suave);
}

.celda[b-abfg8lh6zw] {
    font-size: 0.9rem;
}

/* En el celular cada dato lleva su rótulo al lado: sin encabezado de tabla,
   un número suelto no se entiende. */
.celda[data-rotulo][b-abfg8lh6zw]::before {
    content: attr(data-rotulo) ": ";
    color: var(--rutin-suave);
    font-size: 0.75rem;
    font-weight: 600;
}

.celda-subtotal[b-abfg8lh6zw] {
    font-weight: 800;
    font-size: 1rem;
    color: var(--rutin-verde-oscuro);
}

.celda-cantidad[b-abfg8lh6zw] {
    grid-column: 1 / -1;
}

/* ---------- Stepper ---------- */
.stepper[b-abfg8lh6zw] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.paso[b-abfg8lh6zw] {
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    border: 1px solid var(--rutin-linea);
    background-color: var(--rutin-papel);
    border-radius: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rutin-verde-oscuro);
    cursor: pointer;
}

    .paso:hover:not(:disabled)[b-abfg8lh6zw] {
        background-color: #E7F5F0;
        border-color: var(--rutin-verde-claro);
    }

    .paso:disabled[b-abfg8lh6zw] {
        opacity: 0.4;
        cursor: default;
    }

.stepper input[b-abfg8lh6zw] {
    width: 4.5rem;
}

.quitar[b-abfg8lh6zw] {
    background: none;
    border: 0;
    padding: 0.2rem 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rutin-coral);
    cursor: pointer;
    border-radius: 8px;
}

    .quitar:hover[b-abfg8lh6zw] {
        background-color: var(--rutin-coral-piso);
    }

/* ---------- Cierre: datos + resumen ---------- */
.cierre[b-abfg8lh6zw] {
    display: grid;
    gap: 1.25rem;
}

.resumen[b-abfg8lh6zw] {
    background-color: #fff;
    border: 1px solid var(--rutin-linea);
    border-radius: var(--rutin-r);
    box-shadow: var(--rutin-sh-md);
    padding: 1.1rem;
    align-self: start;
}

.resumen-titulo[b-abfg8lh6zw] {
    font-size: 1.05rem;
    margin: 0 0 0.75rem;
}

.resumen-lineas[b-abfg8lh6zw] {
    margin: 0 0 0.6rem;
}

    .resumen-lineas > div[b-abfg8lh6zw] {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        font-size: 0.88rem;
        padding-block: 0.2rem;
    }

    .resumen-lineas dt[b-abfg8lh6zw] {
        color: var(--rutin-suave);
        font-weight: 600;
    }

    .resumen-lineas dd[b-abfg8lh6zw] {
        margin: 0;
        font-weight: 700;
    }

.resumen-total[b-abfg8lh6zw] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border-top: 1px solid var(--rutin-linea);
    padding-top: 0.7rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

    .resumen-total strong[b-abfg8lh6zw] {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--rutin-verde-oscuro);
    }

.resumen-nota[b-abfg8lh6zw] {
    font-size: 0.75rem;
    color: var(--rutin-suave);
    margin-bottom: 0.9rem;
}

.btn-confirmar[b-abfg8lh6zw] {
    width: 100%;
    padding-block: 0.6rem;
    font-size: 1rem;
}

.resumen-trabado[b-abfg8lh6zw] {
    font-size: 0.78rem;
    color: #8A5B06;
    margin: 0.5rem 0 0;
    text-align: center;
}

.vaciar[b-abfg8lh6zw] {
    display: block;
    width: 100%;
    margin-top: 0.6rem;
    background: none;
    border: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rutin-suave);
    cursor: pointer;
}

    .vaciar:hover[b-abfg8lh6zw] {
        color: var(--rutin-coral);
    }

/* ============ Escritorio ============ */
@media (min-width: 768px) {
    .renglones[b-abfg8lh6zw] {
        gap: 0;
        border: 1px solid var(--rutin-linea);
        border-radius: var(--rutin-r);
        background-color: #fff;
        box-shadow: var(--rutin-sh-sm);
        overflow: hidden;
    }

    .cabecera[b-abfg8lh6zw], .renglon[b-abfg8lh6zw] {
        display: grid;
        grid-template-columns: minmax(10rem, 2.2fr) 7rem 7rem 10rem 8rem 5rem;
        gap: 0.75rem;
        align-items: center;
    }

    .cabecera[b-abfg8lh6zw] {
        padding: 0.6rem 1rem;
        background-color: var(--rutin-papel);
        border-bottom: 1px solid var(--rutin-linea);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--rutin-suave);
    }

    .renglon[b-abfg8lh6zw] {
        border: 0;
        border-bottom: 1px solid var(--rutin-linea2, #EEF3F0);
        border-radius: 0;
        box-shadow: none;
        padding: 0.7rem 1rem;
    }

        .renglon:last-child[b-abfg8lh6zw] {
            border-bottom: 0;
        }

        .renglon.falta[b-abfg8lh6zw] {
            box-shadow: inset 4px 0 0 0 var(--rutin-ambar);
            background-color: #FFFDF7;
        }

    .celda-producto[b-abfg8lh6zw], .celda-cantidad[b-abfg8lh6zw] {
        grid-column: auto;
    }

    /* Con encabezado a la vista, el rótulo por celda sobra. */
    .celda[data-rotulo][b-abfg8lh6zw]::before {
        content: none;
    }

    .der[b-abfg8lh6zw] { text-align: right; justify-content: flex-end; }
    .cen[b-abfg8lh6zw] { text-align: center; }

    .celda-cantidad[b-abfg8lh6zw] {
        display: flex;
        justify-content: center;
    }

    .celda-quitar[b-abfg8lh6zw] {
        text-align: right;
    }

    .cierre[b-abfg8lh6zw] {
        grid-template-columns: 1fr 22rem;
        align-items: start;
    }
}
/* _content/Distribuidora.Web/Components/Pages/MisPedidos.razor.rz.scp.css */
.pedidos[b-ffq45cr0q0] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.pedido[b-ffq45cr0q0] {
    background-color: #fff;
    border: 1px solid var(--rutin-linea);
    border-radius: var(--rutin-r);
    box-shadow: var(--rutin-sh-sm);
    padding: 0.9rem 1rem;
}

.pedido-cabeza[b-ffq45cr0q0] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem 1rem;
    align-items: start;
}

.pedido-id[b-ffq45cr0q0] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.numero[b-ffq45cr0q0] {
    font-weight: 800;
    font-size: 1.02rem;
}

    /* El número de pedido es lo que el cliente dicta por teléfono cuando llama
       a preguntar: que se lea como identificador, no como texto corrido. */
    .numero[b-ffq45cr0q0]::before {
        content: "#";
        color: var(--rutin-suave);
        font-weight: 700;
    }

.fecha[b-ffq45cr0q0] {
    font-size: 0.78rem;
    color: var(--rutin-suave);
}

.pedido-total[b-ffq45cr0q0] {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--rutin-verde-oscuro);
    text-align: right;
}

.pedido-estado[b-ffq45cr0q0] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.origen[b-ffq45cr0q0] {
    font-size: 0.72rem;
    color: var(--rutin-suave);
}

/* ---------- Detalle ---------- */
.pedido-detalle[b-ffq45cr0q0] {
    margin-top: 0.6rem;
    border-top: 1px solid var(--rutin-linea);
    padding-top: 0.5rem;
}

    .pedido-detalle summary[b-ffq45cr0q0] {
        cursor: pointer;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--rutin-verde-oscuro);
    }

.items[b-ffq45cr0q0] {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

    .items li[b-ffq45cr0q0] {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.1rem 0.75rem;
        font-size: 0.82rem;
        padding-bottom: 0.3rem;
        border-bottom: 1px dashed var(--rutin-linea);
    }

        .items li:last-child[b-ffq45cr0q0] {
            border-bottom: 0;
        }

.item-nombre[b-ffq45cr0q0] {
    font-weight: 600;
}

.item-cuenta[b-ffq45cr0q0] {
    grid-column: 1;
    color: var(--rutin-suave);
    font-size: 0.76rem;
}

.item-subtotal[b-ffq45cr0q0] {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    font-weight: 700;
}

.observaciones[b-ffq45cr0q0] {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    color: var(--rutin-suave);
    background-color: var(--rutin-papel);
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
}

@media (min-width: 768px) {
    .pedido-cabeza[b-ffq45cr0q0] {
        grid-template-columns: minmax(8rem, 1fr) 2fr auto;
        align-items: center;
    }

    .pedido-estado[b-ffq45cr0q0] {
        grid-column: auto;
    }
}
/* _content/Distribuidora.Web/Components/Pages/Modelos.razor.rz.scp.css */
/* ---------------- Página ---------------- */
.pagina[b-dtgm0sfhei] {
    min-height: 100vh;
    background: #EEF2F0;
    padding: 2rem 1rem 4rem;
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #17342B;
}

.cabecera[b-dtgm0sfhei] {
    max-width: 62rem;
    margin: 0 auto 2rem;
}

    .cabecera h1[b-dtgm0sfhei] {
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0 0 .5rem;
    }

    .cabecera p[b-dtgm0sfhei] {
        margin: 0;
        color: #5C6F66;
        line-height: 1.55;
        max-width: 46rem;
    }

/* Una sola columna hasta que la pantalla da para dos: la maqueta necesita ancho
   para que la barra de navegación se lea como se va a ver de verdad. */
.galeria[b-dtgm0sfhei] {
    max-width: 96rem;
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 1100px) {
    .galeria[b-dtgm0sfhei] { grid-template-columns: repeat(2, 1fr); }
}

.ficha[b-dtgm0sfhei] {
    background: #fff;
    border: 1px solid #DFE6E2;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(16, 51, 42, .05);
}

.ficha-cabeza[b-dtgm0sfhei] {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin-bottom: .85rem;
}

    .ficha-cabeza h2[b-dtgm0sfhei] {
        font-size: 1rem;
        font-weight: 800;
        margin: 0 0 .1rem;
    }

    .ficha-cabeza p[b-dtgm0sfhei] {
        margin: 0;
        font-size: .82rem;
        color: #6B7D74;
        line-height: 1.4;
    }

.numero[b-dtgm0sfhei] {
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #17342B;
    color: #fff;
    font-weight: 800;
    display: grid;
    place-items: center;
    font-size: .95rem;
}

.pie[b-dtgm0sfhei] {
    max-width: 62rem;
    margin: 2.5rem auto 0;
    text-align: center;
    color: #5C6F66;
    font-weight: 600;
}

/* ================= La maqueta =================
   Todo sale de las variables que define cada modelo en su atributo style.
   Las clases de "forma" cambian la estructura, no el color. */
.modelo[b-dtgm0sfhei] {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--linea);
    background: var(--fondo);
    color: var(--tinta);
    font-size: 13px;
}

/* ---- Barra superior ---- */
.m-barra[b-dtgm0sfhei] {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .6rem .85rem;
    background: var(--barra);
    color: var(--sobre);
}

.m-marca[b-dtgm0sfhei] {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: none;
}

.m-logo[b-dtgm0sfhei] {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 7px;
    background: rgba(255, 255, 255, .22);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .8rem;
}

.m-marca-txt[b-dtgm0sfhei] { font-weight: 800; letter-spacing: -.01em; }

.m-nav[b-dtgm0sfhei] {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex-wrap: wrap;
}

.m-link[b-dtgm0sfhei] {
    padding: .3rem .6rem;
    border-radius: 7px;
    font-weight: 600;
    font-size: .78rem;
    opacity: .82;
    white-space: nowrap;
}

.m-derecha[b-dtgm0sfhei] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: none;
}

.m-avatar[b-dtgm0sfhei] {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .3);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .72rem;
}

/* ---- Cuerpo ---- */
.m-cuerpo[b-dtgm0sfhei] { padding: .85rem; display: grid; gap: .7rem; }

.m-kpis[b-dtgm0sfhei] { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }

.m-kpi[b-dtgm0sfhei] {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: .55rem .6rem;
    display: grid;
    gap: .1rem;
}

.m-kpi-n[b-dtgm0sfhei] { font-weight: 800; font-size: .95rem; color: var(--acento); }
.m-kpi-l[b-dtgm0sfhei] { font-size: .65rem; color: var(--suave); }

.m-botones[b-dtgm0sfhei] { display: flex; gap: .4rem; flex-wrap: wrap; }

.m-btn[b-dtgm0sfhei] {
    padding: .32rem .7rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: .75rem;
    white-space: nowrap;
}

.m-btn-1[b-dtgm0sfhei] { background: var(--acento); color: #fff; }
.m-btn-2[b-dtgm0sfhei] { background: transparent; color: var(--acento); border: 1px solid var(--acento); }
.m-btn-3[b-dtgm0sfhei] { background: transparent; color: var(--suave); }

/* El "Ver tienda" vive sobre la barra: ahí manda el color de la barra. */
.m-barra .m-btn-2[b-dtgm0sfhei] { color: var(--sobre); border-color: rgba(255, 255, 255, .45); }

.m-tabla[b-dtgm0sfhei] {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 10px;
    overflow: hidden;
}

.m-fila[b-dtgm0sfhei] {
    display: grid;
    grid-template-columns: 2fr 1fr .6fr;
    gap: .5rem;
    padding: .38rem .6rem;
    border-bottom: 1px solid var(--linea);
    font-size: .74rem;
}

    .m-fila:last-child[b-dtgm0sfhei] { border-bottom: 0; }

.m-encab[b-dtgm0sfhei] {
    background: color-mix(in srgb, var(--acento) 7%, transparent);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 800;
    color: var(--suave);
}

/* ================= Formas =================
   Cómo se marca la sección activa. */
.nav-pastilla .m-link.activo[b-dtgm0sfhei] { background: rgba(255, 255, 255, .22); opacity: 1; }

.nav-subrayado .m-link[b-dtgm0sfhei] { border-radius: 0; padding-bottom: .22rem; }
.nav-subrayado .m-link.activo[b-dtgm0sfhei] { opacity: 1; box-shadow: inset 0 -2px 0 0 currentColor; }

.nav-plano .m-link[b-dtgm0sfhei] { border-radius: 0; }
.nav-plano .m-link.activo[b-dtgm0sfhei] { opacity: 1; background: rgba(0, 0, 0, .18); }

.nav-segmentado .m-nav[b-dtgm0sfhei] {
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: .18rem;
    gap: .1rem;
}
.nav-segmentado .m-link[b-dtgm0sfhei] { border-radius: 999px; }
.nav-segmentado .m-link.activo[b-dtgm0sfhei] { background: #fff; color: var(--barra); opacity: 1; }

/* Redondeo general */
.radio-recto .m-kpi[b-dtgm0sfhei], .radio-recto .m-tabla[b-dtgm0sfhei], .radio-recto .m-btn[b-dtgm0sfhei],
.radio-recto .m-logo[b-dtgm0sfhei], .radio-recto .m-link[b-dtgm0sfhei] { border-radius: 0; }
.radio-recto[b-dtgm0sfhei] { border-radius: 0; }

.radio-chico .m-kpi[b-dtgm0sfhei], .radio-chico .m-tabla[b-dtgm0sfhei], .radio-chico .m-btn[b-dtgm0sfhei] { border-radius: 5px; }

.radio-grande .m-kpi[b-dtgm0sfhei], .radio-grande .m-tabla[b-dtgm0sfhei] { border-radius: 15px; }
.radio-grande .m-btn[b-dtgm0sfhei] { border-radius: 999px; }
.radio-grande .m-logo[b-dtgm0sfhei] { border-radius: 10px; }

/* Barra clara: sobre fondo claro, el blanco translúcido no se ve. */
.barra-clara .m-barra[b-dtgm0sfhei] { border-bottom: 1px solid var(--linea); }
.barra-clara .m-logo[b-dtgm0sfhei] { background: var(--acento); color: #fff; }
.barra-clara .m-avatar[b-dtgm0sfhei] { background: color-mix(in srgb, var(--acento) 15%, transparent); border-color: var(--linea); color: var(--acento); }
.barra-clara .m-link.activo[b-dtgm0sfhei] { background: color-mix(in srgb, var(--acento) 12%, transparent); color: var(--acento); }
.barra-clara .m-barra .m-btn-2[b-dtgm0sfhei] { color: var(--acento); border-color: var(--acento); }
.barra-clara.nav-plano .m-link.activo[b-dtgm0sfhei] { background: color-mix(in srgb, var(--acento) 12%, transparent); }

/* Variantes con carácter propio */
.degrade .m-barra[b-dtgm0sfhei] { background: linear-gradient(90deg, var(--barra) 0%, var(--barra2) 100%); }

.tema-oscuro .m-barra[b-dtgm0sfhei] { border-bottom: 1px solid var(--linea); }
.tema-oscuro .m-btn-1[b-dtgm0sfhei] { color: #0B1512; }
.tema-oscuro .m-encab[b-dtgm0sfhei] { background: rgba(255, 255, 255, .04); }

.contraste .m-kpi[b-dtgm0sfhei], .contraste .m-tabla[b-dtgm0sfhei], .contraste .m-btn-2[b-dtgm0sfhei] { border-width: 2px; }
.contraste .m-link.activo[b-dtgm0sfhei] { background: #fff; color: #000; }
.contraste .m-encab[b-dtgm0sfhei] { background: #000; color: #fff; }

.brutal .m-kpi[b-dtgm0sfhei], .brutal .m-tabla[b-dtgm0sfhei] { border-width: 2px; box-shadow: 3px 3px 0 0 var(--linea); }
.brutal .m-btn-1[b-dtgm0sfhei] { box-shadow: 2px 2px 0 0 var(--linea); }
.brutal .m-btn-2[b-dtgm0sfhei] { border-width: 2px; }

.vidrio .m-barra[b-dtgm0sfhei] { backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .35); }
.vidrio .m-kpi[b-dtgm0sfhei], .vidrio .m-tabla[b-dtgm0sfhei] { backdrop-filter: blur(6px); }

.denso .m-cuerpo[b-dtgm0sfhei] { padding: .55rem; gap: .45rem; }
.denso .m-kpi[b-dtgm0sfhei] { padding: .35rem .45rem; }
.denso .m-fila[b-dtgm0sfhei] { padding: .24rem .5rem; }
.denso .m-barra[b-dtgm0sfhei] { padding: .4rem .6rem; }

.amplio .m-cuerpo[b-dtgm0sfhei] { padding: 1.25rem; gap: 1.1rem; }
.amplio .m-kpi[b-dtgm0sfhei] { padding: .9rem 1rem; }
.amplio .m-fila[b-dtgm0sfhei] { padding: .6rem .9rem; font-size: .8rem; }
.amplio .m-barra[b-dtgm0sfhei] { padding: .9rem 1.1rem; }

.elevado .m-kpi[b-dtgm0sfhei] { box-shadow: 0 6px 18px -10px rgba(16, 51, 42, .45); border-color: transparent; }
.elevado .m-tabla[b-dtgm0sfhei] { box-shadow: 0 10px 26px -16px rgba(16, 51, 42, .5); border-color: transparent; }
.elevado .m-barra[b-dtgm0sfhei] { box-shadow: 0 6px 16px -10px rgba(16, 51, 42, .6); }

.plano .m-kpi[b-dtgm0sfhei], .plano .m-tabla[b-dtgm0sfhei] { box-shadow: none; }
.plano .m-btn-1[b-dtgm0sfhei] { box-shadow: none; }
/* _content/Distribuidora.Web/Components/Pages/Registro.razor.rz.scp.css */
/* Va con .container de Bootstrap: acá solo el ancho de lectura y el aire
   vertical, sin tocar el padding lateral que el container ya pone. */
.caja[b-jnokm303dq] {
    max-width: 30rem;
    padding-top: 1.75rem;
    padding-bottom: 2.5rem;
}

    .caja h1[b-jnokm303dq] {
        font-size: 1.7rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

.obligatorio[b-jnokm303dq] {
    color: #1A8060;
    font-weight: 700;
}