/*
 * Tema Gozo: el aspecto de quierogozo.com para la instalación de Gozo (config 'tema' => 'gozo').
 * Va después de las hojas de cada pantalla (la carga vistas/parciales/tema-cabeza.php) y solo redefine tokens.
 * Valores de la web: resources/css/01-tokens.css. Sin recursos externos: las fuentes están en assets/fuentes/.
 * Los colores de estado (--peligro, --exito, --aviso y sus fondos) siguen siendo los de la app.
 * Las secciones de cada pantalla (público, mostrador, backoffice) se añaden debajo de los tokens.
 */

/* ------------------------------------------------------------------ Fuentes */

@font-face {
  font-family: Questrial;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fuentes/questrial-400.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fuentes/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fuentes/inter-600.woff2") format("woff2");
}

/* ------------------------------------------------------------------ Tokens */

:root {
  /* Color */
  --fondo: #f4ebdc;
  --superficie: #faf3ea;
  --texto: #5a3a24;
  --texto-suave: #6f5039;            /* 6,2:1 sobre el fondo */
  --borde: rgba(90, 58, 36, 0.15);
  --borde-control: #8a6a50;          /* 4,2:1 o más sobre fondo, superficie y campo (mínimo 3:1 en controles) */
  --acento: #5a3a24;                 /* chocolate: botones y énfasis */
  --sobre-acento: #faf3ea;           /* 9,2:1 sobre el chocolate */

  /* Tema (solo existen con él) */
  --acento-hover: #7e5133;
  --pie: #2e2e2c;
  --sobre-pie: #faf3ea;
  --campo: #ffffff;
  --espaciado-texto: 0.05em;
  --espaciado-mayusculas: 0.2em;     /* etiquetas y botones en mayúsculas */

  /* Tipografía: Inter para el cuerpo y Questrial (en mayúsculas) para los títulos. Detrás, la letra del sistema. */
  --fuente-sistema: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* la de app.css y publico.css */
  --fuente: Inter, var(--fuente-sistema);
  --fuente-titulos: Questrial, var(--fuente);

  /* Radios: rectos, como la web */
  --r-control: 3px;
  --r-panel: 3px;
}


/* ------------------------------------------------------------------ Público */
/*
 * Alta, recuperación y errores (vistas/publico/*, layout-publico.php). Maqueta aprobada: columna «Página de alta».
 * Cabecera fina con el logo centrado, fondo crema en toda la página (sin la «escena» del color del negocio), títulos en
 * Questrial en mayúsculas, campos blancos con la etiqueta encima y botones rectos de chocolate. Pie fino y oscuro.
 * Esta hoja la cargan también el backoffice y el mostrador: todo cuelga de .gz-publico, la clase que pone el layout
 * público en el body (solo con el tema), para que nada de aquí les llegue.
 * La tarjeta web (tarjeta-web.css) no se toca: solo se fija su anillo de foco, que la propia hoja deja a la página.
 * Los botones oficiales de Apple y Google (.pa-cartera-oficial) se quedan como los dibuja su marca.
 */

/* Las variables de publico.css, con la paleta del tema. */
.gz-publico {
  --papel: var(--fondo);
  --tinta: var(--texto);
  --tinta-suave: var(--texto-suave);
  --borde-campo: var(--borde-control);
  --marca: var(--texto);
  --sobre-marca: var(--sobre-acento);
  --escena: var(--fondo);

  background: var(--fondo);
  color: var(--texto);
  font: 400 14px/1.4 var(--fuente);
  letter-spacing: var(--espaciado-texto);
}

.gz-publico ::selection {
  background: var(--texto);
  color: var(--sobre-acento);
}

.gz-publico .pa-escena a:focus-visible,
.gz-publico .pa-escena button:focus-visible,
.gz-publico .pa-escena summary:focus-visible {
  outline-color: var(--texto);
}

/* Cabecera: solo el logo (o el nombre en Questrial), centrado, con una línea fina debajo. */
.gz-publico .gz-cabecera {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70px;
  padding: max(1rem, env(safe-area-inset-top, 0px)) var(--margen) 1rem;
  border-bottom: 1px solid var(--borde);
  text-align: center;
}

.gz-publico .gz-cabecera .marca-logo {
  display: block;
  width: auto;
  height: 48px; /* logo completo: el lema «the cheesecake brand» tiene que leerse */
  max-width: min(100%, 20rem);
  object-fit: contain;
}

