/* ===================================================================================================
   IDENTIDAD — Portal de Beneficios · GARRIDO LOMBARDO S.R.L.
   ===================================================================================================

   LA IDEA: es una tienda. Cerrada, para clientes, pero una tienda: alguien entra, mira precios y arma
   un pedido. Así que el registro es COMERCIAL Y CLARO — blanco, mucho aire, un solo acento fuerte — y no
   el de un documento institucional.

   DECISIONES TOMADAS A PROPÓSITO, Y POR QUÉ
   -----------------------------------------
   Hay una estética que delata a una web hecha sin criterio: Inter como tipografía, gradiente violeta a
   azul, el mismo radio en todo, sombras difusas y emojis de ícono. Cada punto de acá está tomado contra
   esa lista.

   1. TIPOGRAFÍA — Archivo, en dos anchos. Una sola familia variable (Omnibus-Type, OFL, argentina) que
      cubre de 62% a 125% de ancho y de 400 a 800 de peso, servida desde el proyecto. Los títulos van
      EXPANDIDOS y pesados; el texto, en ancho normal. Es un recurso editorial clásico —una familia, dos
      anchos— y se lee como una decisión, no como dos fuentes que se encontraron. 90 KB, un solo archivo.

   2. COLOR — blanco, y UN acento: azul cobalto. No es el azul apagado de las aseguradoras: está saturado
      a propósito, y justamente por eso aparece poco — en los botones, en el precio, en lo que se toca. Los
      títulos van en casi negro, nunca en el acento. Los grises tienen un sesgo frío hacia el azul para que
      se lean elegidos y no heredados.

   3. RADIOS DISTINTOS SEGÚN LA FUNCIÓN, no un número repetido en todo. Un radio uniforme en toda la
      interfaz es de las cosas que más la aplanan.

   4. SOMBRAS: casi ninguna. La jerarquía la dan el filete y el color. Una sombra difusa debajo de cada
      tarjeta es el recurso por defecto de quien no eligió otra cosa.

   5. NÚMEROS TABULARES en DNI, importes y números de pedido: son datos que se alinean en columna.

   ⭐ LOS TOKENS SE LLAMAN POR SU ROL, NO POR SU COLOR. Antes se llamaban --gl-verde, --gl-cobre y
   --gl-crema, y al cambiar la marca los nombres pasaron a mentir. Ahora son --gl-acento, --gl-realce y
   --gl-fondo: el día que el acento deje de ser azul, el nombre sigue siendo cierto.

   =================================================================================================== */

/* ---------------------------------------------------------------------------------------------------
   TIPOGRAFÍA
   Servidas desde el proyecto y no desde un CDN: es una dependencia de un tercero adentro de producción, y
   la primera visita con mala conexión vería la página con la letra equivocada.
   --------------------------------------------------------------------------------------------------- */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 800;          /* un solo archivo variable: peso 400-800 y ancho 62-125% */
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('../fuentes/archivo-variable.woff2') format('woff2');
}

/* ---------------------------------------------------------------------------------------------------
   TOKENS
   --------------------------------------------------------------------------------------------------- */

:root {
    /* --- El acento. Uno solo, saturado, y por eso mismo usado poco --- */
    --gl-acento:       #1f43e8;   /* cobalto: los botones, el precio, lo que se toca */
    --gl-acento-vivo:  #3a5eff;   /* el hover */
    --gl-acento-pale:  #eef1ff;   /* el fondo de lo que está seleccionado */

    /* --- Lo oscuro: títulos y barras. Casi negro, con un sesgo frío hacia el acento --- */
    --gl-tinta:        #0b1020;
    --gl-tinta-2:      #18203a;

    /* --- El realce: para lo que hay que mirar sin que sea una acción (una etiqueta, un dato) --- */
    --gl-realce:       #b4530b;
    --gl-realce-vivo:  #d9691a;
    --gl-realce-pale:  #fff2e6;

    /* --- Las superficies. Blanco de verdad; la jerarquía la da el filete, no una sombra --- */
    --gl-fondo:        #ffffff;   /* el fondo de la página */
    --gl-papel:        #ffffff;   /* las tarjetas: blancas, separadas por su borde */
    --gl-papel-2:      #f5f7fb;   /* lo secundario: cabeceras de tabla, notas al margen */
    --gl-linea:        #e3e7f0;
    --gl-linea-fuerte: #c4ccdb;

    /* --- Texto. Los grises tiran a frío: un gris puro se lee heredado, no elegido --- */
    --gl-texto:        #171d2b;
    --gl-texto-2:      #545d70;
    /* 🔴 Medido: con #7d8697 los rótulos daban 3,67 de contraste sobre el papel, por debajo del mínimo
       legible. Y es el token del texto MÁS chico —los rótulos en versalitas—, que es justo donde menos se
       perdona. Se corrige acá y no en cada uso: son once pantallas. */
    --gl-texto-3:      #666e82;
    --gl-texto-claro:  #ffffff;

    /* --- Lo que va ENCIMA de las barras oscuras. Tiene su propio juego porque esas superficies no
           cambian con el resto: son oscuras siempre, y un gris pensado para el papel ahí no se lee --- */
    --gl-sobre-oscuro:   #aab3c6;   /* el texto de apoyo */
    --gl-sobre-oscuro-2: #ccd3e0;   /* los enlaces */
    --gl-sobre-oscuro-3: #8d95a8;   /* lo más apagado: rótulos y pies */
    --gl-panel-marca:    #111a33;   /* la pantalla del equipo, que se distingue de la del asegurado */

    /* --- Semánticos. Van SEPARADOS del acento: bueno/atento/mal no son la marca --- */
    --gl-error:        #c0271f;
    --gl-error-pale:   #fdecea;
    --gl-alerta:       #91620a;
    --gl-alerta-pale:  #fff6e3;
    --gl-ok:           #0d7a4d;
    --gl-ok-pale:      #e6f6ef;

    /* El TEXTO de cada aviso: más oscuro que el borde, para que se lea sobre su propio fondo pálido. */
    --gl-error-texto:  #7a1c15;
    --gl-alerta-texto: #684808;
    --gl-ok-texto:     #0a4a30;
    --gl-realce-texto: #7a3808;

    /* --- Tipografía: una familia, dos anchos --- */
    --gl-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --gl-sans:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Monoespaciada, sólo para las claves provisorias: en una cadena de diez caracteres al azar hay que
       poder distinguir el uno de la ele y el cero de la o, y para eso la letra tiene que estar pensada
       para eso. (La clave se genera sin esos caracteres igual, pero el que la lee no lo sabe.) */
    --gl-numeros: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;

    /* --- Radios: cada uno según su función, no un número repetido --- */
    --gl-r-campo:   6px;
    --gl-r-caja:    10px;   /* las tarjetas de una tienda, no las fichas de un archivo */
    --gl-r-boton:   6px;
    --gl-r-pastilla: 999px; /* sólo las etiquetas redondas, que es lo que son */

    /* Todo lo que se toca con el dedo mide al menos esto. No es un número lindo: es el mínimo con el que
       una persona acierta en un celular sin agrandar la pantalla. */
    --gl-toque: 44px;

    --gl-top-alto: 62px;

    /* --- Sombras: mínimas y definidas, nunca difusas --- */
    --gl-sombra:      0 1px 2px rgba(11, 16, 32, .05);
    --gl-sombra-alta: 0 1px 2px rgba(11, 16, 32, .06), 0 10px 28px -14px rgba(11, 16, 32, .22);

    --gl-ancho: 1160px;

    /* El filete: una línea de acento al pie de las superficies de marca. Reemplaza a la guarda de rayas
       en diagonal, que era el borde de un documento oficial y ya no dice lo que dice esta tienda. */
    --gl-filete: linear-gradient(90deg, var(--gl-acento) 0 38%, var(--gl-acento-vivo) 38% 62%, var(--gl-acento) 62% 100%);
}

