/* Layout de la aplicación: lo que el paquete de diseño no trae como CSS porque sus prototipos lo dibujan
   con React (página, shell responsive, <dialog>, región de toasts, tooltips). Sólo tokens. */
/* El body es una columna que llena la ventana: el shell crece hasta el pie (sidebar navy completo) y
   la barra superior móvil sigue sticky en páginas largas (su bloque contenedor es el body). */
html {
  scroll-padding-top: var(--shell-top-h);
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-page);
  color: var(--ink);
  font: 400 14px/20px var(--font-ui);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.hg-shell,
.hg-auth {
  flex: 1 0 auto;
}
/* Los tooltips y las burbujas de error de la página no pasan por encima del header (TRV-16). */
.hg-shell__content {
  isolation: isolate;
}
/* El sidebar sticky forma su propia capa: su menú del selector (más ancho que el sidebar) queda por
   encima del contenido, que también es una capa aislada. */
.hg-shell__nav {
  z-index: 1;
}
[hidden] {
  display: none !important;
}

/* «Saltar al contenido»: visible sólo con foco. */
.hg-skip {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--cta);
  color: var(--cta-ink);
}
.hg-skip:focus {
  top: var(--space-2);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Selector de tienda: etiqueta y nombre en líneas separadas (el bundle lo hacía con estilo en línea). */
.hg-switcher__k,
.hg-switcher__v {
  display: block;
}
/* Con un solo contexto el selector es una etiqueta, no un control. */
div.hg-switcher {
  cursor: default;
}

/* Control segmentado como enlaces (filtros server-rendered): mismo aspecto que la opción activa. */
.hg-tab[aria-current='page'] {
  background: var(--bg-panel);
  color: var(--accent-text);
  box-shadow:
    inset 0 -2px 0 var(--accent-text),
    0 0 0 1px var(--line-strong);
}

.hg-ph__badge {
  margin-left: var(--space-2);
  vertical-align: 4px;
}
.hg-flip {
  transform: rotate(180deg);
}

/* Shell de la tienda: escritorio desde 1024 px; debajo, barra superior y pestañas (04-shell/movil.md). */
.hg-mshell__top,
.hg-mshell__tabs {
  display: none;
}
@media (max-width: 1023.98px) {
  html {
    scroll-padding-top: var(--mshell-top-h);
    scroll-padding-bottom: var(--mshell-tabs-h);
  }
  body {
    font-size: 14px;
    line-height: 20px;
  }
  .hg-shell:not(.hg-shell--staff) {
    grid-template-columns: minmax(0, 1fr);
  }
  .hg-shell:not(.hg-shell--staff) .hg-shell__nav {
    display: none;
  }
  .hg-shell:not(.hg-shell--staff) .hg-shell__top {
    display: none;
  }
  .hg-shell:not(.hg-shell--staff) .hg-shell__banner {
    padding: var(--space-3) var(--space-4) 0;
  }
  .hg-shell:not(.hg-shell--staff) .hg-shell__content {
    padding: var(--space-4);
  }
  .hg-shell:not(.hg-shell--staff) .hg-form2 {
    grid-template-columns: minmax(0, 1fr);
  }
  /* El chevron del select sigue centrado aunque el select mida 44 px. */
  .hg-shell:not(.hg-shell--staff) .hg-select .hg-i {
    top: 50%;
    transform: translateY(-50%);
  }
  .hg-mshell__top {
    display: flex;
  }
  /* El logo de la barra superior es un enlace: 44 px de alto y de ancho, con el isotipo centrado. */
  .hg-mshell__top .hg-shell__home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  .hg-mshell__tabs {
    display: grid;
  }
}

/* AuthLayout bajo 768 px: sólo el formulario, con la marca arriba (05-tienda/alta-y-acceso.md). */
.hg-auth__mlogo {
  display: none;
}
@media (max-width: 767.98px) {
  .hg-auth {
    grid-template-columns: minmax(0, 1fr);
  }
  .hg-auth__brand {
    display: none;
  }
  .hg-auth__main {
    align-items: stretch;
    padding: var(--space-5) var(--space-4);
  }
  .hg-auth__slot {
    align-items: flex-start;
  }
  .hg-auth__mlogo {
    display: block;
  }
}

/* Modal y drawer sobre <dialog> nativo: foco atrapado, Esc y capa superior los da el navegador. */
dialog.hg-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
}
dialog.hg-dialog::backdrop {
  background: var(--overlay-scrim);
}
dialog.hg-dialog--modal {
  width: min(480px, calc(100% - 48px));
  margin: auto;
}
dialog.hg-dialog--drawer {
  height: 100%;
  margin: 0 0 0 auto;
}
dialog.hg-dialog--drawer .hg-drawer {
  height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  dialog.hg-dialog[open] {
    animation: hg-fade-in var(--duration-slow) var(--ease-standard);
  }
}
@keyframes hg-fade-in {
  from {
    opacity: 0;
  }
}

