/* Góndola IA — sistema visual (oct 2026). Sin compilación: CSS nativo con capas, tokens OKLCH, light-dark(),
   consultas de contenedor, :has(), @starting-style, transiciones de vista entre páginas y movimiento reducido. */
@layer reinicio, tokens, base, estructura, componentes, paginas, utilidades;

/* ------------------------------------------------------------------------------------------------ fuentes */
/* Subconjunto latino, ejes recortados a lo que se usa (66 KB en total). «optional»: si la fuente no llegó en
   ~100 ms se usa la del sistema en esa vista (sin saltos de texto) y queda en caché para la siguiente.
   Si cambia el contenido de un archivo, cambia su nombre (-v2): se guardan un año como inmutables. */
@font-face { font-family: "Geist"; src: url("fuentes/geist-v1.woff2") format("woff2"); font-weight: 400 700; font-display: optional; }
@font-face { font-family: "Geist Mono"; src: url("fuentes/geist-mono-v1.woff2") format("woff2"); font-weight: 400 600; font-display: optional; }
@font-face { font-family: "Newsreader"; src: url("fuentes/newsreader-v1.woff2") format("woff2"); font-weight: 400 520; font-display: optional; }

/* ------------------------------------------------------------------------------------------------ reinicio */
@layer reinicio {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
  h1, h2, h3 { text-wrap: balance; }
  p, li, figcaption, dd { text-wrap: pretty; }
}

/* ------------------------------------------------------------------------------------------------ tokens */
@layer tokens {
  :root {
    color-scheme: light dark;
    /* Neutros cálidos (matiz 95 = papel) y un único acento: el amarillo del fleje. */
    --papel:        light-dark(oklch(0.982 0.004 95), oklch(0.165 0.005 95));
    --superficie:   light-dark(oklch(1 0 0),          oklch(0.205 0.005 95));
    --superficie-2: light-dark(oklch(0.962 0.005 95), oklch(0.245 0.006 95));
    --superficie-3: light-dark(oklch(0.935 0.006 95), oklch(0.285 0.007 95));
    --linea:        light-dark(oklch(0.905 0.006 95), oklch(0.305 0.006 95));
    --linea-fuerte: light-dark(oklch(0.80 0.008 95),  oklch(0.43 0.008 95));
    --tinta:        light-dark(oklch(0.205 0.01 95),  oklch(0.955 0.006 95));
    --tinta-2:      light-dark(oklch(0.455 0.012 95), oklch(0.745 0.01 95));
    --acento:       oklch(0.885 0.165 100);
    --acento-hover: oklch(from var(--acento) calc(l - 0.04) c h);
    --sobre-acento: oklch(0.21 0.02 95);
    --acento-suave: light-dark(oklch(0.965 0.06 100), oklch(0.30 0.055 100));
    --acento-tinta: light-dark(oklch(0.47 0.10 88),   oklch(0.89 0.15 100));
    --ok:           light-dark(oklch(0.495 0.12 155), oklch(0.80 0.14 155));
    --ok-suave:     light-dark(oklch(0.955 0.035 155), oklch(0.29 0.05 155));
    --mal:          light-dark(oklch(0.52 0.19 28),   oklch(0.77 0.15 28));
    --mal-suave:    light-dark(oklch(0.962 0.025 28), oklch(0.29 0.06 28));
    --foco:         light-dark(oklch(0.205 0.01 95), var(--acento));
    --primario:     var(--tinta);
    --sobre-primario: var(--papel);
    --marca-acento: var(--acento);

    --f-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --f-titulo: "Newsreader", "Iowan Old Style", Georgia, serif;
    /* Escala de producto: pasos finos y fijos para el texto de interfaz; fluida solo para títulos. */
    --t-2xs: 0.6875rem; --t-xs: 0.75rem; --t-sm: 0.8125rem; --t-md: 0.9375rem; --t-lg: 1.0625rem; --t-xl: 1.25rem;
    --t-cifra: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    --t-titulo: clamp(1.75rem, 1.25rem + 1.9vw, 2.625rem);
    --t-hero: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);

    --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4.5rem;
    --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 14px;
    --sombra-1: 0 1px 2px oklch(0 0 0 / 0.05);
    --sombra-2: 0 1px 2px oklch(0 0 0 / 0.06), 0 12px 32px -10px oklch(0 0 0 / 0.22);
    --ancho: 76rem; --ancho-texto: 42rem;
    --alto-cabecera: 3.5rem;
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
    --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  :root[data-tema="claro"] { color-scheme: light; }
  :root[data-tema="oscuro"] { color-scheme: dark; }
  @media (prefers-reduced-motion: reduce) {
    :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
  }
  @media (prefers-contrast: more) {
    :root { --linea: var(--linea-fuerte); --tinta-2: var(--tinta); }
  }
}