/* ===================================================================================================
   BASE
   =================================================================================================== */

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

html {
    /* En el HTML va `hidden`. En la raíz, `clip` interfiere con el scroll de la página. */
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100dvh;              /* dvh y no vh: con vh, la barra del navegador del celular tapa contenido */
    font-family: var(--gl-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--gl-texto);
    background: var(--gl-fondo);
    -webkit-font-smoothing: antialiased;

    /* 🔴 `clip` y NO `hidden`. Un `overflow: hidden` convierte al body en contenedor de scroll y deja MUDO
       a todo `position: sticky` que tenga adentro: la barra superior deja de quedarse fija, sin dar ningún
       error y sin que se note hasta que alguien scrollea. `clip` recorta igual sin ese efecto. */
    overflow-x: clip;

    /* Que "tirar hacia abajo" no recargue la página: en el medio de un pedido, eso lo borra. */
    overscroll-behavior-y: contain;
}

/* Un `display` puesto en una clase le gana al atributo `hidden`, porque el navegador lo aplica con el
   selector `[hidden]`, que pesa menos. Sin esta línea, un elemento con clase queda visible aunque esté
   marcado como oculto. */
[hidden] { display: none !important; }

img, svg, video { max-width: 100%; height: auto; }

/* --- Escala tipográfica con contraste de verdad ---
   Un título en serif condensada grande contra un cuerpo chico en grotesca. Que todos los tamaños estén a
   un paso de distancia es lo que hace que una página se lea plana. */

h1, h2, h3 {
    font-family: var(--gl-display);
    /* ⭐ El recurso central: los títulos van EXPANDIDOS y pesados, el texto en ancho normal. Es una sola
       familia variable, así que no hay dos fuentes peleándose — y el contraste de ancho se lee como una
       decisión, que es justo lo que un par cualquiera de Google Fonts no consigue. */
    font-stretch: 112%;
    font-weight: 700;
    color: var(--gl-tinta);
    line-height: 1.06;
    letter-spacing: -.021em;
    margin: 0 0 .4em;
    text-wrap: balance;              /* evita el renglón huérfano de una palabra */
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); }
h3 { font-size: 1.25rem; }

/* Los rótulos de sección: en sans, chicos, con espaciado y en versalita. Es el contrapunto del serif. */
h4, .gl-rotulo {
    font-family: var(--gl-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gl-texto-3);
    margin: 0 0 .6em;
}

p { margin: 0 0 1em; max-width: 68ch; }

a {
    color: var(--gl-acento);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
a:hover { color: var(--gl-tinta); }

/* Foco visible siempre. Sacarlo deja el sitio inusable para quien navega con el teclado. */
:focus-visible {
    outline: 2px solid var(--gl-realce);
    outline-offset: 2px;
}

/* El filete: la línea que separa. Es el recurso de jerarquía de este sistema, en lugar de la sombra. */
.gl-filete {
    border: 0;
    border-top: 1px solid var(--gl-linea);
    margin: 24px 0;
}

/* La guarda, para el pie de las superficies de marca. */
/* El filete al pie de las barras de marca. Antes eran rayas en diagonal —el borde de un documento
   oficial—; ahora es una línea de acento, que es lo que corresponde al registro comercial. Se conserva el
   nombre de la clase para no tocar los tres layouts que ya la usan. */
.gl-guarda {
    height: 3px;
    background: var(--gl-filete);
}

/* ===================================================================================================
   DISPOSICIÓN
   =================================================================================================== */

.gl-ancho {
    width: 100%;
    max-width: var(--gl-ancho);
    margin-inline: auto;
    padding-inline: 20px;
}

.gl-top {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--gl-tinta);
    color: var(--gl-texto-claro);
}

