/* /sistema/codex/estilos.css — LAS LISTAS DE PRECIOS PARA CLIENTES (RAD-609 parte B, 2026-10-06).
   TODO el estilo de la página vive acá: la CSP de index.php no deja nada en línea (ni etiquetas de estilo ni atributos).
   Sin fuentes ni nada de terceros.
   🆕 RAD-609 C (06/10): el encabezado del mayorista, el recuadro «¿Cómo funciona el precio?», el «?» de cada lista, el botón de
   WhatsApp y EL CELULAR PRIMERO (≤ 600 px: la tabla pasa a tarjetas, botones de dedo, letra de 16 px o más).
   🆕 RAD-609 C-bis (07/10) — el dueño, al verla: «Quedó VOMITIVO… hacer azul a gris oscuros». LA PALETA, SOBRIA: blanco, negro y
   grises; el acento es GRIS OSCURO; el ÚNICO color de la página es el verde de WhatsApp, en su botón. El «?», chico, y su explicación,
   un globito que flota ENCIMA (abrirlo no mueve nada). El botón de WhatsApp, arriba a la derecha del logo. La pantalla de la clave y
   la del aviso, MODERNAS (el molde de /sistema/deposito/): una tarjeta blanca centrada sobre fondo gris claro.
   🆕 RAD-609 D (07/10): el botón «Descargar PDF» y su aviso «Armando el PDF…», en el gris oscuro del acento.
   🆕 RAD-609 E (07/10): ARMAR EL PEDIDO — los «− N +» al lado de la foto, la barra fija del pedido, «Así queda tu pedido», la X del
   aviso del PDF y «Cerrar ✕». En grises; el ÚNICO color sigue siendo el verde de WhatsApp («Enviar por WhatsApp»).
   🆕 RAD-609 E-bis (07/10) — el dueño: «TODO EN TARJETA… pero los destacados… con un fondo amarillito clarito muy suave». SE VA LA
   TABLA: toda la página en la grilla de tarjetas (3, 2 y 1 por fila); el «− N +» ABAJO DE TODO en la tarjeta, a todo el ancho y
   separado por una línea gris fina; con varios sabores, un renglón por sabor con el nombre ENTERO (nunca partido en la mitad de una
   palabra); la lista que le toca al pedido, marcada en gris; y las destacadas con fondo amarillo muy suave (🆕 E-ter: se fue).
   🆕 RAD-609 E-ter (07/10) — el dueño: «El amarillo queda feo, dejarlo como el color que estaba; a los destacados una estrella ponerle
   o un globo Recomendado»: las destacadas, BLANCAS otra vez, y en cada tarjeta de una destacada el globito «★ Recomendado» (gris
   oscuro con letra blanca). En «Así queda tu pedido»: «TOTAL A PAGAR» en una franja gris oscura con letra blanca grande, la ganancia
   total en negrita, y el nombre del producto que ya no se parte a mitad de palabra. Ningún color nuevo.
   🆕 RAD-609 F (07/10) — el dueño, en su celular: «es algo HORRIPILANTE la experiencia… hay que bajar, bajar, bajar»; eligió PESTAÑAS
   POR MARCA. Celular primero y moderno: arriba, FIJAS (position: sticky), la barra blanca con sombra suave (el logo, el carrito con su
   número y el menú ☰ que se despliega ENCIMA de la página, sin empujarla), la fila de pestañas que se desliza con el dedo (scroll-snap,
   sin barra de desplazamiento a la vista; la de la página en gris oscuro con letra blanca) y la línea fina del total; la TARJETA
   compacta (foto chica · nombre · «Valor Sugerido al Público» en un renglón; abajo un renglón por lista); el GLOBO de WhatsApp y el
   cartelito del PDF, FIJOS abajo a la derecha (position: fixed); el pie con «↑ Volver arriba». Esquinas redondeadas, aire, botones de
   dedo (44 px o más) y letra de 16 px en lo que se escribe. LOS COLORES: los grises de siempre, el verde #25d366 SÓLO en WhatsApp y un
   DORADO #f59e0b SÓLO en las estrellas («★ Recomendados», «★ Recomendado» y el título «★ <marca>»); nada de fondos amarillos. Sale lo
   que quedó sin uso (la sección de abajo y sus botones de marca, el recuadro grande del precio y el «?», «Cerrar ✕» y el WhatsApp de
   arriba, la barra vieja del pedido, .pedido-ganas).
   🆕 RAD-609 G (07/10) — el dueño, viéndola: «en PC la barra de marcas se ve [muy fea]… no se puede navegar horizontal en PC» · «en
   celular se ve como mono aplastado» · «¿no tendría que haber algo como en /muro/, que los menús aparecen con un efecto en celular de
   abajo?» · «está todo tan gris que asusta». Sus elecciones: EN EL CELULAR (≤ 767 px), «barra abajo, como /muro/»: arriba sólo el logo y
   el total; la barra de acciones FIJA ABAJO (blanca, borde gris fino, sombra suave, íconos de 24 px con su palabra chica debajo, de dedo,
   el número del pedido sobre el carrito, respetando el borde del iPhone) y «Marcas» y «Menú» como una HOJA QUE SUBE DESDE ABAJO
   (translateY, 0,25 s) sobre el fondo oscurecido, con su manijita, su título y su ✕; mientras está abierta, la página de atrás no se
   desplaza; las marcas en 2 columnas. EN LA COMPU (≥ 768 px), «desplegable en columnas»: la MISMA barra arriba a la derecha, «Marcas ▾»
   abre un desplegable con las marcas en 4 COLUMNAS (sin ninguna barra de desplazamiento de costado) y el menú, otro. (El dibujo y la
   conducta de /muro/ —muro/pie.php, muro/estilos/muro.css r.550-618 y r.3455-3503—, COPIADOS en grises: no se carga nada de /muro/.) LA
   LÍNEA DEL TOTAL, EN VERDE #059669 con letra blanca (un verde distinto del de WhatsApp). LOS COLORES: los de hoy (los grises, #25d366
   sólo en WhatsApp, #f59e0b sólo en las estrellas) + #059669 SÓLO en la línea del total. Salen las pestañas (su fila fija, su
   scroll-snap y su barrita), la barra de acciones de la F y su menú (.barra-acciones, .menu, .menu-panel, .menu-boton).
   🆕 RAD-612 ① (07/10) — el dueño: «En /sistema/listas/ los pedidos tienen − +. Cuando hay un producto agregado, que quede en verdecito
   el numérico, el campo. Como que es diferente a los demás.»: en el catálogo, el número del «− N +» de lo que YA está en el pedido (la
   clase con-cantidad, que pone pedido.js) con fondo VERDE MUY CLARO #ecfdf5, el borde #059669 (el de la línea del total) y en negrita;
   los botones «−» y «+», iguales; en «Así queda tu pedido», no. LOS COLORES: los de hoy + #059669 también en ese borde + #ecfdf5 SÓLO en
   ese fondo.
   🆕 RAD-613 ④⑤⑥ (08/10) — el dueño: arriba, «está como dos veces repetido… y "Lista 1: 18+ · …" queda como feo» (salen de la página:
   index.php; la regla .escalas queda, SIN USO) · en las tarjetas, «el iconito de ? que despliegue una ventanita» y «en vez de Ganás $XXX…
   una lupa» · y en «Así queda tu pedido», «una X para borrar el producto». El «?» y la lupa: un círculo chico gris (el molde del «?» de
   la C-bis), de dedo en el celular; su VENTANITA, un recuadro chico blanco que flota debajo del ícono, alineado a su derecha (crece hacia
   adentro de la tarjeta: no se sale de la pantalla), sin empujar nada. La «×», gris, arriba a la derecha del renglón, de dedo. LOS
   COLORES: los de hoy; NINGUNO nuevo. */

