/* ==========================================================================
   TIENDA TKS — sistema visual
   --------------------------------------------------------------------------
   Calcado del lenguaje de diseno de Apple: fondo casi blanco, tipografia
   apretada y pesada en los titulos, mucho aire, azul unico de accion, y
   esquinas de 18px. Las decisiones que no son obvias van comentadas.

   Reglas que se respetan a proposito:
     · Ningun texto se corta sin aviso: se usa line-clamp con altura estable.
     · prefers-reduced-motion apaga las animaciones, no solo las acorta.
     · Los objetivos tactiles nunca bajan de 44px, como pide Apple.
     · El foco de teclado siempre se ve; nunca outline:none a secas.
   ========================================================================== */

:root {
    /* Tipografia: primero las fuentes del sistema Apple, luego las de Windows */
    --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
              "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Color. Los valores son los de apple.com, no aproximaciones. */
    /*
     * Paleta OnlineStore. Los cuatro tonos del manual de marca y nada mas:
     * cada color de mas es un color que alguien usara para algo distinto en
     * cada pantalla.
     *
     * `--azul` lo PISA cada tienda con el suyo (tienda.js lo inyecta desde sus
     * ajustes). El acento naranja no: es de la plataforma, y es lo unico
     * calido que hay, asi que se reserva para lo que de verdad tiene que
     * mirarse — un aviso, una cuenta atras, la ventana del isotipo.
     */
    --tinta: #0f172a;
    --tinta-suave: #475569;
    --tinta-tenue: #94a3b8;
    --papel: #ffffff;
    --papel-alt: #f1f5f9;
    --linea: rgba(0, 0, 0, .12);
    --linea-tenue: rgba(0, 0, 0, .06);
    --azul: #2563eb;
    --azul-vivo: #1d4ed8;
    --acento: #f59e0b;
    --rojo: #bf4800;
    --verde: #008009;
    --barra: rgba(255, 255, 255, .72);
    /* La barra es translucida; el degradado que avisa de que el menu
       sigue necesita un color solido con el que fundirse. */
    --barra-solida: #fbfbfd;
    --sombra: 0 4px 24px rgba(0, 0, 0, .08);
    --sombra-alta: 0 12px 48px rgba(0, 0, 0, .16);

    --radio: 18px;
    --radio-chico: 12px;
    --pastilla: 980px;
    --ancho: 1240px;
    --barra-alto: 48px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tinta: #f1f5f9;
        --tinta-suave: #94a3b8;
        --tinta-tenue: #64748b;
        --papel: #0f172a;
        --papel-alt: #1e293b;
        --linea: rgba(255, 255, 255, .16);
        --linea-tenue: rgba(255, 255, 255, .08);
        /* En oscuro el azul de marca no tiene contraste suficiente sobre el
           fondo; se sube un escalon en vez de usar el mismo numero. */
        --azul: #60a5fa;
        --azul-vivo: #93c5fd;
        --acento: #fbbf24;
        --rojo: #ff6b3d;
        --verde: #41d152;
        --barra: rgba(22, 22, 24, .72);
        --barra-solida: #161618;
        --sombra: 0 4px 24px rgba(0, 0, 0, .5);
        --sombra-alta: 0 12px 48px rgba(0, 0, 0, .7);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -.022em;
    color: var(--tinta);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
.titular {
    font-size: clamp(2.5rem, 6vw, 4.2rem);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0;
}

.subtitulo {
    font-size: clamp(1.15rem, 2.2vw, 1.6rem);
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: .004em;
    color: var(--tinta-suave);
    margin: .6rem 0 0;
}

.seccion-titulo {
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -.012em;
    margin: 0 0 1.5rem;
}

.eyebrow {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    margin: 0 0 .5rem;
}

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.seccion { padding-block: clamp(3rem, 7vw, 5.5rem); }
.seccion--alt { background: var(--papel-alt); }

/* --------------------------------------------------------------------------
   Barra superior — traslucida y con desenfoque, como la de Apple
   -------------------------------------------------------------------------- */
.barra {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--barra);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--linea-tenue);
}