.gl-top-barra {
    height: var(--gl-top-alto);
    display: flex;
    align-items: center;
    gap: 16px;
}

.gl-top a { color: var(--gl-texto-claro); }

.gl-main {
    /* La pantalla completa menos la barra: sin este cálculo sobran exactamente los píxeles de la barra y
       aparece una franja de scroll que no lleva a ninguna parte. */
    min-height: calc(100dvh - var(--gl-top-alto));
    padding-block: 28px 56px;
}

.gl-pie {
    background: var(--gl-tinta);
    color: var(--gl-sobre-oscuro);
    padding-block: 26px;
    font-size: .82rem;
}
.gl-pie a { color: var(--gl-sobre-oscuro-2); }

/* ===================================================================================================
   EL LOGOTIPO
   Un monograma con filete doble, como el sello de un documento, y el nombre en serif al lado.
   =================================================================================================== */

.gl-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: inherit;
}
.gl-logo:hover { text-decoration: none; color: inherit; }

.gl-logo-sello {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-family: var(--gl-display);
    font-stretch: 118%;
    font-weight: 800;
    font-size: .92rem;
    letter-spacing: .01em;
    color: var(--gl-acento-vivo);
    border: 1px solid currentColor;
    /* El filete doble: un borde y una sombra sólida que hace de segunda línea. Es el detalle que lo
       convierte en sello y no en un cuadradito con letras. */
    box-shadow: inset 0 0 0 1px var(--gl-tinta), inset 0 0 0 2px currentColor;
}

.gl-logo-texto { display: flex; flex-direction: column; line-height: 1.05; }

.gl-logo-nombre {
    font-family: var(--gl-display);
    font-stretch: 112%;
    font-weight: 700;
    font-size: 1.06rem;
    letter-spacing: -.005em;
}

.gl-logo-bajada {
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gl-realce-vivo);
}

/* ===================================================================================================
   COMPONENTES
   =================================================================================================== */

.gl-ficha {
    background: var(--gl-papel);
    border: 1px solid var(--gl-linea);
    border-radius: var(--gl-r-caja);
    padding: 22px;
}

.gl-ficha-cobre { border-top: 2px solid var(--gl-realce); }

/* --- Botones --- */

.gl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--gl-toque);
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--gl-r-boton);
    font-family: var(--gl-sans);
    font-size: .94rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.gl-btn:hover { text-decoration: none; }
.gl-btn:active { transform: translateY(1px); }

.gl-btn:disabled, .gl-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

/* ⭐ El botón principal ES el acento, y es el lugar donde el azul aparece de verdad.
   Con el botón en casi negro la paleta quedaba en blanco y negro y el acento no se veía en ningún lado:
   un color que no aparece nunca no es un acento, es una variable sin usar. */
.gl-btn-principal {
    background: var(--gl-acento);
    color: var(--gl-texto-claro);
}
.gl-btn-principal:hover:not(:disabled) { background: var(--gl-acento-vivo); }

/* El de confirmar una compra: más pesado, para que se distinga del resto de las acciones sin cambiar de
   color. Se conserva el nombre de la clase, que ya está puesto en las pantallas. */
.gl-btn-cobre {
    background: var(--gl-tinta);
    color: var(--gl-texto-claro);
}
.gl-btn-cobre:hover:not(:disabled) { background: var(--gl-tinta-2); }

.gl-btn-suave {
    background: transparent;
    color: var(--gl-tinta);
    border-color: var(--gl-linea-fuerte);
}
.gl-btn-suave:hover:not(:disabled) { background: var(--gl-papel-2); border-color: var(--gl-tinta); }

.gl-btn-texto {
    background: transparent;
    color: var(--gl-acento);
    padding-inline: 4px;
    min-height: auto;
}
.gl-btn-texto:hover:not(:disabled) { color: var(--gl-tinta); text-decoration: underline; }

.gl-btn-ancho { width: 100%; }

/* --- Campos --- */

.gl-campo { display: block; margin-bottom: 18px; }

.gl-campo > label,
.gl-etiqueta {
    display: block;
    margin-bottom: 7px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gl-texto-2);
}

.gl-campo input,
.gl-campo select,
.gl-campo textarea,
.gl-input {
    display: block;
    width: 100%;
    min-height: var(--gl-toque);
    padding: 11px 13px;
    border: 1px solid var(--gl-linea-fuerte);
    border-radius: var(--gl-r-campo);
    background: var(--gl-papel);
    color: var(--gl-texto);
    font-family: var(--gl-sans);

    /* 🔴 16px es un mínimo, no una preferencia estética: con menos, iOS hace zoom solo al enfocar el campo
       y la pantalla salta de lugar mientras la persona escribe. */
    font-size: 16px;
    transition: border-color .14s ease, background-color .14s ease;
}

.gl-campo input:focus,
.gl-campo select:focus,
.gl-campo textarea:focus,
.gl-input:focus {
    border-color: var(--gl-tinta);
    background: #fff;
    outline: 2px solid var(--gl-realce-pale);
    outline-offset: 0;
}