@media (min-width: 769px) {
  .gz-publico .gz-cabecera .marca-logo {
    height: 56px;
  }
}

.gz-publico .gz-cabecera .marca-nombre {
  max-width: 100%;
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* El nombre o el logo ya van en la cabecera. */
.gz-publico .pa-negocio {
  display: none;
}

/* Condiciones de la promoción: el resumen como las etiquetas del formulario (12 px, mayúsculas espaciadas) y el texto como el resto de la página. */
.gz-publico .pa-condiciones summary {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
}

.gz-publico .pa-condiciones p {
  font-size: 14px;
}

/* Sin la escena de color: el titular y la tarjeta van sobre el crema, como el resto de la página. */
.gz-publico .pa-escena {
  padding-top: 1.75rem;
  padding-bottom: 0.5rem;
  background: none;
  color: var(--texto);
}

.gz-publico .pa-texto h1 {
  max-width: 22ch;
  font-family: var(--fuente-titulos);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--espaciado-texto);
  text-transform: uppercase;
}

.gz-publico .pa-entradilla {
  max-width: 36ch;
  margin-top: 0.625rem;
  font-size: 14px;
  line-height: 1.5;
}

/*
 * La tarjeta conserva la letra, el tamaño, el interlineado y el espaciado que hereda sin tema (los del body de
 * publico.css: 1rem/1.5 con la letra del sistema): no le llega nada del cuerpo del tema.
 */
.gz-publico .pa-tarjeta .tw {
  --tw-anillo: var(--texto);
  font: 400 1rem/1.5 var(--fuente-sistema);
  letter-spacing: normal;
}

/* Sin la banda de color, el cuerpo se alinea a la vista con el titular: misma columna, con el margen por fuera. */
.gz-publico .pa-cuerpo {
  gap: 2.5rem;
  max-width: calc(var(--columna) + 2 * var(--margen));
  padding-top: 1.75rem;
}

/* Campos: etiqueta encima en mayúsculas espaciadas, campo blanco con línea fina y recto, como la web. */
.gz-publico .pa-form {
  gap: 1.25rem;
}

.gz-publico .pa-etiqueta {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
}

/* Ayudas, nota y casilla un punto por encima de las etiquetas: son frases que hay que leer, no rótulos. */
.gz-publico .pa-ayuda {
  font-size: 13px;
  line-height: 1.45;
}

.gz-publico .pa-input {
  border-radius: 0;
  background: var(--campo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: max(16px, 1rem);
  letter-spacing: normal;
  caret-color: var(--texto);
}

/* El borde rojo del error (publico.css) manda sobre el del tema, también con el foco. */
.gz-publico .pa-input:not([aria-invalid="true"]) {
  border-color: var(--borde-control);
}

.gz-publico .pa-input:not([aria-invalid="true"]):focus-visible {
  border-color: var(--texto);
}

.gz-publico .pa-input:focus-visible {
  outline-width: 2px;
}

.gz-publico .pa-casilla label {
  font-size: 14px;
}

.gz-publico .pa-casilla input {
  accent-color: var(--texto);
}

.gz-publico .pa-error {
  font-size: 13px;
  font-weight: 600;
}

/*
 * Botones de recuperación y errores (los de cartera son el arte oficial y no se tocan): chocolate, recto, en mayúsculas
 * espaciadas y a todo el ancho en el móvil. Se hunden al apoyar el dedo; el cambio de color al pasar, solo con ratón.
 */
.gz-publico .pa-boton {
  justify-content: center;
  min-height: 48px;
  padding: 0.875rem 1.5rem;
  border-radius: var(--r-control);
  background: var(--acento);
  color: var(--sobre-acento);
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
  transition: transform 120ms var(--curva-salida), background-color 200ms ease, opacity 160ms ease;
}

.gz-publico .pa-boton:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .gz-publico .pa-boton:hover {
    background: var(--acento-hover);
  }
}

.gz-publico .pa-nota {
  font-size: 13px;
  line-height: 1.45;
}

/* El paso del código: el formulario y sus dos salidas, juntos (el cuerpo separa 2,5rem). */
.gz-publico .pa-verificar {
  gap: 1rem;
}