/* ------------------------------------------------------------------------------------------------ base */
@layer base {
  html { background: var(--papel); scrollbar-gutter: stable; interpolate-size: allow-keywords; }
  body {
    min-height: 100dvh; display: flex; flex-direction: column;
    font-family: var(--f-ui); font-size: var(--t-md); line-height: 1.5; color: var(--tinta); background: var(--papel);
    font-feature-settings: "ss01" 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  ::selection { background: var(--acento); color: var(--sobre-acento); }
  a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-1); }
  a:hover { text-decoration-color: currentColor; }
  :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--r-1); }
  h1 { font-family: var(--f-titulo); font-weight: 480; font-size: var(--t-titulo); line-height: 1.08; letter-spacing: -0.012em; font-optical-sizing: auto; }
  h2 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
  h3 { font-size: var(--t-md); font-weight: 600; }
  code, kbd, .mono { font-family: var(--f-mono); font-size: 0.92em; }
  code { background: var(--superficie-2); border: 1px solid var(--linea); padding: 0.05em 0.35em; border-radius: var(--r-1); }
  kbd {
    display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 0.3rem;
    font-size: var(--t-2xs); font-weight: 500; color: var(--tinta-2); background: var(--superficie);
    border: 1px solid var(--linea-fuerte); border-bottom-width: 2px; border-radius: var(--r-1); line-height: 1;
  }
  .num, td, .precio, .cifra, meter, progress { font-variant-numeric: tabular-nums; }
  hr { border: 0; border-top: 1px solid var(--linea); }
  .i { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .i.chico { width: 0.95rem; height: 0.95rem; }
  .i.grande { width: 1.5rem; height: 1.5rem; stroke-width: 1.5; }
}

/* ------------------------------------------------------------------------------------------------ estructura */
@layer estructura {
  .saltar { position: absolute; left: var(--e-3); top: -4rem; z-index: 50; padding: var(--e-2) var(--e-3); background: var(--primario); color: var(--sobre-primario); border-radius: var(--r-2); }
  .saltar:focus { top: var(--e-2); }

  .cabecera {
    position: sticky; top: 0; z-index: 20; height: var(--alto-cabecera);
    background: var(--papel); border-bottom: 1px solid transparent;
    view-transition-name: cabecera;
  }
  /* El filete inferior aparece al desplazarse (animación ligada al scroll; sin soporte queda siempre visible). */
  .cabecera { border-bottom-color: var(--linea); }
  @supports (animation-timeline: scroll()) {
    .cabecera { animation: filete linear both; animation-timeline: scroll(root); animation-range: 0 3rem; border-bottom-color: transparent; }
    @keyframes filete { to { border-bottom-color: var(--linea); background: color-mix(in oklch, var(--papel) 94%, transparent); } }
  }
  .cabecera > div { max-width: var(--ancho); height: 100%; margin-inline: auto; padding-inline: var(--e-4); display: flex; align-items: center; gap: var(--e-5); }
  .marca { display: inline-flex; align-items: center; color: var(--tinta); text-decoration: none; border-radius: var(--r-2); }
  .marca-svg { height: 1.45rem; width: auto; }
  .nav-principal { display: flex; gap: var(--e-1); margin-inline-end: auto; }
  .nav-principal a {
    display: inline-flex; align-items: center; gap: var(--e-2); height: 2.25rem; padding-inline: var(--e-3);
    color: var(--tinta-2); text-decoration: none; font-weight: 500; font-size: var(--t-sm); border-radius: var(--r-2);
    transition: color var(--dur-1), background-color var(--dur-1);
  }
  .nav-principal a:hover { color: var(--tinta); background: var(--superficie-2); }
  .nav-principal a[aria-current="page"] { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--acento); border-radius: 0; }

  main { flex: 1; width: 100%; max-width: var(--ancho); margin-inline: auto; padding: var(--e-5) var(--e-4) var(--e-8); container: principal / inline-size; view-transition-name: contenido; }
  main.estrecho { max-width: 34rem; }
  .pie { max-width: var(--ancho); width: 100%; margin-inline: auto; padding: var(--e-5) var(--e-4) var(--e-6); display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); justify-content: space-between; color: var(--tinta-2); font-size: var(--t-xs); border-top: 1px solid var(--linea); }

  .encabezado { display: grid; gap: var(--e-2); margin-block-end: var(--e-5); }
  .encabezado .fila-titulo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-3) var(--e-5); }
  .encabezado .acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
  .encabezado .bajada { color: var(--tinta-2); max-width: var(--ancho-texto); }
  .migas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); font-size: var(--t-sm); color: var(--tinta-2); list-style: none; padding: 0; }
  .migas a { text-decoration: none; display: inline-block; padding-block: 0.3rem; }
  .migas a:hover { color: var(--tinta); text-decoration: underline; }
  .migas li + li::before { content: "/"; margin-inline-end: var(--e-1); color: var(--linea-fuerte); }
  .meta { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); color: var(--tinta-2); font-size: var(--t-sm); list-style: none; padding: 0; }
  .meta li { display: inline-flex; align-items: center; gap: var(--e-1); }

  .rejilla-lev { display: grid; gap: var(--e-5); }
  @container principal (width > 56rem) {
    .rejilla-lev { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
    .rejilla-lev > aside { position: sticky; top: calc(var(--alto-cabecera) + var(--e-4)); }
  }
}