.barra__interior {
    height: var(--barra-alto);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.barra__marca {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    color: var(--tinta);
    white-space: nowrap;
    flex-shrink: 0;
}

/* El menú de categorías no siempre cabe: con trece categorías, en un portátil
   se corta a media palabra. Se desplaza de lado, pero eso hay que ANUNCIARLO
   — un menú cortado sin ninguna señal parece un menú roto, y el cliente no
   descubre las categorías que no ve. De ahí el degradado y las flechas. */
.barra__menu-caja {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
.barra__menu-caja::before,
.barra__menu-caja::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 3rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 2;
}
.barra__menu-caja::before {
    left: 0;
    background: linear-gradient(to right, var(--barra-solida), transparent);
}
.barra__menu-caja::after {
    right: 0;
    background: linear-gradient(to left, var(--barra-solida), transparent);
}
.barra__menu-caja[data-izq="si"]::before,
.barra__menu-caja[data-der="si"]::after { opacity: 1; }

.barra__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    appearance: none;
    border: 1px solid var(--linea);
    background: var(--papel);
    color: var(--tinta);
    width: 26px; height: 26px;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.barra__flecha[hidden] { display: none; }
.barra__flecha--izq { left: -2px; }
.barra__flecha--der { right: -2px; }
/* En pantalla táctil sobran: ahí se arrastra con el dedo. */
@media (hover: none) { .barra__flecha { display: none !important; } }

.barra__menu {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    /* El desplazamiento suave se pide desde el JS con scrollBy, no aqui:
       puesto en el CSS, las flechas dejaban de mover el menu — se asignaba
       scrollLeft y no pasaba nada. */
    scrollbar-width: none;
}
.barra__menu::-webkit-scrollbar { display: none; }

.barra__enlace {
    appearance: none;
    background: none;
    border: 0;
    padding: .5rem .7rem;
    min-height: 44px;
    font-size: .8125rem;
    letter-spacing: -.01em;
    color: var(--tinta);
    opacity: .82;
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--radio-chico);
    transition: opacity .2s ease, background-color .2s ease;
}
.barra__enlace:hover { opacity: 1; background: var(--linea-tenue); }
.barra__enlace[aria-current="true"] { opacity: 1; font-weight: 600; }

.barra__acciones { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }

.icono-boton {
    appearance: none;
    background: none;
    border: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--tinta);
    opacity: .82;
    border-radius: 50%;
    position: relative;
    transition: opacity .2s ease, background-color .2s ease;
}
.icono-boton:hover { opacity: 1; background: var(--linea-tenue); }

.globo {
    position: absolute;
    top: 5px; right: 4px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--azul);
    color: #fff;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: 0;
    display: grid;
    place-items: center;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.boton {
    appearance: none;
    border: 0;
    border-radius: var(--pastilla);
    padding: .75rem 1.35rem;
    min-height: 44px;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -.01em;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: background-color .2s ease, transform .1s ease, opacity .2s ease;
}
.boton:active { transform: scale(.98); }
.boton:disabled { opacity: .4; cursor: not-allowed; }