/* Enlaces de texto: subrayado fino y separado, como los de la web. */
.gz-publico .pa-enlace,
.gz-publico .pa-recuperar a,
.gz-publico .pa-casilla a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.gz-publico .pa-recuperar {
  font-size: 13px;
}

.gz-publico .pa-enlace,
.gz-publico .pa-recuperar a {
  font-weight: 400;
}

/* Aviso sin carteras: superficie clara con línea fina, recta, sin sombra. */
.gz-publico .pa-aviso {
  border: 1px solid var(--borde);
  border-radius: var(--r-panel);
  background: var(--superficie);
  box-shadow: none;
}

.gz-publico .pa-aviso .pa-aviso-titulo,
.gz-publico .pa-pasos h2 {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gz-publico .pa-aviso .pa-aviso-titulo {
  font-size: 15px;
}

.gz-publico .pa-pasos h2 {
  font-size: 20px;
}

.gz-publico .pa-paso-marca {
  font-family: var(--fuente-titulos);
  font-size: 15px;
  font-weight: 400;
}

.gz-publico .pa-aclaracion {
  font-size: 12px;
}

/*
 * Pie: fino y oscuro, centrado. Entre filas, al menos lo que el enlace crece hacia arriba (0,875rem): si el pie se parte
 * en dos líneas, la zona táctil del enlace no pisa la línea del ©.
 */
.gz-publico .gz-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem 1.5rem;
  padding: 1rem var(--margen) max(1rem, env(safe-area-inset-bottom, 0px));
  background: var(--pie);
  color: var(--sobre-pie);
  font-size: 12px;
  letter-spacing: var(--espaciado-texto);
  text-align: center;
}

.gz-publico .gz-pie p {
  margin: 0;
  overflow-wrap: anywhere;
}