/* ------------------------------------------------------------------------------------------------ componentes */
@layer componentes {
  /* Botones */
  .boton {
    --b-fondo: var(--superficie); --b-tinta: var(--tinta); --b-borde: var(--linea-fuerte);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    min-height: 2.5rem; padding: 0 var(--e-4); border-radius: var(--r-2);
    background: var(--b-fondo); color: var(--b-tinta); border: 1px solid var(--b-borde);
    font-weight: 550; font-size: var(--t-sm); line-height: 1; text-decoration: none; white-space: nowrap;
    box-shadow: var(--sombra-1); transition: background-color var(--dur-1), border-color var(--dur-1), transform var(--dur-1), box-shadow var(--dur-1);
    touch-action: manipulation; user-select: none;
  }
  .boton:hover { --b-fondo: var(--superficie-2); }
  .boton:active { transform: translateY(1px); box-shadow: none; }
  .boton.primario { --b-fondo: var(--primario); --b-tinta: var(--sobre-primario); --b-borde: var(--primario); }
  .boton.primario:hover { --b-fondo: color-mix(in oklch, var(--primario) 86%, var(--papel)); }
  .boton.acento { --b-fondo: var(--acento); --b-tinta: var(--sobre-acento); --b-borde: oklch(from var(--acento) calc(l - 0.12) c h); }
  .boton.acento:hover { --b-fondo: var(--acento-hover); }
  .boton.sutil { --b-fondo: transparent; --b-borde: transparent; box-shadow: none; }
  .boton.sutil:hover { --b-fondo: var(--superficie-2); }
  .boton.peligro { --b-tinta: var(--mal); }
  .boton.peligro.lleno { --b-fondo: var(--mal); --b-tinta: var(--papel); --b-borde: var(--mal); }
  .boton.grande { min-height: 3rem; padding-inline: var(--e-5); font-size: var(--t-md); }
  .boton.chico { min-height: 2rem; padding-inline: var(--e-3); font-size: var(--t-xs); }
  .boton.solo-icono { padding: 0; width: 2.5rem; }
  .boton.solo-icono.chico { width: 2rem; }
  .boton.ancho { width: 100%; }
  .boton:disabled, .boton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
  .boton kbd { margin-inline-start: var(--e-1); background: transparent; color: inherit; border-color: color-mix(in oklch, currentColor 35%, transparent); }
  .boton .i.girar { animation: girar 0.9s linear infinite; }
  @keyframes girar { to { rotate: 1turn; } }
  .enlace { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 0.2em; font-size: inherit; }
  .enlace.peligro { color: var(--mal); }
  .grupo-botones { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }

  /* Paneles */
  .panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-3); }
  .panel > .cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-4) 0; }
  .panel > .cuerpo { padding: var(--e-4); }
  .panel > .cuerpo + .cuerpo { border-top: 1px solid var(--linea); }
  .panel .rotulo { font-size: var(--t-xs); font-weight: 550; color: var(--tinta-2); text-transform: uppercase; letter-spacing: 0.06em; }
  .nota { color: var(--tinta-2); font-size: var(--t-sm); }
  .nota.chica { font-size: var(--t-xs); }

  /* Avisos (aria-live en la plantilla) */
  .aviso {
    display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); margin-block-end: var(--e-4);
    border: 1px solid var(--linea); border-radius: var(--r-3); background: var(--superficie); font-size: var(--t-sm);
    border-inline-start: 3px solid var(--tinta-2);
  }
  .aviso .i { margin-block-start: 0.1rem; }
  .aviso.ok { border-inline-start-color: var(--ok); } .aviso.ok > .i { color: var(--ok); }
  .aviso.mal { border-inline-start-color: var(--mal); background: var(--mal-suave); } .aviso.mal > .i { color: var(--mal); }
  .aviso.pausa { border-inline-start-color: var(--acento); background: var(--acento-suave); }
  @media (prefers-reduced-motion: no-preference) {
    main > .aviso { animation: entrar var(--dur-3) var(--curva) both; }
  }
  @keyframes entrar { from { opacity: 0; translate: 0 -4px; } }

  /* Pastillas de estado: punto + texto (el color nunca va solo) */
  .pastilla {
    --p-color: var(--tinta-2); --p-fondo: var(--superficie-2);
    display: inline-flex; align-items: center; gap: 0.4rem; height: 1.5rem; padding: 0 0.55rem 0 0.45rem;
    border-radius: 999px; background: var(--p-fondo); color: var(--tinta); font-size: var(--t-xs); font-weight: 550; white-space: nowrap;
  }
  .pastilla::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--p-color); flex: none; }
  .pastilla[data-e="aceptado"], .pastilla[data-e="terminado"] { --p-color: var(--ok); --p-fondo: var(--ok-suave); }
  .pastilla[data-e="revision"], .pastilla[data-e="en_pausa"], .pastilla[data-e="detenido"] { --p-color: oklch(0.62 0.15 75); --p-fondo: var(--acento-suave); }
  .pastilla[data-e="corregido"] { --p-color: var(--tinta); --p-fondo: var(--superficie-3); }
  .pastilla[data-e="error"] { --p-color: var(--mal); --p-fondo: var(--mal-suave); }
  .pastilla[data-e="procesando"]::before, .pastilla[data-e="en_cola"]::before { background: transparent; border: 1.5px solid var(--tinta); border-inline-end-color: transparent; width: 0.6rem; height: 0.6rem; animation: girar 1s linear infinite; }
  .pastilla[data-e="ilegible"]::before, .pastilla[data-e="no_es_fleje"]::before, .pastilla[data-e="cancelado"]::before { background: transparent; border: 1.5px solid var(--tinta-2); }

  /* Formularios */
  .campo { display: grid; gap: 0.375rem; }
  .campo > span, .campo > label, legend { font-size: var(--t-sm); font-weight: 550; }
  .campo .ayuda { font-size: var(--t-xs); color: var(--tinta-2); font-weight: 400; }
  .entrada, textarea.entrada {
    width: 100%; min-height: 2.75rem; padding: 0.55rem 0.75rem; font-size: 1rem; /* 16 px: iOS no hace zoom */
    background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--r-2); color: var(--tinta);
    transition: border-color var(--dur-1), box-shadow var(--dur-1);
  }
  textarea.entrada { field-sizing: content; min-height: 4.5rem; max-height: 14rem; resize: vertical; }
  .entrada::placeholder { color: color-mix(in oklch, var(--tinta-2) 80%, transparent); }
  .entrada:hover { border-color: var(--tinta-2); }
  .entrada:focus-visible { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px color-mix(in oklch, var(--acento) 70%, transparent); }
  .entrada:user-invalid { border-color: var(--mal); }
  .formulario { display: grid; gap: var(--e-4); }
  fieldset { border: 0; padding: 0; min-width: 0; display: grid; gap: var(--e-2); }
  legend { padding: 0; margin-block-end: var(--e-2); display: flex; align-items: center; gap: var(--e-2); width: 100%; }
  input[type="radio"], input[type="checkbox"] { accent-color: var(--tinta); width: 1.05rem; height: 1.05rem; margin: 0; flex: none; }

  /* Opción en tarjeta (radio grande, apto para el pulgar) */
  .opcion {
    position: relative; display: flex; align-items: center; gap: var(--e-3); min-height: 3rem; padding: var(--e-2) var(--e-3);
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-2); cursor: pointer;
    transition: border-color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1);
  }
  .opcion:hover { border-color: var(--linea-fuerte); }
  .opcion:has(input:checked) { border-color: var(--tinta); background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--tinta); }
  .opcion:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
  .opcion .principal { font-weight: 600; }
  .opcion .secundario { color: var(--tinta-2); font-size: var(--t-sm); }
  .opcion .texto { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }
  .opcion kbd { margin-inline-start: auto; }
  .opcion .entrada { min-height: 2.25rem; width: 8rem; }

  /* Medidores y avance */
  progress, meter { appearance: none; width: 100%; height: 0.5rem; border: 0; border-radius: 999px; background: var(--superficie-3); overflow: hidden; display: block; }
  progress::-webkit-progress-bar { background: var(--superficie-3); border-radius: 999px; }
  progress::-webkit-progress-value { background: var(--tinta); border-radius: 999px; transition: inline-size var(--dur-3) var(--curva); }
  progress::-moz-progress-bar { background: var(--tinta); border-radius: 999px; }
  progress:indeterminate { background: linear-gradient(90deg, var(--superficie-3) 0 35%, var(--tinta-2) 50%, var(--superficie-3) 65% 100%) 0 0 / 300% 100%; animation: barrido 1.6s linear infinite; }
  progress:indeterminate::-webkit-progress-bar { background: transparent; }
  @keyframes barrido { to { background-position: -150% 0; } }
  meter::-webkit-meter-bar { background: var(--superficie-3); border: 0; border-radius: 999px; height: 0.5rem; }
  meter::-webkit-meter-optimum-value { background: var(--tinta); border-radius: 999px; }
  meter::-webkit-meter-suboptimum-value { background: oklch(0.70 0.15 75); border-radius: 999px; }
  meter::-webkit-meter-even-less-good-value { background: var(--mal); border-radius: 999px; }
  meter::-moz-meter-bar { background: var(--tinta); border-radius: 999px; }
  meter:-moz-meter-sub-optimum::-moz-meter-bar { background: oklch(0.70 0.15 75); }
  meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--mal); }

  /* Cifras */
  .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); border: 1px solid var(--linea); border-radius: var(--r-3); overflow: hidden; background: var(--linea); gap: 1px; list-style: none; padding: 0; }
  .cifras > li { background: var(--superficie); padding: var(--e-3) var(--e-4); display: grid; gap: 0.125rem; align-content: start; }
  .cifras .cifra { font-size: var(--t-cifra); font-weight: 520; letter-spacing: -0.02em; line-height: 1.1; }
  .cifras .que { font-size: var(--t-xs); color: var(--tinta-2); display: flex; align-items: center; gap: 0.35rem; }
  .cifras .que::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--c, var(--linea-fuerte)); }
  .cifras [data-c="aceptado"] { --c: var(--ok); } .cifras [data-c="revision"] { --c: var(--acento); }
  .cifras [data-c="ilegible"] { --c: var(--linea-fuerte); } .cifras [data-c="corregido"] { --c: var(--tinta); }
  .cifras.compactas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .composicion { width: 100%; height: 0.5rem; border-radius: 999px; overflow: hidden; display: block; }
  .composicion .aceptado { fill: var(--ok); } .composicion .revision { fill: var(--acento); }
  .composicion .ilegible { fill: var(--linea-fuerte); } .composicion .corregido { fill: var(--tinta); } .composicion .fondo { fill: var(--superficie-3); }

  /* Filtros: control segmentado con conteos */
  .filtros { display: flex; gap: 2px; padding: 3px; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--r-3); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .filtros a {
    flex: none; display: inline-flex; align-items: center; gap: var(--e-2); height: 2.125rem; padding-inline: var(--e-3);
    border-radius: var(--r-2); text-decoration: none; color: var(--tinta-2); font-size: var(--t-sm); font-weight: 500; scroll-snap-align: start;
    transition: background-color var(--dur-1), color var(--dur-1);
  }
  .filtros a:hover { color: var(--tinta); }
  .filtros a[aria-current="page"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-1), 0 0 0 1px var(--linea); }
  .filtros .cuenta { font-size: var(--t-xs); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
  .filtros a[data-e="revision"] .cuenta:not(:empty) { background: var(--acento); color: var(--sobre-acento); padding: 0 0.4rem; border-radius: 999px; font-weight: 600; }

  /* Tablas de datos */
  .tabla-envoltura { container: tabla / inline-size; border: 1px solid var(--linea); border-radius: var(--r-3); background: var(--superficie); overflow: clip; }
  .tabla { width: 100%; font-size: var(--t-sm); }
  .tabla th { position: sticky; top: var(--alto-cabecera); z-index: 1; background: var(--superficie-2); text-align: start; font-weight: 550; font-size: var(--t-xs); color: var(--tinta-2); padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--linea); white-space: nowrap; }
  .tabla td { padding: var(--e-3); border-bottom: 1px solid var(--linea); vertical-align: middle; }
  .tabla tbody tr:last-child td { border-bottom: 0; }
  .tabla tbody tr { transition: background-color var(--dur-1); }
  .tabla tbody tr:hover { background: color-mix(in oklch, var(--superficie-2) 60%, transparent); }
  .tabla .der { text-align: end; }
  .tabla .codigo { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--tinta-2); }
  .tabla tr.pendiente { box-shadow: inset 3px 0 0 var(--acento); }
  .tabla .vacia { text-align: center; padding: var(--e-6); color: var(--tinta-2); }
  .tabla.simple td, .tabla.simple th { padding-block: var(--e-2); }
  .desplazable { overflow-x: auto; }
  .desplazable .tabla th { position: static; }

  .precio { font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.01em; white-space: nowrap; }
  .precio .moneda { font-size: 0.72em; font-weight: 500; color: var(--tinta-2); margin-inline-end: 0.15em; }
  .precio.nulo { color: var(--tinta-2); font-weight: 400; }

  .miniatura { display: block; width: 9.5rem; aspect-ratio: 16 / 10; border-radius: var(--r-2); overflow: hidden; background: var(--superficie-3); border: 1px solid var(--linea); }
  .miniatura img { width: 100%; height: 100%; object-fit: contain; }
  .miniatura img[data-vt] { view-transition-name: attr(data-vt type(<custom-ident>)); }

  /* Resultados en tarjetas cuando la tabla no cabe (consulta de contenedor, no de pantalla) */
  @container tabla (width < 44rem) {
    .tabla.resultados thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .tabla.resultados, .tabla.resultados tbody { display: block; }
    .tabla.resultados tr { display: grid; grid-template-columns: 7.5rem 1fr auto; grid-template-areas: "img precio accion" "img estado accion" "img sku sku"; gap: 0.2rem var(--e-3); padding: var(--e-3); border-bottom: 1px solid var(--linea); }
    .tabla.resultados td { border: 0; padding: 0; }
    .tabla.resultados td.c-img { grid-area: img; } .tabla.resultados td.c-precio { grid-area: precio; text-align: start; }
    .tabla.resultados td.c-estado { grid-area: estado; } .tabla.resultados td.c-sku { grid-area: sku; }
    .tabla.resultados td.c-accion { grid-area: accion; align-self: start; }
    .tabla.resultados .miniatura { width: 100%; }
  }
  @container tabla (width < 26rem) {
    .tabla.resultados tr { grid-template-columns: 6rem 1fr; grid-template-areas: "img precio" "img estado" "sku sku" "accion accion"; }
    .tabla.resultados td.c-accion .boton { width: 100%; }
  }

  /* Zona de carga (arrastrar y soltar) */
  .zona-carga {
    position: relative; display: grid; justify-items: center; text-align: center; gap: var(--e-2); padding: var(--e-5) var(--e-4);
    border: 1.5px dashed var(--linea-fuerte); border-radius: var(--r-3); background: var(--superficie-2); cursor: pointer;
    transition: border-color var(--dur-1), background-color var(--dur-1);
  }
  .zona-carga:hover, .zona-carga.encima { border-color: var(--tinta); background: var(--acento-suave); }
  .zona-carga:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
  .zona-carga input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
  .zona-carga .i.grande { color: var(--tinta-2); }
  .zona-carga strong { font-weight: 600; }
  .zona-carga .elegido { font-family: var(--f-mono); font-size: var(--t-xs); }
  .zona-carga.compacta { grid-auto-flow: column; justify-content: start; text-align: start; padding: var(--e-3) var(--e-4); }

  .archivos { list-style: none; padding: 0; display: grid; gap: 1px; border: 1px solid var(--linea); border-radius: var(--r-2); overflow: hidden; background: var(--linea); font-size: var(--t-sm); }
  .archivos:empty { display: none; }
  .archivos li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.15rem var(--e-3); padding: var(--e-2) var(--e-3); background: var(--superficie); }
  .archivos .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .archivos .peso { color: var(--tinta-2); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
  .archivos progress { grid-column: 2 / -1; height: 0.25rem; }
  .archivos li[data-e="listo"] .i { color: var(--ok); }
  .archivos li[data-e="error"] .i { color: var(--mal); }
  .archivos li[data-e="error"] .detalle { grid-column: 2 / -1; color: var(--mal); font-size: var(--t-xs); }
  .archivos li[data-e="repetida"] .i { color: var(--tinta-2); }

  /* Lista simple con filete */
  .lista-filete { list-style: none; padding: 0; }
  .lista-filete > li { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid var(--linea); }
  .lista-filete > li:last-child { border-bottom: 0; }

  /* Detalles plegables con animación de altura (interpolate-size) */
  details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--e-2); font-weight: 550; font-size: var(--t-sm); border-radius: var(--r-1); }
  details > summary::-webkit-details-marker { display: none; }
  details > summary .i { transition: rotate var(--dur-2) var(--curva); }
  details[open] > summary .i.flecha { rotate: 90deg; }
  details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-2) var(--curva), content-visibility var(--dur-2) allow-discrete; }
  details[open]::details-content { block-size: auto; }

  /* Diálogos y popovers nativos, con entrada vía @starting-style */
  dialog {
    width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--linea); border-radius: var(--r-4);
    background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-2);
    opacity: 1; scale: 1; transition: opacity var(--dur-2) var(--curva), scale var(--dur-2) var(--curva), overlay var(--dur-2) allow-discrete, display var(--dur-2) allow-discrete;
  }
  @starting-style { dialog[open] { opacity: 0; scale: 0.97; } }
  dialog:not([open]) { opacity: 0; scale: 0.97; }
  dialog::backdrop { background: oklch(0.15 0.01 95 / 0.45); transition: background-color var(--dur-2), overlay var(--dur-2) allow-discrete, display var(--dur-2) allow-discrete; }
  @starting-style { dialog[open]::backdrop { background: transparent; } }
  dialog > form, dialog > .contenido-dialogo { display: grid; gap: var(--e-4); padding: var(--e-5); }
  dialog h2 { font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-xl); }
  dialog .pie-dialogo { display: flex; justify-content: flex-end; gap: var(--e-2); flex-wrap: wrap; }
  dialog.lienzo { width: min(80rem, calc(100vw - 2rem)); }
  dialog.lienzo img { max-height: calc(100dvh - 9rem); width: auto; margin-inline: auto; border-radius: var(--r-2); }
  html:has(dialog[open]:modal) { overflow: hidden; }

  [popover] {
    margin: 0; padding: var(--e-2); min-width: 15rem; border: 1px solid var(--linea); border-radius: var(--r-3);
    background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-2);
    opacity: 1; translate: 0 0; transition: opacity var(--dur-1), translate var(--dur-1) var(--curva), overlay var(--dur-1) allow-discrete, display var(--dur-1) allow-discrete;
  }
  [popover]:not(:popover-open) { opacity: 0; translate: 0 -4px; }
  @starting-style { [popover]:popover-open { opacity: 0; translate: 0 -4px; } }
  /* Anclaje nativo; sin soporte, el popover se ubica arriba a la derecha. */
  .menu { position: fixed; inset: auto var(--e-4) auto auto; top: calc(var(--alto-cabecera) - 0.25rem); }
  @supports (position-anchor: --a) {
    .disparador-usuario { anchor-name: --usuario; }
    .disparador-descargas { anchor-name: --descargas; }
    .menu { inset: auto; top: auto; position-area: bottom span-left; margin-block-start: var(--e-1); position-try-fallbacks: flip-block, flip-inline; }
    #menu-usuario { position-anchor: --usuario; }
    #menu-descargas { position-anchor: --descargas; }
  }
  .menu .item { display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 2.5rem; padding: 0 var(--e-3); border: 0; border-radius: var(--r-2); background: none; text-decoration: none; text-align: start; font-size: var(--t-sm); color: var(--tinta); }
  .menu .item:hover, .menu .item:focus-visible { background: var(--superficie-2); outline-offset: -2px; }
  .menu .item .texto { display: grid; } .menu .item small { color: var(--tinta-2); font-size: var(--t-xs); }
  .menu hr { margin: var(--e-1) calc(-1 * var(--e-2)); }
  .menu .titulo-menu { padding: var(--e-2) var(--e-3); font-size: var(--t-xs); color: var(--tinta-2); }
  .menu form { display: contents; }
  .selector-tema { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; margin: 0 var(--e-1) var(--e-1); border-radius: var(--r-2); background: var(--superficie-2); border: 1px solid var(--linea); }
  .selector-tema label { display: grid; justify-items: center; gap: 0.1rem; padding: var(--e-1) 0; border-radius: var(--r-1); font-size: var(--t-2xs); color: var(--tinta-2); cursor: pointer; }
  .selector-tema input { position: absolute; opacity: 0; pointer-events: none; }
  .selector-tema label:has(input:checked) { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-1), 0 0 0 1px var(--linea); }
  .selector-tema label:has(input:focus-visible) { outline: 2px solid var(--foco); }
  .avatar { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); font-weight: 650; font-size: var(--t-xs); text-transform: uppercase; }

  /* Estados vacíos */
  .vacio { display: grid; justify-items: center; text-align: center; gap: var(--e-3); padding: var(--e-7) var(--e-4); border: 1px dashed var(--linea-fuerte); border-radius: var(--r-3); }
  .vacio svg.ilustracion { width: 9rem; color: var(--tinta-2); }
  .vacio h2 { font-family: var(--f-titulo); font-weight: 480; font-size: var(--t-xl); }
  .vacio p { color: var(--tinta-2); max-width: 28rem; }

  /* Pasos del levantamiento */
  .pasos { list-style: none; padding: 0; display: grid; gap: var(--e-4); counter-reset: paso; }
  .paso { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0 var(--e-4); }
  .paso::before {
    counter-increment: paso; content: counter(paso); grid-row: 1 / span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
    font-weight: 600; font-size: var(--t-sm); background: var(--superficie); border: 1px solid var(--linea-fuerte); color: var(--tinta-2); z-index: 1;
  }
  .paso:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(1rem - 0.5px); top: 2.25rem; bottom: calc(-1 * var(--e-4) + 0.25rem); border-inline-start: 1px solid var(--linea); }
  .paso[data-e="hecho"]::before { content: "✓"; background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
  .paso[data-e="actual"]::before { background: var(--acento); border-color: oklch(from var(--acento) calc(l - 0.15) c h); color: var(--sobre-acento); }
  .paso > .panel { grid-column: 2; }
  .paso h2 { display: flex; align-items: center; gap: var(--e-2); min-height: 2rem; }
  .paso .estado-paso { margin-inline-start: auto; font-size: var(--t-xs); font-weight: 500; color: var(--tinta-2); }
  @container principal (width < 30rem) {
    .paso { grid-template-columns: minmax(0, 1fr); }
    .paso::before, .paso::after { display: none; }
    .paso > .panel { grid-column: 1; }
  }

  /* Tarjeta de levantamiento en el inicio */
  .lista-lev { list-style: none; padding: 0; display: grid; border: 1px solid var(--linea); border-radius: var(--r-3); background: var(--superficie); overflow: clip; }
  .lista-lev > li { container: fila / inline-size; border-bottom: 1px solid var(--linea); }
  .lista-lev > li:last-child { border-bottom: 0; }
  .fila-lev { display: grid; grid-template-columns: minmax(0, 1fr) 7rem 9rem 8rem 1.25rem; align-items: center; gap: var(--e-2) var(--e-4); padding: var(--e-3) var(--e-4); text-decoration: none; transition: background-color var(--dur-1); }
  .fila-lev:hover { background: var(--superficie-2); }
  .fila-lev .nombre { font-weight: 600; font-size: var(--t-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fila-lev .sub { color: var(--tinta-2); font-size: var(--t-xs); display: flex; flex-wrap: wrap; gap: 0 var(--e-3); }
  .fila-lev .dato { font-size: var(--t-sm); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
  .fila-lev .revisar { color: var(--acento-tinta); font-weight: 600; }
  .fila-lev > .i { color: var(--tinta-2); transition: translate var(--dur-1); }
  .fila-lev:hover > .i { translate: 2px 0; }
  @container fila (width < 40rem) {
    .fila-lev { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n e" "d d"; }
    .fila-lev > .titulo { grid-area: n; } .fila-lev > .c-estado { grid-area: e; }
    .fila-lev > .c-fotos, .fila-lev > .c-revisar { display: inline; } .fila-lev > .i { display: none; }
    .fila-lev > .c-fotos { grid-area: d; } .fila-lev > .c-revisar { grid-area: d; justify-self: end; }
  }
}

/* ------------------------------------------------------------------------------------------------ páginas */
@layer paginas {
  /* Ingreso: portada editorial + formulario */
  .ingreso { display: grid; min-height: calc(100dvh - var(--alto-cabecera) - 5rem); align-items: center; gap: var(--e-6); }
  @container principal (width > 52rem) { .ingreso { grid-template-columns: 1.15fr 1fr; gap: var(--e-8); } }
  .ingreso .portada { display: grid; gap: var(--e-5); }
  .ingreso .portada h1 { font-size: var(--t-hero); font-weight: 430; letter-spacing: -0.02em; max-width: 14ch; }
  .ingreso .portada h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--acento) 62% 92%, transparent 92%); padding-inline: 0.05em; }
  .ingreso .portada p { color: var(--tinta-2); max-width: 34rem; font-size: var(--t-lg); }
  .ingreso .repisa { width: 100%; max-width: 30rem; color: var(--tinta); }
  .ingreso .repisa .fleje { fill: var(--acento); }
  .ingreso .repisa .tenue { stroke: var(--linea-fuerte); }
  .ingreso .tarjeta-ingreso { padding: var(--e-6) var(--e-5); display: grid; gap: var(--e-5); }
  .ingreso .tarjeta-ingreso h2 { font-family: var(--f-titulo); font-weight: 480; font-size: var(--t-xl); }
  @container principal (width <= 52rem) { .ingreso .portada p, .ingreso .repisa { display: none; } .ingreso .portada h1 { font-size: var(--t-titulo); } }

  /* Revisión */
  .revision { display: grid; gap: var(--e-5); }
  @container principal (width > 60rem) { .revision { grid-template-columns: minmax(0, 1.25fr) minmax(22rem, 1fr); align-items: start; } .revision .decision { position: sticky; top: calc(var(--alto-cabecera) + var(--e-4)); } }
  .recortes { display: grid; gap: var(--e-3); }
  @container principal (width > 36rem) and (width <= 60rem) { .recortes { grid-template-columns: 1fr 1fr; } }
  .recorte { margin: 0; display: grid; gap: var(--e-2); }
  .recorte .marco { position: relative; display: block; aspect-ratio: 4 / 3; max-height: 26rem; border-radius: var(--r-3); overflow: hidden; background: var(--superficie-3); border: 1px solid var(--linea); padding: 0; width: 100%; cursor: zoom-in; }
  .recorte .marco img { width: 100%; height: 100%; object-fit: contain; }
  .recorte.fleje .marco img[data-vt] { view-transition-name: attr(data-vt type(<custom-ident>)); }
  .recorte .marco .lupa { position: absolute; inset: var(--e-2) var(--e-2) auto auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-2); background: color-mix(in oklch, var(--superficie) 88%, transparent); color: var(--tinta); }
  .recorte figcaption { font-size: var(--t-sm); color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); justify-content: space-between; }
  .muestra { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; border: 2px solid; vertical-align: -0.05em; margin-inline-end: 0.2rem; }
  .muestra.magenta { border-color: #c000c0; } .muestra.celeste { border-color: #0090c0; }
  .lectura { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e-1) var(--e-4); font-size: var(--t-sm); }
  .lectura dt { color: var(--tinta-2); } .lectura dd { margin: 0; }
  .decision .cuerpo { display: grid; gap: var(--e-5); }
  .barra-decision { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; justify-content: space-between; padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linea); background: var(--superficie-2); border-radius: 0 0 var(--r-3) var(--r-3); }
  /* En pantallas angostas la decisión siempre está a mano: barra fija al pie (respeta la zona segura del iPhone). */
  @container principal (width <= 60rem) {
    .barra-decision { position: fixed; inset: auto 0 0 0; z-index: 15; border-radius: 0; border-top: 1px solid var(--linea-fuerte); box-shadow: 0 -10px 24px -16px oklch(0 0 0 / 0.45); padding-bottom: max(var(--e-3), env(safe-area-inset-bottom)); }
    .revision { padding-bottom: 5rem; }
  }
  .avance-cola { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-sm); color: var(--tinta-2); }
  .avance-cola progress { width: 8rem; }
  .atajos { display: grid; grid-template-columns: max-content 1fr; gap: var(--e-2) var(--e-4); align-items: center; font-size: var(--t-sm); }
  .atajos dd { margin: 0; }
  .solo-teclado { display: none; }
  @media (hover: hover) and (pointer: fine) { .solo-teclado { display: revert; } }
  .opcion kbd.solo-teclado { display: none; }
  @media (hover: hover) and (pointer: fine) { .opcion kbd.solo-teclado { display: inline-grid; } }

  /* Administración */
  .kpis { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-block-end: var(--e-5); }
  .kpi { padding: var(--e-4); display: grid; gap: var(--e-2); align-content: start; }
  .kpi .cifra { font-size: var(--t-cifra); font-weight: 520; letter-spacing: -0.02em; line-height: 1.1; }
  .kpi .cifra small { font-size: var(--t-sm); font-weight: 450; color: var(--tinta-2); letter-spacing: 0; }
  .latido { display: inline-flex; align-items: center; gap: var(--e-2); }
  .latido::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-suave); }
  .latido.sin::before { background: var(--mal); box-shadow: 0 0 0 3px var(--mal-suave); }
  .secciones { display: grid; gap: var(--e-5); }
  @container principal (width > 60rem) { .secciones.dos { grid-template-columns: 1fr 1.6fr; align-items: start; } }

  /* Error */
  .pagina-error { display: grid; justify-items: start; gap: var(--e-4); padding-block: var(--e-8); }
  .pagina-error .codigo { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--tinta-2); padding: 0.2rem 0.5rem; border: 1px solid var(--linea-fuerte); border-radius: var(--r-1); }
  .pagina-error p { color: var(--tinta-2); font-size: var(--t-lg); max-width: 32rem; }
}