/* Región de toasts. */
.hg-toasts {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
@media (max-width: 1023.98px) {
  .hg-toasts {
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(var(--mshell-tabs-h) + var(--space-4));
  }
  .hg-toasts .hg-toast {
    min-width: 0;
  }
}
/* El toast entra con duration-base (03-components/toast.md). */
@media (prefers-reduced-motion: no-preference) {
  .hg-toast {
    animation: hg-toast-in var(--duration-base) var(--ease-standard);
  }
}
@keyframes hg-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Tooltip: visible con hover o foco; Esc lo oculta (hg.js agrega is-dismissed). */
.hg-tip__b {
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.hg-tip:hover .hg-tip__b,
.hg-tip:focus-within .hg-tip__b {
  visibility: visible;
  opacity: 1;
}
.hg-tip.is-dismissed .hg-tip__b {
  visibility: hidden;
  opacity: 0;
}
/* En la cabecera de una página las acciones están al borde derecho: el tooltip se ancla a la derecha
   para no salirse de la ventana (aunque esté oculto, ocupa lugar y daba scroll horizontal). */
.hg-ph .hg-tip__b {
  left: auto;
  right: 0;
  transform: none;
}
/* Lo mismo en la última columna de una tabla (acciones al borde derecho de su tarjeta). */
.hg-table td:last-child .hg-tip__b {
  left: auto;
  right: 0;
  transform: none;
}
/* Y en la barra inferior del editor: «Enviar a revisión» va al borde derecho de la ventana. */
.hg-bb--cta .hg-tip__b {
  left: auto;
  right: 0;
  transform: none;
}

/* Móvil: los ítems de navegación del drawer y de /menu/ miden al menos 44 px (objetivo táctil);
   components.css fija .hg-nav en 40 px para el escritorio. */
@media (max-width: 1023.98px) {
  #hg-mobile-nav .hg-nav,
  .hg-shell__content > .hg-shell__groups .hg-nav,
  .hg-shell__content > .hg-nav {
    height: auto;
    min-height: 44px;
  }
  /* También el botón de cerrar del drawer (28 px en components.css) y, en /cuenta/ y /cambiar-tienda/
     (el respaldo móvil de los menús), las opciones del control segmentado, los botones y «Volver». */
  .hg-drawer > .hg-modal__h > .hg-icon-btn {
    width: 44px;
    height: 44px;
  }
  .hg-acard .hg-tab {
    height: 44px;
    min-width: 44px;
    justify-content: center;
  }
  .hg-acard .hg-btn,
  .hg-acard__back {
    height: auto;
    min-height: 44px;
  }
  /* Objetivos de 44 px en el contenido de la tienda, el acceso, los toasts y el banner (CLAUDE.md, UI).
     Los enlaces dentro de una frase quedan como están (excepción de WCAG 2.5.8). */
  .hg-shell:not(.hg-shell--staff) :is(.hg-btn, .hg-tab, .hg-input, .hg-chip, .hg-search),
  .hg-acard :is(.hg-btn, .hg-input) {
    min-height: 44px;
  }
  .hg-shell:not(.hg-shell--staff) .hg-icon-btn,
  .hg-acard .hg-icon-btn,
  .hg-toasts .hg-icon-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* Una pestaña de una sola talla («L») también mide 44 px de ancho. */
  .hg-shell:not(.hg-shell--staff) .hg-tab {
    min-width: 44px;
    justify-content: center;
  }
  /* El buscador dibuja el borde en su envoltorio (36 px fijos en components.css): crece con el
     input de adentro, que también mide 44 px. */
  .hg-shell:not(.hg-shell--staff) .hg-search {
    height: auto;
  }
  .hg-shell:not(.hg-shell--staff) .hg-search input {
    min-height: 44px;
  }
  /* Enlaces sueltos (no dentro de una frase): miguitas, «Ver prueba» de las tarjetas de revisión y los
     botones con aspecto de enlace («Abrir en el editor»). */
  .hg-shell:not(.hg-shell--staff) :is(.hg-crumbs a, .hg-revcard a.hg-link, button.hg-link) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hg-shell__banner a,
  .hg-acard .hg-row > .hg-link,
  .hg-shell:not(.hg-shell--staff) .hg-toolbar .hg-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* «Volver» de /cuenta/ y /cambiar-tienda/: del ancho de su texto, no de la tarjeta. */
.hg-acard__back {
  align-self: flex-start;
}

/* /cambiar-tienda/: filas alineadas a la izquierda y la actual marcada, como el menú del selector. */
.hg-acard .hg-btn--block > .hg-grow {
  text-align: left;
}
.hg-acard .hg-btn--block[aria-current='true'] {
  border-color: var(--accent-text);
  background: var(--accent-soft);
}

/* Un enlace dentro de una frase se distingue también sin color (WCAG 1.4.1). */
.hg-acard__f .hg-link,
.hg-acard__s .hg-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* El chevron final del botón de usuario gira cuando el menú está abierto. */
.hg-shell__ubtn > svg:last-child {
  transition: transform var(--duration-fast) var(--ease-standard);
}
.hg-shell__ubtn[aria-expanded='true'] > svg:last-child {
  transform: rotate(180deg);
}

/* Fila alineada a la derecha («¿Olvidaste tu contraseña?», acciones de un formulario). */
.hg-row--end {
  justify-content: flex-end;
}

/* Acciones al pie de un formulario dentro de una card (Perfil de la tienda). */
.hg-form-actions {
  margin-top: var(--space-4);
}

/* Cabecera de la ficha de tienda (staff): estado, fecha y país bajo el nombre. */
.hg-ph__meta {
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--ink-2);
}
/* Segunda línea de una celda (email del owner bajo su nombre). */
.hg-block {
  display: block;
}

/* Los enlaces con aspecto de botón no se subrayan (components.css no resetea text-decoration). */
a.hg-btn {
  text-decoration: none;
}

/* Botón con aspecto de enlace (p. ej. «Empieza de nuevo» en un formulario POST). */
button.hg-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* Anillo de foco de los enlaces, como el de los demás controles (components.css no lo declara para
   .hg-link y el navegador dibuja el suyo). */
.hg-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* Un enlace deshabilitado (aria-disabled, con su motivo en un tooltip) no se ve como uno vivo. --ink-2
   ya tiene su par de contraste sobre bg-panel en test_tokens_contrast. */
.hg-link[aria-disabled='true'] {
  color: var(--ink-2);
  cursor: not-allowed;
  text-decoration: none;
}

/* Subidas (sub-plan 05): filas de archivos, vista previa y fila con error. */
.hg-upload__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.hg-upload__rows:empty {
  display: none;
}
.hg-upload__file.is-error {
  border-color: var(--err);
}
.hg-upload__preview {
  display: inline-flex;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  overflow: hidden;
}
.hg-upload__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Biblioteca de arte (sub-plan 05). */
.hg-row--between {
  justify-content: space-between;
}
.hg-acell .hg-lib__n {
  min-width: 0;
}
.hg-acell__th img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
label.hg-btn:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Listas del staff (patrón lista): pestañas de estado y búsqueda bajo la cabecera. */
.hg-toolbar {
  margin-bottom: var(--space-3);
}
.hg-font-preview {
  margin: 0;
  font-size: 28px;
  line-height: 1.3;
}

.hg-upload__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Catálogo (sub-plan 03a): chips de tallas como checkboxes, swatch de sólo lectura. */
.hg-chip:has(input:checked) {
  background: var(--accent-fill);
  color: var(--accent-on);
  border-color: var(--accent-fill);
}
.hg-chip:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
span.hg-swatch {
  flex: none;
}
/* En una tabla el swatch es un punto en línea con el nombre, no el selector de 28 px. */
.hg-table span.hg-swatch {
  width: 12px;
  height: 12px;
  cursor: default;
}
/* Tabla de colores de la ficha: los inputs necesitan ancho para no truncar el hex ni el nombre. */
.catalog-colors th,
.catalog-colors td {
  padding-inline: var(--space-2);
}
.catalog-colors th {
  white-space: normal;
}
.catalog-colors td:nth-child(1) input {
  min-width: 10ch;
}
.catalog-colors td:nth-child(2) input {
  min-width: 11ch;
}
.catalog-colors td:nth-child(3) input {
  min-width: 8ch;
}
/* Tabla de colores: el swatch al lado del nombre, sin partir la fila; la fila nueva reserva su lugar. */
.catalog-colors td:nth-child(1) .hg-row {
  flex-wrap: nowrap;
  gap: var(--space-2);
}
.catalog-colors td:nth-child(1) .hg-row > .hg-input {
  flex: 1;
}
.catalog-colors .hg-swatch {
  flex: none;
  width: 20px;
  height: 20px;
}
.swatch-slot {
  visibility: hidden;
}
/* Los chips de tallas van bajo el título de la card: sin borde ni sangría del fieldset. */
fieldset.hg-fld {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
/* Excepciones por talla: el selector de la primera columna muestra «Elige una talla» completo. */
.catalog-overrides td:first-child select {
  min-width: 20ch;
}
.catalog-overrides-title {
  margin-top: var(--space-6);
}
/* Tabla de variantes: el costo no lleva las flechitas del input number. */
.hg-ecell input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.hg-ecell input::-webkit-inner-spin-button,
.hg-ecell input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Variantes: la cabecera de una columna editable alinea su texto con el valor del input de la celda
   (padding del td + padding del input + su borde). En las numéricas, que van a la derecha, igual
   por ese lado. */
.hg-table th.ecell-col {
  padding-left: calc(var(--space-4) + var(--space-2) + 1px);
}
.hg-table th.ecell-col.is-num {
  padding-left: var(--space-4);
  padding-right: calc(var(--space-4) + var(--space-2) + 1px);
}

/* Mockups y zonas: las columnas se alinean arriba aunque una lleve más contenido. */
.mockup-cols {
  align-items: start;
}
fieldset.zone-group {
  margin-top: var(--space-4);
}
.zone-group legend {
  padding: 0;
  margin-bottom: var(--space-2);
}

/* Barra de cambios sin guardar de la tabla editable: queda a la vista al final de la pantalla. */
.hg-savebar {
  position: sticky;
  bottom: var(--space-4);
  z-index: var(--z-sticky);
}

/* Proponer blank (sub-plan 03b): filas de colores, fotos actuales y resumen de errores. */
.proposal-color {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}
.proposal-color--head {
  font: 500 12px/16px var(--font-ui);
  color: var(--ink-2);
}
.proposal-color > .hg-check {
  grid-column: 1 / -1;
  min-height: 44px;
  align-items: center;
}
.proposal-photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.proposal-photo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.proposal-photo img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.proposal-photo-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.error-summary {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
}
/* Móvil (shell de la tienda): objetivos táctiles de 44 px en el formulario. */
@media (max-width: 1023.98px) {
  .proposal-form .hg-fsec {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
  .proposal-photo .hg-check {
    min-height: 44px;
  }
  .proposal-photo-slots {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ficha de revisión (sub-plan 03b): los colores que mandó la tienda, en varias líneas. */
.review-colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.review-colors span.hg-swatch {
  width: 12px;
  height: 12px;
  cursor: default;
}
.review-colors > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Tablas que se apilan en tarjetas debajo de 1024 px (Equipo, Mis blanks; decisión de Randy, 2026-10-13):
   cada fila es una tarjeta, las celdas secundarias muestran su columna con data-label y la cabecera
   queda sólo para lectores de pantalla. */
@media (max-width: 1023.98px) {
  .table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .table-stack,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
  }
  .table-stack tr {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
  }
  .table-stack tr:last-child {
    border-bottom: 0;
  }
  .table-stack td {
    padding: var(--space-1) 0;
    border: 0;
  }
  /* td.is-num le gana a .hg-table .is-num (0,2,0), que alinea a la derecha. */
  .table-stack td,
  .table-stack td.is-num {
    text-align: left;
  }
  .table-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font: 500 12px/16px var(--font-ui);
    color: var(--ink-2);
  }
  .table-stack .hg-row--end {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  /* Acciones alineadas a la izquierda: el tooltip se ancla a la izquierda (gana al de escritorio por orden). */
  .table-stack td:last-child .hg-tip__b {
    left: 0;
    right: auto;
    transform: none;
  }
}

/* Títulos y miguitas largos (un nombre de producto de 120 caracteres sin espacios) se parten en vez de
   ensanchar la página; el bloque del título puede encogerse dentro de la cabecera. */
.hg-ph > div {
  min-width: 0;
}
.hg-ph__t,
.hg-crumbs li,
.hg-crumbs a,
.hg-crumbs [aria-current='page'] {
  overflow-wrap: anywhere;
}
.hg-crumbs li {
  min-width: 0;
}
/* Los rótulos de un control segmentado no se parten («Rev.» / «3»). */
.hg-tab {
  white-space: nowrap;
}
/* Móvil (shell de la tienda): la cabecera de página y la de cada tarjeta bajan de línea. El contrato
   sólo lo prevé con .hg-mshell, que el shell de la tienda no tiene (ProductoFichaMovil: título a lo
   ancho y las acciones debajo, a lo ancho). */
@media (max-width: 1023.98px) {
  .hg-shell:not(.hg-shell--staff) .hg-ph {
    flex-wrap: wrap;
  }
  .hg-shell:not(.hg-shell--staff) .hg-ph > div:not([class]) {
    flex: 1 1 100%;
  }
  .hg-shell:not(.hg-shell--staff) .hg-ph > .hg-grow {
    display: none;
  }
  .hg-shell:not(.hg-shell--staff) .hg-ph > .hg-row {
    width: 100%;
  }
  .hg-shell:not(.hg-shell--staff) .hg-card__h {
    flex-wrap: wrap;
  }
}

/* #content es un contenedor con tabindex=-1 (recibe el foco al cerrar un toast), no un control. */
#content:focus {
  outline: none;
}

/* Mostrar la contraseña: el botón va dentro del campo, a la derecha. */
.pw-field {
  position: relative;
  display: block;
}
.pw-field .hg-input {
  padding-right: calc(var(--space-2) + 44px);
}
.pw-field .pw-reveal {
  position: absolute;
  top: 50%;
  right: var(--space-1);
  transform: translateY(-50%);
}

/* Ajustes (06-staff/ajustes.md): una <form> por sección. Cada sección es la primera de su <form>,
   así que .hg-fsec:first-of-type le quita el separador; se repone entre formularios. */
.settings-sections > form + form > .hg-fsec {
  border-top: 1px solid var(--line);
}
.settings-num {
  max-width: 200px;
}

/* Reglas de costo (06-staff/reglas-de-costo.md, patrón historial): versiones (280 px) + comparación.
   Cada versión es un enlace que ocupa toda la fila. */
.rules-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.hg-vh a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: calc(-1 * var(--space-3)) calc(-1 * (var(--space-3) + var(--space-1) / 2));
  padding: var(--space-3) calc(var(--space-3) + var(--space-1) / 2);
  color: inherit;
  text-decoration: none;
}
.rules-first {
  margin: 0;
  padding: calc(var(--space-2) + var(--space-1) / 2) var(--space-3);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-2);
}

/* Escalones de tinta en «Nueva versión» de las reglas de costo: tabla angosta de filas fijas. */
.rules-tiers {
  max-width: 420px;
}

/* Matriz oficial (05-tienda/prueba.md): la tabla scrollea de costado si no entra (nueve tallas en la
   columna del staff); en el celular de la tienda se ve el resumen por color del mockup
   ProductoFichaMovil. El staff es sólo escritorio. */
.hg-matrix.price-table {
  overflow-x: auto;
}
/* components.css le da a la celda width:100% más padding y borde: sin border-box cada celda se pasa de su
   columna y la tabla scrollea 4 px. */
.price-table .hg-pcell {
  box-sizing: border-box;
}
.price-summary,
.price-legend {
  display: none;
}
.price-legend {
  margin: var(--space-2) 0 0;
}
@media (max-width: 1023.98px) {
  .hg-shell:not(.hg-shell--staff) .price-table {
    display: none;
  }
  .hg-shell:not(.hg-shell--staff) .price-summary,
  .hg-shell:not(.hg-shell--staff) .price-legend {
    display: block;
  }
}

/* Ficha de producto (05-tienda/producto-ficha.md): la miniatura del blank llena su cuadro, la fila de
   cada tarjeta de revisión no se parte, y debajo de 1024 px todo va en una columna. El tooltip de
   «Abrir en el editor» se ancla a la derecha: en el celular la tarjeta llega al borde de la ventana. */
.hg-pthumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.product-revrow {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.hg-revcard .hg-tip__b {
  left: auto;
  right: 0;
  transform: none;
}
.hg-rendering p {
  margin: var(--space-1) 0 0;
}
@media (max-width: 1023.98px) {
  .hg-shell:not(.hg-shell--staff) .hg-pd,
  .hg-shell:not(.hg-shell--staff) .hg-revs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Prueba (05-tienda/prueba.md y 06-staff/revision-detalle.md): la foto cabe en su cuadro (1/1.02) sin estirarlo. Una medición
   que no entra al lado de su nombre (la píldora «96 DPI · Baja resolución» en la columna del revisor,
   la tinta cortada por varios bordes) baja a su propia línea, a la derecha, y el aviso parte línea en
   vez de salirse. Debajo de 1024 px, tres mockups por fila (mockup ProductoFichaMovil) y el visor
   encima de las mediciones. */
.hg-mock__ph {
  min-height: 0;
  overflow: hidden;
}
.hg-mock__ph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.hg-meas > div:not(.hg-label) {
  flex-wrap: wrap;
}
.hg-meas dd {
  min-width: 0;
  margin-left: auto;
  text-align: right;
}
.hg-meas .hg-warnpill {
  height: auto;
  min-height: 24px;
  padding-block: var(--space-1);
  white-space: normal;
}
@media (max-width: 1023.98px) {
  .hg-shell:not(.hg-shell--staff) .hg-mocks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hg-shell:not(.hg-shell--staff) .hg-proofgrid__pf {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Lista de productos (05-tienda/productos-lista.md): un nombre largo se parte en vez de ensanchar la
   tabla; en escritorio el estado se filtra con el control segmentado y debajo de 1024 px con un
   select (mockup ProductosListaMovil), con la búsqueda a lo ancho. Los dos botones del estado vacío
   bajan de línea si no entran. */
.products-table .hg-prow a {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Fila completa enlazada a la ficha: el enlace del nombre se estira sobre toda la fila (el foco se ve
   en el enlace). No hay otro contenido interactivo en la fila. */
.products-table tr {
  position: relative;
}
.products-table .hg-prow a::after {
  content: '';
  position: absolute;
  inset: 0;
}
@media (min-width: 1024px) {
  /* Las celdas secundarias no se parten (ProductosLista: una línea por fila); el nombre sí. */
  .products-table td[data-label] {
    white-space: nowrap;
  }
  /* Sin un ancho mínimo, el nombre cedería todo el lugar a las celdas que no se parten. */
  .products-table td:first-child {
    min-width: 200px;
  }
}
@media (max-width: 1023.98px) {
  .hg-shell:not(.hg-shell--staff) .products-table .hg-prow a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
.products-status {
  display: none;
}
@media (max-width: 1023.98px) {
  .products-tabs {
    display: none;
  }
  .products-status {
    display: flex;
  }
  .products-toolbar,
  .products-search,
  .products-search > form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .products-search .hg-search {
    width: 100%;
  }
  .hg-shell:not(.hg-shell--staff) .hg-empty__a {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Inicio de la tienda (05-tienda/inicio.md): debajo de 1024 px, los contadores en dos columnas y cada
   paso de la guía deja caer su botón a la línea siguiente. */
.home-team {
  margin: 0;
}
@media (max-width: 1023.98px) {
  .hg-shell:not(.hg-shell--staff) .hg-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hg-shell:not(.hg-shell--staff) .hg-steps li {
    flex-wrap: wrap;
  }
  /* El botón (o el tooltip que lo envuelve) ocupa su propia línea, debajo del texto. */
  .hg-shell:not(.hg-shell--staff) .hg-steps li > :is(.hg-btn, .hg-tip) {
    flex: 1 1 100%;
  }
}

/* Crear producto (PatronFormulario): campos de ~560 px, no del ancho de la tarjeta. */
.new-product-form {
  max-width: 560px;
}

/* Banner en el shell de la tienda: el texto se parte aunque no tenga espacios (el nombre de un producto)
   y, debajo de 1024 px, el banner baja el enlace de la acción a su propia línea en vez de apretar el
   texto; el enlace puede partirse y mide 44 px. */
.hg-shell:not(.hg-shell--staff) .hg-banner__body {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 1023.98px) {
  .hg-shell:not(.hg-shell--staff) .hg-banner {
    flex-wrap: wrap;
  }
  .hg-shell:not(.hg-shell--staff) .hg-banner__body {
    flex: 1 1 0;
    min-width: 70%;
  }
  .hg-shell:not(.hg-shell--staff) .hg-banner a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Arte en uso (05-tienda/arte.md): la tarjeta recorta lo que se sale (overflow:hidden por las
   esquinas de la miniatura), así que el motivo de «no se puede borrar» se ancla a la derecha del
   botón y es más angosto que la tarjeta más chica (200 px). */
.hg-acell .hg-tip__b {
  left: auto;
  right: 0;
  transform: none;
  max-width: 180px;
}

/* La página del editor (09a): pantalla completa, sin el shell de la tienda. La isla ocupa todo el
   alto; debajo de 1280 px se ve un aviso en su lugar (el editor es de escritorio). */
.editor-page{flex:1 0 auto;display:flex;flex-direction:column;height:100dvh;min-height:0}
.editor-page__island{flex:1;min-height:0;display:flex;flex-direction:column}
.editor-page__island[hidden]{display:none}
.editor-page__island>.hg-ed{flex:1;min-height:0}
.editor-page__narrow,.editor-page__notice{padding:var(--space-6)}
@media (min-width:1280px){.editor-page__narrow{display:none}}
@media (max-width:1279.98px){.editor-page__island{display:none}}

/* El lienzo del editor (09a): la escena y la capa de interacción llenan el escenario (.hg-canvas); la
   barra flotante del elemento seleccionado va encima; la vista dividida pone dos escenarios lado a
   lado. */
.editor-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.editor-float{position:absolute;z-index:1;display:inline-flex;gap:var(--space-1);padding:var(--space-1);background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:var(--radius-sm)}
.editor-split{flex:1;min-height:0;display:flex;gap:1px;background:var(--line)}
.editor-split>.hg-canvas{flex:1;min-width:0}

/* El cajón de precio del editor (09b): cada grupo en columna con su espacio, los swatches con nombre en
   fila y la lista de tallas a subir con su sangría. */
.editor-group{display:flex;flex-direction:column;gap:var(--space-2)}
.editor-swatches{flex-wrap:wrap;gap:var(--space-3)}
.editor-pricing__low{margin:0;padding-left:var(--space-5)}
/* La barra inferior del editor (09b): los colores y las tallas son un solo botón que abre el cajón de
   precio (con el espacio de la barra entre los dos grupos y su anillo de foco); el resumen de la
   confirmación va en lista corta. */
.editor-offer{all:unset;box-sizing:border-box;display:flex;align-items:stretch;gap:var(--space-4);cursor:pointer;border-radius:var(--radius-sm)}
.editor-offer:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.editor-summary{margin:0;padding-left:var(--space-5);display:flex;flex-direction:column;gap:var(--space-1)}
.editor-inks{display:flex;flex-direction:column;gap:var(--space-1)}
.editor-inks>.hg-row{flex-wrap:wrap;gap:var(--space-2)}
/* La fila «Tamaño y estilo» del panel Texto (09c): el alto, el peso y la itálica en una línea. */
.editor-text-row{flex-wrap:nowrap;gap:var(--space-2)}
/* El alto de la letra mide 112 px (el prototipo, 120): fuera de .hg-grid2 nada achica el campo (el
   input del contrato guarda su ancho propio) y la fila no entraría en el panel de 328 px. Con 112 px
   la fila deja unos px de margen, por si los rótulos rasterizan más anchos en otro sistema o zoom. */
.editor-text-row .hg-field-wrap {
  width: 112px;
}
.editor-text-row .hg-field {
  min-width: 0;
  width: 100%;
}
.editor-text-row .hg-field input {
  width: 0;
}
/* Los motivos de la fila (el peso o la itálica que la familia no tiene) se anclan a la derecha: la
   itálica va al borde derecho del panel y su motivo, centrado, se salía (aunque esté oculto, ocupa
   lugar y daba scroll horizontal), como en .hg-ph y .hg-bb--cta. */
.editor-text-row .hg-tip__b {
  left: auto;
  right: 0;
  transform: none;
}
/* Una pestaña deshabilitada (aria-disabled con su motivo, o disabled en sólo lectura o bloqueada) no
   se ve como una viva: la tinta de lo deshabilitado (ink-3, exenta de contraste en 01-tokens.md),
   como .hg-icon-btn:disabled o .hg-ed__tool:disabled. */
.hg-tab[aria-disabled='true'],
.hg-tab:disabled {
  color: var(--ink-3);
  cursor: not-allowed;
}
/* El Avanzado del panel Texto (09c): sus controles debajo del summary (el espacio entre ellos es el
   de .hg-col). */
.editor-adv {
  padding-top: var(--space-2);
}
/* La lista de fuentes del panel Texto: .hg-ed__pb es una columna flex que corre, y la lista (overflow
   hidden) se achicaba hasta 0 px cuando el panel pasa su alto (con el Avanzado abierto, 09d). */
.editor-fontlist {
  flex-shrink: 0;
}
/* El deslizador del editor (islands/ui/Slider, 09d): el .hg-slider del contrato es sólo dibujo. Un
   input range nativo, transparente, va sobre la pista y da el foco, el teclado y el puntero (24 px de
   alto, y 7 px más de cada lado: la perilla mide 14 y en los extremos sale de la pista). El anillo de
   foco se dibuja en la perilla, como el de los demás controles del contrato (2 px de focus, a 2 px). */
.editor-slider .hg-slider__track input {
  position: absolute;
  top: 50%;
  left: -7px;
  width: calc(100% + 14px);
  height: 24px;
  margin: 0;
  transform: translateY(-50%);
  opacity: 0;
  cursor: pointer;
  touch-action: none;
}
.editor-slider .hg-slider__track input:disabled {
  cursor: not-allowed;
}
.editor-slider:has(input:focus-visible) .hg-slider__track b {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* El panel Clipart (09c): la búsqueda a todo el ancho del panel y la miniatura dentro de su botón. */
.editor-clip-search {
  width: 100%;
}
.editor-clip__img {
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
}

/* El escenario del editor de zonas (10): la foto y la zona en un <svg> que mide lo que la foto (el
   alto de 500 px es del contrato, .hg-ze__stage svg). Los colores de la zona, de las asas y de los
   overrides son los del lienzo, como el prototipo ZoneEditor; la medida usa la etiqueta del lienzo
   del editor (canvas-label-*); el anillo de foco de la zona es el de todo el portal. El ícono de un
   botón del estado vacío no toma el alto del <svg> del escenario. */
.zones-stage__svg{display:block;touch-action:none;user-select:none}
.zones-stage__fill{fill:var(--canvas-select);fill-opacity:.08}
.zones-stage__halo{fill:none;stroke:var(--canvas-halo);stroke-opacity:.9;pointer-events:none}
.zones-stage__line{fill:none;stroke:var(--canvas-select);pointer-events:none}
.zones-stage__zone.is-error .zones-stage__line{stroke:var(--err)}
/* La celda de tallas del override («XL–2XL») no se parte en dos líneas. */
.hg-ovr td.hg-num{white-space:nowrap}
.zones-stage__handle{fill:var(--canvas-halo);stroke:var(--canvas-select)}
.zones-stage__ovr{fill:none;stroke:var(--canvas-snap);pointer-events:none}
.zones-stage__tag{pointer-events:none}
.zones-stage__tag rect{fill:var(--canvas-label-bg)}
.zones-stage__tag text{fill:var(--canvas-label-ink);font-family:var(--font-ui);font-weight:600}
.zones-stage__zone:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hg-ze__stage .hg-btn .hg-i{width:16px;height:16px}
/* El panel del editor de zonas (10): cada bloque en columna con el espacio del prototipo (8 px) y los
   problemas del banner «La zona no es válida» en lista corta. */
.zones-group{display:flex;flex-direction:column;gap:var(--space-2)}
.zones-group__head{justify-content:space-between}
.zones-problems{margin:0;padding-left:var(--space-5)}