/* El enlace crece hasta 44 px de alto sin engordar el pie. */
.gz-publico .gz-pie a {
  display: inline-block;
  padding-block: 0.875rem;
  margin-block: -0.875rem;
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.gz-publico .gz-pie a:focus-visible {
  outline: 2px solid var(--sobre-pie);
  outline-offset: 2px;
}

/* Móvil: titular centrado como en la maqueta; botones y enlaces centrados bajo el formulario. */
@media (max-width: 55.99rem) {
  .gz-publico .pa-texto {
    text-align: center;
  }

  .gz-publico .pa-texto h1,
  .gz-publico .pa-entradilla {
    margin-inline: auto;
  }

  .gz-publico .pa-recuperar {
    text-align: center;
  }

  /* «Reenviar código» y «Corregir el correo», centrados bajo el botón como «¿Ya tenías tarjeta?» en el paso 1. */
  .gz-publico .pa-ayudas {
    justify-items: center;
    text-align: center;
  }

  .gz-publico .pa-ayudas p {
    justify-content: center;
  }

  .gz-publico .pa-acciones,
  .gz-publico .pa-accion-error {
    justify-content: center;
  }

  .gz-publico .pa-boton,
  .gz-publico .pa-accion-error form {
    flex: 1 1 100%;
  }

  .gz-publico .pa-boton {
    width: 100%;
  }
}

@media (min-width: 769px) {
  .gz-publico .pa-texto h1 {
    max-width: 26ch;
    font-size: 32px;
  }

  .gz-publico .pa-entradilla {
    max-width: 44ch;
  }

  .gz-publico .pa-pasos h2 {
    font-size: 21px;
  }
}

/* Pantalla ancha: texto a la izquierda y tarjeta a la derecha (como sin tema); los botones, a su ancho. */
@media (min-width: 56rem) {
  .gz-publico .pa-escena {
    padding-top: 3rem;
    padding-bottom: 1rem;
  }

  .gz-publico .pa-cuerpo {
    max-width: calc(var(--columna-ancha) + 2 * var(--margen));
  }
}


/* ------------------------------------------------------------------ Mostrador */
/*
 * Panel de las dependientas (vistas/mostrador/panel.php, layout-mostrador.php). Maqueta aprobada: «2 · Mostrador».
 * Cabecera crema con línea fina, el código en Questrial grande y espaciado, la ficha en superficie clara con «n de N»
 * en Questrial y los círculos en chocolate, botones rectos en mayúsculas y el teclado del PIN en teclas claras con
 * línea fina sobre el crema.
 * Lo que no cambia: las zonas, los tamaños de toque (botones de 4rem, teclas de 3,5rem o más), los atajos, los textos,
 * los colores de estado (éxito, error, aviso) y el poco movimiento que ya había. El marcado y mostrador.js son los de
 * siempre: aquí solo hay estilo.
 * Todo cuelga de .gz-mostrador, la clase que pone el layout del mostrador en el body (solo con el tema), para que nada
 * de aquí llegue al backoffice ni a las páginas públicas.
 */

/* Tokens de app.css que el tema no redefine en :root y aquí se calientan para no mezclar grises fríos con el crema. */
.gz-mostrador {
  --superficie-hundida: #e8d6bb;     /* tecla pulsada, hover de las teclas y de los botones con borde, campo desactivado */
  --foco: var(--texto);

  font-family: var(--fuente);
  letter-spacing: var(--espaciado-texto);
}

.gz-mostrador ::selection {
  background: var(--texto);
  color: var(--sobre-acento);
}

/* --- Cabecera: crema, con línea fina; el logo (o el nombre en Questrial) y el dispositivo en mayúsculas espaciadas --- */

.gz-mostrador .mostrador-cabecera {
  min-height: 3.75rem;
  background: var(--fondo);
}

.gz-mostrador .mostrador-cabecera .marca-logo {
  display: block;
  width: auto;
  height: 36px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/*
 * Un nombre largo pasa a dos líneas y, si aún no cabe, se corta con puntos suspensivos: nunca desborda la cabecera.
 * Lleva .marca para ganar a «.mostrador-cabecera .marca span:last-child» de app.css (una línea con puntos suspensivos).
 */
.gz-mostrador .mostrador-cabecera .marca .marca-nombre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

.gz-mostrador .mostrador-aparato {
  font-size: 0.75rem;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
}

/* --- Campo del código: blanco, con línea fina, recto; el número en Questrial, grande y espaciado --- */

.gz-mostrador .buscador-etiqueta {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
}

/*
 * Centrado como en la maqueta. El espaciado deja un hueco detrás de la última cifra: la sangría de la misma medida
 * lo compensa y el número queda centrado de verdad.
 */
.gz-mostrador .buscador-campo {
  border-width: 1px;
  border-radius: 0;
  background: var(--campo);
  font-family: var(--fuente-titulos);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-align: center;
  text-indent: 0.3em;
}

/* El rojo del error manda sobre el chocolate del foco (el campo casi siempre tiene el foco). */
.gz-mostrador .buscador-campo:not([aria-invalid="true"]):focus-visible {
  border-color: var(--texto);
}

/*
 * El rojo del error se lee igual de fuerte que con el borde de 2 px de siempre. Con el foco puesto, el anillo también
 * pasa a rojo: junto al chocolate, un borde rojo fino se confundía con él.
 */
.gz-mostrador .buscador-campo[aria-invalid="true"] {
  border-color: var(--peligro);
  box-shadow: inset 0 0 0 1px var(--peligro);
}

.gz-mostrador .buscador-campo[aria-invalid="true"]:focus-visible {
  outline-color: var(--peligro);
}

.gz-mostrador .buscador-campo:disabled {
  background: var(--superficie-hundida);
}

.gz-mostrador .buscador-ayuda {
  font-size: 0.8125rem;
}

/* --- Ficha de la tarjeta: superficie clara con línea fina; «n de N» en Questrial grande y los círculos en chocolate --- */

.gz-mostrador .ficha-cabecera h2 {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
}

/* El nombre de la persona, en Questrial como la cuenta pero mucho más pequeño: se lee primero, y sin competir con ella */
.gz-mostrador .ficha-nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: var(--espaciado-texto);
}

.gz-mostrador .ficha-nombre[data-vacio] {
  font-family: var(--fuente);
  font-size: 1rem;
}

/*
 * Como en la maqueta, la cuenta va encima de los círculos. Solo cambia el orden a la vista: los círculos son
 * aria-hidden y ninguno de los dos tiene nada enfocable, así que el lector y el tabulador siguen igual.
 */
.gz-mostrador .ficha-resumen {
  order: 1;
}

.gz-mostrador .sellos {
  order: 2;
}

.gz-mostrador .ficha-accion {
  order: 3;
}

.gz-mostrador .ficha-resumen strong {
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--fuente-titulos);
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--espaciado-texto);
  text-transform: uppercase;
}

/* Vacío: anillo chocolate fino; lleno: chocolate entero (el --acento del tema). */
.gz-mostrador .sello {
  box-shadow: inset 0 0 0 1.5px var(--texto);
}