:root {
    --fondo: #ffffff;
    --papel: #ffffff;
    --texto: #1f2937;
    --suave: #6b7280;
    --borde: #e5e7eb;
    --acento: #374151;
    --fuerte: #111827;
    --encabezado-fondo: #f9fafb;
    --alto-barra: 56px;       /* 🆕 F: la barra fija de arriba (logo, carrito, ☰) · 🆕 G: el logo y, en la compu, la barra de acciones */
    --alto-abajo: 58px;       /* 🆕 G: la barra de acciones FIJA ABAJO del celular (sin el borde del iPhone: ése se SUMA) */
    --lado: max(16px, calc((100% - 1148px) / 2));   /* 🆕 F: el margen de los costados de lo fijo: el mismo ancho que .pagina */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-barra) + 52px); }   /* 🆕 G: la barra y la línea del total (44 px) */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

.pagina {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 16px 32px;
}

/* 🆕 RAD-609 C-bis: la barra de arriba es un renglón FLEXIBLE: el logo a la izquierda, el botón de WhatsApp a la derecha (si no
   entra al lado, baja y queda a la derecha), y el título abajo, a todo el ancho. */
.encabezado {
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 16px;
}
.encabezado h1 {
    flex: 1 1 100%;
    margin: 0;
    font-size: 1.7rem;
    letter-spacing: -0.01em;
}

/* ── 🆕 RAD-609 C: el encabezado del mayorista — el dibujo de reventa/barra.php (logo · NOMBRE / eslogan), copiado. Los colores
   son FIJOS (la letra negra; el eslogan, desde la C-bis, gris): la CSP de la página no deja estilo en línea, así que el color de
   la base no puede llegar acá. Si el dueño lo cambia en «Diseño mayorista», esta página no lo sigue. ── */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.1;
    margin: 0;
}
.logo-img {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    object-fit: contain;
    display: block;
}
.logo-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}
.logo-nombre {
    font-size: 1.4rem;
    font-weight: 800;
    color: #000000;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.logo-slogan {
    font-size: 0.68rem;
    font-weight: 400;
    color: #9ca3af;
    letter-spacing: 0.04em;
    line-height: 1;
    display: block;
}

/* ── 🆕 RAD-609 F: LA BARRA FIJA DE ARRIBA de la pantalla de las listas — blanca, con una línea gris fina y una sombra suave; a la
   izquierda el logo COMO HOY (el dueño: «está perfecto»; un poco más chico para que entre en el celular), a la derecha el carrito y el
   menú ☰, botones de dedo de 44 px. Queda pegada arriba al bajar (sticky): no tapa nada, ocupa su lugar.
   🆕 RAD-609 G: el logo es un ENLACE al inicio (sin subrayado, del color de siempre); a su derecha, en la compu, LA barra de acciones
   (en el celular va fija abajo: arriba queda sólo el logo). Por encima del globo y del aviso del PDF (z-index 80 contra 70): así el
   fondo oscurecido de una hoja también los tapa. ── */