/* Los datos de documento van en cifras tabulares, para que se alineen en columna. */
.gl-cifras,
input[inputmode="numeric"],
.gl-campo input[type="number"] {
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

/* --- Validación ---
   Se usa :user-invalid y no :invalid a propósito: :invalid marca el campo en rojo apenas carga la página,
   antes de que la persona escriba una sola letra. :user-invalid espera a que haya intentado y salido del
   campo, o a que haya mandado el formulario. Soportado en todos los navegadores desde 2023.

   El error nunca se comunica sólo con color: además del borde hay un texto, para quien no distingue rojo
   de verde y para quien usa un lector de pantalla. */

.gl-campo input:user-invalid,
.gl-campo input[aria-invalid="true"] {
    border-color: var(--gl-error);
    background: var(--gl-error-pale);
}

.gl-error-campo {
    display: none;
    margin-top: 6px;
    font-size: .85rem;
    color: var(--gl-error);
}

.gl-campo:has(input:user-invalid) .gl-error-campo,
.gl-campo:has(input[aria-invalid="true"]) .gl-error-campo {
    display: block;
}

.gl-ayuda {
    display: block;
    margin-top: 7px;
    font-size: .84rem;
    color: var(--gl-texto-2);
}


/* --- Campo con un botón adentro (el de ver la clave) ---
   El botón va DENTRO del recuadro y no al lado: al lado, en un celular, se come el ancho del campo justo
   donde hace falta ver lo que se escribe. */

.gl-campo-conboton { position: relative; }

.gl-campo-conboton input { padding-right: 72px; }

.gl-ojito {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--gl-linea);
    border-radius: var(--gl-r-campo);
    background: var(--gl-papel-2);
    color: var(--gl-texto-2);
    font-family: var(--gl-sans);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.gl-ojito:hover { background: var(--gl-acento-pale); color: var(--gl-tinta); border-color: var(--gl-acento); }

/* El botón se VE de 34px para no dominar el campo, pero se TOCA en los 44 de la regla.
   Sin esto, el único control de la pantalla que queda por debajo del mínimo táctil es justamente el que
   se usa cuando la clave no entra — o sea, cuando la persona ya está peleando con el teclado. */
.gl-ojito::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    transform: translateY(-50%);
    height: var(--gl-toque);
}

/* --- Avisos --- */

.gl-aviso {
    padding: 13px 15px;
    border-left: 3px solid;
    border-radius: 0 var(--gl-r-caja) var(--gl-r-caja) 0;
    margin-bottom: 18px;
    font-size: .92rem;
}

.gl-aviso p:last-child { margin-bottom: 0; }

.gl-aviso-error  { background: var(--gl-error-pale);  border-color: var(--gl-error);  color: var(--gl-error-texto); }
.gl-aviso-ok     { background: var(--gl-ok-pale);     border-color: var(--gl-ok);     color: var(--gl-ok-texto); }
.gl-aviso-atento { background: var(--gl-alerta-pale); border-color: var(--gl-alerta); color: var(--gl-alerta-texto); }
.gl-aviso-dato   { background: var(--gl-papel-2);     border-color: var(--gl-linea-fuerte); color: var(--gl-texto-2); }

/* --- Importes --- */

.gl-precio {
    font-family: var(--gl-display);
    /* Los números van en ancho NORMAL aunque los títulos vayan expandidos: expandir cifras las hace más
       difíciles de leer de un vistazo, que es exactamente para lo que están. */
    font-stretch: 100%;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gl-tinta);
    letter-spacing: -.015em;
}

.gl-precio-grande { font-size: 1.7rem; }

/* --- Etiquetas redondas: acá el radio de pastilla SÍ corresponde --- */

.gl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: var(--gl-r-pastilla);
    border: 1px solid var(--gl-linea-fuerte);
    background: var(--gl-papel);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--gl-texto-2);
}

.gl-chip-cobre { border-color: var(--gl-realce); background: var(--gl-realce-pale); color: var(--gl-realce-texto); }
.gl-chip-verde { border-color: var(--gl-acento); background: var(--gl-acento-pale); color: var(--gl-tinta); }


/* --- Fichas de dato: los números que se miran de un vistazo antes de leer la tabla --- */

.gl-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 22px;
    border: 1px solid var(--gl-linea);
    border-radius: var(--gl-r-caja);
    background: var(--gl-papel);
    overflow: hidden;
}

.gl-dato {
    flex: 1 1 160px;
    padding: 14px 18px;
    /* La separación la hace un filete y no un espacio: los datos se leen como un bloque, igual que los
       renglones de un comprobante. */
    border-left: 1px solid var(--gl-linea);
}

.gl-dato:first-child { border-left: 0; }

.gl-dato-valor {
    display: block;
    font-family: var(--gl-display);
    font-stretch: 100%;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--gl-tinta);
    font-variant-numeric: tabular-nums;
}

.gl-dato-rotulo {
    display: block;
    margin-top: 2px;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gl-texto-3);
}

.gl-chip-atento { border-color: var(--gl-alerta); background: var(--gl-alerta-pale); color: var(--gl-alerta); }

/* Una ganancia negativa se marca, no se disimula. */
.gl-num-perdida { color: var(--gl-error); font-weight: 700; }

/* --- Grillas --- */

.gl-grilla {
    display: grid;
    gap: 16px;
    /* Dos columnas ya en el celular más chico, y va sumando solo al haber lugar. */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* --- Tablas: en el celular se desplazan solas, sin arrastrar la página --- */

.gl-tabla-scroll { overflow-x: auto; }

.gl-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.gl-tabla th, .gl-tabla td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--gl-linea);
    white-space: nowrap;
}

.gl-tabla th {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gl-texto-2);
    border-bottom-color: var(--gl-linea-fuerte);
}

.gl-tabla td.gl-num { font-variant-numeric: tabular-nums; text-align: right; }

/* ===================================================================================================
   LA PANTALLA DE INGRESO
   Dos mitades: la marca a la izquierda, el formulario a la derecha. Deliberadamente asimétrica —
   la tarjeta chica centrada en el medio de la pantalla es el molde de todos los formularios de login
   que existen, y no dice nada de quién es el que atiende del otro lado.
   =================================================================================================== */

