/* Giode3D · identidad 08b-5 (DECISIONES, 2026-10-19): noche para la magia, día para decidir. Sora (títulos) + Inter.
   Los colores llegan de config/marca.json (el armador los pone aquí). Clases con prefijo g- para no chocar.
   .gs-noche y .gs-dia cambian los colores de un tramo; las piezas (botones, tablas, formularios) usan los tokens. */
@import url("/a/fuentes/fuentes.d88d4e300e.css");
:root{--g-amarillo:#FEEF4C;--g-grafito:#30302E;--g-fondo:#08090A;--g-superficie:#14161A;--g-superficie-2:#1D2025;--g-borde:#2C3036;--g-texto:#F5F6F7;--g-texto-suave:#9AA0A6;--g-claro:#F6F5F1;--g-dia:#F6F5F1;--g-escenario:#EFEEEA;--g-papel:#FFFFFF;--g-tinta:#111111;--g-tinta-suave:#5A5A55;--g-linea-dia:#E1DFD7;--g-error:#FF8A80;--g-error-dia:#B3261E;--g-ok:#8BE28B;--g-ok-dia:#1F7A33}

:root {
  --g-titulos: "Sora", system-ui, sans-serif;
  --g-letra: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-radio: 16px;
  --g-toque: 44px;
  --g-acento: var(--g-amarillo); /* texto de acento: amarillo de noche, tinta de día */
  --g-brillo: rgba(254, 239, 76, .42);
  /* la noche, guardada en la raíz para volver a ella dentro de un tramo de día */
  --g-n-fondo: var(--g-fondo); --g-n-superficie: var(--g-superficie); --g-n-superficie-2: var(--g-superficie-2);
  --g-n-borde: var(--g-borde); --g-n-texto: var(--g-texto); --g-n-texto-suave: var(--g-texto-suave);
  --g-n-error: var(--g-error); --g-n-ok: var(--g-ok);
  color-scheme: dark;
}
.gs-noche {
  --g-fondo: var(--g-n-fondo); --g-superficie: var(--g-n-superficie); --g-superficie-2: var(--g-n-superficie-2);
  --g-borde: var(--g-n-borde); --g-texto: var(--g-n-texto); --g-texto-suave: var(--g-n-texto-suave);
  --g-error: var(--g-n-error); --g-ok: var(--g-n-ok); --g-acento: var(--g-amarillo);
  background: var(--g-fondo); color: var(--g-texto); color-scheme: dark;
}
.gs-dia {
  --g-fondo: var(--g-dia); --g-superficie: var(--g-papel); --g-superficie-2: var(--g-escenario);
  --g-borde: var(--g-linea-dia); --g-texto: var(--g-tinta); --g-texto-suave: var(--g-tinta-suave);
  --g-error: var(--g-error-dia); --g-ok: var(--g-ok-dia); --g-acento: var(--g-tinta);
  background: var(--g-fondo); color: var(--g-texto); color-scheme: light;
}
/* de día el amarillo va como superficie (botón, subrayado, fila), nunca como texto ni como brillo */
.gs-dia :focus-visible { outline-color: var(--g-tinta); }
.gs-dia .g-boton { border-color: var(--g-tinta); border-width: 1.5px; }
.gs-dia .g-boton--borde { background: transparent; color: var(--g-tinta); }
.gs-subraya { background: linear-gradient(180deg, transparent 58%, var(--g-amarillo) 58%, var(--g-amarillo) 92%, transparent 92%); padding: 0 .06em; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--g-fondo); color: var(--g-texto);
  font: 400 1rem/1.55 var(--g-letra); overflow-wrap: anywhere;
}
h1, h2, h3 { font-family: var(--g-titulos); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); }
h2 { font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--g-acento); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--g-amarillo); outline-offset: 2px; }
code, .g-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .95em; letter-spacing: .04em; }
[hidden] { display: none !important; }

.g-saltar { position: absolute; left: -9999px; top: 0; }
.g-saltar:focus { left: 1rem; top: .5rem; z-index: 50; background: var(--g-amarillo); color: var(--g-grafito); padding: .6rem 1rem; border-radius: 8px; }

/* Barra superior pegajosa */
.g-barra {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem;
  padding: .5rem clamp(1rem, 3vw, 2rem); min-height: 64px;
  background: color-mix(in srgb, var(--g-fondo) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--g-borde);
}
.g-barra__logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--g-texto); text-decoration: none; min-height: var(--g-toque); }
.g-barra__circulo { width: 40px; height: 40px; filter: drop-shadow(0 0 12px rgba(254, 239, 76, .3)); }
.g-barra__palabra { width: 146px; height: 28px; }
@media (max-width: 400px) { .g-barra__circulo { width: 34px; height: 34px; } .g-barra__palabra { width: 125px; height: 24px; } }
/* con la sesión abierta y «Mis tarjetas» arriba (2026-10-31), en el celular queda el círculo del logo: con la palabra, el
   menú se salía de la pantalla a 375 px */
@media (max-width: 440px) { .gs-barra:has(.gs-cuenta--tarjetas) .g-barra__palabra { display: none; } }
.g-barra__titulo { font-family: var(--g-titulos); font-size: .95rem; color: var(--g-texto-suave); }
.g-barra__fin { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.g-idioma { display: inline-flex; border: 1px solid var(--g-borde); border-radius: 999px; overflow: hidden; }
.g-idioma a { min-width: var(--g-toque); min-height: var(--g-toque); display: grid; place-items: center; color: var(--g-texto-suave); text-decoration: none; font-weight: 600; font-size: .85rem; }
.g-idioma a[aria-current="true"] { background: var(--g-amarillo); color: var(--g-grafito); }

/* Página */
.g-pagina { max-width: 72rem; margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem) 4rem; }
.g-pagina--angosta { max-width: 34rem; }
.g-sub { color: var(--g-texto-suave); }
.g-rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: stretch; }
.g-panel { background: var(--g-superficie); border: 1px solid var(--g-borde); border-radius: var(--g-radio); padding: clamp(1rem, 2.5vw, 1.5rem); display: flex; flex-direction: column; }
.g-panel > .g-form { flex: 1; }
.g-panel > :last-child { margin-bottom: 0; }
.g-panel h2 { font-size: 1.1rem; }
.g-cifras { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-bottom: 1.5rem; }
.g-cifra { background: var(--g-superficie); border: 1px solid var(--g-borde); border-radius: var(--g-radio); padding: 1rem; }
.g-cifra b { display: block; font-family: var(--g-titulos); font-size: 1.6rem; color: var(--g-acento); }
.g-cifra span { color: var(--g-texto-suave); font-size: .9rem; }