.barra-sup {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--alto-barra);
    padding: 0 var(--lado);
    background: var(--papel);
    border-bottom: 1px solid var(--borde);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.barra-sup .logo { flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.barra-sup .logo-img { width: 40px; height: 40px; }
.barra-sup .logo-nombre { max-width: 100%; font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.icono { display: block; flex: 0 0 auto; }

/* ── 🆕 RAD-609 G: LA BARRA DE ACCIONES — «Inicio», «Marcas», «Pedido», «PDF» y «Menú», cada una con su ícono y su palabra: en gris;
   la de la página (y la que tiene su panel abierto), en gris oscuro; en «Así queda tu pedido», el carrito. Acá lo de los dos tamaños;
   abajo, lo del celular (fija abajo) y lo de la compu (arriba a la derecha). ── */
.accion {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--suave);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}
.accion::-webkit-details-marker { display: none; }
.accion.activa,
.ver-pedido .accion.carrito { color: var(--fuerte); }
.ver-pedido .accion.activa { color: var(--suave); }
.desplegable[open] > .accion { color: var(--fuerte); }
.accion-ico { position: relative; display: inline-flex; }
.accion-txt { white-space: nowrap; }
/* el número del pedido (lo escribe pedido.js; con 0, oculto): una pastilla gris oscura con letra blanca, sobre el carrito */
.carrito-n {
    position: absolute;
    top: -7px;
    left: 100%;
    min-width: 20px;
    height: 20px;
    margin-left: -11px;
    padding: 0 5px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: var(--acento);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

/* 🆕 RAD-609 G — LOS DOS PANELES, «Marcas» y «Menú» (un <details> cada uno: sin JavaScript se abren y se cierran solos). Lo de adentro
   es su HOJA: la cabeza (el título y la ✕) y el cuerpo, que se desplaza solo si no entra. Cómo se abre (la hoja que sube en el celular,
   el desplegable en la compu), abajo. LAS MARCAS: una grilla, cada una un botón de dedo (48 px) con el nombre entero (nunca cortado en
   la mitad de una palabra); la de la página, gris oscuro con letra blanca. EL MENÚ: cada opción, de dedo (48 px), con su ícono gris
   oscuro; «¿Cómo funciona el precio?» se despliega ahí mismo; «Salir», separado por una línea fina, al final. */
.hoja { display: flex; flex-direction: column; background: var(--papel); }
.hoja-cabeza {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 4px 6px 4px 18px;
    border-bottom: 1px solid var(--borde);
}
.hoja-titulo { margin: 0; color: var(--fuerte); font-size: 1.05rem; font-weight: 800; }
.hoja-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--suave);
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.hoja-cerrar:hover { background: #f3f4f6; }
.hoja-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 12px; }
.marcas-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.marca-op {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--papel);
    color: var(--texto);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    overflow-wrap: break-word;
}
.marca-op:hover { border-color: var(--acento); }
.marca-op.activa { background: var(--acento); border-color: var(--acento); color: #ffffff; }
@keyframes menu-abre {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.menu-op {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texto);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}
.menu-op:hover { background: #f3f4f6; }
.menu-op .icono { color: var(--acento); }
.menu-op::-webkit-details-marker { display: none; }
.menu-precio > .menu-op::after { content: "▾"; margin-left: auto; color: var(--suave); }
.menu-precio[open] > .menu-op::after { content: "▴"; }
.salir { margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--borde); }

/* ── 🆕 RAD-609 G: EN EL CELULAR (≤ 767 px) — LA BARRA DE ACCIONES, FIJA ABAJO (el molde: .muro-bottomnav de /muro/): a todo el ancho,
   blanca, con un borde gris fino arriba y una sombra suave; cinco botones iguales, de dedo (58 px de alto), con el ícono de 24 px y su
   palabra chica debajo; el alto SUMA el borde de abajo del iPhone (env(safe-area-inset-bottom)) en lugar de comérselo (doble
   declaración, como /muro/: sin env(), el alto de siempre). La página deja ese lugar abajo (el último «+» no queda tapado) y el globo
   y el aviso del PDF van ARRIBA de la barra. «Marcas» y «Menú» abren una HOJA DESDE ABAJO (el molde: .sheet-select-* de /muro/): el
   fondo oscurecido (el gris más oscuro de la paleta, semitransparente) es el propio botón del panel estirado a toda la pantalla
   (tocarlo lo cierra, también sin JavaScript); la hoja, blanca, con las esquinas de arriba redondeadas y una manijita gris, SUBE desde
   abajo en 0,25 s (translateY), mide hasta el 75 % de la pantalla y se desplaza adentro si no entra; mientras está abierta, la página
   de atrás no se desplaza (body.hoja-abierta: lo pone pedido.js). Las marcas, en 2 columnas. ── */
@media (max-width: 767px) {
    body:not(.entrada) {
        padding-bottom: var(--alto-abajo);
        padding-bottom: calc(var(--alto-abajo) + env(safe-area-inset-bottom, 0px));
    }
    body.hoja-abierta { overflow: hidden; }
    .acciones {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        display: flex;
        align-items: stretch;
        height: var(--alto-abajo);
        height: calc(var(--alto-abajo) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--papel);
        border-top: 1px solid var(--borde);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
    }
    .acciones > .accion,
    .acciones > .desplegable { flex: 1 1 0; min-width: 0; }
    .accion {
        flex-direction: column;
        gap: 3px;
        width: 100%;
        height: var(--alto-abajo);
        min-height: 48px;
        padding: 6px 2px 4px;
        font-size: 0.7rem;
        line-height: 1.1;
        text-align: center;
    }
    /* el ícono, centrado también si un navegador viejo no deja al <summary> ser flex (lo dibuja como bloque) */
    .accion .icono { width: 24px; height: 24px; margin: 0 auto; }
    .accion-txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .accion.activa .accion-txt,
    .ver-pedido .accion.carrito .accion-txt { font-weight: 800; }
    .desplegable[open] > .accion::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1;
        background: var(--fuerte);
        opacity: 0.45;
        cursor: default;
        animation: fondo-aparece 0.25s ease-out;
    }
    .hoja {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        max-height: 75vh;
        max-height: 75dvh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
        animation: hoja-sube 0.25s ease-out;
    }
    .hoja::before {
        content: "";
        flex: 0 0 auto;
        width: 40px;
        height: 4px;
        margin: 8px auto 2px;
        border-radius: 999px;
        background: #d1d5db;
    }
}
@keyframes hoja-sube {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes fondo-aparece {
    from { opacity: 0; }
    to { opacity: 0.45; }
}

/* ── 🆕 RAD-609 G: EN LA COMPU (≥ 768 px) — LA MISMA barra, arriba a la derecha (en la barra del logo): cada una con su ícono y su
   palabra al lado («Marcas ▾» dice que abre); la de la página, con fondo gris muy claro. «Marcas» abre un DESPLEGABLE con sombra, debajo
   de la barra, del ancho de la página, con las marcas en 4 COLUMNAS (una grilla: ninguna barra de desplazamiento de costado); «Menú»,
   otro debajo de su botón. Se cierran tocando afuera o con Escape (pedido.js), o con su botón. ── */
@media (min-width: 768px) {
    .acciones { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; margin-right: -8px; }
    .accion { gap: 8px; height: 44px; padding: 0 12px; border-radius: 10px; font-size: 0.95rem; }
    .accion .icono { width: 20px; height: 20px; }
    .accion:hover { background: #f3f4f6; color: var(--fuerte); }
    .accion.activa,
    .ver-pedido .accion.carrito { background: #f3f4f6; }
    .ver-pedido .accion.activa { background: transparent; }
    .desplegable[open] > .accion { background: #f3f4f6; }
    .accion-marcas::after { content: "▾"; margin-left: -2px; color: var(--suave); font-size: 0.85rem; }
    .desplegable-menu { position: relative; }
    .hoja {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 60;
        width: min(320px, calc(100vw - 24px));
        max-height: calc(100vh - var(--alto-barra) - 24px);
        border: 1px solid var(--borde);
        border-radius: 16px;
        box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.18);
        animation: menu-abre 0.16s ease-out;
    }
    .hoja-marcas { top: 100%; right: var(--lado); width: min(880px, calc(100% - 32px)); }
    .marcas-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .hoja,
    .desplegable[open] > .accion::before { animation: none; }
}

/* LA ESTRELLA, DORADA (el dueño: «que la estrella esté aunque sea en amarillo; algo más visual, se pierde entre tanto negro»): en
   «★ Recomendados» (🆕 G: en la hoja de las marcas y arriba del contenido), en el globito «★ Recomendado» y en el título «★ <marca>».
   EL ÚNICO lugar del dorado. */
.estrella { color: #f59e0b; }

/* ── 🆕 RAD-609 C-bis: LA ENTRADA — la pantalla de la clave y la del aviso, MODERNAS (el dueño: «como /sistema/deposito/, algo
   moderno, no arcaico»; el molde: deposito/index.php r.351-405 y deposito/login.css, LEÍDOS, no cargados): la pantalla entera en
   gris claro y, en el centro, UNA tarjeta blanca con el logo ADENTRO, mucho aire, bordes redondeados y una sombra suave. El
   formulario es EL MISMO (POST, el token, la clave): sólo cambia el dibujo. ── */
body.entrada {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: #f3f4f6;
}
.entrada-caja {
    width: 100%;
    max-width: 420px;
    text-align: center;
    animation: entrada-sube 0.5s ease-out;
}
@keyframes entrada-sube {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.entrada-tarjeta {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 20px;
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.18);
    padding: 40px 32px;
    margin: 0 0 20px;
}
.entrada .encabezado { flex-direction: column; align-items: center; gap: 16px; margin: 0 0 8px; }
.entrada .encabezado h1 { flex: 0 0 auto; font-size: 1.6rem; color: var(--fuerte); }
.entrada-sub { margin: 0 0 24px; color: var(--suave); font-size: 1rem; }
.aviso p { margin: 12px 0 0; font-size: 1.1rem; color: var(--texto); }
/* el aviso del intento anterior (errada, el freno, el formulario vencido): un recuadro suave, gris, no un rojo chillón */
.clave-mensaje {
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid var(--borde);
    border-left: 4px solid var(--suave);
    border-radius: 10px;
    background: var(--encabezado-fondo);
    color: var(--acento);
    text-align: left;
}
.clave-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.clave-form label { font-weight: 600; font-size: 0.95rem; color: var(--acento); }
/* el campo de la clave, GRANDE y con las cifras centradas */
.clave-form input[type="password"] {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    font-size: 1.25rem;
    text-align: center;
    letter-spacing: 0.25em;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: var(--papel);
    color: var(--fuerte);
}
.clave-form input[type="password"]:focus { border-color: var(--acento); }
/* 🆕 RAD-613 C2a — LA ENTRADA CON USUARIO (el dueño: «Campo: Usuario o Email, Campo: Contraseña, Botón: Ingresar al Sistema, como está en
   /sistema/reventa/login.php»): sus dos campos, como el de la clave pero con la letra de un texto (sin las cifras separadas ni centradas;
   16 px o más: el teléfono no agranda la pantalla al tocarlos), y debajo el desplegable «¿Tenés la clave numérica?» (un <details>: anda
   sin JavaScript) con la clave de hoy adentro. Los colores, los de hoy: NINGUNO nuevo. */
.clave-form input[type="text"] {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    font-size: 1.05rem;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: var(--papel);
    color: var(--fuerte);
}
.clave-form input[type="text"]:focus { border-color: var(--acento); }
.usuario-form input[type="password"] { font-size: 1.05rem; text-align: left; letter-spacing: normal; }
.entrada-clave { margin: 22px 0 0; text-align: left; }
.entrada-clave > summary { cursor: pointer; color: var(--suave); font-size: 0.95rem; text-align: center; }
.entrada-clave[open] > summary { margin: 0 0 12px; }
.entrada-pregunta { margin: 26px 0 10px; color: var(--suave); font-size: 1rem; }
.entrada-whatsapp { margin: 24px 0 0; }
.entrada-pie { margin: 0; color: var(--suave); font-size: 0.875rem; }
@media (prefers-reduced-motion: reduce) {
    .entrada-caja { animation: none; }
}

.clave-form button,
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--acento);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.clave-form button:hover,
.boton:hover { filter: brightness(1.08); }
/* 🆕 RAD-609 C-bis: en la tarjeta de la entrada, el botón «Ver las listas ➜» y el de WhatsApp, de TODO el ancho */
.clave-form button { width: 100%; min-height: 52px; margin-top: 6px; border-radius: 12px; font-size: 1.05rem; }
.entrada .boton-whatsapp { width: 100%; min-height: 48px; border-radius: 12px; }
/* 🆕 RAD-609 C: el enlace para pedir la clave por WhatsApp · 🆕 C-bis: con su ícono. EL ÚNICO COLOR DE LA PÁGINA (🆕 F: con el dorado
   de las estrellas): el verde de WhatsApp, para que se reconozca de un vistazo. 🆕 RAD-609 F: el botón «WhatsApp» de arriba SALE (el
   dueño: «el WhatsApp nunca va allí: va en globos a la derecha, abajo»): ahora es el globo (.whatsapp-globo, al final). */
.clave-whatsapp { margin: 0; }
.boton-whatsapp { background: #25d366; color: #ffffff; gap: 8px; }
.icono-wa { display: block; flex: 0 0 auto; }
/* 🆕 RAD-609 C-bis: el foco del teclado, en el gris oscuro del acento (no el azul del navegador) · 🆕 F: también el ☰ y sus opciones */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ── 🆕 RAD-609 D: «Descargar PDF» — 🆕 F: una opción del menú ☰ (.menu-op); mientras arma, gris y con el cursor de espera. Su aviso
   «Armando el PDF…» / «Listo…» (lo escribe pdf.js; vacío, no se ve) es un CARTELITO FIJO abajo a la derecha, arriba del globo de
   WhatsApp, gris oscuro con letra blanca y sombra suave: se ve aunque el menú se haya cerrado. Sin colores nuevos. ── */
.boton-pdf:disabled { cursor: progress; opacity: 0.75; }
.pdf-estado {
    position: fixed;
    right: 16px;
    bottom: 84px;
    left: 16px;
    z-index: 70;
    max-width: 420px;
    margin: 0 0 0 auto;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--acento);
    color: #ffffff;
    font-size: 0.95rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.pdf-estado:empty { display: none; }

/* ── 🆕 RAD-609 E: ARMAR EL PEDIDO. Celular primero: nada de ancho fijo de página, botones de dedo (44 px), la cantidad en letra de
   16 px (el iPhone no agranda la pantalla al tocarla). Lo que pedido.js todavía no mostró (o sin JavaScript) lleva el atributo hidden y
   NO se ve, aunque otra regla le ponga display (los «− N +» ponen display: flex). Colores: los de la paleta. ── */
[hidden] { display: none !important; }

/* la X del aviso del PDF (la pone pdf.js al lado de «Listo: …» o «No se pudo…»): gris, de dedo, a la derecha del aviso */
.pdf-estado-cerrar {
    float: right;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -10px -8px -10px 10px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--suave);
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.pdf-estado-cerrar:focus-visible { outline-color: #ffffff; }

/* los «− N +»: 🆕 RAD-609 E-bis ABAJO DE TODO en la tarjeta (la caja se va al fondo), a todo el ancho y separados por una línea gris
   fina. Sin sabores o con uno, UN control: el número se estira entre «−» y «+». Con varios sabores, un RENGLÓN por sabor: el nombre
   ENTERO a la izquierda (break-word, NUNCA anywhere —partía «Punc h»— y sin min-width: 0, así no se achica por debajo de su palabra
   más larga) y el control a la derecha sin achicarse; si no entran juntos, el control BAJA. El sabor sin stock: su nombre y «sin
   stock» en gris, sin botones. */
.pedir-caja { display: flex; flex-direction: column; gap: 8px; }
.tarjeta .pedir-caja { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--borde); }
.tarjeta-listas:not(:last-child) { margin-bottom: 12px; }
.pedir { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pedir-caja > .pedir .pedir-cantidad { flex: 1 1 auto; width: auto; min-width: 0; }
.pedir-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pedir-sabor { flex: 1 1 0; font-size: 1rem; color: var(--texto); overflow-wrap: break-word; }
.pedir-fila .pedir { flex: 0 0 auto; margin-left: auto; }
.pedir-sin-stock { flex: 0 0 auto; margin-left: auto; color: var(--suave); font-size: 0.95rem; }
.pedir-agotado .pedir-sabor { color: var(--suave); }
.pedir-menos,
.pedir-mas {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: var(--papel);
    color: var(--acento);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.pedir-mas { background: var(--acento); border-color: var(--acento); color: #ffffff; }
.pedir-cantidad {
    flex: 0 0 auto;
    width: 64px;
    min-height: 44px;
    padding: 6px 4px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: var(--papel);
    color: var(--fuerte);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.pedir-cantidad::-webkit-outer-spin-button,
.pedir-cantidad::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pedir-cantidad:focus { border-color: var(--acento); }
/* 🆕 RAD-612 — EL NÚMERO DE LO QUE YA ESTÁ EN EL PEDIDO (el dueño: «que quede en verdecito el numérico… como que es diferente a los
   demás»): el «− N +» del catálogo cuyo producto (y sabor) ya está en el pedido lleva con-cantidad (la pone y la saca pedido.js; en «Así
   queda tu pedido», no): el número con fondo verde muy claro, el borde verde de la línea del total y en negrita, sin gritar; vale en el
   celular y en la compu (afuera de toda @media) y gana a la regla de arriba (también con el foco: el aro del teclado sigue igual). */
.pedir.con-cantidad .pedir-cantidad { background: #ecfdf5; border-color: #059669; font-weight: 700; }

/* LA BARRA DEL PEDIDO — 🆕 RAD-609 F: LA LÍNEA DEL TOTAL, FIJA debajo de las pestañas (sticky; el dueño: «el total, que se vaya viendo
   en vivo aunque scrollee hacia abajo o navegue»): una franja fina gris muy clara con «N productos · <la lista> · $ total» en negrita y,
   al lado, cuánto falta, más chico; TODA la franja es un enlace a «Así queda tu pedido» (la flechita › lo dice). Si no entra en un
   renglón (en un celular angosto, con «Te faltan…»), lo que falta baja, chico, adentro de la misma franja.
   🆕 RAD-609 G — EN VERDE (el dueño: «¿no podría ser en VERDE o algún color? está todo tan gris que asusta»): la franja #059669 (un verde
   distinto del de WhatsApp, #25d366, para no confundirlos) con TODA la letra blanca (el resumen y el monto, en negrita); fija debajo de
   la barra de arriba (se fueron las pestañas). Es el ÚNICO lugar de ese verde (🆕 RAD-612: y el borde del número de lo que ya está en
   el pedido, .pedir.con-cantidad). */
.pedido-barra {
    position: sticky;
    top: var(--alto-barra);
    z-index: 30;
    padding: 0 var(--lado);
    background: #059669;
    color: #ffffff;
    box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.18);
}
.barra-ver {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 12px;
    min-height: 44px;
    padding: 11px 24px 11px 0;
    color: #ffffff;
    text-decoration: none;
}
.barra-ver::after { content: "›"; position: absolute; top: 50%; right: 2px; transform: translateY(-50%); color: #ffffff; font-size: 1.6rem; line-height: 1; }
.barra-resumen { font-size: 0.95rem; font-weight: 800; white-space: nowrap; }
.barra-falta { font-size: 0.85rem; font-weight: 600; color: #ffffff; }
.barra-aviso { margin: 0; padding: 8px 0; color: #ffffff; font-size: 0.9rem; }

/* «ASÍ QUEDA TU PEDIDO» (#pedido): con ella a la vista, lo demás se esconde (🆕 RAD-609 F: queda la barra de arriba —el logo, el carrito
   y el ☰—; se van las pestañas, la línea del total, el contenido, el pie y el GLOBO de WhatsApp: ahí está el verde «Enviar por
   WhatsApp»). La pantalla, centrada y con aire. 🆕 RAD-609 G: queda la barra de acciones, con el carrito marcado (arriba). */
.ver-pedido .pedido-barra,
.ver-pedido .pagina,
.ver-pedido .pie,
.ver-pedido .whatsapp-globo { display: none; }
.pedido-pantalla { max-width: 760px; margin: 0 auto; padding: 20px 16px 40px; }
.pedido-titulo { margin: 0 0 14px; font-size: 1.5rem; color: var(--fuerte); }
.pedido-aviso,
.pedido-largo {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--borde);
    border-left: 4px solid var(--suave);
    border-radius: 10px;
    background: var(--encabezado-fondo);
    color: var(--acento);
}
.pedido-vacio { margin: 0 0 16px; color: var(--suave); font-size: 1.05rem; }
.pedido-filas { display: flex; flex-direction: column; gap: 10px; }
.pedido-fila {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 12px;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: var(--papel);
}
.pedido-foto {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #ffffff;
}
.pedido-foto.foto-vacia { background: #f3f4f6; border-style: dashed; }
.pedido-info { min-width: 0; }
.pedido-nombre { margin: 0; font-weight: 700; color: var(--fuerte); overflow-wrap: break-word; }
.pedido-sabor { margin: 2px 0 0; color: var(--suave); }
.pedido-info .pedir { justify-content: flex-start; margin-top: 8px; }
.pedido-montos {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    padding-top: 8px;
    border-top: 1px solid var(--borde);
}
.pedido-montos p { margin: 0; }
.pedido-subtotal { font-weight: 700; color: var(--fuerte); }
.pedido-resumen {
    margin: 16px 0 0;
    padding: 16px;
    border: 1px solid var(--borde);
    border-left: 4px solid #374151;
    border-radius: 12px;
    background: var(--encabezado-fondo);
}
.pedido-resumen p { margin: 0 0 6px; }
.pedido-resumen p:last-child { margin-bottom: 0; }
.pedido-falta { font-weight: 700; color: var(--acento); }
/* 🆕 RAD-609 E-ter — el dueño: «abajo, en otro color, pondría TOTAL → TOTAL A PAGAR» (eligió: una FRANJA GRIS OSCURA con letra BLANCA
   grande, a todo el ancho del resumen) · «donde dice "Vendiendo al Valor Público Sugerido ganás $X", en negrita» */
.pedido-total {
    padding: 12px 16px;
    border-radius: 10px;
    background: #374151;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.3;
}
.pedido-ganas-total { font-weight: 800; color: var(--fuerte); }
.pedido-largo { margin: 12px 0 0; }
.pedido-estado {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--acento);
    color: #ffffff;
}
.pedido-estado:empty { display: none; }
.pedido-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
/* 🆕 RAD-609 F: con su ícono adelante («← Regresar al listado», la papelera de «Vaciar el pedido»), separado del texto */
.boton-claro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: var(--papel);
    color: var(--acento);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.boton-claro:hover { border-color: var(--acento); }
/* en una pantalla ancha, el renglón del pedido en una línea: la foto, el producto y, a la derecha, los montos */
@media (min-width: 700px) {
    .pedido-fila { grid-template-columns: 56px minmax(0, 1fr) auto; }
    .pedido-montos { grid-column: 3; flex-direction: column; align-items: flex-end; justify-content: flex-start; padding-top: 0; border-top: 0; text-align: right; }
}
/* ── 🆕 RAD-613 ⑥ — LA «×» DE CADA RENGLÓN de «Así queda tu pedido» (el dueño: «tiene que tener una X para borrar el producto si no
   quiere; si no, tenemos que hacerle clic al "−" hasta que desaparece»; la pone pedido.js): gris, arriba a la derecha del renglón, de
   DEDO (44 px), sin fondo (al pasar el mouse, gris muy claro). El renglón le deja su lugar: el nombre no pasa por debajo de la «×» y, en
   la compu, los montos tampoco. Ningún color nuevo. ── */
.pedido-fila { position: relative; }
.pedido-quitar {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--suave);
    cursor: pointer;
}
.pedido-quitar:hover { background: #f3f4f6; color: var(--acento); }
.pedido-info { padding-right: 36px; }
@media (min-width: 700px) {
    .pedido-fila { padding-right: 52px; }
    .pedido-info { padding-right: 0; }
}

/* ── 🆕 RAD-609 C: «¿Cómo funciona el precio?» ── 🆕 RAD-609 F: adentro del menú ☰ (se despliega ahí mismo, debajo de su opción):
   un recuadro gris muy claro, sin su título (lo dice la opción), con la explicación y un renglón por lista. Lo dibuja lpb_como_funciona(),
   igual que antes. (Se va el recuadro grande de arriba, su borde izquierdo gris oscuro y sus márgenes.) */
.como-funciona {
    margin: 2px 4px 8px;
    padding: 12px;
    border-radius: 12px;
    background: var(--encabezado-fondo);
}
.como-funciona h2 { display: none; }
.como-funciona p { margin: 0 0 10px; font-size: 0.92rem; color: var(--texto); }
.escalones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.escalones li {
    padding: 8px 12px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--papel);
    font-size: 0.92rem;
}
.escalon-cantidad { font-weight: 700; }
.escalon-lista { font-weight: 700; color: var(--acento); }

/* 🆕 RAD-609 F: SALEN «llevando N o más» y el «?» de cada lista (.minimo, .cuando, .ayuda y su globito): el dueño, «en todos lados dice
   "llevando 60 o más", lo que hace fichas súper grandes, y el ícono ?: sacarlos de todos». */
.solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── 🆕 RAD-609 F: LA LÍNEA DE LAS LISTAS, arriba del contenido («Lista 1: 12+ · Lista 2: 36+ · Lista 3: 60+»): chica y gris ── 🆕 RAD-613 ④:
   SIN USO (la línea salió de la página); la regla queda, como lpb_escalas() en index.php */
.escalas { margin: 0 0 16px; color: var(--suave); font-size: 0.9rem; font-weight: 600; }
/* 🆕 RAD-609 G: LO QUE SE ESTÁ VIENDO, arriba de la línea de las listas («★ Recomendados» o la marca: se fue la fila que lo marcaba):
   chico, en mayúsculas espaciadas y gris oscuro (🆕 RAD-613 ④: sólo en «★ Recomendados», arriba de las destacadas) */
.viendo { margin: 0 0 4px; color: var(--acento); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── las destacadas ── 🆕 RAD-609 F: sin recuadro (en el celular, una caja adentro de otra le roba ancho a las tarjetas): el título
   «★ <marca>» con la estrella DORADA (.estrella), el texto, el botón y las tarjetas, con aire entre una marca y la otra. La marca de una
   pestaña que no es destacada (.marca-sec), con su nombre de título, igual. */
.destacada,
.marca-sec { margin: 0 0 28px; }
.destacada-titulo,
.marca-titulo { margin: 4px 0 10px; font-size: 1.35rem; line-height: 1.25; color: var(--fuerte); letter-spacing: -0.01em; }
.destacada-texto { margin: 0 0 12px; color: #374151; white-space: normal; }
.destacada-accion { margin: 0 0 16px; }
/* 🆕 RAD-609 E-ter — el dueño: «a los destacados una estrella ponerle o un globo Recomendado»: en CADA tarjeta de una destacada, el
   globito «★ Recomendado» (lo pone index.php). 🆕 RAD-609 F — el dueño: «el Recomendado también en negro ni se nota: que la estrella
   esté aunque sea en amarillo; algo más visual, se pierde entre tanto negro»: una pastilla BLANCA con borde gris, el texto gris oscuro
   y la ESTRELLA DORADA (.estrella); va arriba del nombre. Las tarjetas de una marca que no es destacada no lo llevan. */
.recomendado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 6px;
    padding: 2px 10px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #ffffff;
    color: var(--acento);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
}

.tarjetas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
/* 🆕 RAD-609 F — LA TARJETA COMPACTA (la misma en el celular y en la compu): bordes redondeados y una sombra suave; arriba UN renglón
   con la foto chica (64 px), el nombre (y debajo, chico, el sabor o «Sin stock») y, a la derecha, «Valor Sugerido al Público» con su
   monto; debajo, un renglón por lista: el nombre, el precio y «Ganás $X» (sin «llevando N o más» ni «?»; 🆕 RAD-613 ⑤: «Ganás $X», adentro
   de la lupa: abajo, .ventanita); abajo de todo, los «− N +». */
.tarjeta {
    border: 1px solid var(--borde);
    border-radius: 16px;
    padding: 12px;
    background: var(--papel);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}
.tarjeta-cabeza { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.tarjeta-foto { flex: 0 0 auto; }
.tarjeta-foto .foto { display: block; width: 64px; height: 64px; border-radius: 10px; }
.tarjeta-info { flex: 1 1 auto; min-width: 0; }
.tarjeta .nombre { margin: 0; font-size: 0.98rem; line-height: 1.3; color: var(--fuerte); overflow-wrap: break-word; }
/* 🆕 C-bis: «Valor Público Sugerido» entero, sin fondo de color y sin nada que lo corte · 🆕 RAD-609 F: «Valor Sugerido al Público», a la
   DERECHA del renglón de la foto: la etiqueta chica y gris (en dos renglones si no entra), y el monto en negrita debajo */
.publico {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    max-width: 104px;
    margin: 0;
    text-align: right;
    line-height: 1.2;
}
.publico .etiqueta { color: var(--suave); font-size: 0.72rem; font-weight: 600; }
.publico .monto { font-size: 1rem; font-weight: 800; color: var(--fuerte); white-space: nowrap; }
.tarjeta-listas { list-style: none; margin: 0; padding: 0; }
.tarjeta-listas li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 0 10px;
    padding: 7px 10px;
    margin-top: 4px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--papel);
}
.tarjeta-listas .lista-nombre { font-size: 0.9rem; font-weight: 700; color: var(--acento); }
.tarjeta-listas .precio { font-weight: 800; color: var(--fuerte); text-align: right; white-space: nowrap; }
/* 🆕 RAD-613 ⑤: .ganancia, SIN USO («Ganás $X» va adentro de la lupa: .ventanita, abajo); la regla queda, como .escalas */
.tarjeta-listas .ganancia { font-size: 0.82rem; color: var(--suave); font-weight: 600; text-align: right; white-space: nowrap; }
/* 🆕 RAD-609 E-bis: LA LISTA QUE LE TOCA al pedido de hoy (pedido.js le pone lista-actual a ese renglón en cada tarjeta): borde izquierdo
   gris oscuro y fondo gris muy claro (en todas las tarjetas, también las de las destacadas). Con el pedido vacío o con menos del
   mínimo, ninguna. */
.tarjeta .tarjeta-listas li.lista-actual { border-left: 4px solid #374151; padding-left: 7px; background: #f3f4f6; }

/* ── 🆕 RAD-613 ⑤ — LAS AYUDAS DE LA TARJETA (el dueño: «el iconito de ? que despliegue una ventanita» · «en vez de Ganás $XXX estaría
   bueno que haya una lupa»): al lado de «Valor Sugerido al Público», un «?» (la etiqueta y el «?» en un renglón: .publico-rotulo) y, en
   cada lista, una LUPA donde estaba «Ganás $X». Cada una es un <details class="ventanita"> (sin JavaScript se abre y se cierra tocando
   el ícono; pedido.js además la cierra al tocar afuera, al abrir otra y con Escape). El ícono, un círculo CHICO gris de borde fino (el
   molde del «?» de la C-bis); abierto, gris oscuro con el dibujo blanco. LA VENTANITA, un recuadro chico blanco con borde gris y sombra
   suave que FLOTA debajo del ícono (posición absoluta: abrirla no mueve ni estira nada), alineada a su borde DERECHO —los dos íconos van
   a la derecha de la tarjeta: crece hacia adentro— y nunca más ancha que la pantalla menos sus márgenes: no se sale del celular. Ningún
   color nuevo. ── */
.publico-rotulo { display: flex; align-items: flex-start; justify-content: flex-end; gap: 4px; }
.ventanita { position: relative; flex: 0 0 auto; }
.ventanita[open] { z-index: 20; }
.ventanita-icono {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid #9ca3af;
    border-radius: 50%;
    background: #ffffff;
    color: var(--suave);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;   /* centrado también si un navegador viejo no deja al <summary> ser flex (como el ícono de la barra) */
    cursor: pointer;
    user-select: none;
}
.ventanita-icono::-webkit-details-marker { display: none; }
.ventanita[open] > .ventanita-icono { border-color: var(--acento); background: var(--acento); color: #ffffff; }
.ventanita-icono .lupa { display: block; width: 12px; height: 12px; margin: 0 auto; }
.ventanita-texto {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: block;
    width: max-content;
    max-width: min(260px, calc(100vw - 48px));
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    color: var(--acento);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
}
.tarjeta-listas .ventanita { align-self: center; }
/* en el celular, el ícono es de DEDO (44 px) sin agrandar el dibujo ni mover nada: el borde transparente suma el lugar que se toca y el
   margen negativo se lo devuelve al renglón (el molde: el «?» de la C-bis en el celular) */
@media (max-width: 600px) {
    .ventanita-icono { width: 44px; height: 44px; margin: -12px; border: 12px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px #9ca3af; }
    .ventanita[open] > .ventanita-icono { border-color: transparent; box-shadow: inset 0 0 0 1px var(--acento); }
}

/* ── la foto ── */
.foto {
    display: inline-block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--borde);
    background: #ffffff;
}
.foto-vacia { background: #f3f4f6; border-style: dashed; }

/* ── los sabores y el stock ── */
.sabores { font-size: 0.82rem; color: var(--suave); margin-top: 2px; }
.sabores .atributo { font-weight: 600; }
.sabor:not(:last-child)::after { content: ","; }
.sabor-agotado { color: #9ca3af; }
.sin-stock {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--suave);
    font-size: 0.78rem;
    font-weight: 700;
}
.agotado .foto { opacity: 0.6; }

/* 🆕 RAD-609 F: SALEN la sección de abajo y sus botones de marca («¿Qué lista querés ver?»: .general, .marcas, .marca y el nombre de
   la marca, .tabla-titulo): los reemplazan las pestañas de arriba. */
.vacio { color: var(--suave); margin: 4px 0 0; }

/* ── 🆕 RAD-609 F: EL PIE (el dueño: «pie de página inexistente, aunque sea volver arriba»): «↑ Volver arriba» (de dedo) y
   «© DeMusculos.com», con una línea fina arriba; abajo, lugar para que el globo no lo tape. ── */
.pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 16px 96px;
    border-top: 1px solid var(--borde);
    color: var(--suave);
    font-size: 0.875rem;
}
.pie-arriba { display: inline-flex; align-items: center; min-height: 44px; color: var(--acento); font-weight: 700; text-decoration: none; }
.pie-arriba:hover { text-decoration: underline; }

/* ── 🆕 RAD-609 F: WHATSAPP EN UN GLOBO (el dueño: «van en globos a la derecha, abajo»): un botón REDONDO verde de 56 px con el ícono
   blanco, FIJO abajo a la derecha, con sombra suave. En «Así queda tu pedido» no se ve (.ver-pedido, arriba). ── */
.whatsapp-globo {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    text-decoration: none;
}
.whatsapp-globo:hover { filter: brightness(1.05); }
.whatsapp-globo .icono-wa { width: 30px; height: 30px; }

/* ── las pantallas angostas: 2 tarjetas por fila en las tablets, 1 en el celular ── */
@media (max-width: 900px) {
    .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .pagina { padding: 14px 16px 28px; }
    .tarjetas { grid-template-columns: 1fr; gap: 12px; }

    /* 🆕 RAD-609 C — EL CELULAR PRIMERO (≈ 360 px): sin desplazarse de costado, botones de dedo (44 px o más) y la letra que
       se lee de 16 px o más (el campo de la clave también: si no, el teléfono agranda la pantalla al tocarlo). 🆕 RAD-609 F: la
       tarjeta compacta conserva su letra chica en lo secundario (la etiqueta del valor sugerido, «Ganás», el sabor); salen las reglas
       de los botones de marca, del recuadro del precio y del «?». */
    .clave-form input[type="password"] { min-height: 48px; font-size: 1.125rem; }
    .clave-form button,
    .boton { width: 100%; min-height: 48px; font-size: 1.05rem; }
    .logo-nombre { font-size: 1.25rem; }
    /* 🆕 C-bis: la entrada, casi todo el ancho con margen */
    body.entrada { padding: 16px 12px; }
    .entrada-tarjeta { padding: 28px 20px; border-radius: 18px; }
}
/* 🆕 RAD-609 F: en un celular MUY angosto (≤ 360 px), el nombre del sitio un poco más chico para que entren el carrito y el ☰ (🆕 G: el
   carrito y el ☰ se fueron abajo; la regla queda: el logo, como hoy) */
@media (max-width: 360px) {
    .barra-sup .logo-nombre { font-size: 1.05rem; }
    .barra-sup .logo-img { width: 34px; height: 34px; }
}

/* ── 🆕 RAD-609 E, EN EL CELULAR (≤ 600 px): los botones de «Así queda tu pedido», de todo el ancho y de 48 px. (🆕 RAD-609 E-bis: los
   «− N +» de las tarjetas, igual que en la compu. 🆕 RAD-609 F: salen las dos reglas de la barra vieja del pedido —su relleno y su
   botón «Ver mi pedido»—: la línea del total es una franja fina, igual en todas las pantallas.) ── */
@media (max-width: 600px) {
    .boton-claro { width: 100%; min-height: 48px; }
}

/* ── 🆕 RAD-609 G, EN EL CELULAR (≤ 767 px): el globo de WhatsApp y el aviso del PDF, ARRIBA de la barra de acciones (acá, al final:
   tienen que ganarle a sus reglas de siempre, que están más arriba). ── */
@media (max-width: 767px) {
    .whatsapp-globo { bottom: calc(var(--alto-abajo) + 16px); bottom: calc(var(--alto-abajo) + 16px + env(safe-area-inset-bottom, 0px)); }
    .pdf-estado { bottom: calc(var(--alto-abajo) + 84px); bottom: calc(var(--alto-abajo) + 84px + env(safe-area-inset-bottom, 0px)); }
}