/* El lleno pierde el anillo: si no, asomaría alrededor del círculo mientras el sello nuevo entra escalando. */
.gz-mostrador .sello.lleno {
  box-shadow: none;
}

.gz-mostrador .sello.lleno::after {
  box-shadow: none;
}

.gz-mostrador .cantidad-etiqueta {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
}

.gz-mostrador .cantidad-valor {
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
}

.gz-mostrador .premio {
  border: 1px solid var(--borde);
  background: var(--fondo);
}

.gz-mostrador .premio strong {
  font-weight: 600;
}

/* --- Botones: rectos, Inter 600 en mayúsculas espaciadas; el principal en chocolate y el secundario con borde --- */

.gz-mostrador .boton {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
}

.gz-mostrador .boton-grande {
  font-size: 1rem;
  letter-spacing: var(--espaciado-mayusculas);
}

.gz-mostrador .boton-principal {
  box-shadow: none;
}

.gz-mostrador .boton-secundario {
  border-color: var(--texto);
  background: transparent;
}

.gz-mostrador .boton-discreto {
  color: var(--texto);
}

/* --- Diálogo del PIN: crema, recto, con las teclas claras de línea fina como en la maqueta --- */

.gz-mostrador .pin {
  background: var(--fondo);
  box-shadow: 0 1px 2px rgb(90 58 36 / 0.08), 0 24px 48px -24px rgb(46 46 44 / 0.5);
}

/* El velo, del gris del pie de la web en vez del negro azulado de la app. */
.gz-mostrador .pin::backdrop {
  background: rgb(46 46 44 / 0.5);
}

.gz-mostrador .pin-velo {
  background: rgb(46 46 44 / 0.5);
}