.gl-ingreso {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.gl-ingreso-marca {
    position: relative;
    background: var(--gl-tinta);
    color: var(--gl-texto-claro);
    padding: 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* La guarda, al pie del panel de marca. */
.gl-ingreso-marca::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 8px;
    background: var(--gl-filete);
    opacity: .9;
}

.gl-ingreso-titulo {
    font-family: var(--gl-display);
    font-stretch: 112%;
    font-weight: 700;
    font-size: clamp(2.1rem, 1.1rem + 3vw, 3.2rem);
    line-height: 1.02;
    color: var(--gl-texto-claro);
    margin: 0 0 14px;
    max-width: 14ch;
}

.gl-ingreso-titulo em {
    font-style: italic;
    color: var(--gl-realce-vivo);
}

.gl-ingreso-bajada {
    color: var(--gl-sobre-oscuro);
    max-width: 42ch;
    margin: 0;
}

.gl-ingreso-form {
    background: var(--gl-fondo);
    padding: 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gl-ingreso-caja { width: 100%; max-width: 380px; margin-inline: auto; }

/* --- El celular: el panel de marca se achica a un encabezado, no desaparece --- */
@media (max-width: 860px) {
    .gl-ingreso { grid-template-columns: 1fr; min-height: 100dvh; }

    .gl-ingreso-marca {
        padding: 26px 22px 30px;
        gap: 18px;
    }

    .gl-ingreso-titulo { font-size: 1.9rem; max-width: none; }
    .gl-ingreso-bajada { font-size: .92rem; }
    .gl-ingreso-pie { display: none; }        /* el detalle de escritorio sobra en una pantalla chica */

    .gl-ingreso-form { padding: 28px 22px 44px; justify-content: flex-start; }
}

/* ===================================================================================================
   CELULAR
   =================================================================================================== */

@media (max-width: 640px) {
    .gl-ancho { padding-inline: 16px; }
    .gl-main  { padding-block: 20px 64px; }
    .gl-ficha { padding: 18px; }

    /* En una pantalla angosta un botón de acción ocupa el ancho: es más fácil de acertar y deja claro cuál
       es el paso siguiente. */
    .gl-btn-principal, .gl-btn-cobre { width: 100%; }
}

/* Quien pidió menos movimiento recibe menos movimiento — pero nada se apaga del todo: apagar una
   transición puede dejar un elemento a mitad de camino, y por lo tanto invisible. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ===================================================================================================
   PANTALLAS DE GESTIÓN
   =================================================================================================== */

/* --- Encabezado con acciones a la derecha --- */

.gl-encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.gl-encabezado-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Barra de filtros --- */

.gl-filtros {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
}

/* El buscador se lleva el espacio libre, pero con un tope: estirado a lo ancho de una pantalla grande
   queda ridículo y aleja los demás filtros. */
.gl-filtros > input[type="text"],
.gl-filtros > .gl-input:not(select) { flex: 1 1 240px; max-width: 460px; }

.gl-filtros > select { flex: 0 0 auto; width: auto; min-width: 180px; }

.gl-casilla {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: var(--gl-texto-2);
    cursor: pointer;
    min-height: var(--gl-toque);
}

.gl-casilla input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gl-acento); }

/* --- Paginado --- */

.gl-paginado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
}

/* --- Listas de texto --- */

.gl-lista { margin: 0 0 12px; padding-left: 20px; }
.gl-lista li { margin-bottom: 5px; }

/* --- Una fila que no se va a guardar --- */

.gl-fila-apagada { opacity: .55; }

/* --- Ventana --- */

.gl-modal-fondo {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(18, 41, 31, .55);
    display: grid;
    place-items: center;
    padding: 16px;
    /* Que scrollear adentro de la ventana no arrastre la página de atrás. */
    overscroll-behavior: contain;
}

.gl-modal {
    width: 100%;
    max-width: 860px;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    background: var(--gl-fondo);
    border: 1px solid var(--gl-linea-fuerte);
    border-top: 3px solid var(--gl-realce);
    border-radius: var(--gl-r-caja);
    box-shadow: var(--gl-sombra-alta);
}

.gl-modal-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gl-linea);
}

.gl-modal-barra h2 { margin: 0; font-size: 1.4rem; }

.gl-modal-cuerpo { padding: 20px; overflow-y: auto; flex: 1; }

.gl-modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--gl-linea);
    background: var(--gl-papel-2);
}

/* Una tabla larga adentro de la ventana se desplaza sola, sin estirarla a lo alto. */
.gl-tabla-alta { max-height: 42dvh; overflow-y: auto; }

@media (max-width: 640px) {
    .gl-modal { max-height: 96dvh; }
    .gl-modal-cuerpo { padding: 16px; }
    /* En el celular los botones de la ventana ocupan el ancho y el principal queda arriba. */
    .gl-modal-pie { flex-direction: column-reverse; }
    .gl-modal-pie .gl-btn { width: 100%; }
    .gl-encabezado-acciones { width: 100%; }
    .gl-encabezado-acciones .gl-btn { flex: 1 1 auto; }
}

/* --- Migas: dónde estoy parado --- */

.gl-migas {
    font-size: .82rem;
    color: var(--gl-texto-3);
    margin-bottom: 4px;
}

.gl-migas a { color: var(--gl-texto-2); }

/* --- Dos columnas que se apilan solas --- */

.gl-dos-columnas {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
}