/* ------------------------------------------------------------------------------------------------ utilidades */
@layer utilidades {
  .visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pila { display: grid; gap: var(--e-4); } .pila.chica { gap: var(--e-2); } .pila.grande { gap: var(--e-5); }
  .fila { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
  .fila.separada { justify-content: space-between; }
  .crece { flex: 1 1 14rem; min-width: 0; }
  .mt-5 { margin-block-start: var(--e-5); }
  .tenue { color: var(--tinta-2); }
  .truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ------------------------------------------------------------------------------------------------ transiciones entre páginas */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: var(--dur-3); animation-timing-function: var(--curva); }
  ::view-transition-old(contenido) { animation: vt-salir 140ms var(--curva) both; }
  ::view-transition-new(contenido) { animation: vt-entrar 260ms var(--curva) 40ms both; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  @keyframes vt-salir { to { opacity: 0; } }
  @keyframes vt-entrar { from { opacity: 0; translate: 0 6px; } }
}

@media print {
  .cabecera, .pie, .acciones, .barra-decision, .filtros { display: none !important; }
  body { background: #fff; }
}

/* ------------------------------------------------------------------------------------------------ ajustes */
@layer paginas {
  .vacio > .panel { text-align: start; width: min(100%, 28rem); }
  .tabla meter { min-width: 5rem; }
  @container principal (width <= 36rem) {
    .recorte .marco { max-height: 42dvh; }
  }
}
@layer estructura {
  .marca { flex: none; }
  @media (width < 30rem) {
    .nombre-usuario { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .cabecera > div { gap: var(--e-3); }
    .marca-svg { height: 1.3rem; }
  }
}
@layer paginas {
  .ingreso .repisa .fleje { fill: var(--acento); fill-opacity: 1; stroke: var(--sobre-acento); }
  .ingreso .repisa .precio { stroke: var(--sobre-acento); stroke-width: 2; }
}