.gz-mostrador .pin-titulo {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gz-mostrador .pin-casillas span {
  background: var(--campo);
  box-shadow: inset 0 0 0 1px var(--borde-control);
}

.gz-mostrador .pin-casillas span[data-actual] {
  box-shadow: inset 0 0 0 2px var(--texto);
}

.gz-mostrador .tecla {
  background: var(--superficie);
  font-family: var(--fuente-titulos);
  font-weight: 400;
  letter-spacing: 0;
}

/* «Cancelar» y «Borrar» se quedan en minúsculas y sin espaciar: en mayúsculas no caben en las teclas a 320 px. */
.gz-mostrador .tecla-texto {
  font-family: var(--fuente);
  font-weight: 600;
}

.gz-mostrador .pin-pregunta-texto {
  font-weight: 600;
  letter-spacing: 0;
}

/*
 * Estados de pulsación. Las reglas del tema de arriba ganan a los de app.css (.tecla:active, .tecla[data-pulsada],
 * los hover), así que se declaran otra vez aquí: la tecla se hunde al tocarla y destella cuando se teclea la cifra
 * (data-pulsada, que pone mostrador.js), también con el movimiento reducido.
 */
.gz-mostrador .tecla:active,
.gz-mostrador .tecla[data-pulsada] {
  background: var(--superficie-hundida);
}

@media (hover: hover) and (pointer: fine) {
  .gz-mostrador .boton-principal:hover {
    background: var(--acento-hover);
    box-shadow: none;
  }

  .gz-mostrador .boton-secundario:hover {
    background: var(--superficie-hundida);
  }

  .gz-mostrador .tecla:hover:not(:disabled) {
    background: var(--superficie-hundida);
  }
}

/* Pantallas bajas o estrechas: lo mismo que el modo compacto de app.css, sin bajar las teclas de 56 px. */
@media (max-height: 40rem), (max-width: 30rem) {
  .gz-mostrador .buscador-campo {
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }

  .gz-mostrador .ficha-resumen strong {
    font-size: 2.25rem;
  }

  .gz-mostrador .ficha-nombre {
    font-size: 1.25rem;
  }

  .gz-mostrador .ficha-nombre[data-vacio] {
    font-size: 0.9375rem;
  }

  .gz-mostrador .tecla {
    min-height: 3.5rem;
  }
}

/*
 * Cabecera estrecha (móvil): el nombre del dispositivo no puede quedarse en «P…». El negocio cede algo de ancho
 * (45 % en vez de 60 %) y el espaciado de las letras se aprieta.
 */
@media (max-width: 30rem) {
  .gz-mostrador .mostrador-cabecera {
    gap: var(--e-3);
  }

  .gz-mostrador .mostrador-cabecera .marca {
    max-width: 45%;
  }

  .gz-mostrador .mostrador-aparato {
    letter-spacing: 0.1em;
  }
}


/* ------------------------------------------------------------------ Backoffice */
/*
 * Gestión del negocio (vistas/admin/*, layout-admin.php). Maqueta aprobada: «3 · Backoffice», y el panel de
 * administración de quierogozo.com (public_html/assets/panel.css de la web).
 * Desde 1024 px, el menú pasa a una columna fija a la izquierda de unos 210 px, en la superficie clara con una línea a
 * la derecha: el logo (o el nombre en Questrial), las secciones en mayúsculas espaciadas con la actual marcada por una
 * raya de 2 px, y la sesión abajo. Por debajo, la barra de arriba de siempre con el estilo del tema (la actual,
 * subrayada con la misma raya). Títulos en Questrial en mayúsculas; bloques y listas blancos con línea fina y sin
 * sombra; etiquetas de estado rectas en mayúsculas; campos blancos, rectos, con la etiqueta encima en mayúsculas
 * espaciadas, como los de la web.
 * Lo que no cambia: el marcado (solo la clase gz-admin del body), los enlaces del menú y su orden, los textos, los
 * colores de estado (éxito, error, aviso), los tamaños de toque y los campos a 16 px o más.
 * Las vistas previas de la configuración (iPhone, Android y la tarjeta web) siguen con los colores, radios y letra del
 * negocio: no se les aplica nada del tema y, donde un token del tema les llegaría por herencia (la letra y el
 * espaciado del cuerpo), se aíslan con sus propias variables.
 * Todo cuelga de .gz-admin, la clase que pone el layout del backoffice en el body (solo con el tema), para que nada de
 * aquí llegue al mostrador ni a las páginas públicas.
 */

/*
 * Tokens de app.css que el tema no redefine en :root y aquí se calientan para no mezclar grises fríos con el crema:
 * pestañas, hover de los botones con borde, etiqueta «No configurado», aviso de la vista previa y casillas vacías.
 * Ninguno lo usan las vistas previas de la tarjeta.
 */
.gz-admin {
  --superficie-hundida: #efe6d8;     /* el texto suave sobre él: 5,9:1; el texto: 8,2:1 */
  --foco: var(--texto);
  --tinte-hover: rgb(90 58 36 / 0.06); /* fila o enlace bajo el ratón, como el de la web */
  --ancho-menu: 13.125rem;           /* 210 px */
  --hueco-menu: 1.25rem;             /* sangría de los enlaces del menú lateral */

  font-family: var(--fuente);
  font-size: 0.9375rem;
  letter-spacing: var(--espaciado-texto);
}

.gz-admin ::selection {
  background: var(--texto);
  color: var(--sobre-acento);
}

/* --- Títulos: Questrial en mayúsculas. Los nombres de las listas (personas, tiendas, dispositivos) son datos: Inter --- */

.gz-admin h1 {
  font-family: var(--fuente-titulos);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--espaciado-texto);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.gz-admin h2,
.gz-admin .grupo legend {
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gz-admin h3 {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.gz-admin .entradilla {
  font-size: 1rem;
}

.gz-admin .ayuda {
  font-size: 0.8125rem;
}

/* --- Cabecera y menú: comunes a la barra de arriba y a la columna --- */

.gz-admin .cabecera .marca {
  min-width: 0;
  max-width: 14rem;
}

.gz-admin .cabecera .marca-logo {
  display: block;
  width: auto;
  height: 2.75rem;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Un nombre largo pasa a dos líneas y, si aún no cabe, se corta con puntos suspensivos: nunca desborda. */
.gz-admin .marca-nombre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.gz-admin .menu a {
  border-radius: 0;
  color: var(--texto);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
  transition: background-color var(--dur-corta) ease, box-shadow var(--dur-corta) ease;
}

.gz-admin .sesion-nombre {
  font-size: 0.8125rem;
}

/* --- Bloques y listas: blancos, con línea fina y sin sombra --- */

.gz-admin .panel,
.gz-admin .lista-dispositivos,
.gz-admin .lista-personas,
.gz-admin .lista-tiendas,
.gz-admin .lista-clientes,
.gz-admin .movimientos {
  background: var(--campo);
}

.gz-admin .login .panel,
.gz-admin .miniatura {
  box-shadow: none;
}

/* Estado de Google Wallet y de Apple Wallet: un bloque blanco como el del panel de la web. */
.gz-admin .enlace-alta,
.gz-admin .estado-google,
.gz-admin .estado-apple {
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--r-panel);
  background: var(--campo);
}

@media (min-width: 48rem) {
  .gz-admin .enlace-alta,
  .gz-admin .estado-google,
  .gz-admin .estado-apple {
    padding: var(--e-6);
  }
}

/* El mostrador, el enlace de alta y las dos carteras se leen como un grupo: más juntos que las demás secciones. */
.gz-admin .mostrador-acceso + .enlace-alta,
.gz-admin .enlace-alta + .estado-google,
.gz-admin .estado-google + .estado-apple {
  margin-top: var(--e-4);
}

/* Los rótulos de los datos, como los de las cifras de la maqueta: pequeños, en mayúsculas espaciadas. */
.gz-admin .estado-datos dt {
  font-size: 0.75rem;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
}

.gz-admin .estado-datos dd {
  font-weight: 600;
}

/* Los textos en `code` (rutas, identificadores) no heredan el espaciado de las mayúsculas del rótulo. */
.gz-admin code {
  letter-spacing: normal;
}

.gz-admin .indice-titulo {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.gz-admin .indice a {
  border-radius: 0;
}

/* --- Etiquetas de estado: rectas, en mayúsculas espaciadas; los colores de estado son los de la app --- */

.gz-admin .etiqueta {
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-control);
  font-family: var(--fuente);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.gz-admin .etiqueta-apagada {
  color: var(--texto);
}

/* --- Botones: rectos, Inter 600 en mayúsculas espaciadas; el principal en chocolate y el secundario con borde --- */

.gz-admin .boton {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
}

.gz-admin .boton-principal {
  box-shadow: none;
}

.gz-admin .boton-secundario {
  border-color: var(--texto);
  background: transparent;
}

.gz-admin .boton-peligro {
  background: transparent;
}

.gz-admin .entrada-archivo::file-selector-button {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
}

/* --- Formularios: la etiqueta encima en mayúsculas espaciadas y el campo blanco, recto, con línea fina --- */

.gz-admin .campo > label {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
}

.gz-admin .entrada {
  border-radius: 0;
  background: var(--campo);
}

.gz-admin .error-campo {
  font-size: 0.8125rem;
  font-weight: 600;
}

/* --- Vista previa de la configuración: el título y las pestañas con el tema; las tarjetas, no --- */

.gz-admin .vista-previa-titulo {
  font-family: var(--fuente);
  font-size: 0.75rem;
  letter-spacing: var(--espaciado-mayusculas);
}

/* «En la web» cabe en una línea en los 300 px de la vista previa: menos espaciado y relleno que el resto de mayúsculas. */
.gz-admin .pestana {
  padding-inline: var(--e-1);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/*
 * Las tres tarjetas se pintan con la letra del sistema, a 16 px y sin espaciado, como sin el tema: la del iPhone ya
 * pide la de Apple y cae en --fuente; la de Android y la web la heredan del body. Sus colores y radios son los de sus
 * variables CSS (las fija el <style nonce> de la página) y los de app.css y tarjeta-web.css, que el tema no toca.
 */
.gz-admin .vista-previa .iphone,
.gz-admin .vista-previa .movil,
.gz-admin .vista-previa .tw {
  --fuente: var(--fuente-sistema);

  font-size: 1rem;
  letter-spacing: normal;
}

.gz-admin .vista-previa .movil,
.gz-admin .vista-previa .tw {
  font-family: var(--fuente);
}

/* --- Entrada (login): el logo completo o, si no hay, el nombre del negocio en Questrial --- */

.gz-admin .login-logo {
  display: block;
  width: auto;
  height: 56px; /* como la cabecera pública en escritorio: el lema tiene que leerse */
  max-width: 100%;
}

.gz-admin .login-marca {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.gz-admin .login-marca .muestra {
  display: none;
}

/*
 * Estados. Las reglas del tema de arriba ganan a las de app.css para la sección actual, los botones, los campos y las
 * pestañas (misma especificidad o más, y van después), así que se declaran otra vez aquí.
 */
@media (hover: hover) and (pointer: fine) {
  .gz-admin .menu a:hover {
    background: var(--tinte-hover);
    color: var(--texto);
  }

  .gz-admin .boton-principal:hover {
    background: var(--acento-hover);
    box-shadow: none;
  }

  .gz-admin .boton-secundario:hover {
    background: var(--superficie-hundida);
  }

  .gz-admin .boton-peligro:hover {
    background: var(--peligro-fondo);
  }

  .gz-admin .indice a:hover {
    background: var(--tinte-hover);
  }
}

/* Sección actual en la barra de arriba: subrayada con una raya de 2 px. */
.gz-admin .menu a[aria-current="page"] {
  background: transparent;
  color: var(--texto);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--texto);
}

/* Campos: la línea pasa a chocolate con el foco; con error, roja y del doble de gruesa, también con el foco. */
.gz-admin .entrada:focus-visible {
  border-color: var(--texto);
}

.gz-admin .entrada[aria-invalid="true"] {
  border-color: var(--peligro);
  box-shadow: inset 0 0 0 1px var(--peligro);
}

.gz-admin .entrada[aria-invalid="true"]:focus-visible {
  outline-color: var(--peligro);
}

.gz-admin .pestana[aria-selected="true"] {
  background: var(--campo);
  color: var(--texto);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--borde);
}

@media (max-width: 47.99rem) {
  .gz-admin h1 {
    font-size: 1.375rem;
  }
}

/* Menú en horizontal (hasta 1024 px): con las mayúsculas espaciadas, los 24 px de difuminado de app.css casi no se
   ven y la sección cortada parecía un fallo. El doble se lee como «hay más»; el hueco tras el último enlace crece
   igual, para que al final del desplazamiento «Historial» no quede difuminado. */
.gz-admin .menu {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}

.gz-admin .menu li:last-child {
  padding-inline-end: 3rem;
}

/* --- Desde 1024 px: el menú en una columna fija a la izquierda --- */

@media (min-width: 64rem) {
  .gz-admin.pagina-admin {
    display: grid;
    grid-template-columns: var(--ancho-menu) minmax(0, 1fr);
    align-items: start;
  }

  /* En la rejilla, los márgenes automáticos encogerían el contenido a lo que ocupa: todas las pantallas, igual de anchas. */
  .gz-admin .contenido {
    width: 100%;
  }

  .gz-admin .cabecera {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--borde);
    border-bottom: 0;
    background: var(--superficie);
  }

  .gz-admin .cabecera-interior {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100%;
    max-width: none;
    margin: 0;
    padding: var(--e-5) 0 calc(var(--e-4) + env(safe-area-inset-bottom, 0px));
  }

  .gz-admin .cabecera .marca {
    max-width: none;
    margin: 0 var(--hueco-menu) var(--e-5);
  }

  /* En los 170 px de la columna, un nombre largo cabe mejor algo más pequeño y en hasta tres líneas. */
  .gz-admin .marca-nombre {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: 1rem;
  }

  .gz-admin .menu {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .gz-admin .menu ul {
    flex-direction: column;
    gap: 0;
  }

  .gz-admin .menu li:last-child {
    padding-inline-end: 0;
  }

  .gz-admin .menu a {
    display: flex;
    padding: 0 var(--hueco-menu);
  }

  /* La actual: el crema del fondo y una raya de 2 px a la izquierda, como en la maqueta. */
  .gz-admin .menu a[aria-current="page"] {
    background: var(--fondo);
    box-shadow: inset 2px 0 0 var(--texto);
  }

  /* «Volver al panel de la web» no cabe en una línea de los 210 px: se parte en dos (con aire arriba y abajo) en vez
     de salirse de la columna. Una línea fina lo separa de las secciones: lleva fuera del backoffice. */
  .gz-admin .menu .menu-volver {
    margin-top: var(--e-3);
    padding-block: var(--e-2);
    border-top: 1px solid var(--borde);
    line-height: 1.5;
    white-space: normal;
  }

  /* La sesión, al pie de la columna. */
  .gz-admin .sesion {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: auto;
    padding: var(--e-4) var(--hueco-menu) 0;
  }

  .gz-admin .sesion-nombre {
    display: block;
    max-width: 100%;
  }

  .gz-admin .sesion .boton-discreto {
    margin-left: calc(var(--e-3) * -1);
  }
}