@media (max-width: 860px) {
    /* 🔴 minmax(0, 1fr) y no 1fr: un 1fr pelado vale minmax(auto, 1fr), y ese "auto" es el ancho MÍNIMO
       del contenido. Con una tabla de seis columnas adentro, la columna crecía a 795px dentro de un
       contenedor de 328 y la mitad derecha de la pantalla quedaba fuera del celular — sin barra de
       desplazamiento, porque el body la recorta en silencio. La regla de arriba ya tenía el guard: la
       asimetría entre las dos era la pista. */
    .gl-dos-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* Y lo mismo para cada mitad: sin esto, lo ancho de adentro estira la celda en vez de desplazarse solo. */
.gl-dos-columnas > * { min-width: 0; }

/* --- Una clave provisoria, para poder leerla y copiarla sin equivocarse --- */

.gl-clave-grande {
    font-family: var(--gl-numeros);
    font-size: 1.6rem;
    letter-spacing: .16em;
    padding: 12px 14px;
    margin: 12px 0;
    background: var(--gl-tinta);
    color: var(--gl-realce-vivo);
    border-radius: var(--gl-r-caja);
    text-align: center;
    /* Que se pueda seleccionar de un doble clic sin arrastrar media pantalla. */
    user-select: all;
    word-break: break-all;
}

/* --- Solapas --- */

.gl-solapas {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--gl-linea-fuerte);
    margin-bottom: 20px;
    overflow-x: auto;
}

.gl-solapa {
    min-height: var(--gl-toque);
    padding: 0 18px;
    border: 0;
    background: transparent;
    font-family: var(--gl-sans);
    font-size: .92rem;
    font-weight: 600;
    color: var(--gl-texto-2);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.gl-solapa:hover { color: var(--gl-tinta); }

.gl-solapa-activa {
    color: var(--gl-tinta);
    border-bottom-color: var(--gl-realce);
}

/* --- Fila de campos que se apilan en el celular --- */

.gl-campos-fila {
    display: grid;
    gap: 0 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* --- Miniaturas de foto --- */

.gl-fotos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

.gl-foto {
    position: relative;
    width: 96px;
    height: 96px;
    border: 1px solid var(--gl-linea-fuerte);
    border-radius: var(--gl-r-caja);
    overflow: hidden;
    background: var(--gl-papel-2);
}

.gl-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gl-foto > button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 41, 31, .82);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

/* El área que responde al dedo llega a los 44, aunque el círculo se vea de 26. */
.gl-foto > button::after {
    content: "";
    position: absolute;
    inset: 50% 50% auto auto;
    transform: translate(50%, -50%);
    width: var(--gl-toque);
    height: var(--gl-toque);
}

/* --- Mover las fotos --- */
/* El orden importa por una sola cosa: la primera es la portada, la que se ve en el catálogo. Por eso la
   primera va rotulada y las flechas viven abajo, donde no tapan la imagen. */

.gl-foto-portada {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 2px 7px;
    border-radius: var(--gl-r-pastilla);
    background: var(--gl-realce);
    color: var(--gl-texto-claro);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.gl-foto-mover {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    background: rgba(18, 41, 31, .72);
}

.gl-foto-mover button {
    flex: 1;
    min-height: 24px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.gl-foto-mover button:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }

/* Deshabilitado se ve, pero no se apaga del todo: si desaparece, la tira cambia de forma al mover una
   foto y el dedo termina apretando la que no era. */
.gl-foto-mover button:disabled { opacity: .35; cursor: default; }

/* Con el dedo, 24px de alto no se aciertan. La miniatura crece y las flechas llegan a los 44 de la regla
   de la casa; con mouse se deja chica, que es donde conviene ver varias fotos juntas. */
@media (pointer: coarse) {
    .gl-foto { width: 132px; height: 132px; }
    .gl-foto-mover button { min-height: var(--gl-toque); font-size: 20px; }
}

/* ===================================================================================================
   LA TIENDA
   =================================================================================================== */

.gl-portada { margin-bottom: 24px; }

.gl-portada-bajada {
    font-size: 1.05rem;
    color: var(--gl-texto-2);
    max-width: 56ch;
    margin: 0;
}

/* --- Las promociones --- */
/* Van arriba de todo y con el cobre de la marca: es lo único de la portada que cambia seguido, así que
   tiene que distinguirse del catálogo sin gritar. En el celular se desplazan de costado en vez de empujar
   la vitrina cuatro pantallas hacia abajo. */

.gl-promos {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
    overflow-x: auto;
    scrollbar-width: thin;
    /* Que la tarjeta se frene entera y no a la mitad al deslizar. */
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
}

.gl-promo {
    flex: 0 0 min(320px, 82%);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--gl-realce-pale);
    border: 1px solid var(--gl-realce);
    border-left-width: 3px;
    border-radius: var(--gl-r-caja);
}

.gl-promo-titulo {
    font-family: var(--gl-display);
    font-size: 1.35rem;
    line-height: 1.15;
    color: var(--gl-tinta);
    margin: 0;
}

.gl-promo-texto {
    font-size: .92rem;
    color: var(--gl-texto-2);
    margin: 6px 0 0;
}

/* Con una sola promoción no tiene sentido el carrusel: ocupa el ancho y se lee de una. */
.gl-promos > .gl-promo:only-child { flex: 1 1 auto; }

@media (min-width: 760px) {
    .gl-promo { flex: 1 1 0; min-width: 260px; }
}

/* --- El buscador --- */

.gl-buscador {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* El campo se lleva el lugar libre; los botones conservan el suyo. El mínimo evita que en el celular
   quede una ranura de 40px con el botón al lado. */
.gl-buscador input[type="search"] { flex: 1 1 220px; min-width: 0; }

/* --- Los rubros --- */

.gl-rubros {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 4px;
    /* En el celular la tira se desplaza sola en vez de apilarse en cinco renglones. */
    overflow-x: auto;
    scrollbar-width: thin;
}

.gl-rubro {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--gl-linea-fuerte);
    border-radius: var(--gl-r-pastilla);
    background: var(--gl-papel);
    color: var(--gl-texto-2);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.gl-rubro:hover { border-color: var(--gl-acento); color: var(--gl-tinta); text-decoration: none; }

.gl-rubro-activo {
    background: var(--gl-tinta);
    border-color: var(--gl-tinta);
    color: var(--gl-texto-claro);
}

/* --- La vitrina --- */

.gl-vitrina {
    display: grid;
    gap: 16px;
    /* Dos columnas ya en el celular más chico, y va sumando al haber lugar.
       🔴 La cuenta tiene que cerrar de verdad: con 168 y 16 de separación hacen falta 352px de ancho útil,
       y un celular de 375 deja 343 — o sea que quedaba UNA sola columna en todos los teléfonos, justo al
       revés de lo que dice este comentario. Con 150 y 12 entran dos desde 312px. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

@media (max-width: 420px) {
    .gl-vitrina { gap: 12px; }
}

.gl-producto {
    display: flex;
    flex-direction: column;
    background: var(--gl-papel);
    border: 1px solid var(--gl-linea);
    border-radius: var(--gl-r-caja);
    overflow: hidden;
}

.gl-producto-foto {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--gl-papel-2);
    border-bottom: 1px solid var(--gl-linea);
    overflow: hidden;
}

.gl-producto-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* El hueco de la foto que todavía no está: la inicial en grande, en vez de un ícono de imagen rota. */
.gl-producto-sinfoto {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--gl-display);
    font-size: 2.6rem;
    color: var(--gl-linea-fuerte);
}

.gl-producto-cinta {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: var(--gl-r-pastilla);
    background: var(--gl-realce);
    color: var(--gl-texto-claro);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gl-producto-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    flex: 1;
}

.gl-producto-marca {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gl-realce);
}

.gl-producto-nombre {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.2;
    font-family: var(--gl-sans);
    font-weight: 600;
}

.gl-producto-nombre a { color: var(--gl-tinta); text-decoration: none; }
.gl-producto-nombre a:hover { text-decoration: underline; }

/* El precio queda pegado abajo aunque los nombres tengan distinto largo: si no, los botones de una misma
   fila quedan a distinta altura y la grilla se ve desprolija. */
.gl-producto-precio {
    margin: auto 0 4px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.gl-producto-precio .gl-precio { font-size: 1.28rem; }
.gl-producto-unidad { font-size: .78rem; color: var(--gl-texto-3); }
.gl-producto-consulta { font-family: var(--gl-display); font-size: 1.15rem; color: var(--gl-realce); }

/* --- La ficha de un producto --- */

.gl-ficha-producto {
    display: grid;
    gap: 26px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
}

.gl-ficha-producto-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--gl-papel-2);
    border: 1px solid var(--gl-linea);
    border-radius: var(--gl-r-caja);
    overflow: hidden;
}