.boton--principal { background: var(--azul); color: #fff; }
.boton--principal:hover:not(:disabled) { background: var(--azul-vivo); }

.boton--linea {
    background: transparent;
    color: var(--azul);
    border: 1px solid var(--azul);
}
.boton--linea:hover:not(:disabled) { background: var(--azul); color: #fff; }

.boton--tenue { background: var(--linea-tenue); color: var(--tinta); }
.boton--tenue:hover:not(:disabled) { background: var(--linea); }

.enlace-azul {
    color: var(--azul);
    text-decoration: none;
    font-size: 1rem;
}
.enlace-azul:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */
.portada {
    text-align: center;
    padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem);
    background: var(--papel-alt);
}
/*
 * Con banner, la portada cambia de fondo liso a imagen y el texto se pone en
 * blanco. El velo va en el propio background-image, encima de la foto: asi el
 * texto no necesita sombra ni caja y se lee sobre cualquier imagen.
 */
.portada--banner {
    background-size: cover;
    background-position: center;
    color: #fff;
    min-height: min(58vh, 26rem);
    display: flex;
    align-items: center;
}
.portada--banner .titular,
.portada--banner .subtitulo {
    color: #fff;
}
.portada--banner .enlace-azul {
    color: #fff;
    text-decoration: underline;
}

.portada__acciones {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   Filtros
   -------------------------------------------------------------------------- */
.filtros {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 2rem;
}

.ficha {
    appearance: none;
    border: 1px solid var(--linea);
    background: var(--papel);
    color: var(--tinta);
    border-radius: var(--pastilla);
    padding: .5rem 1rem;
    min-height: 44px;
    font-size: .9375rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ficha:hover { border-color: var(--tinta-suave); }
.ficha[aria-pressed="true"] {
    background: var(--tinta);
    color: var(--papel);
    border-color: var(--tinta);
}
.ficha__conteo { opacity: .55; margin-left: .35rem; font-size: .8125rem; }

.buscador {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    height: 44px;
    padding: 0 1rem;
    border-radius: var(--pastilla);
    border: 1px solid var(--linea);
    background: var(--papel);
    font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   Rejilla de productos
   -------------------------------------------------------------------------- */
.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.tarjeta {
    position: relative;          /* ancla del distintivo */
    background: var(--papel-alt);
    border-radius: var(--radio);
    padding: 1.5rem 1.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
    border: 0;
    font: inherit;
    color: inherit;
    transition: transform .3s cubic-bezier(.25, .1, .25, 1), box-shadow .3s ease;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra); }

.tarjeta__medio {
    /* Caja CUADRADA e igual para todas las tarjetas. Antes tenia alto fijo y
       la imagen se dimensionaba con max-height/auto, que depende del tamano
       natural del archivo: las fotos verticales (un iPad, una llanta) se
       salian de la caja y `overflow: hidden` les cortaba la parte de abajo.
       Con width y height al 100% mas object-fit:contain, la foto SIEMPRE
       cabe entera y todas ocupan el mismo espacio. */
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    background: var(--papel);
    border-radius: var(--radio-chico);
    overflow: hidden;
}
.tarjeta__medio img {
    width: 100%;
    height: 100%;
    object-fit: contain;         /* contain nunca recorta; cover si recortaria */
    /* Sin relleno: las fotos ya vienen normalizadas con su propio margen del
       7% (07_normalizar_fotos.py). Poner relleno aqui lo sumaba al de la
       imagen y el producto acababa ocupando solo el 76% de la tarjeta. */
    transition: transform .4s cubic-bezier(.25, .1, .25, 1);
}
.tarjeta:hover .tarjeta__medio img { transform: scale(1.04); }

.tarjeta__sinfoto {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: var(--tinta-tenue);
    font-size: .8125rem;
    border: 1px dashed var(--linea);
    border-radius: var(--radio-chico);
}

.tarjeta__marca {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    margin-bottom: .35rem;
}

.tarjeta__nombre {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    margin: 0 0 .5rem;
    /* Altura fija de dos lineas: sin esto la rejilla se desalinea cuando
       unos nombres ocupan una linea y otros dos. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.tarjeta__opciones {
    font-size: .8125rem;
    color: var(--tinta-tenue);
    margin-bottom: .75rem;
    min-height: 1.2em;
}

.tarjeta__precio { margin-top: auto; font-size: .9375rem; }
.precio-antes {
    color: var(--tinta-tenue);
    text-decoration: line-through;
    margin-right: .4rem;
}
.precio-ahora { font-weight: 600; }
.precio-oferta { color: var(--rojo); }

/* Distintivo de condición del producto: "Reacondicionado grado A".
   Va sobre la foto, no debajo del título: en una rejilla de 240 modelos el
   comprador decide si entra por lo que ve, y una condición como ésta tiene
   que enterarse antes, no después. Azul de TKS con filete dorado — se lee
   como sello de garantía y no como advertencia. */
.distintivo {
    position: absolute;
    top: .9rem;
    left: .9rem;
    z-index: 2;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: #073763;
    color: #fff;
    border: 1px solid #FFCD00;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.distintivo--ficha {
    top: 1.1rem;
    left: 1.1rem;
    font-size: .6875rem;
    padding: .38rem .75rem;
}

.insignia {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--rojo);
    margin-bottom: .35rem;
    min-height: 1em;
}

/* --------------------------------------------------------------------------
   Ficha de producto (capa)
   -------------------------------------------------------------------------- */
.capa {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, .45);
    display: grid;
    place-items: center;
    padding: 1rem;
    animation: aparecer .25s ease;
}
.capa[hidden] { display: none; }

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.ficha-producto {
    background: var(--papel);
    border-radius: var(--radio);
    width: min(960px, 100%);
    max-height: min(90vh, 760px);
    overflow-y: auto;
    position: relative;
    animation: subir .3s cubic-bezier(.25, .1, .25, 1);
}

.ficha-producto__cerrar {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 2;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--linea-tenue);
    color: var(--tinta);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.ficha-producto__cuerpo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    padding: 2.5rem;
}
@media (max-width: 767px) {
    .ficha-producto__cuerpo { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; }
}

.ficha-producto__medio {
    position: relative;          /* ancla del distintivo */
    background: var(--papel);
    border-radius: var(--radio);
    display: grid;
    place-items: center;
    /* misma caja cuadrada que en la tarjeta, por la misma razon */
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.ficha-producto__medio img {
    width: 100%;
    height: 100%;
    object-fit: contain;         /* el margen ya viene en la foto normalizada */
}

.grupo-opcion { margin-bottom: 1.5rem; }
.grupo-opcion__titulo {
    font-size: .875rem;
    font-weight: 600;
    margin: 0 0 .6rem;
    letter-spacing: -.01em;
}

.opciones { display: flex; gap: .5rem; flex-wrap: wrap; }

.opcion {
    appearance: none;
    border: 1px solid var(--linea);
    background: var(--papel);
    color: var(--tinta);
    border-radius: var(--radio-chico);
    padding: .6rem 1rem;
    min-height: 44px;
    font-size: .9375rem;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.opcion:hover { border-color: var(--tinta-suave); }
.opcion[aria-pressed="true"] {
    border-color: var(--azul);
    box-shadow: 0 0 0 1px var(--azul);
}
.opcion:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* No existe con lo que ya se eligió, pero SÍ se puede tocar: al hacerlo, la
   otra opción se mueve sola a una combinación que sí se vende. */
.opcion--limitada { opacity: .45; }
.opcion--limitada:hover { opacity: .75; }

.precio-grande { font-size: 1.75rem; font-weight: 600; letter-spacing: -.015em; }
.ahorro-nota { color: var(--verde); font-size: .9375rem; margin-top: .25rem; }

.aviso-preventa {
    background: var(--papel-alt);
    border-radius: var(--radio-chico);
    padding: .875rem 1rem;
    font-size: .875rem;
    color: var(--tinta-suave);
    margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Carrito
   -------------------------------------------------------------------------- */
.cajon {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 100%);
    background: var(--papel);
    z-index: 110;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sombra-alta);
    animation: entrar-derecha .3s cubic-bezier(.25, .1, .25, 1);
}
.cajon[hidden] { display: none; }

@keyframes entrar-derecha {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.cajon__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--linea-tenue);
}
.cajon__titulo { font-size: 1.25rem; font-weight: 600; margin: 0; }
.cajon__lista { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.cajon__pie { padding: 1.25rem 1.5rem; border-top: 1px solid var(--linea-tenue); }

.renglon {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: .875rem;
    align-items: center;
    padding: .875rem 0;
    border-bottom: 1px solid var(--linea-tenue);
}
.renglon__foto {
    width: 56px; height: 56px;
    background: var(--papel-alt);
    border-radius: var(--radio-chico);
    display: grid; place-items: center;
    overflow: hidden;
}
.renglon__foto img { max-width: 90%; max-height: 90%; object-fit: contain; }
.renglon__nombre { font-size: .9375rem; font-weight: 600; margin: 0 0 .15rem; }
.renglon__detalle { font-size: .8125rem; color: var(--tinta-tenue); margin: 0; }

.cantidad { display: flex; align-items: center; gap: .5rem; }
.cantidad button {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--linea);
    background: var(--papel);
    color: var(--tinta);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.vacio {
    text-align: center;
    color: var(--tinta-tenue);
    padding: 3rem 1rem;
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
/*
 * Los escudos de quien respalda la tienda.
 *
 * En gris y al 70%: son un aval, no un anuncio. A todo color compiten con la
 * marca de la tienda, que es de quien vende. Al pasar el raton recuperan su
 * color, que es cuando alguien los esta mirando de verdad.
 */
.pie__avales {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 4vw, 2.5rem);
    flex-wrap: wrap;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--linea-tenue);
}
.pie__avales img {
    height: 42px;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
    display: block;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .2s ease, opacity .2s ease;
}
.pie__avales img:hover { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .pie__avales img { transition: none; }
}

.pie {
    background: var(--papel-alt);
    border-top: 1px solid var(--linea-tenue);
    padding-block: 2.5rem;
    font-size: .75rem;
    color: var(--tinta-tenue);
    line-height: 1.6;
}

/* Acceso al panel. Discreto a propósito: es una herramienta de trabajo
   dentro de una página de venta, así que se ve si lo buscas y no distrae
   al cliente que viene a comprar. */
.pie__admin {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linea-tenue);
    margin-bottom: 0;
}
.pie__acceso {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--tinta-tenue);
    text-decoration: none;
    font-size: .75rem;
    font-weight: 500;
    transition: color .2s, border-color .2s, background .2s;
}
.pie__acceso:hover {
    color: var(--tinta);
    border-color: var(--tinta-tenue);
    background: var(--papel);
}
.pie__acceso svg { opacity: .7; }