/* Formularios */
.g-form { display: flex; flex-direction: column; gap: .9rem; }
.g-form > .g-boton:last-child { margin-top: auto; }
.g-campo { display: grid; gap: .35rem; }
.g-campo label, .g-etiqueta { font-weight: 600; font-size: .92rem; }
.g-ayuda { color: var(--g-texto-suave); font-size: .85rem; }
.g-campo input, .g-campo select, .g-campo textarea {
  width: 100%; min-height: var(--g-toque); padding: .6rem .8rem; border-radius: 10px;
  border: 1px solid var(--g-borde); background: var(--g-fondo); color: var(--g-texto); font: inherit;
}
.g-campo input[type="color"] { padding: .2rem; width: 5rem; }
.g-campo textarea { min-height: 6rem; resize: vertical; }
.g-fila { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.g-fila > .g-campo { flex: 1 1 12rem; }

/* Botones */
.g-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--g-toque); min-width: var(--g-toque); padding: .6rem 1.15rem; border-radius: 999px;
  border: 2px solid var(--g-amarillo); background: var(--g-amarillo); color: var(--g-grafito);
  font: 600 .95rem/1.2 var(--g-letra); text-decoration: none; cursor: pointer;
}
.g-boton:hover { filter: brightness(1.06); }
.g-boton--borde { background: transparent; color: var(--g-acento); }
.g-boton--peligro { background: transparent; border-color: var(--g-error); color: var(--g-error); }
.g-boton[disabled] { opacity: .5; cursor: not-allowed; }
.g-acciones { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* Avisos y etiquetas */
.g-aviso { border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid var(--g-borde); background: var(--g-superficie-2); }
.g-aviso--ok { border-color: var(--g-ok); }
.g-aviso--error { border-color: var(--g-error); }
.g-etiqueta-estado { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid var(--g-borde); color: var(--g-texto-suave); white-space: nowrap; }
.g-etiqueta-estado--activa { border-color: var(--g-ok); color: var(--g-ok); }
.g-etiqueta-estado--vencida, .g-etiqueta-estado--baja { border-color: var(--g-error); color: var(--g-error); }

/* Tablas: en el celular cada fila es una tarjeta */
.g-tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.g-tabla th, .g-tabla td { text-align: left; padding: .65rem .6rem; border-bottom: 1px solid var(--g-borde); vertical-align: top; }
.g-tabla th { color: var(--g-texto-suave); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 640px) {
  .g-tabla thead { display: none; }
  .g-tabla tr { display: block; border: 1px solid var(--g-borde); border-radius: 12px; margin-bottom: .75rem; padding: .4rem .2rem; }
  .g-tabla td { display: flex; gap: .75rem; justify-content: space-between; border: 0; padding: .35rem .7rem; }
  .g-tabla td::before { content: attr(data-col); color: var(--g-texto-suave); font-size: .82rem; }
}
.g-vacio { color: var(--g-texto-suave); font-style: italic; }
.g-separa { margin-bottom: 1rem; }
fieldset.g-campo { border: 1px solid var(--g-borde); border-radius: 10px; padding: .75rem 1rem; margin: 0; }
fieldset.g-campo label { display: flex; align-items: center; gap: .6rem; min-height: var(--g-toque); font-weight: 400; }
fieldset.g-campo input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--g-amarillo); }
/* el correo de la sesión, en un renglón: uno largo se corta con «…» (2026-10-22: a 820 px se partía en dos) */
.g-quien { font-size: .85rem; display: inline-block; max-width: 18rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
@media (max-width: 640px) { .g-quien { display: none; } }
.g-separa-arriba { margin-top: 1.5rem; }
.g-encabezado { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin: 1.5rem 0 .75rem; }
.g-encabezado h2 { margin: 0; }
.g-boton--chico { min-height: var(--g-toque); padding: .4rem .9rem; font-size: .85rem; }
.g-salir { margin: 0; }
.g-grupo { border: 1px solid var(--g-borde); border-radius: var(--g-radio); padding: 1rem; margin: 0; }
.g-grupo legend { font-family: var(--g-titulos); font-size: .95rem; padding: 0 .4rem; }
.g-campos { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.g-campo--error input { border-color: var(--g-error); }
.g-error { color: var(--g-error); font-size: .85rem; font-weight: 600; }
.g-foto-fila { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.g-foto { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--g-superficie-2); flex: none; }
.g-logo-vista { background: #fff; border-radius: 12px; padding: .75rem; display: flex; justify-content: center; margin-bottom: 1rem; }
.g-logo-vista img { max-width: 100%; max-height: 96px; object-fit: contain; }
/* la foto no se estira hasta la altura de «Llaveros e invitación» (2026-10-28: con pasar a otro llavero quedaba un hueco) */
.g-rejilla--tarjeta { margin-bottom: 1rem; align-items: start; }
.g-aviso ul { margin: .5rem 0 0; padding-left: 1.2rem; }
@media (max-width: 640px) { .g-salir .g-boton--chico { padding: .4rem .7rem; } }
.g-boton, .g-barra__titulo, .g-idioma a { white-space: nowrap; }
@media (max-width: 480px) { .g-barra__titulo { display: none; } .g-barra { gap: .5rem; } }
.g-etiqueta-estado--cancelada, .g-etiqueta-estado--ninguna { border-color: var(--g-borde); color: var(--g-texto-suave); }
.g-plan { display: flex; gap: .6rem; align-items: center; min-height: var(--g-toque); }
.g-plan input { width: 1.25rem; height: 1.25rem; accent-color: var(--g-amarillo); }
.g-rastro { white-space: pre-wrap; font-size: .8rem; color: var(--g-texto-suave); max-height: 16rem; overflow: auto; }
.g-pie { border-top: 1px solid var(--g-borde); padding: 1.5rem clamp(1rem, 3vw, 2rem) 2.5rem; color: var(--g-texto-suave); font-size: .85rem; text-align: center; }
.g-pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; margin-bottom: .5rem; }
.g-pie a { color: var(--g-texto-suave); display: inline-flex; align-items: center; min-height: var(--g-toque); }
.g-pie p { margin: 0; }
.g-legal h2 { margin-top: 1.75rem; }
.g-legal p, .g-legal li { color: var(--g-texto); }
.g-acepto { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; min-height: var(--g-toque); padding: .3rem 0; }
.g-acepto input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; flex: none; accent-color: var(--g-amarillo); }

/* ——— Tienda (prefijo gs-) ——— */
.gs-main img { max-width: 100%; height: auto; display: block; }
.gs-barra { gap: .75rem; }
.gs-nav { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.gs-nav ul { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.gs-nav ul a { display: inline-flex; align-items: center; min-height: var(--g-toque); padding: 0 .7rem; border-radius: 999px; color: var(--g-texto-suave); text-decoration: none; font-weight: 500; font-size: .94rem; white-space: nowrap; transition: color .2s, background .2s; }
.gs-nav ul a:hover, .gs-nav ul a[aria-current="page"] { background: rgba(255, 255, 255, .06); color: var(--g-texto); }
.gs-nav__cta, .gs-cta { min-height: var(--g-toque); padding: .5rem 1.1rem; font-size: .94rem; box-shadow: 0 0 24px -8px var(--g-brillo); }
/* barra A (2026-10-25): el botón amarillo va al final de la barra; el del menú solo se ve en el menú del celular */
.gs-nav__cta { display: none; }
/* EN|ES discreto: sin el relleno amarillo (junto al botón amarillo le quitaba fuerza); el elegido, en blanco */
.gs-idioma.g-idioma { border: 0; border-radius: 0; gap: .1rem; align-items: center; }
.gs-idioma.g-idioma a { min-width: 2.25rem; color: var(--g-texto-suave); font-size: .82rem; border-radius: 8px; }
.gs-idioma.g-idioma a[aria-current="true"] { background: transparent; color: var(--g-texto); text-decoration: underline; text-decoration-color: var(--g-amarillo); text-underline-offset: .35em; }
.gs-idioma.g-idioma a:hover { color: var(--g-texto); }
.gs-barra .g-barra__fin { margin-left: .5rem; }
.gs-carrito, .gs-cuenta { position: relative; display: grid; place-items: center; width: var(--g-toque); height: var(--g-toque); border-radius: 50%; color: var(--g-texto); }
.gs-carrito:hover, .gs-cuenta:hover { background: var(--g-superficie-2); }
/* «Entrar» / «Mi panel» con su texto (una cuenta solo con ícono no la encontraban); en el celular, solo el ícono */
.gs-cuenta { display: inline-flex; gap: .45rem; width: auto; padding: 0 .9rem 0 .75rem; border: 1.5px solid var(--g-borde); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .94rem; white-space: nowrap; }
.gs-cuenta svg { width: 18px; height: 18px; flex: none; }
.gs-cuenta[aria-current="page"] { border-color: var(--g-amarillo); }
/* «Mis tarjetas» junto a «Mi panel» (2026-10-31) */
.gs-cuenta--tarjetas { border-color: transparent; }
/* el panel de pruebas del admin, y la barra mientras está en la demostración (2026-10-31) */
.gs-demo-admin { margin: 0 0 1.25rem; border-style: dashed; }
.gs-demo-admin h2 { margin-top: 0; }
.gs-demo-admin form { margin: 0; }
.gs-demo-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1rem; }
.gs-demo-barra form { margin: 0; }
/* «Mis pedidos» en la cuenta (2026-10-22): cada pedido es una fila que lleva a su página */
/* El panel dentro de la tienda (2026-10-25): quién entró, el submenú de pestañas, «Primeros pasos» y los pedidos */
.gs-cuenta-pagina { padding-top: clamp(1.25rem, 3vw, 2rem); }
.gs-cuenta-quien { display: flex; justify-content: flex-end; align-items: center; gap: .6rem; min-width: 0; margin-bottom: .5rem; }
.gs-cuenta-quien .g-sub { min-width: 0; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
/* los botones no se encogen (su min-width los dejaba bajar de su texto: a 375 px «Contraseña» quedaba sin aire); el que
   se corta con «…» es el correo */
.gs-cuenta-quien > .g-boton, .gs-cuenta-quien > form { flex: none; }
.gs-submenu { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--g-borde); margin: 0 0 1.5rem; }
.gs-submenu::-webkit-scrollbar { display: none; }
.gs-submenu a, .gs-submenu button { display: inline-flex; align-items: center; min-height: var(--g-toque); padding: 0 .9rem; color: var(--g-texto-suave); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.gs-submenu button { background: none; border-width: 0 0 3px; border-style: solid; border-color: transparent; font-family: inherit; cursor: pointer; }
.gs-submenu a:hover, .gs-submenu button:hover { color: var(--g-texto); }
.gs-submenu a[aria-current="page"], .gs-submenu button[aria-selected="true"] { color: var(--g-texto); border-bottom-color: var(--g-texto); }
/* en el celular, las 6 pestañas en dos renglones: corridas de lado, «Facturación» quedaba escondida */
@media (max-width: 640px) { .gs-submenu { flex-wrap: wrap; overflow: visible; } .gs-submenu a, .gs-submenu button { padding: 0 .6rem; font-size: .9rem; } }
.gs-cuenta-titulo { display: flex; align-items: center; gap: 1rem; min-width: 0; margin-bottom: 1rem; }
.gs-cuenta-titulo h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.gs-cuenta-titulo__logo { width: 56px; height: 56px; flex: none; object-fit: contain; border-radius: 14px; border: 1px solid var(--g-borde); background: #fff; padding: 6px; }
.gs-pasos { margin: 1.5rem 0 2rem; }
.gs-pasos .g-encabezado { margin: 0 0 .5rem; }
.gs-pasos__barra { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--g-borde); overflow: hidden; margin: 0 0 1rem; appearance: none; }
.gs-pasos__barra::-webkit-progress-bar { background: var(--g-borde); border-radius: 999px; }
.gs-pasos__barra::-webkit-progress-value { background: var(--g-texto); border-radius: 999px; }
.gs-pasos__barra::-moz-progress-bar { background: var(--g-texto); border-radius: 999px; }
.gs-pasos__lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--g-borde); border-radius: 18px; background: var(--g-superficie); overflow: hidden; }
.gs-paso { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: 1rem 1.15rem; border-top: 1px solid var(--g-borde); }
.gs-paso:first-child { border-top: 0; }
.gs-paso__n { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--g-titulos); font-weight: 700; border: 1.5px solid var(--g-texto); }
.gs-paso--hecho .gs-paso__n { background: var(--g-texto); color: var(--g-amarillo); }
.gs-paso__texto { display: grid; gap: .2rem; min-width: 0; }
.gs-paso__texto b { font-family: var(--g-titulos); font-size: 1.02rem; }
.gs-paso__texto > span { color: var(--g-texto-suave); font-size: .92rem; }
.gs-paso__acciones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
@media (max-width: 640px) {
  .gs-paso { grid-template-columns: 2rem minmax(0, 1fr); }
  .gs-paso__acciones { grid-column: 2; justify-content: flex-start; }
}
.gs-lotes { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .6rem; }
.gs-lote { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; border: 1px solid var(--g-borde); border-radius: 14px; background: var(--g-superficie); }
.gs-lote > div:first-child { display: grid; gap: .15rem; min-width: 0; }
.gs-lote .g-acciones form { margin: 0; }
.gs-lote-llaveros { margin: 1.75rem 0 0; scroll-margin-top: 80px; }
.gs-lote-llaveros h2 { margin-bottom: .2rem; }
.gs-serie { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; color: var(--g-texto); }
.gs-serie b { font-family: var(--g-titulos); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.gs-serie .g-mono { color: var(--g-texto-suave); font-size: .8rem; }
.gs-corta { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* Entrar y crear cuenta (2026-10-26: «fácil de hacer y atractivo a la vista»): una tarjeta con las pestañas
   Entrar · Crear cuenta y, en pantalla ancha, al lado, un llavero y lo que da la cuenta (de noche) */
.gs-acceso-pagina { padding-top: clamp(1.25rem, 4vw, 3rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.gs-acceso { display: grid; gap: 1.5rem; max-width: 62rem; margin: 0 auto; }
@media (min-width: 900px) { .gs-acceso { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); } }
.gs-acceso__tarjeta { min-width: 0; background: var(--g-superficie); border: 1px solid var(--g-borde); border-radius: 24px; padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: 0 18px 48px rgba(17, 17, 17, .07); }
.gs-acceso__tarjeta h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0 0 .4rem; }
.gs-acceso__tarjeta > .g-sub { margin: 0 0 1.25rem; }
.gs-acceso__tarjeta .g-aviso { margin: 0 0 1rem; }
.gs-acceso__pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .3rem; margin: 0 0 1.5rem; background: var(--g-superficie-2); border-radius: 999px; }
.gs-acceso__pestanas a { display: flex; align-items: center; justify-content: center; min-height: var(--g-toque); border-radius: 999px; font-weight: 600; text-decoration: none; color: var(--g-texto-suave); text-align: center; }
.gs-acceso__pestanas a[aria-current="page"] { background: var(--g-amarillo); color: var(--g-tinta); box-shadow: 0 1px 3px rgba(17, 17, 17, .15); }
.gs-acceso__pestanas a:not([aria-current]):hover { color: var(--g-texto); }
.gs-acceso__boton { width: 100%; min-height: 52px; font-size: 1rem; }
.gs-acceso__olvide { margin: -.4rem 0 0; text-align: right; font-size: .9rem; }
.gs-acceso__otro { margin: 1.25rem 0 0; text-align: center; color: var(--g-texto-suave); }
.gs-acceso__otro a { font-weight: 600; color: var(--g-texto); }
.gs-acceso__legal { margin: 0; text-align: center; }
.gs-acceso__reenviar { margin: 1rem 0 0; text-align: center; }
.gs-acceso__enlace { min-height: var(--g-toque); padding: 0 .15rem; border: 0; background: none; color: var(--g-texto); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.gs-acceso__lado { display: none; min-width: 0; border-radius: 24px; padding: 2rem 1.75rem; }
@media (min-width: 900px) { .gs-acceso__lado { display: flex; flex-direction: column; justify-content: center; } }
.gs-acceso__lado img { width: 10rem; height: auto; align-self: center; margin-bottom: 1.75rem; filter: drop-shadow(0 18px 32px rgba(254, 239, 76, .22)); }
.gs-acceso__lado h2 { font-size: 1.2rem; margin: 0 0 .9rem; }
.gs-acceso__lado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.gs-acceso__lado li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; align-items: start; line-height: 1.45; }
.gs-acceso__lado li::before { content: "✓"; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--g-amarillo); color: var(--g-grafito); font-size: .78rem; font-weight: 700; }
/* la contraseña con «Mostrar» pegado a la derecha del campo (un botón de 44 px de alto, como el campo) */
.gs-clave { position: relative; }
.g-campo .gs-clave input { padding-right: 6.25rem; }
.gs-clave__ver { position: absolute; top: 0; right: 0; height: 100%; min-height: var(--g-toque); padding: 0 .95rem; border: 0; border-left: 1px solid var(--g-borde); border-radius: 0 10px 10px 0; background: transparent; color: var(--g-texto); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.gs-clave__ver[aria-pressed="true"] { background: var(--g-amarillo); color: var(--g-tinta); }
.gs-clave__ver[hidden] { display: none; }
/* el código de 6 dígitos: grande y espaciado, para leerlo y escribirlo sin error */
.g-campo input.gs-codigo { font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace; font-size: 1.75rem; font-weight: 700; letter-spacing: .45em; text-align: center; padding-left: .9em; min-height: 3.5rem; }
/* una cuenta recién creada, sin pedidos: por dónde empezar */
.gs-cuenta-vacia { background: var(--g-superficie); border: 1px dashed var(--g-borde); border-radius: var(--g-radio); padding: clamp(1.25rem, 4vw, 2rem); text-align: center; }
.gs-cuenta-vacia h2 { margin-top: 0; }
.gs-cuenta-vacia .g-acciones { justify-content: center; }
.gs-sin-clave { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
/* Cargar al equipo (2026-10-25): la tabla para revisar antes de crear; se corre de lado si trae muchas columnas */
.gs-carga-tabla { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--g-borde); border-radius: 14px; background: var(--g-superficie); }
/* una tabla de verdad también en el celular (corrida de lado): como tarjetas, las celdas perdían su columna */
.gs-carga-t { border-collapse: collapse; min-width: 100%; width: max-content; font-size: .9rem; }
.gs-carga-t th, .gs-carga-t td { padding: .35rem .4rem; vertical-align: middle; text-align: left; border-bottom: 1px solid var(--g-borde); }
.gs-carga-t thead th { color: var(--g-texto-suave); font-weight: 600; font-size: .8rem; }
.gs-carga-t thead select { min-height: 40px; width: 8.5rem; border-radius: 10px; border: 1px solid var(--g-borde); background: var(--g-fondo); color: var(--g-texto); font: inherit; font-size: .85rem; }
.gs-carga-t td input { width: 8.5rem; min-height: 40px; border-radius: 8px; border: 1px solid var(--g-borde); background: var(--g-fondo); color: var(--g-texto); padding: 0 .5rem; font: inherit; font-size: .9rem; }
.gs-carga-t td input[aria-invalid="true"] { border: 2px solid var(--g-error); }
.gs-carga-t tbody th { white-space: nowrap; font-weight: 600; }
.gs-carga-t tbody th > * { display: inline-flex; vertical-align: middle; margin-right: .35rem; }
.gs-carga-n { min-width: 1.5rem; }
.gs-carga-mal { background: color-mix(in srgb, var(--g-error) 8%, transparent); }
.gs-carga-mal:has(+ .gs-carga-motivo) th, .gs-carga-mal:has(+ .gs-carga-motivo) td { border-bottom: 0; }
.gs-carga-motivo td { color: var(--g-error); font-size: .88rem; padding-top: 0; white-space: normal; }
.gs-carga-quitar { display: inline-flex; gap: .3rem; align-items: center; font-weight: 400; font-size: .8rem; min-height: 32px; }
.gs-carga-orden { margin: .5rem 0 1rem; }
.gs-equipo-num { width: 7.5rem; min-height: 40px; border-radius: 8px; border: 1px solid var(--g-borde); background: var(--g-fondo); color: var(--g-texto); padding: 0 .5rem; font: inherit; font-variant-numeric: tabular-nums; }
.gs-equipo-num[aria-invalid="true"] { border: 2px solid var(--g-error); }
.gs-equipo-form .g-acciones { margin-top: 1rem; }
/* La página del pedido: «Siguiente paso» y la puerta al panel (2026-10-25) */
.gs-siguiente { border: 2px solid var(--g-texto); border-radius: 18px; padding: 1.25rem 1.5rem; background: var(--g-superficie); margin: 1rem 0 1.75rem; }
.gs-siguiente h2 { margin: 0 0 .4rem; }
.gs-siguiente p { margin: 0 0 1rem; }
.gs-siguiente form { margin: 0; }
.gs-mis-pedidos { margin-top: 2rem; }
.gs-mis-pedidos__lista { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.gs-mis-pedidos__item a { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .5rem 1rem; min-height: var(--g-toque); padding: .7rem 1rem; border: 1px solid var(--g-borde); border-radius: 12px; background: var(--g-superficie); color: var(--g-texto); text-decoration: none; }
.gs-mis-pedidos__item a:hover { border-color: var(--g-amarillo); }
.gs-mis-pedidos__total { font-weight: 700; font-variant-numeric: tabular-nums; justify-self: end; }
.gs-mis-pedidos__item .g-etiqueta-estado { justify-self: start; }
@media (max-width: 560px) { .gs-mis-pedidos__item a { grid-template-columns: 1fr auto; } }
.gs-carrito__n { position: absolute; top: 2px; right: 0; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: var(--g-amarillo); color: var(--g-grafito); font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.gs-menu { display: none; width: var(--g-toque); height: var(--g-toque); border-radius: 50%; border: 1px solid var(--g-borde); background: transparent; color: var(--g-texto); cursor: pointer; place-items: center; }
/* menú de hamburguesa donde la barra completa (con «Mi cuenta» y el carrito) no cabe: en inglés necesita 1212 px
   (2026-10-22: con el corte en 1100, entre 1101 y 1211 px se salía hasta 110 px por la derecha) */
@media (max-width: 1240px) {
  .gs-menu { display: grid; }
  .gs-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--g-fondo); border-bottom: 1px solid var(--g-borde); display: none; padding: .5rem clamp(1rem, 3vw, 2rem) 1rem; }
  .gs-menu-abierto .gs-nav { display: block; }
  .gs-nav ul { flex-direction: column; }
  .gs-nav ul a { width: 100%; font-size: 1.05rem; color: var(--g-texto); min-height: 52px; border-radius: 0; border-bottom: 1px solid var(--g-borde); }
  .gs-nav__cta { display: inline-flex; width: 100%; margin-top: .9rem; min-height: 52px; }
  .gs-cta { display: none; }
  .gs-cuenta { width: var(--g-toque); padding: 0; justify-content: center; border: 0; }
  .gs-cuenta svg { width: 22px; height: 22px; }
  .gs-cuenta__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gs-barra .g-barra__fin { margin-left: auto; }
  .gs-nav .g-idioma { margin-top: 1rem; align-self: flex-start; }
  .gs-menu-abierto .gs-nav { display: flex; flex-direction: column; align-items: stretch; }
}
.gs-seccion { max-width: 72rem; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem); }
/* las tablas del panel y su demo, a lo ancho de la pantalla (2026-10-31: «aprovecha ese espacio para el panel») */
.gs-seccion.gs-ancha, .gs-seccion.gd { max-width: 120rem; }
.gs-angosta { max-width: 40rem; }
.gs-debug { position: fixed; left: .5rem; bottom: .5rem; z-index: 60; margin: 0; padding: .6rem .8rem; max-width: calc(100vw - 1rem); background: rgba(0, 0, 0, .85); color: #9f9; font: 12px/1.4 ui-monospace, monospace; border-radius: 8px; white-space: pre-wrap; pointer-events: none; }
/* /llaveros: el precio por llavero sin y con resina y, debajo, el total del paquete (src/tienda/paginas.js) */
.gs-precio-celda b { display: block; color: var(--g-acento); font-weight: 700; }
.gs-precio-celda small { display: block; color: var(--g-texto-suave); font-size: .85em; white-space: nowrap; }
@media (max-width: 640px) { .gs-precio-celda { text-align: right; } }
/* /tarjetas y el portal: la escala de las tarjetas (por tarjeta y planes de tarifa plana; src/lib/planes-tarjetas.js) */
.gs-planes-titulo { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
.gs-tabla-planes td:nth-child(2), .gs-tabla-planes td:nth-child(3) { font-weight: 700; white-space: nowrap; }
.gs-tabla-planes td::before { font-weight: 400; }
.gs-planes-plan strong { display: block; font-weight: 600; }
.gs-tabla-planes tr.gs-plano .gs-planes-plan strong { color: var(--g-acento); font-weight: 700; }
.gs-planes-rango { display: block; font-size: .85em; color: var(--g-texto-suave); }
@media (max-width: 640px) { .gs-planes-plan { text-align: right; } }
/* selector «Tu logo / Logo de Giode3D» de la tabla de /llaveros (navegador/tienda.js cambia precio y total) */
.gs-modo { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; margin-bottom: 1rem; border: 1px solid var(--g-borde); border-radius: 26px; }
.gs-modo button { min-height: 44px; padding: 0 1.1rem; white-space: nowrap; border: 0; border-radius: 999px; background: transparent; color: var(--g-texto); font: inherit; font-weight: 600; cursor: pointer; }
.gs-modo button[aria-pressed="true"] { background: var(--g-texto); color: var(--g-fondo); }
.gs-nota { margin-top: 1rem; }
.gs-destacado > div { background: var(--g-superficie); border: 2px solid var(--g-amarillo); border-radius: 24px; padding: clamp(1.25rem, 4vw, 2.5rem); }
.gs-galeria { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(46%, 12rem), 1fr)); }
.gs-galeria figure, .gs-miniaturas figure { margin: 0; }
.gs-galeria img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; border-radius: 14px; background: var(--g-superficie); }
.gs-promos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: stretch; }
.gs-promo { background: var(--g-superficie); border: 1px solid var(--g-borde); border-radius: var(--g-radio); overflow: hidden; display: flex; flex-direction: column; }
.gs-promo__foto img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: #fff; }
.gs-promo__texto { padding: 1.25rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.gs-promo__texto .g-boton { margin-top: auto; align-self: flex-start; }
.gs-promo h3 a { color: var(--g-texto); text-decoration: none; }
.gs-precio { font-family: var(--g-titulos); font-size: 1.4rem; color: var(--g-acento); margin: .5rem 0 1rem; }
.gs-faq { border-bottom: 1px solid var(--g-borde); }
.gs-faq summary { cursor: pointer; min-height: var(--g-toque); padding: .9rem 0; font-weight: 600; display: flex; align-items: center; }
.gs-faq p { color: var(--g-texto-suave); margin-top: 0; }
.gs-producto { max-width: 76rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem); display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .gs-producto { grid-template-columns: 1fr 1fr; } .gs-producto__fotos { position: sticky; top: 80px; } }
.gs-producto__principal { border-radius: 20px; display: block; width: auto; height: auto; max-width: 100%; max-height: min(70vh, 46rem); margin-inline: auto; background: #fff; }
.gs-producto__info .g-acciones { margin-bottom: 1.5rem; }
.gs-miniaturas { display: grid; gap: .5rem; grid-template-columns: repeat(4, 1fr); margin-top: .5rem; }
.gs-miniaturas img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: #fff; width: 100%; }
.gs-bajada { font-size: 1.1rem; color: var(--g-texto-suave); }
.gs-texto h2 { margin-top: 1.75rem; font-size: 1.15rem; }
.gs-texto li { margin-bottom: .35rem; }
.gs-dos { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .gs-dos { grid-template-columns: 1fr 1fr; } }
.gs-dos img { border-radius: 16px; }
/* Configurador (gc-): el visor sobre fondo claro neutro (los colores del filamento se ven como son); en el celular
   queda pegado arriba (36 % de la pantalla) mientras se bajan las opciones */
.gc { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; margin: 1rem 0; }
.gc-visor { position: sticky; top: 65px; z-index: 5; background: var(--g-claro); border-radius: 20px; overflow: hidden; }
.gc-visor canvas { display: block; width: 100%; height: 36vh; min-height: 200px; touch-action: none; }
.gc-medidas { position: absolute; left: .75rem; top: .6rem; right: .75rem; margin: 0; color: #1b1b1a; font-size: .85rem; font-weight: 600; }
.gc-vistas { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.gc-vista { min-height: var(--g-toque); padding: .3rem .9rem; border-radius: 999px; border: 1px solid #c9c7bf; background: #ffffffd9; color: #1b1b1a; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.gc-vista[aria-pressed="true"] { background: #1b1b1a; color: #fff; border-color: #1b1b1a; }
.gc-debug-3mf { position: absolute; right: .5rem; top: 2.2rem; }
.gc-opciones { display: grid; gap: 1rem; }
.gc-opciones fieldset { border: 1px solid var(--g-borde); border-radius: var(--g-radio); padding: .9rem 1rem 1rem; margin: 0; display: grid; gap: .6rem; }
.gc-opciones legend { font-family: var(--g-titulos); font-weight: 700; padding: 0 .35rem; }
.gc-grupo { display: flex; flex-wrap: wrap; gap: .5rem; }
.gc-opcion { display: inline-flex; align-items: center; gap: .55rem; min-height: var(--g-toque); padding: .35rem .85rem; border: 1px solid var(--g-borde); border-radius: 999px; cursor: pointer; }
.gc-opcion:has(input:checked) { border-color: var(--g-amarillo); }
/* qué abre el chip (opción 1, 2026-10-25): tres tarjetas con su título, qué es y su precio */
.gc-chip-pregunta { margin: .25rem 0 0; font-weight: 600; }
.gc-chips { display: grid; gap: .5rem; }
.gc-chip { position: relative; display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .1rem .6rem; padding: .75rem .9rem; border: 1.5px solid var(--g-borde); border-radius: 14px; cursor: pointer; }
.gc-chip input { grid-row: 1 / span 3; margin: .2rem 0 0; width: 1.1rem; height: 1.1rem; accent-color: var(--g-tinta, #111); }
.gc-chip:has(input:checked) { border-color: var(--g-amarillo); box-shadow: 0 0 0 1px var(--g-amarillo); }
.gc-chip__titulo { font-weight: 700; }
.gc-chip__texto { color: var(--g-texto-suave); font-size: .9rem; }
.gc-chip__precio { font-size: .88rem; font-weight: 600; }
/* lo que pasa después de pagar, según lo que abre el chip; y las letras antes del número (JMEG-001, 2026-10-31) */
.gc-chip-nota { margin: 0; display: grid; gap: .5rem; }
.gc-chip-nota > p { margin: 0; }
.gc-prefijo { margin: 0; max-width: 20rem; }
/* el 3MF de lo que se ve, solo con la cuenta del admin (2026-10-31) */
.gc-admin { display: grid; gap: .4rem; justify-items: start; border-style: dashed; }
.gc-admin > p { margin: 0; overflow-wrap: anywhere; }
.gc-prefijo input { text-transform: uppercase; letter-spacing: .06em; font-family: var(--g-mono, ui-monospace, monospace); }
.gc-opcion input { width: 1.15rem; height: 1.15rem; accent-color: var(--g-amarillo); margin: 0; }
.gc-subir { position: relative; justify-self: start; }
.gc-subir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gc-muestras { display: flex; flex-wrap: wrap; gap: .25rem; }
/* cada color, una fila plegable: el elegido con su nombre; la paleta se abre al tocarla */
.gc-color { border: 1px solid var(--g-borde); border-radius: 12px; margin: 0 0 .5rem; background: var(--g-superficie); }
.gc-color > summary { display: flex; align-items: center; gap: .6rem; min-height: var(--g-toque); padding: 0 .85rem; cursor: pointer; list-style: none; }
.gc-color > summary::-webkit-details-marker { display: none; }
.gc-color > summary::after { content: ""; margin-left: auto; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.gc-color[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.gc-color > summary:focus-visible { outline: 3px solid var(--g-acento); outline-offset: 2px; border-radius: 12px; }
.gc-color__punto { width: 26px; height: 26px; border-radius: 50%; background: var(--gc-color); border: 2px solid #5a5a55; flex: none; }
.gc-color__etq { font-weight: 600; }
.gc-color__valor { color: var(--g-texto-suave); font-size: .9rem; }
.gc-color > .gc-muestras { padding: .25rem .5rem .6rem; border-top: 1px solid var(--g-borde); }
/* un paso plegado (el aro, 2026-10-31: «que se pueda abrir y por defecto esté cerrado para que no sea muy llamativo») */
.gc-plegable { border: 1px solid var(--g-borde); border-radius: var(--g-radio); margin: 0; }
.gc-plegable > summary { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .75rem; min-height: var(--g-toque); padding: .35rem 1rem; cursor: pointer; list-style: none; }
.gc-plegable > summary::-webkit-details-marker { display: none; }
.gc-plegable > summary::after { content: ""; margin-left: auto; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.gc-plegable[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.gc-plegable > summary:focus-visible { outline: 3px solid var(--g-acento); outline-offset: 2px; border-radius: var(--g-radio); }
.gc-plegable__t { font-family: var(--g-titulos); font-weight: 700; }
.gc-plegable__v { color: var(--g-texto-suave); font-size: .9rem; }
.gc-plegable__cuerpo { display: grid; gap: .6rem; padding: .25rem 1rem 1rem; }
.gc-muestra { position: relative; width: var(--g-toque); height: var(--g-toque); display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.gc-muestra input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.gc-muestra span { width: 32px; height: 32px; border-radius: 50%; background: var(--gc-color); border: 2px solid #5a5a55; }
.gc-muestra input:checked + span { outline: 3px solid var(--g-amarillo); outline-offset: 3px; }
.gc-muestra input:focus-visible + span { outline: 3px solid var(--g-texto); outline-offset: 3px; }
.gc-etiqueta { margin: .25rem 0 0; font-weight: 600; font-size: .92rem; }
.gc-rango { display: grid; gap: .35rem; }
.gc-rango input { width: 100%; min-height: var(--g-toque); accent-color: var(--g-amarillo); }
/* debajo del aro: dónde está el centro («por defecto») */
.gc-rango__marcas { display: flex; justify-content: space-between; align-items: flex-start; margin: -.25rem 0 0; font-size: .85rem; color: var(--g-texto-suave); }
.gc-rango__centro { position: relative; padding-top: .55rem; font-weight: 600; color: var(--g-texto); }
.gc-rango__centro::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: .45rem; background: currentColor; transform: translateX(-50%); }
/* reverso: el texto (varias líneas), su alineación, tamaño y letra, y el logo propio */
.gc-opciones #gc-nombre { min-height: 4.2rem; }
/* la alineación arriba; la letra y el tamaño, dos listas lado a lado (2026-10-31), alineadas abajo aunque un rótulo baje */
.gc-texto-formato { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: .6rem 1rem; }
.gc-texto-formato > .gc-alinear { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 420px) { .gc-texto-formato { grid-template-columns: minmax(0, 1fr); } }
.gc-alinear { display: inline-flex; border: 1px solid var(--g-borde); border-radius: 12px; overflow: hidden; }
.gc-alinear__op { position: relative; display: grid; place-items: center; width: var(--g-toque); height: var(--g-toque); cursor: pointer; }
.gc-alinear__op + .gc-alinear__op { border-left: 1px solid var(--g-borde); }
.gc-alinear__op input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.gc-alinear__op svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.gc-alinear__op:has(input:checked) { background: var(--g-amarillo); color: var(--g-tinta); }
.gc-alinear__op:has(input:focus-visible) { outline: 3px solid var(--g-acento); outline-offset: -3px; }
.gc-tam, .gc-letra-campo { margin: 0; min-width: 0; }
.gc-tam select, .gc-letra-campo select { width: 100%; }
.gc-texto-estado.gc-texto-estado--mal { color: var(--g-error); font-weight: 600; }
.gc-reverso-logo { display: flex; flex-wrap: wrap; gap: .5rem; }
.gc-complicado { margin: .75rem 0 0; }
.gc-complicado > p { margin: 0 0 .6rem; }
.gc-complicado > p:last-child { margin: .6rem 0 0; }
/* un logo de baja calidad, redibujado: el aviso y la elección (como el de los complicados) */
.gc-calidad { margin: .75rem 0 0; }
.gc-calidad > p { margin: 0; }
.gc-calidad > .gc-grupo { margin: .6rem 0 0; }
.gc-total { font-family: var(--g-titulos); font-size: 1.2rem; color: var(--g-acento); margin: 0; }
.gc-atenuado { opacity: .5; cursor: not-allowed; }
.gc-por-que { color: var(--g-texto); }
.gc-resaltado { outline: 3px solid var(--g-amarillo); outline-offset: 3px; }
/* al llegar a un control (teclado, «saltar a»), que quede debajo del visor pegado y no escondido detrás */
@media (max-width: 899px) {
  .gc-opciones :is(input, select, button, label, legend, p) { scroll-margin-top: calc(65px + max(36vh, 200px) + 1rem); }
  /* los botones de vista debajo del lienzo, no encima del llavero */
  .gc-visor canvas { height: calc(36vh - 3.25rem); min-height: 170px; }
  .gc-vistas { position: static; padding: 0 .5rem .5rem; }
}
@media (min-width: 900px) {
  .gc { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .gc-visor { top: 80px; }
  .gc-visor canvas { height: min(70vh, 40rem); }
}
.gs-carrito-item.gs-carrito-item--diseno { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "vista texto precio" "cant cant quitar"; }
.gs-carrito-item--diseno > .gs-carrito-item__vista { grid-area: vista; }
.gs-carrito-item--diseno > .gs-carrito-item__texto { grid-area: texto; }
.gs-carrito-item--diseno > select { grid-area: cant; }
.gs-carrito-item--diseno > .gs-carrito-item__precio { grid-area: precio; }
.gs-carrito-item--diseno > button { grid-area: quitar; }
.gs-pedido-lista .gs-carrito-item.gs-carrito-item--diseno { grid-template-areas: "vista texto precio"; }
.gs-carrito-item__vista { width: 72px; height: 72px; border-radius: 10px; background: var(--g-claro); object-fit: contain; }
.gs-carrito-item__texto { display: grid; gap: .15rem; }
.gs-carrito-item select { min-height: var(--g-toque); border-radius: 10px; border: 1px solid var(--g-borde); background: var(--g-fondo); color: var(--g-texto); padding: 0 .5rem; font: inherit; max-width: 100%; }
.gs-ejemplo { border-color: var(--g-amarillo) !important; color: var(--g-acento) !important; font-size: .75rem; vertical-align: middle; }
.gs-contacto { list-style: none; padding: 0; display: grid; gap: .75rem; margin: 1.5rem 0; }
.gs-contacto .g-boton { width: 100%; justify-content: flex-start; }
.gs-carrito-lista { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .75rem; }
.gs-carrito-item { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; background: var(--g-superficie); border: 1px solid var(--g-borde); border-radius: 12px; padding: .9rem 1rem; }
.gs-carrito-item input { width: 5rem; min-height: var(--g-toque); border-radius: 10px; border: 1px solid var(--g-borde); background: var(--g-fondo); color: var(--g-texto); padding: 0 .5rem; font: inherit; }
.gs-carrito-item__nombre { font-weight: 600; }
.gs-carrito-item__precio { color: var(--g-acento); font-weight: 700; }
.gs-cotizacion__fotos { display: grid; gap: 1rem; }
.gs-cotizacion__fotos figure { margin: 0; }
.gs-cotizacion__fotos img { border-radius: 16px; }
.gs-pie { border-top: 1px solid var(--g-borde); padding: 3rem clamp(1rem, 3vw, 2rem) 2rem; color: var(--g-texto-suave); background: var(--g-fondo); }
.gs-pie__cols { max-width: 76rem; margin: 0 auto; display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
@media (min-width: 900px) { .gs-pie__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.gs-pie__marca p { margin: .9rem 0 .25rem; }
.gs-pie h2 { font-size: .95rem; color: var(--g-texto); }
.gs-pie ul { list-style: none; padding: 0; margin: 0; }
.gs-pie li { min-height: var(--g-toque); display: flex; align-items: center; }
.gs-pie a { color: var(--g-texto-suave); text-decoration: none; }
.gs-pie a:hover { color: var(--g-texto); text-decoration: underline; }
@media (max-width: 600px) { .gs-pie__cols { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; } .gs-pie__marca { grid-column: 1 / -1; } }
.gs-pie__fin { max-width: 76rem; margin: 2rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--g-borde); font-size: .85rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }

/* Pedidos (gs-): pagar, línea de estados, prueba; panel (ga-) */
.gs-pagar { display: grid; gap: .75rem; margin: 1rem 0; }
.gs-estado-pedido { font-family: var(--g-titulos); color: var(--g-acento); font-size: 1.2rem; }
.gs-linea { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; gap: .4rem; }
.gs-linea li { display: flex; align-items: center; gap: .6rem; color: var(--g-texto-suave); }
.gs-linea li::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.gs-linea li.gs-linea--hecho { color: var(--g-texto); }
.gs-linea li.gs-linea--hecho::before { background: var(--g-texto); }
.gs-linea li.gs-linea--ahora { color: var(--g-acento); font-weight: 700; }
.gs-linea li.gs-linea--ahora::before { background: var(--g-amarillo); border-color: var(--g-amarillo); }
.gs-prueba { margin: 0 0 1rem; }
.gs-prueba img { max-width: 100%; height: auto; border-radius: 14px; background: var(--g-claro); }
.gs-responder { margin: .75rem 0; }
.ga-renglon { display: grid; gap: .5rem; }
/* número de serie (2026-10-25): las placas y programar los chips uno a uno */
.ga-serie h4 { margin: 0 0 .3rem; }
.ga-placas { margin: .5rem 0; }
.ga-programar { text-align: center; }
.ga-programar .g-acciones { justify-content: center; }
.ga-programar ol { text-align: left; max-width: 32rem; margin: 1rem auto; }
.ga-programar__n { font-family: var(--g-titulos); font-size: clamp(3.5rem, 18vw, 7rem); font-weight: 700; line-height: 1; margin: .2em 0; font-variant-numeric: tabular-nums; }
.ga-programar__url { overflow-wrap: anywhere; font-size: clamp(.85rem, 3.8vw, 1.05rem); }
.ga-archivos { display: grid; gap: .6rem; max-width: 34rem; }
.ga-lienzo { width: 100%; height: 280px; background: var(--g-claro); border-radius: 14px; display: block; }
.ga-historia { padding-left: 1.2rem; display: grid; gap: .3rem; }
@media print { .g-barra, .g-pie { display: none; } .ga-orden { color: #000; } }
/* /tarjetas: la ilustración de las tarjetas del equipo (src/tienda/ilustracion-tarjetas.js): de noche la escena, de día
   la pantalla del celular; los llaveros en grafito con el logo en amarillo */
.gti { position: relative; container: gti / inline-size; margin: 0; padding: 2.6rem clamp(1rem, 3vw, 1.75rem) clamp(1rem, 3vw, 1.75rem); border-radius: 20px; display: grid; gap: 1.25rem; overflow: hidden; }
.gti-ejemplo { position: absolute; top: .75rem; right: .75rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .6rem; border: 1px solid var(--g-borde); border-radius: 999px; color: var(--g-texto-suave); }
.gti-escena { display: grid; grid-template-columns: minmax(0, 6.25rem) minmax(0, 1fr); gap: clamp(.75rem, 3vw, 1.75rem); align-items: center; }
.gti-equipo { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.gti-persona { display: grid; justify-items: center; text-align: center; gap: .1rem; }
.gti-llavero { width: clamp(3.25rem, 9vw, 5rem); height: auto; }
.gti-llavero__base { fill: var(--g-grafito); stroke: #4a4a46; stroke-width: 1.5; }
.gti-llavero__logo { fill: var(--g-amarillo); }
.gti-llavero__texto { font: 800 15px var(--g-titulos); fill: var(--g-grafito); letter-spacing: .02em; }
.gti-llavero__nfc { stroke: var(--g-amarillo); stroke-width: 3; stroke-linecap: round; opacity: .85; }
.gti-persona--toca .gti-llavero { filter: drop-shadow(0 0 12px var(--g-brillo)); }
.gti-persona__nombre { font-weight: 700; font-size: .95rem; }
.gti-persona__cargo { font-size: .8rem; color: var(--g-texto-suave); }
.gti-tel { position: relative; container-type: inline-size; justify-self: center; width: min(100%, 17rem); padding: .55rem; border-radius: 2.1rem; background: #000; border: 1px solid #3a3d42; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.gti-ondas { position: absolute; left: -2.9rem; top: 15%; width: 2.8rem; height: auto; transform: rotate(-90deg); fill: none; stroke: var(--g-amarillo); stroke-width: 3; stroke-linecap: round; }
.gti-pantalla { border-radius: 1.6rem; padding: 1.4rem .9rem 1rem; display: grid; justify-items: center; text-align: center; gap: .15rem; }
.gti-cara { width: 3.6rem; height: 3.6rem; margin-bottom: .3rem; }
.gti-cara__fondo { fill: #FFE7A3; }
.gti-cara__piel { fill: #C68B5F; }
.gti-cara__pelo { fill: #2B1D14; }
.gti-cara__ropa { fill: var(--g-grafito); }
.gti-nombre { margin: 0; font: 700 1.1rem var(--g-titulos); }
.gti-cargo { margin: 0 0 .6rem; font-size: .82rem; color: var(--g-texto-suave); }
.gti-botones { display: grid; gap: .35rem; width: 100%; }
.gti-boton { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.1rem; padding: .3rem .5rem; white-space: nowrap; border: 1px solid var(--g-borde); border-radius: 999px; font-size: clamp(.68rem, 5.4cqi, .88rem); font-weight: 600; background: var(--g-superficie); color: var(--g-texto); }
.gti-boton svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; flex: none; }
.gti-boton--guardar { background: var(--g-amarillo); border-color: var(--g-amarillo); color: var(--g-tinta); }
/* (position: relative: los pasos se pintan encima de la sombra del celular, que es posicionado y los oscurecía) */
/* tres pasos cortos en una fila (2026-10-31) */
.gti-pasos { position: relative; margin: 0; padding: 0; list-style: none; counter-reset: gti; display: grid; gap: .55rem .9rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gti-pasos li { counter-increment: gti; display: grid; grid-template-columns: 1.7rem 1fr; gap: .6rem; align-items: start; font-size: .92rem; line-height: 1.35; }
.gti-pasos li::before { content: counter(gti); display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--g-amarillo); color: var(--g-tinta); font-weight: 800; font-size: .85rem; }
/* fuera del celular, si la ilustración queda angosta (media pantalla de una tableta), los llaveros van en fila arriba
   y el celular toma todo el ancho: al lado de los llaveros no le cabía «Guardar contacto» */
@media (min-width: 561px) {
  @container gti (max-width: 24rem) {
    .gti-escena { grid-template-columns: minmax(0, 1fr); }
    .gti-equipo { grid-template-columns: minmax(0, 1fr); }
    .gti-ondas { left: 12%; top: -1.7rem; transform: none; }
    .gti-llavero { width: 3.1rem; }
    .gti-persona__nombre { font-size: .82rem; }
    .gti-persona__cargo { font-size: .72rem; }
  }
}
/* en el celular, compacta: los llaveros en una columna angosta al lado del celular y los pasos en dos columnas, para
   que la ilustración deje ver el resto de la página (tests/e2e/tienda.spec.js: no más de 75 % de la pantalla) */
@media (max-width: 560px) {
  .gti { padding: 2.85rem .85rem .85rem; gap: .9rem; }
  .gti-escena { grid-template-columns: 3.6rem minmax(0, 1fr); gap: .7rem; }
  .gti-equipo { gap: .45rem; }
  .gti-llavero { width: 2.9rem; }
  .gti-persona__nombre { font-size: .78rem; }
  .gti-persona__cargo { font-size: .66rem; }
  .gti-tel { width: 100%; padding: .4rem; border-radius: 1.6rem; }
  .gti-ondas { left: -2.15rem; width: 2.1rem; top: 12%; }
  .gti-pantalla { padding: .9rem .55rem .6rem; border-radius: 1.25rem; }
  .gti-cara { width: 2.9rem; height: 2.9rem; margin-bottom: .2rem; }
  .gti-nombre { font-size: .98rem; }
  .gti-cargo { font-size: .72rem; margin-bottom: .4rem; }
  .gti-botones { gap: .3rem; }
  .gti-boton { min-height: 1.95rem; font-size: clamp(.68rem, 5.4cqi, .78rem); gap: .3rem; padding: .2rem .4rem; }
  .gti-boton svg { width: .9rem; height: .9rem; }
  .gti-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .5rem; }
  .gti-pasos li { grid-template-columns: 1.35rem 1fr; gap: .4rem; font-size: .76rem; }
  .gti-pasos li::before { width: 1.35rem; height: 1.35rem; font-size: .72rem; }
}

/* «Para empresas» en /tarjetas (2026-10-21): cuántas personas → el primer año (src/lib/empresas.js) */
.gs-empresas { padding-top: 0; }
.gs-empresas-caja { max-width: 44rem; margin: 0 auto; }
.gs-empresas-caja h2 { margin-top: 0; }
.gs-empresas-datos { display: grid; justify-items: start; gap: .75rem; margin: 1rem 0; }
.gs-empresas-opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.gs-empresas-datos .g-campo { margin: 0; }
.gs-empresas-datos input[type="number"] { max-width: 9rem; }
.gs-empresas-cuenta { margin: 0 0 1rem; }
.gs-empresas-fila { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--g-borde); }
.gs-empresas-fila dd { margin: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gs-empresas-total { border-bottom: 0; font-size: 1.1rem; }
.gs-empresas-total dd { color: var(--g-acento); }
.gs-empresas-cuenta[hidden], .gs-empresas-fila[hidden] { display: none; }

/* «Nombre de tu negocio en letras» en el configurador (2026-10-21) */
.gc-nombre-caja { display: grid; gap: .5rem; }
.gc-nombre-caja[hidden] { display: none; }

/* «Pedir más con este diseño» (página del pedido y portal) y el código de la muestra */
.gs-repetir { margin-top: .4rem; }
.gs-repetir-lista { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .5rem; }
.gs-repetir-lista li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .5rem 0; border-bottom: 1px solid var(--g-borde); }
.gs-codigo-muestra { overflow-wrap: anywhere; }

/* /admin/metricas: el total arriba */
.gs-metricas-total td { border-bottom: 2px solid var(--g-borde); }

/* Tarjetas digitales sin llaveros (2026-10-26): comprarlas en /tarjetas y en Facturación, los pasos de la compra, el
   enlace propio de cada tarjeta con su QR y, a quien no tiene llaveros, la invitación a pedirlos */
.gs-compra-tarjetas { margin: 1.25rem 0 1.5rem; gap: .25rem; border-width: 2px; border-color: var(--g-texto); }
.gs-compra-tarjetas h2 { font-size: 1.25rem; margin: 0 0 .6rem; }
.gs-compra-incluye { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
.gs-compra-incluye li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .55rem; align-items: start; line-height: 1.45; }
.gs-compra-incluye li::before { content: "✓"; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--g-amarillo); color: var(--g-grafito); font-size: .75rem; font-weight: 700; }
.gs-plan-tarjetas { display: grid; gap: .9rem; margin-bottom: 1rem; }
.gs-plan-tarjetas .g-campo input[type=number] { max-width: 9rem; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.gs-plan-tarjetas .g-plan { align-items: flex-start; padding: .35rem 0; }
.gs-plan-tarjetas .g-plan input { margin-top: .15rem; flex: none; }
.gs-compra-tarjetas__boton { width: 100%; min-height: 52px; font-size: 1rem; margin-top: .25rem; }
.gs-compra-tarjetas > .g-ayuda { margin: .6rem 0 0; text-align: center; }
.gs-compra-tarjetas__otros { margin: .75rem 0 0; text-align: center; font-size: .92rem; }
.gs-compra-pasos { border: 1px solid var(--g-borde); background: var(--g-superficie-2); border-radius: 14px; padding: .75rem 1rem; margin: 0 0 1.25rem; }
.gs-compra-pasos p { margin: 0 0 .5rem; font-size: .92rem; }
.gs-compra-pasos ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.gs-compra-pasos li { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--g-texto-suave); min-width: 0; }
.gs-compra-pasos li span { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--g-borde); font-weight: 700; font-size: .78rem; }
.gs-compra-pasos li[aria-current="step"] { color: var(--g-texto); font-weight: 600; }
.gs-compra-pasos li[aria-current="step"] span { background: var(--g-amarillo); border-color: var(--g-amarillo); color: var(--g-grafito); }
.gs-compra-pasos .gs-compra-pasos--hecho span { background: var(--g-texto); border-color: var(--g-texto); color: var(--g-fondo); }
.gs-enlace { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 1rem 1.5rem; margin-bottom: 1rem; }
.gs-enlace__qr { width: 168px; height: 168px; border-radius: 10px; border: 1px solid var(--g-borde); background: #fff; flex: none; }
.gs-enlace__info { flex: 1 1 18rem; min-width: 0; }
.gs-enlace__info h2 { margin: 0 0 .35rem; }
.gs-enlace__info > .g-sub { margin: 0 0 .75rem; }
.gs-enlace__fila { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .6rem; }
.gs-enlace__url { display: inline-flex; align-items: center; min-height: var(--g-toque); padding: .4rem .8rem; border-radius: 10px; border: 1px solid var(--g-borde); background: var(--g-fondo); color: var(--g-texto); font-size: .95rem; text-decoration: none; max-width: 100%; }
.gs-enlace__url:hover { border-color: var(--g-texto); }
.gs-equipo-enlace { display: inline-flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; justify-content: flex-end; }
.gs-equipo-enlace a { font-size: .85rem; }
.gs-equipo-enlace .g-boton--chico { min-height: 36px; padding: .25rem .75rem; }
.gs-equipo-ayuda { margin: .75rem 0 0; }
.gs-llavero-url { display: block; font-size: .78rem; }
.gs-pide-llaveros { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin: 1.5rem 0 0; border-style: dashed; }
.gs-pide-llaveros h2 { margin: 0 0 .3rem; }
.gs-pide-llaveros p { margin: 0; max-width: 40rem; }
@media (max-width: 640px) {
  /* el rótulo de la celda no se encoge: con el enlace y su botón al lado, «Enlace» se partía en «Enlac / e» */
  .gs-equipo td::before { flex: none; }
  .gs-equipo-enlace { justify-content: flex-end; }
  .gs-compra-pasos li { flex-direction: column; text-align: center; gap: .2rem; }
}

/* El color de la base no se puede elegir para el logo NFC ni para el texto del reverso (2026-10-26): tachado */
.gc-muestra--base { position: relative; opacity: .45; cursor: not-allowed; }
.gc-muestra--base::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--g-error) calc(50% - 1.5px), var(--g-error) calc(50% + 1.5px), transparent calc(50% + 1.5px)); border-radius: inherit; pointer-events: none; }
.gc-rev-aviso { margin: .25rem 0 0; }

/* La nota y la imagen del cliente para su pedido (2026-10-26): en el carrito, plegada; en la página del pedido */
.gs-carrito-nota { margin: 0 0 1rem; border: 1px solid var(--g-borde); border-radius: 12px; padding: .25rem 1rem; background: var(--g-superficie); }
.gs-carrito-nota summary { min-height: var(--g-toque); display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.gs-carrito-nota[open] summary { margin-bottom: .5rem; }
.gs-carrito-nota .g-campo { margin-bottom: .9rem; }
.gs-carrito-nota textarea, .gs-nota-form textarea { width: 100%; min-height: 5.5rem; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--g-borde); background: var(--g-fondo); color: var(--g-texto); font: inherit; resize: vertical; }
.gs-carrito-nota__vista { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 1rem; }
.gs-carrito-nota__vista img, .gs-nota img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--g-borde); background: #fff; }
.gs-notas { margin: 2rem 0 1rem; }
.gs-notas__lista { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .75rem; }
.gs-nota { border: 1px solid var(--g-borde); border-radius: 12px; padding: .75rem 1rem; background: var(--g-superficie); }
.gs-nota p { margin: .25rem 0 .5rem; white-space: pre-line; }
.gs-nota img { width: 120px; height: 120px; }

/* «Prueba tu panel» en /tarjetas (2026-10-27): el panel de ejemplo a la izquierda y la tarjeta en un celular a la derecha
   (abajo en pantallas angostas). La tarjeta se dibuja a 375 px, como en un teléfono, y se ve al 80 %. */
.gd { scroll-margin-top: 80px; }
.gd-cabeza { max-width: 46rem; }
.gd-cabeza h2 { margin-top: 0; }
.gd-ejemplo { display: inline-block; margin: 0; padding: .25rem .8rem; border: 1px solid var(--g-borde); border-radius: 999px; color: var(--g-texto-suave); font-size: .85rem; }
.gd-marco { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: 1.5rem; }
@media (min-width: 1200px) { .gd-marco { grid-template-columns: minmax(0, 1fr) 320px; } .gd-vista { position: sticky; top: 88px; } }
.gd-panel { min-width: 0; }
.gd-panel .gs-submenu { margin-bottom: 1rem; }
.gd-encabezado { margin-top: 0; }
.gd-h { font-size: 1.15rem; margin: 0; }
.gd-separa { margin-top: 1.5rem; }
.gd-tabla { overflow-x: auto; }
.gd-tabla .g-tabla { min-width: 0; }
.gd-panel .gs-equipo-enlace a { white-space: nowrap; }
/* las palabras enteras en la tabla de la demo (el texto de la tienda parte donde sea: «NOMBR E», «Operacion es») */
.gd-panel .g-tabla th, .gd-panel .g-tabla td { overflow-wrap: normal; }
.gd-panel .gs-equipo-num { width: 5.5rem; }
.gd-nombre { background: none; border: 0; padding: 0; min-height: 2rem; font: inherit; font-weight: 600; color: var(--g-texto); text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gd-nombre.g-vacio { font-weight: 400; }
.gs-equipo tr.gd-sel > td { background: var(--g-superficie-2); }
.gd-pegar { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--g-borde); border-radius: 12px; background: var(--g-superficie-2); }
.gd-pegar textarea { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85rem; tab-size: 14; }
.gd-pegar .g-aviso ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.gd-editor { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--g-borde); scroll-margin-top: 80px; }
.gd-editor__cabeza { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin-bottom: .9rem; }
.gd-campos { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
/* cada campo arriba de su celda: con una ayuda larga al lado, la caja no baja ni se estira */
.gd-campos > .g-campo { align-content: start; }
.gd-editor .g-acciones { margin-top: 1rem; }
.gd-color { display: flex; gap: .75rem; align-items: center; }
.gd-color input[type="color"] { width: 4rem; height: 44px; padding: .15rem; border: 1px solid var(--g-borde); border-radius: 8px; background: var(--g-fondo); cursor: pointer; }
.gd-abre { min-height: 40px; max-width: 100%; border-radius: 8px; border: 1px solid var(--g-borde); background: var(--g-fondo); color: var(--g-texto); padding: 0 .5rem; font: inherit; }
.gd-lote { margin-top: 1rem; }
.gd-vista { display: grid; justify-items: center; gap: .6rem; }
.gd-vista__titulo { margin: 0; font-weight: 600; text-align: center; }
.gd-telefono { position: relative; width: 320px; height: 628px; flex: none; border: 10px solid #161616; border-radius: 42px; overflow: hidden; background: #ECEBE6; box-shadow: 0 18px 44px rgba(0, 0, 0, .18); }
.gd-telefono__marco { position: absolute; top: 0; left: 0; width: 375px; height: 760px; border: 0; transform: scale(.8); transform-origin: 0 0; pointer-events: none; visibility: hidden; }
.gd-telefono__marco.gd-listo { visibility: visible; }
.gd-telefono__aviso { display: none; position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; margin: 0; padding: .6rem .8rem; border-radius: 12px; background: #161616; color: #fff; font-size: .85rem; text-align: center; }
.gd-telefono.gd-de-baja .gd-telefono__aviso { display: block; }
.gd-telefono.gd-de-baja .gd-telefono__marco { opacity: .45; }
.gd-cta { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: center; margin-top: 2rem; text-align: center; }
.gd-cta p { margin: 0; font-weight: 600; }
.gd-probar { margin: -.25rem 0 1rem; }
.gd-probar a { font-weight: 600; }

/* Panel de tarjetas, versión 2 (2026-10-28): papelera, buscar, marcar varias, llaveros de repuesto y perdidos */
.g-visual-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g-campo--ancho { grid-column: 1 / -1; }
/* solo el de las notas internas (2026-10-28: suelto, alargaba el mensaje de la cotización y movía esa página 2 px) */
.g-campo--ancho textarea { min-height: 5.5rem; border-radius: 10px; border: 1px solid var(--g-borde); background: var(--g-fondo); color: var(--g-texto); padding: .6rem .75rem; font: inherit; resize: vertical; }
.g-etiqueta-estado--eliminada, .g-etiqueta-estado--perdido { border-color: var(--g-texto-suave); color: var(--g-texto-suave); border-style: dashed; }
.gs-equipo-sub { display: block; margin-top: .15rem; color: var(--g-texto-suave); font-size: .82rem; }
/* las columnas de la hoja de la empresa (2026-10-31): el número y el teléfono en una línea; las notas, angostas y suaves */
.gs-equipo-caja { overflow-x: auto; }
.gs-equipo-nowrap { white-space: nowrap; }
/* los botones de las tarjetas (2026-10-31): cómo se acomodan, y cada uno con «se ve» y sus flechas */
.gs-botones__disp { display: grid; gap: .4rem; }
.gs-botones__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.gs-botones__fila { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .15rem .25rem .15rem 0; border-bottom: 1px solid var(--g-borde); }
.gs-botones__fila .g-opcion { flex: 1 1 auto; min-width: 0; margin: 0; justify-content: flex-start; }
.gs-botones__fila .g-opcion span { overflow-wrap: normal; }
/* (la regla de los campos estira cada input al ancho entero: la casilla, a su tamaño) */
.gs-botones input[type="checkbox"] { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; flex: none; accent-color: var(--g-amarillo); }
.gs-botones__mover { display: inline-flex; gap: .3rem; flex: none; }
.gs-botones__flecha { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 1.05rem; }
.gs-botones__flecha:disabled { opacity: .35; }
.gs-equipo-pre { margin-right: .25rem; color: var(--g-texto-suave); font-variant-numeric: tabular-nums; }
/* sin partir palabras a la mitad (el body parte en cualquier parte: «Torr / es»): la tabla se desliza de lado si no cabe */
@media (min-width: 641px) {
  .gs-equipo-caja .g-tabla th, .gs-equipo-caja .g-tabla td, .gd-tabla .g-tabla th, .gd-tabla .g-tabla td { overflow-wrap: normal; word-break: normal; }
  .gs-equipo-caja .gs-equipo-num, .gd-tabla .gs-equipo-num { width: 4.75rem; }
  .gs-equipo-caja .gs-equipo-enlace a, .gd-tabla .gs-equipo-enlace a { white-space: nowrap; }
}
.gs-equipo-nota { min-width: 9rem; max-width: 16rem; color: var(--g-texto-suave); font-size: .88rem; }
@media (max-width: 640px) {
  .gs-equipo-caja { overflow: visible; }
  .gs-equipo-nota { min-width: 0; max-width: none; text-align: right; }
}
.gs-equipo-dato { display: inline-grid; justify-items: start; }
.gs-equipo-sel { width: 2.75rem; }
.gs-equipo-sel input, .gs-equipo-todas input { width: 22px; height: 22px; margin: 0; accent-color: var(--g-texto); }
.gs-equipo-vistas { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .75rem; }
/* en el panel son enlaces; en la demo de /tarjetas, botones (todo pasa en la página) */
.gs-equipo-vistas a, .gs-equipo-vistas button { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--g-toque); padding: .3rem .9rem; border: 1px solid var(--g-borde); border-radius: 999px; background: none; color: var(--g-texto); text-decoration: none; font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; }
.gs-equipo-vistas a[aria-current="page"], .gs-equipo-vistas button[aria-current="page"] { background: var(--g-texto); border-color: var(--g-texto); color: var(--g-fondo); }
.gs-equipo-n { font-variant-numeric: tabular-nums; opacity: .75; }
.gs-equipo-buscar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.gs-equipo-buscar input[type="search"] { flex: 1 1 18rem; min-width: 0; min-height: var(--g-toque); border-radius: 10px; border: 1px solid var(--g-borde); background: var(--g-fondo); color: var(--g-texto); padding: 0 .8rem; font: inherit; }
.gs-equipo-grupo { display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; margin: 0 0 .75rem; padding: .6rem .75rem; border: 1px solid var(--g-borde); border-radius: 12px; background: var(--g-superficie); }
.gs-equipo-grupo button[disabled] { opacity: .45; cursor: not-allowed; }
.gs-equipo-todas { display: inline-flex; align-items: center; gap: .45rem; min-height: var(--g-toque); font-weight: 600; font-size: .92rem; margin-right: .25rem; }
.gs-equipo-repuesto { margin: .25rem 0 0; }
.gs-llaveros-resumen { margin: .5rem 0 .25rem; font-weight: 600; }
.gs-llavero-accion form { margin: 0; }
.gs-gestion-t { margin: 0 0 .5rem; font-size: 1rem; }
.gs-llaveros-suyos { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.gs-llavero-suyo { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
.gs-llavero-suyo form { margin: 0; }
.gs-llavero-suyo > a { display: inline-flex; align-items: center; min-height: var(--g-toque); padding: 0 .75rem; border: 1px solid var(--g-borde); border-radius: 10px; font-weight: 700; text-decoration: none; color: var(--g-texto); }
.gs-pasar { margin: 0 0 1rem; padding: .9rem 1rem; border: 1px dashed var(--g-borde); border-radius: 12px; }
.gs-pasar select { max-width: 100%; }
@media (max-width: 640px) {
  .gs-equipo-sel { width: auto; }
  /* en el celular, el nombre con su ID y el cargo con su oficina, apilados a la derecha */
  .gs-equipo-dato { justify-items: end; text-align: right; }
}
/* Tu negocio → estilo de las tarjetas, con la vista previa al lado (2026-10-28) */
.gs-estilo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 2rem; align-items: start; margin-top: 1.5rem; }
.gs-estilo__elegir h2 { margin: 0 0 .3rem; }
/* el círculo a la altura del nombre del estilo, no de su descripción (fieldset.g-campo label centra) */
fieldset.g-campo label.gs-estilo__op { align-items: flex-start; padding: .35rem 0; }
fieldset.g-campo label.gs-estilo__op input { flex: none; margin: .15rem 0 0; }
.gs-estilo__op .g-ayuda { display: block; }
.gs-estilo__vista { margin: 0; }
.gs-estilo__vista iframe { display: block; width: 20rem; max-width: 100%; height: 36rem; border: 8px solid var(--g-texto); border-radius: 28px; background: #fff; }
@media (max-width: 760px) { .gs-estilo { grid-template-columns: 1fr; } .gs-estilo__vista iframe { margin: 0 auto; } }