.gl-ficha-producto-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- La galería de la ficha, sin JavaScript ---
   La página se sirve como HTML estático, así que el estado —qué foto se está mirando— lo lleva un radio
   escondido y las miniaturas son sus etiquetas. Funciona desde el primer toque, sin esperar a que conecte
   nada, y se recorre con el teclado como cualquier grupo de opciones. */

/* El contenedor: los radios escondidos, el marco y la tira de miniaturas. Es el ancestro común que hace
   posible el combinador de hermanos del que depende toda la galería. */
.gl-galeria { position: relative; }

.gl-galeria-radio {
    /* Se saca de la vista pero NO con display:none: así sigue recibiendo el foco del teclado y la tecla
       de flecha sigue cambiando de foto. */
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Se muestra sólo la foto que corresponde al radio marcado.
   ⚠️ Va con DISPLAY y no con visibility: con visibility las tres siguen ocupando su lugar y el navegador
   las descarga igual.

   🔴 Y el selector nombra al PADRE, aunque la clase sola bastaría para encontrarlas. Es por especificidad:
   más arriba existe `.gl-ficha-producto-foto img { display: block }`, que vale (0,1,1), y un
   `.gl-galeria-foto` pelado vale (0,1,0) — o sea que pierde, y las tres fotos se veían apiladas. Costó
   encontrarlo porque el selector SÍ matchea: lo que no gana es la declaración. */
.gl-ficha-producto-foto .gl-galeria-foto { display: none; }

#foto0:checked ~ .gl-ficha-producto-foto .gl-galeria-foto:nth-of-type(1),
#foto1:checked ~ .gl-ficha-producto-foto .gl-galeria-foto:nth-of-type(2),
#foto2:checked ~ .gl-ficha-producto-foto .gl-galeria-foto:nth-of-type(3),
#foto3:checked ~ .gl-ficha-producto-foto .gl-galeria-foto:nth-of-type(4),
#foto4:checked ~ .gl-ficha-producto-foto .gl-galeria-foto:nth-of-type(5),
#foto5:checked ~ .gl-ficha-producto-foto .gl-galeria-foto:nth-of-type(6) { display: block; }

.gl-galeria-tira {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
}

.gl-galeria-mini {
    flex: 0 0 auto;
    width: 72px;
    aspect-ratio: 4 / 3;
    border: 1.5px solid var(--gl-linea);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: var(--gl-papel-2);
    /* El área que responde al dedo llega a los 44 aunque la miniatura mida 54 de alto. */
    min-height: 44px;
}
.gl-galeria-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-galeria-mini:hover { border-color: var(--gl-linea-fuerte); }

/* La miniatura de la foto que se está viendo. El selector es largo porque la etiqueta no es hermana del
   radio sino nieta, y en CSS no se puede subir: hay que nombrar el camino. */
#foto0:checked ~ .gl-galeria-tira .gl-galeria-mini:nth-of-type(1),
#foto1:checked ~ .gl-galeria-tira .gl-galeria-mini:nth-of-type(2),
#foto2:checked ~ .gl-galeria-tira .gl-galeria-mini:nth-of-type(3),
#foto3:checked ~ .gl-galeria-tira .gl-galeria-mini:nth-of-type(4),
#foto4:checked ~ .gl-galeria-tira .gl-galeria-mini:nth-of-type(5),
#foto5:checked ~ .gl-galeria-tira .gl-galeria-mini:nth-of-type(6) {
    border-color: var(--gl-acento);
    border-width: 2px;
}