.leyenda-iva {
    font-size: .6875rem; font-weight: 600; color: var(--tinta-tenue);
    margin-left: .3rem; vertical-align: baseline; white-space: nowrap;
}


.esconder { display: none !important; }

/* Solo para lectores de pantalla */
.visualmente-oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ── el cliente y su codigo ──────────────────────────────────────────────
   La barra vive pegada al menu de categorias porque es informacion del mismo
   tipo: dice donde estas parado. En dorado cuando ya entraste, para que se
   note de un vistazo con que cuenta se estan viendo los precios. */
.barra-cliente {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .5rem 1rem;
    font-size: .85rem;
    background: var(--barra-solida, #fbfbfd);
    border-bottom: 1px solid var(--linea, #e5e5ea);
}
.barra-cliente__quien { color: var(--tinta-tenue, #6b6b70); }
.barra-cliente__quien strong { color: var(--tinta, #1d1d1f); }
.barra-cliente__entrar,
.barra-cliente__salir {
    border: 1px solid currentColor;
    background: transparent;
    border-radius: 999px;
    padding: .2rem .8rem;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.barra-cliente__entrar { color: var(--acento, #073763); font-weight: 600; }
.barra-cliente__salir  { color: var(--tinta-tenue, #6b6b70); }
.barra-cliente__entrar:hover,
.barra-cliente__salir:hover { background: rgba(127, 127, 127, .1); }

.velo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 60;
}
.velo[hidden] { display: none; }
.velo__caja {
    background: var(--tarjeta, #fff);
    color: var(--tinta, #1d1d1f);
    border-radius: 14px;
    padding: 1.6rem;
    width: min(24rem, 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.velo__caja h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.velo__nota { margin: 0 0 1rem; font-size: .85rem; color: var(--tinta-tenue, #6b6b70); }
.velo__aviso { margin: .55rem 0 0; font-size: .82rem; color: #c0392b; min-height: 1.1em; }
.velo__botones { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.1rem; }

/* El codigo se lee en voz alta y se copia a mano: monoespaciado y separado
   para que no se confunda una letra con otra. */
.campo-codigo {
    width: 100%;
    padding: .7rem .8rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.15rem;
    letter-spacing: .18em;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid var(--linea, #e5e5ea);
    border-radius: 8px;
    background: var(--fondo, #fff);
    color: inherit;
}
.campo-codigo:focus {
    outline: 2px solid var(--acento, #073763);
    outline-offset: 1px;
}

/* Donde iria el precio, cuando no hay codigo. */
.precio-oculto {
    color: var(--tinta-tenue, #6b6b70);
    font-size: .88rem;
}


/* ── listas de precios en el panel ───────────────────────────────────────
   Las reglas arriba, en una caja aparte, porque son pocas y mandan sobre
   cientos de renglones: mezclarlas con la tabla las volvería invisibles. */
.caja-reglas {
    border: 1px solid var(--linea, #e5e5ea);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin: .75rem 0;
    background: var(--tarjeta, #fff);
}
.regla {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .35rem 0;
}
.regla--general { border-bottom: 1px solid var(--linea, #e5e5ea); padding-bottom: .75rem; }
.regla--general label { font-weight: 600; }
.regla--nueva { border-top: 1px dashed var(--linea, #e5e5ea); margin-top: .5rem; padding-top: .75rem; }
.regla span:first-child { flex: 1; min-width: 12rem; font-size: .875rem; }

/* El código es lo que se copia y se manda por WhatsApp: monoespaciado y
   seleccionable de un golpe. */
.codigo-cliente {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .875rem;
    letter-spacing: .08em;
    padding: .3rem .55rem;
    border-radius: 6px;
    background: var(--fondo-tenue, #f5f5f7);
    border: 1px solid var(--linea, #e5e5ea);
    user-select: all;
}
/* --------------------------------------------------------------------------
   Ficha de cliente
   --------------------------------------------------------------------------
   Tres zonas y no una fila: quien es, como entra, que hacer con el. Todo
   junto en linea dejaba el codigo de acceso —lo que se copia y se manda—
   pegado al desplegable de la lista, y en pantalla estrecha se leian como un
   solo control.
   -------------------------------------------------------------------------- */
.ficha-tienda {
    border: 1px solid var(--linea, #e5e5ea);
    border-radius: 10px;
    padding: .9rem 1rem;
    margin-bottom: .7rem;
    background: var(--papel, #fff);
    display: grid;
    gap: .75rem;
}
.ficha-tienda__cabeza {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    flex-wrap: wrap;
}
.ficha-tienda__quien { flex: 1; min-width: 12rem; }
.ficha-tienda__nombre { font-weight: 600; font-size: 1rem; }
.ficha-tienda__donde {
    font-size: .8125rem;
    color: var(--tinta-tenue, #6b6b70);
    margin-top: .15rem;
}

/* Los accesos: uno por renglon, con su etiqueta a la izquierda. En un movil
   se apilan solos porque la etiqueta tiene ancho minimo. */
.accesos {
    display: grid;
    gap: .45rem;
    padding: .65rem .75rem;
    border-radius: 8px;
    background: var(--papel-alt, #f7f7f9);
}
.acceso {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}
.acceso__etiqueta {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-tenue, #6b6b70);
    min-width: 8.5rem;
}
.acceso__nota {
    font-size: .75rem;
    color: var(--tinta-tenue, #6b6b70);
    flex: 1;
    min-width: 11rem;
}
.clave-oculta {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: .18em;
    color: var(--tinta-tenue, #6b6b70);
    padding: .3rem .55rem;
    border-radius: 6px;
    background: var(--linea, #e5e5ea);
}
.ficha-tienda__pie {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.ficha-tienda--baja { opacity: .55; }
.etiqueta-baja {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #c0392b;
    margin-left: .4rem;
}


/* ── listas de costos ────────────────────────────────────────────────────
   Las columnas de costo van en tono aparte: no son de esta lista de precios,
   son referencia de lo que te cuesta con cada proveedor. Mezclarlas con las
   demás haría dudar de cuál es cuál a media decisión. */
.costo-ref {
    background: var(--fondo-tenue, #f5f5f7);
    color: var(--tinta-tenue, #6b6b70);
    font-size: .8125rem;
}
.costo-ref--mejor {
    color: #1e7a46;
    font-weight: 600;
}
th.costo-ref { font-size: .7rem; }

.dif-baja { color: #1e7a46; font-weight: 600; }
.dif-sube { color: #c0392b; }

.tarjetas-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .6rem;
    margin: .75rem 0;
}
.tarjeta-dato {
    border: 1px solid var(--linea, #e5e5ea);
    border-radius: 10px;
    padding: .75rem .9rem;
    background: var(--tarjeta, #fff);
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.tarjeta-dato b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.tarjeta-dato span { font-size: .75rem; color: var(--tinta-tenue, #6b6b70); line-height: 1.3; }
.tarjeta-dato--bien { border-top: 3px solid #1e7a46; }
.tarjeta-dato--bien b { color: #1e7a46; }
.tarjeta-dato--ojo { border-top: 3px solid #c0392b; }


/* ── sugerencias de titular ──────────────────────────────────
   Agrupadas por lo que promete la portada —precio, surtido o servicio— que es
   la decision de verdad; el texto exacto se afina despues. */
.sugerencias { margin-top: .55rem; display: flex; flex-direction: column; gap: .45rem; }
.sugerencia-grupo { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.sugerencia-etiqueta {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinta-tenue, #6b6b70);
    min-width: 4.5rem;
}
.sugerencia {
    font: inherit;
    font-size: .8125rem;
    padding: .25rem .65rem;
    border: 1px solid var(--linea, #e5e5ea);
    border-radius: 999px;
    background: var(--tarjeta, #fff);
    color: inherit;
    cursor: pointer;
}
.sugerencia:hover {
    border-color: var(--acento, #073763);
    color: var(--acento, #073763);
}


/* ── ventas ──────────────────────────────────────────────
   Tres vistas de los mismos pedidos. La de clientes es la que importa: no
   ensena quien compro mas, sino quien compraba y dejo de hacerlo. */
.pestanas-ventas { display: flex; gap: .4rem; margin: 1rem 0 .75rem; flex-wrap: wrap; }
.tab-mini {
    font: inherit; font-size: .85rem; padding: .3rem .8rem;
    border: 1px solid var(--linea, #e5e5ea); border-radius: 999px;
    background: transparent; color: var(--tinta-tenue, #6b6b70); cursor: pointer;
}
.tab-mini--activa {
    background: var(--acento, #073763); border-color: var(--acento, #073763);
    color: #fff; font-weight: 600;
}
.sube { color: #1e7a46; font-weight: 600; }
.baja { color: #c0392b; font-weight: 600; }
.tenue { color: var(--tinta-tenue, #6b6b70); font-size: .8125rem; }
.alerta { color: #c0392b; font-weight: 600; }
.folio {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: .8125rem; color: var(--acento, #073763);
}
.tel { display: block; font-size: .75rem; color: #1e7a46; text-decoration: none; }
.tel:hover { text-decoration: underline; }
.etiqueta-lista {
    display: inline-block; font-size: .68rem; padding: .05rem .4rem;
    border-radius: 3px; background: var(--fondo-tenue, #f5f5f7);
    color: var(--tinta-tenue, #6b6b70); margin-top: .15rem;
}
.estado {
    font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; padding: .12rem .45rem; border-radius: 3px;
}
.estado--pendiente { background: #fdf3d8; color: #8a6100; }
.estado--entregado { background: #e8f4ec; color: #1e7a46; }
.estado--cancelado { background: #fbeae8; color: #c0392b; }


/* ── tramos por cantidad ─────────────────────────────────── */
.regla--cantidad { border-top: 1px dashed var(--linea, #e5e5ea); margin-top: .5rem;
                   padding-top: .75rem; }
.caja-tramos { display: flex; flex-direction: column; gap: .4rem; padding: .3rem 0 .2rem; }
.tramo { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
         font-size: .875rem; }


/* ── quien pide ─────────────────────────────────────────────
   Van justo encima del boton de enviar, no en una pantalla aparte: un paso mas
   entre el carrito y el pedido es un pedido menos. */
.comprador {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: .5rem 0 .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--linea, #e5e5ea);
}
.comprador label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--tinta-tenue, #6b6b70);
}
.comprador .control {
    width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    font-size: .95rem;
    border: 1px solid var(--linea, #e5e5ea);
    border-radius: 8px;
    background: var(--fondo, #fff);
    color: inherit;
    margin-bottom: .35rem;
}
.comprador .control:focus {
    outline: 2px solid var(--acento, #073763);
    outline-offset: 1px;
}
.comprador__aviso {
    margin: 0;
    font-size: .8rem;
    color: #c0392b;
    min-height: 1.1em;
}


/* ── la vitrina de un cliente ─────────────────────────────────
   Dos columnas: las categorias mandan sobre los productos, asi que van a la
   izquierda y estrechas. En un telefono se apilan. */
.vitrina {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) 1fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 760px) { .vitrina { grid-template-columns: 1fr; } }

.vitrina__titulo { font-weight: 600; font-size: .9rem; margin: 0 0 .2rem; }
.vitrina__pista {
    font-size: .78rem; color: var(--tinta-tenue, #6b6b70); margin: 0 0 .5rem;
    line-height: 1.35;
}

.cats, .prods { list-style: none; margin: 0; padding: 0;
                display: flex; flex-direction: column; gap: 2px; }

.cat, .prod {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .6rem;
    border: 1px solid var(--linea, #e5e5ea);
    border-radius: 8px;
    background: var(--tarjeta, #fff);
    cursor: grab;
}
.cat--abierta { border-color: var(--acento, #073763); background: var(--fondo-tenue, #f5f5f7); }
.cat__nombre { flex: 1; font-size: .875rem; }
.cat__cuenta { font-size: .75rem; color: var(--tinta-tenue, #6b6b70);
               font-variant-numeric: tabular-nums; }

.prod img, .prod__sinfoto {
    width: 2.1rem; height: 2.1rem; object-fit: contain;
    border-radius: 5px; background: var(--fondo-tenue, #f5f5f7); flex: none;
}
.prod__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prod__nombre { font-size: .875rem; font-weight: 500;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod__detalle { font-size: .75rem; color: var(--tinta-tenue, #6b6b70);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod__puesto {
    font-size: .65rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: #8a6100; background: #fdf3d8;
    padding: .1rem .35rem; border-radius: 3px; white-space: nowrap;
}
.prod--apagado { opacity: .5; }
.prod--apagado .prod__nombre { text-decoration: line-through; }

/* La zona de agarre, que es lo que dice que esto se arrastra. */
.agarre { color: var(--tinta-tenue, #6b6b70); cursor: grab; font-size: .95rem;
          line-height: 1; user-select: none; }
.arrastrando { opacity: .4; cursor: grabbing; }
.encima { border-color: var(--acento, #073763); border-style: dashed;
          background: var(--fondo-tenue, #f5f5f7); }


/* ── EL TELEFONO ─────────────────────────────────────────────────────────
   Casi todo el trafico de una tienda que se manda por WhatsApp se abre en un
   telefono, asi que esto no es un ajuste de cortesia: es la vista principal. */
@media (max-width: 560px) {

    /* Dos columnas. Con una sola, 227 modelos median ciento veinte mil pixeles
       de alto —unas ciento cincuenta pantallas— y nadie llega al final. */
    .rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }
    .tarjeta { padding: .75rem .75rem 1rem; }
    .tarjeta__nombre { font-size: .875rem; }
    .tarjeta__detalle, .tarjeta__opciones { font-size: .75rem; }
    .precio-ahora { font-size: 1rem; }
    .precio-antes { font-size: .78rem; }
    .leyenda-iva { font-size: .68rem; }

    /* El distintivo, mas pequeno: en media tarjeta tapaba la foto. */
    .distintivo { font-size: .6rem; padding: .12rem .4rem; }

    /* La barra del cliente ocupa su propia banda, no un hueco de la barra. */
    .barra-cliente {
        width: 100%;
        justify-content: space-between;
        padding: .55rem 1rem;
    }
    .barra-cliente__quien { font-size: .8rem; }

    /* El titular de la portada, sin tapar el catalogo. */
    .titular { font-size: 1.9rem; }
    .subtitulo { font-size: .95rem; }

    /* Nada que se toque puede medir menos de lo que mide un dedo. */
    .barra .icono-boton,
    .barra__menu button,
    .boton { min-height: 44px; }
    .barra__menu button { padding-inline: .85rem; }
}

/* Pantallas muy estrechas: una columna, pero compacta. */
@media (max-width: 360px) {
    .rejilla { grid-template-columns: 1fr; }
    .titular { font-size: 1.7rem; }
}

@media (max-width: 560px) {
    /* Lo que se toca con el pulgar. «Ver mis precios» medía 27 px de alto:
       es el boton que abre los precios a un cliente y era el mas dificil
       de atinar de la pagina. */
    .barra-cliente__entrar,
    .barra-cliente__salir { min-height: 40px; padding-inline: .9rem; }
    .barra__marca { display: inline-flex; align-items: center; min-height: 44px; }
    .enlace-azul { display: inline-block; padding: .5rem 0; }
    .pie__acceso { display: inline-block; padding: .4rem 0; }
}

@media (max-width: 560px) {
    /* Safari de iPhone hace zoom solo en cuanto tocas un campo cuya letra mide
       menos de 16 px, y despues deja la pagina ampliada. Los campos del nombre
       y el telefono estaban en 15.2: justo del lado malo. Con 16 no hace zoom. */
    input, select, textarea, .control,
    .comprador .control { font-size: 16px; }

    /* Menos y mas de la cantidad: eran de 30 px, dos dianas pegadas. */
    .cantidad button { min-width: 38px; min-height: 38px; }
}


/* La caja de una tabla ancha. `ventas.js` la pinta y no tenia estilo: en un
   telefono la tabla de pedidos empujaba la pagina entera de lado. */
.tabla-caja { overflow-x: auto; }