/* Que se vea cuál tiene el foco del teclado, que no siempre es la que se está mirando. */
.gl-galeria-radio:focus-visible ~ .gl-galeria-tira .gl-galeria-mini {
    outline: 2px solid var(--gl-acento);
    outline-offset: 2px;
}

.gl-ficha-producto-texto { font-size: 1.02rem; color: var(--gl-texto-2); max-width: 54ch; }

.gl-ficha-producto-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.gl-ficha-producto-form input { width: 96px; }

@media (max-width: 760px) {
    .gl-ficha-producto { grid-template-columns: 1fr; gap: 18px; }
}

/* --- El carrito --- */

.gl-renglon {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--gl-linea);
}

.gl-renglon:last-child { border-bottom: 0; }

.gl-renglon-foto {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    background: var(--gl-papel-2);
    border: 1px solid var(--gl-linea);
    border-radius: var(--gl-r-caja);
    overflow: hidden;
    font-family: var(--gl-display);
    font-size: 1.5rem;
    color: var(--gl-linea-fuerte);
}

.gl-renglon-foto img { width: 100%; height: 100%; object-fit: cover; }

.gl-renglon-que { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gl-renglon-que .gl-ayuda { margin: 0; }

.gl-renglon-importe { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }

.gl-cantidad {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--gl-linea-fuerte);
    border-radius: var(--gl-r-campo);
    overflow: hidden;
}

.gl-cantidad-btn {
    width: var(--gl-toque);
    height: var(--gl-toque);
    border: 0;
    background: var(--gl-papel);
    color: var(--gl-tinta);
    font-size: 1.2rem;
    cursor: pointer;
}

.gl-cantidad-btn:hover:not(:disabled) { background: var(--gl-acento-pale); }
.gl-cantidad-btn:disabled { opacity: .4; cursor: not-allowed; }

.gl-cantidad-valor {
    min-width: 42px;
    text-align: center;
    font-weight: 700;
    border-inline: 1px solid var(--gl-linea);
    line-height: var(--gl-toque);
}

.gl-resumen { position: sticky; top: calc(var(--gl-top-alto) + 16px); }

.gl-resumen-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 4px;
}

@media (max-width: 640px) {
    /* En el celular el renglón se acomoda en dos filas: la foto y el nombre arriba, la cantidad y el
       importe abajo. Apretados en una sola fila, el nombre queda en una columna de dos palabras. */
    .gl-renglon {
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas: "foto que" "cant importe";
    }

    .gl-renglon-foto { grid-area: foto; width: 56px; height: 56px; }
    .gl-renglon-que { grid-area: que; }
    .gl-cantidad { grid-area: cant; }
    .gl-renglon-importe { grid-area: importe; }

    /* Pegado arriba no sirve en una pantalla que ya es angosta: ocuparía media pantalla. */
    .gl-resumen { position: static; }
}

/* --- La pantalla de cierre --- */

.gl-cierre { max-width: 620px; margin-inline: auto; text-align: center; padding-top: 12px; }

.gl-cierre-sello {
    display: inline-grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--gl-acento-pale);
    color: var(--gl-acento);
    font-size: 1.7rem;
    border: 1px solid var(--gl-acento);
}

.gl-cierre-numero {
    font-family: var(--gl-numeros);
    font-size: 1.3rem;
    letter-spacing: .12em;
    color: var(--gl-realce);
    margin: 0 0 18px;
}

.gl-cierre-detalle { margin-top: 26px; text-align: left; }

.gl-btn-grande { min-height: 52px; font-size: 1.02rem; padding-inline: 28px; }

/* --- El carrito en la barra --- */

.gl-top-carrito {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: var(--gl-toque);
    padding: 0 14px;
    border: 1px solid rgba(246, 243, 236, .28);
    border-radius: var(--gl-r-pastilla);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.gl-top-carrito:hover { border-color: var(--gl-realce-vivo); text-decoration: none; }

.gl-top-globo {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--gl-r-pastilla);
    background: var(--gl-realce);
    color: var(--gl-texto-claro);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    /* En una pantalla angosta el carrito queda como número solo: es lo que se busca con el pulgar. */
    .gl-top-carrito { padding: 0 11px; font-size: 0; gap: 0; }
    .gl-top-carrito::before { content: "\1F6D2"; font-size: 1.05rem; }
    .gl-top-globo { font-size: .76rem; margin-left: 5px; }
}

/* --- La bandeja --- */

.gl-dato-atento { background: var(--gl-alerta-pale); }
.gl-dato-atento .gl-dato-valor { color: var(--gl-alerta); }

.gl-select-chico { min-height: 36px; padding: 4px 8px; font-size: .85rem; min-width: 150px; }

.gl-consultas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.gl-consulta-barra {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.gl-consulta-barra .gl-ayuda { display: block; margin: 2px 0 0; }

.gl-consulta-texto {
    margin: 10px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--gl-linea-fuerte);
    background: var(--gl-papel-2);
    color: var(--gl-texto-2);
    font-style: italic;
}

.gl-consulta-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* --- Páginas legales --- */

.gl-legal { max-width: 68ch; }
.gl-legal h2 { margin-top: 32px; font-size: 1.3rem; }
.gl-legal ul { padding-left: 22px; margin-bottom: 1em; }
.gl-legal li { margin-bottom: 6px; }

.gl-libreta-detalle {
    white-space: normal;
    max-width: 380px;
    font-size: .88rem;
    color: var(--gl-texto-2);
}

/* --- El pie con los enlaces legales --- */

.gl-pie-enlaces { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }