/* ══════════════════════════════════════════════════════════
   hub_americancollege
   Mismo sistema visual del sitio: tinta, papel, índigo y pespunte.
   ══════════════════════════════════════════════════════════ */

@font-face {
    font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: block;
    src: url('fonts/big-shoulders-display-800-latin.woff2') format('woff2');
}
@font-face {
    font-family: "Archivo"; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap;
    src: url('fonts/archivo-latin.woff2') format('woff2');
}
@view-transition { navigation: auto; }

:root {
    --tinta: #131416; --tinta-2: #3d4046; --gris: #6f727a; --linea: #e3ddd2; --linea-2: #d3ccbe;
    --papel: #faf8f4; --arena: #f1ede5; --blanco: #fff;
    --indigo: #22355a; --pespunte: #cf9245; --bien: #1e7a4c; --bien-fondo: #e8f3ec; --mal: #b3301f; --mal-fondo: #fbeceA;
    --titulos: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --suave: cubic-bezier(0.16, 1, 0.3, 1);
    --orilla: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 16px/1.5 var(--texto); -webkit-font-smoothing: antialiased; }
h1, h2, p, ul, ol, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code { font: 500 0.92em/1.3 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

h1 { font: 800 clamp(40px, 6.4vw, 68px)/0.95 var(--titulos); text-transform: uppercase; overflow-wrap: anywhere; }
h2 { font: 800 clamp(24px, 3vw, 30px)/1 var(--titulos); text-transform: uppercase; }

/* ── Barra ─────────────────────────────────────────────────── */
.barra { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--linea); background: rgba(250, 248, 244, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); view-transition-name: barra; }
.barra__dentro { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1120px; height: 64px; margin: 0 auto; padding: 0 var(--orilla); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 22px/1 var(--titulos); text-transform: uppercase; white-space: nowrap; }
.marca__hub { padding: 6px 9px 5px; border-radius: 7px; background: var(--tinta); color: var(--blanco); }
.menu { display: flex; gap: clamp(2px, 1vw, 6px); }
.menu a { position: relative; padding: 10px 12px; border-radius: 999px; font-weight: 500; font-size: 15px; text-decoration: none; color: var(--tinta-2); transition: color 0.2s, background-color 0.2s; }
.menu a:hover { background: var(--arena); color: var(--tinta); }
.menu a[aria-current] { color: var(--tinta); font-weight: 600; }
.menu a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--pespunte); }

/* ── Página ────────────────────────────────────────────────── */
.pagina { max-width: 1120px; margin: 0 auto; padding: clamp(24px, 4vw, 44px) var(--orilla) 120px; }
.cabeza { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-bottom: clamp(20px, 3vw, 32px); }
.cabeza__dato { max-width: 640px; margin-top: 10px; color: var(--tinta-2); }
.regresar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-weight: 500; font-size: 15px; color: var(--gris); text-decoration: none; transition: color 0.2s, gap 0.3s var(--suave); }
.regresar:hover { color: var(--tinta); gap: 10px; }
.regresar svg { width: 16px; height: 16px; }
.guardado { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14.5px; color: var(--bien); animation: entra 0.3s var(--suave) both; }
.guardado svg { width: 16px; height: 16px; }

.hoja { margin-bottom: 18px; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--linea); border-radius: 18px; background: var(--blanco); animation: entra 0.5s var(--suave) both; }
.hoja > h2, .hoja__cabeza { margin-bottom: 18px; }
.hoja__cabeza { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
.hoja__cabeza .nota { margin-top: 4px; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

.nota { font-size: 14.5px; line-height: 1.45; color: var(--gris); }
.nota a { color: var(--tinta); text-underline-offset: 3px; }
.nota--arriba { display: block; margin: -8px 0 18px; }
.hoja > form + .nota--arriba, .hoja > .hueco + .nota--arriba { margin: 18px 0 0; }
.nota--suelta { margin: 0 4px 18px; }
.hueco { padding: 26px 20px; border-radius: 12px; background: var(--papel); color: var(--tinta-2); text-align: center; }
.hueco a { font-weight: 500; text-underline-offset: 3px; }

/* ── Botones ───────────────────────────────────────────────── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 24px; border: 1px solid var(--tinta); border-radius: 999px; background: transparent; font: 600 15px/1 var(--texto); color: var(--tinta); text-decoration: none; white-space: nowrap; transition: background-color 0.3s var(--suave), color 0.3s var(--suave), border-color 0.3s var(--suave), transform 0.2s; }
.boton svg { width: 17px; height: 17px; flex: none; }
.boton small { padding: 3px 8px; border-radius: 999px; background: var(--arena); font: 500 12.5px/1.2 var(--texto); color: var(--tinta-2); }
.boton:active { transform: scale(0.98); }
.boton--lleno { background: var(--tinta); color: var(--blanco); }
.boton--lleno:hover { background: var(--indigo); border-color: var(--indigo); }
.boton--linea { border-color: var(--linea-2); }
.boton--linea:hover { border-color: var(--tinta); background: var(--tinta); color: var(--blanco); }
.boton--linea:hover small { background: rgba(255, 255, 255, 0.16); color: var(--blanco); }
.boton--claro { border-color: var(--blanco); background: var(--blanco); }
.boton--grande { min-height: 56px; padding: 0 32px; font-size: 16.5px; }
.boton[disabled] { opacity: 0.5; pointer-events: none; }

.enlace { padding: 6px 2px; border: 0; background: none; font: 500 14.5px/1.2 var(--texto); color: var(--tinta-2); text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 4px; transition: color 0.2s, text-decoration-color 0.2s; }
.enlace:hover { color: var(--tinta); text-decoration-color: var(--tinta); }
.enlace--peligro:hover, .enlace.confirmando { color: var(--mal); text-decoration-color: var(--mal); }

.redondo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--gris); transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.redondo svg { width: 17px; height: 17px; }
.redondo:hover { border-color: var(--linea-2); color: var(--tinta); }
.redondo.confirmando { width: auto; padding: 0 14px; border-radius: 999px; border-color: var(--mal); background: var(--mal-fondo); color: var(--mal); font: 600 14px/1 var(--texto); }
.redondo--chico { width: 36px; height: 36px; }

/* ── Campos ────────────────────────────────────────────────── */
.campo { display: block; width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--linea-2); border-radius: 12px; background: var(--blanco); font: 400 16px/1.4 var(--texto); color: var(--tinta); transition: border-color 0.2s, box-shadow 0.2s; }
.campo::placeholder { color: #a7a39b; }
.campo:hover { border-color: #b9b2a3; }
.campo:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(34, 53, 90, 0.14); }
.campo--grande { min-height: 56px; font-size: 18px; }
.campo--codigo { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15.5px; letter-spacing: 0.02em; }
.campo--grande.campo--codigo { font-size: 18px; text-transform: uppercase; }
.campo.mal { border-color: var(--mal); background: var(--mal-fondo); }
.campo.bien { border-color: var(--bien); }
textarea.campo { resize: vertical; }
select.campo { appearance: none; padding-right: 40px; background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131416' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
input[type="number"].campo { -moz-appearance: textfield; appearance: textfield; }
input[type="number"].campo::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type="file"].campo { padding: 9px; font-size: 14.5px; }
input[type="file"].campo::file-selector-button { margin-right: 12px; padding: 7px 14px; border: 0; border-radius: 999px; background: var(--arena); font: 500 14px/1.2 var(--texto); color: var(--tinta); cursor: pointer; }

.con-unidad { position: relative; }
.con-unidad span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14.5px; color: var(--gris); pointer-events: none; }
.con-unidad .campo { padding-right: 44px; }
.con-unidad--antes span { left: 16px; right: auto; font-size: 18px; color: var(--tinta-2); }
.con-unidad--antes .campo { padding: 11px 14px 11px 34px; }

.bloque { margin-bottom: 26px; }
.bloque--corto { max-width: 240px; }
.bloque__titulo, .bloque legend { display: block; margin-bottom: 10px; font-weight: 600; font-size: 17px; }
.bloque .nota { margin-top: 8px; }
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }

.pie { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pie--suelto { margin: 24px 0 0; }

/* Opciones tipo botón (radios y casillas) */
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcion span { display: flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 0 16px; border: 1px solid var(--linea-2); border-radius: 999px; font-weight: 500; font-size: 15px; transition: background-color 0.25s var(--suave), color 0.25s var(--suave), border-color 0.25s var(--suave), transform 0.2s; }
.opcion:hover span { border-color: var(--tinta); }
.opcion input:checked + span { border-color: var(--tinta); background: var(--tinta); color: var(--blanco); }
.opcion input:focus-visible + span { outline: 2px solid var(--indigo); outline-offset: 2px; }
.opcion input:active + span { transform: scale(0.96); }
.opcion--ninguna span { border-style: dashed; color: var(--gris); }
.opciones--tallas .opcion span { min-width: 60px; min-height: 52px; font-size: 16.5px; font-weight: 600; }

/* Buscador sobre las listas de Liverpool */
.combo { position: relative; min-width: 0; }
.combo .campo { padding-right: 40px; background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f727a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.500 4.500'/%3E%3C/svg%3E") no-repeat right 13px center / 17px; }
.combo .campo.mal { background-color: var(--mal-fondo); }
.combo__lista { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 280px; overflow-y: auto; padding: 6px; border: 1px solid var(--linea-2); border-radius: 14px; background: var(--blanco); box-shadow: 0 18px 40px -18px rgba(19, 20, 22, 0.35); animation: entra 0.2s var(--suave) both; }
.combo__lista li { padding: 10px 12px; border-radius: 9px; font-size: 15.5px; cursor: pointer; }
.combo__lista li[aria-selected="true"], .combo__lista li:hover { background: var(--arena); }
.combo__lista li.combo__nada { color: var(--gris); cursor: default; background: none; }

/* ── Inicio ────────────────────────────────────────────────── */
.vacio { display: grid; justify-items: center; gap: 14px; padding: clamp(40px, 7vw, 80px) 20px; border: 1px solid var(--linea); border-radius: 22px; background: var(--blanco); text-align: center; animation: entra 0.5s var(--suave) both; }
.vacio__icono { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: var(--arena); }
.vacio__icono svg { width: 34px; height: 34px; }
.vacio h2 { font-size: clamp(32px, 5vw, 46px); }
.vacio p { max-width: 420px; color: var(--tinta-2); }
.vacio .boton { margin-top: 8px; }
.vacio__pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 760px; margin-top: 30px; }
.vacio__pasos li { display: grid; justify-items: center; gap: 10px; padding: 18px 12px; border-radius: 14px; background: var(--papel); font-size: 14.5px; line-height: 1.35; color: var(--tinta-2); }
.vacio__pasos strong { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tinta); font: 800 18px/1 var(--titulos); color: var(--blanco); }

.listas { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding: 16px 16px 16px 22px; border-radius: 18px; background: var(--indigo); color: var(--blanco); text-decoration: none; animation: entra 0.5s var(--suave) both; }
.listas__marca, .lista-para__marca { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.listas__marca svg, .lista-para__marca svg { width: 18px; height: 18px; }
.listas__texto { flex: 1; font-size: 17px; }
.listas__texto strong { font-weight: 600; }
.listas .boton { color: var(--tinta); }
.listas:hover .boton svg { transform: translateX(3px); }
.listas .boton svg { transition: transform 0.3s var(--suave); }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 16px; }
.tarjeta { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 18px; padding: 14px; border: 1px solid var(--linea); border-radius: 18px; background: var(--blanco); animation: entra 0.5s var(--suave) both; animation-delay: calc(var(--i, 0) * 50ms); transition: border-color 0.3s, box-shadow 0.4s var(--suave), transform 0.4s var(--suave); }
.tarjeta:hover { border-color: var(--linea-2); box-shadow: 0 18px 36px -24px rgba(19, 20, 22, 0.4); transform: translateY(-2px); }
.tarjeta__foto { display: flex; align-items: center; justify-content: center; grid-row: span 2; align-self: start; aspect-ratio: 940 / 1215; overflow: hidden; border-radius: 10px; background: var(--arena); color: #b5ae9f; }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__foto svg { width: 30px; height: 30px; }
.tarjeta__info { display: grid; align-content: start; gap: 3px; min-width: 0; padding-top: 4px; }
.tarjeta__nombre { font: 800 26px/1 var(--titulos); text-transform: uppercase; text-decoration: none; overflow-wrap: anywhere; }
.tarjeta__nombre:hover { color: var(--indigo); }
.tarjeta__detalle { font-size: 14.5px; line-height: 1.4; color: var(--tinta-2); }
.avance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
.avance span { height: 5px; border-radius: 3px; background: var(--linea); }
.avance span.hecho { background: var(--bien); }
.estado { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: var(--gris); }
.estado--lista { font-weight: 600; color: var(--bien); }
.estado svg { width: 15px; height: 15px; }
.tarjeta__acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; align-self: end; margin-top: 12px; }
.tarjeta__acciones .boton { min-height: 40px; padding: 0 18px; font-size: 14.5px; }

/* ── Nueva prenda ──────────────────────────────────────────── */
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mosaico__opcion { position: relative; }
.mosaico__opcion input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mosaico__opcion span { display: flex; align-items: center; min-height: 68px; padding: 14px 18px; border: 1px solid var(--linea-2); border-radius: 14px; font-weight: 600; font-size: 16.5px; line-height: 1.2; transition: background-color 0.25s var(--suave), color 0.25s var(--suave), border-color 0.25s, transform 0.2s; }
.mosaico__opcion:hover span { border-color: var(--tinta); }
.mosaico__opcion input:checked + span { border-color: var(--tinta); background: var(--tinta); color: var(--blanco); }
.mosaico__opcion input:focus-visible + span { outline: 2px solid var(--indigo); outline-offset: 2px; }
.mosaico__opcion input:active + span { transform: scale(0.98); }

/* ── Pasos ─────────────────────────────────────────────────── */
.pasos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 22px; padding: 6px; border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco); view-transition-name: pasos; }
.pasos__uno { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 999px; font-weight: 500; font-size: 15px; color: var(--tinta-2); text-decoration: none; transition: background-color 0.3s var(--suave), color 0.3s var(--suave); }
.pasos__uno:hover { background: var(--arena); }
.pasos__uno[aria-current] { background: var(--tinta); color: var(--blanco); font-weight: 600; }
.pasos__numero { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--arena); font-weight: 600; font-size: 13px; color: var(--tinta); }
.pasos__uno[aria-current] .pasos__numero { background: rgba(255, 255, 255, 0.18); color: var(--blanco); }
.pasos__uno.hecho .pasos__numero { background: var(--bien); color: var(--blanco); }
.pasos__numero svg { width: 13px; height: 13px; }
.pasos__nombre { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ── Colores, tallas y códigos ─────────────────────────────── */
.colores { display: grid; gap: 10px; margin-bottom: 14px; }
.colores__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.colores__fila--nueva { padding: 14px; border-radius: 16px; background: var(--papel); }
.otra-talla { display: grid; grid-template-columns: minmax(0, 240px) auto; justify-content: start; gap: 10px; margin-top: 18px; }

.variantes { margin-bottom: 26px; }
.variantes__color { margin-bottom: 10px; font-weight: 600; font-size: 17px; }
.variantes__fila { display: grid; grid-template-columns: 76px minmax(0, 1fr) 110px 36px; align-items: center; gap: 10px; padding: 5px 0; }
.variantes__fila--titulos { padding: 0 0 4px; font-size: 13.5px; color: var(--gris); }
.variantes__talla { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; background: var(--arena); font-weight: 600; }
.variantes__faltan { margin-top: 8px; font-size: 14.5px; color: var(--gris); }

/* ── Fotos ─────────────────────────────────────────────────── */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.foto__marco { position: relative; overflow: hidden; aspect-ratio: 940 / 1215; border: 1px solid var(--linea); border-radius: 12px; background: var(--arena); }
.foto__marco img { width: 100%; height: 100%; object-fit: cover; }
.foto__numero { position: absolute; left: 8px; top: 8px; min-width: 26px; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font-weight: 600; font-size: 12.5px; line-height: 1.2; text-align: center; }
.foto__numero--principal { background: var(--tinta); color: var(--blanco); }
.foto__alerta { position: absolute; right: 8px; top: 8px; padding: 5px 9px; border-radius: 999px; background: var(--pespunte); font-weight: 600; font-size: 12.5px; line-height: 1.2; color: var(--tinta); }
.foto__acciones { display: flex; align-items: center; justify-content: space-between; gap: 2px; margin-top: 6px; }
.foto__acciones button { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 6px; border: 0; border-radius: 999px; background: none; font: 500 13.5px/1 var(--texto); color: var(--tinta-2); transition: background-color 0.2s, color 0.2s; }
.foto__acciones button:hover { background: var(--arena); color: var(--tinta); }
.foto__acciones button[disabled] { opacity: 0.25; pointer-events: none; }
.foto__acciones svg { width: 15px; height: 15px; }
.soltar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 940 / 1215; padding: 14px; border: 1.5px dashed var(--linea-2); border-radius: 12px; background: var(--papel); font-size: 13.5px; line-height: 1.35; color: var(--gris); text-align: center; cursor: pointer; transition: border-color 0.2s, background-color 0.2s, transform 0.3s var(--suave); }
.soltar strong { font-weight: 600; font-size: 16px; color: var(--tinta); }
.soltar__icono svg { width: 30px; height: 30px; color: var(--tinta); }
.soltar:hover, .soltar.encima { border-color: var(--tinta); background: var(--arena); }
.soltar.encima { transform: scale(1.02); }
.soltar.subiendo { pointer-events: none; border-style: solid; }
.soltar.subiendo .soltar__icono svg { animation: late 1s ease-in-out infinite; }
@keyframes late { 50% { transform: scale(1.18); opacity: 0.5; } }

/* ── Detalles ──────────────────────────────────────────────── */
.copiar { display: grid; grid-template-columns: auto minmax(0, 320px) auto; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px 18px; border-radius: 16px; background: var(--arena); }
.copiar label { font-weight: 500; }
.preguntas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
.preguntas--unidades { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--linea); }
.pregunta { min-width: 0; }
.pregunta__nombre { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-weight: 600; font-size: 15.5px; }
.pregunta--falta .pregunta__nombre::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pespunte); }
.pregunta__ayuda { margin-top: 7px; font-size: 13.5px; line-height: 1.4; color: var(--gris); }
.medidas__titulo { margin: 4px 0 12px; font-weight: 500; color: var(--tinta-2); }
.medidas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.medidas .pregunta__nombre { font-weight: 500; font-size: 14.5px; }
.hoja--plegable { padding: 0; }
.hoja--plegable summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 34px); list-style: none; cursor: pointer; }
.hoja--plegable summary::-webkit-details-marker { display: none; }
.hoja--plegable summary span { font-size: 14.5px; color: var(--gris); }
.hoja--plegable summary span::after { content: "+"; display: inline-block; margin-left: 10px; font-size: 20px; line-height: 0; color: var(--tinta); transition: transform 0.3s var(--suave); }
.hoja--plegable[open] summary span::after { transform: rotate(45deg); }
.hoja--plegable .preguntas { padding: 0 clamp(20px, 3vw, 34px) clamp(20px, 3vw, 34px); }

/* ── Revisar ───────────────────────────────────────────────── */
.lista-para { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; padding: clamp(20px, 3vw, 30px); border-radius: 18px; background: var(--indigo); color: var(--blanco); animation: entra 0.5s var(--suave) both; }
.lista-para > div { flex: 1; }
.lista-para p { margin-top: 6px; color: rgba(255, 255, 255, 0.82); }
.lista-para .boton { color: var(--tinta); }
.lista-para__marca { width: 48px; height: 48px; animation: brinca 0.6s var(--suave) 0.2s both; }
.lista-para__marca svg { width: 24px; height: 24px; }
@keyframes brinca { from { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); } }
.revision > li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--linea); }
.revision > li:first-child { border-top: 0; padding-top: 0; }
.revision > li > div { flex: 1; min-width: 0; }
.revision__marca { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-weight: 600; font-size: 14px; }
.revision .bien .revision__marca { background: var(--bien-fondo); color: var(--bien); }
.revision .mal .revision__marca { background: var(--mal-fondo); color: var(--mal); }
.revision__marca svg { width: 16px; height: 16px; }
.revision__paso { padding-top: 3px; font-weight: 600; }
.revision ul { margin-top: 6px; font-size: 15px; color: var(--tinta-2); }
.revision ul li { padding: 2px 0; }
.revision .boton { min-height: 40px; padding: 0 18px; font-size: 14.5px; }
.avisos { margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: #fbf3e6; font-size: 15px; color: #6d4a1c; }
.avisos li { padding: 2px 0; }

/* ── Tablas ────────────────────────────────────────────────── */
.tabla-caja { overflow-x: auto; margin: 0 -6px; }
.tabla-caja--alta { max-height: 520px; overflow-y: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th, .tabla td { padding: 11px 6px; border-bottom: 1px solid var(--linea); text-align: left; white-space: nowrap; }
.tabla th { position: sticky; top: 0; background: var(--blanco); font-weight: 500; font-size: 13.5px; color: var(--gris); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; }
.punto { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--linea-2); }
.punto--libre { background: var(--bien); }
.punto--puesto { background: var(--indigo); }

/* ── Cargas ────────────────────────────────────────────────── */
.elegir { display: grid; gap: 8px; }
.elegir label { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 12px; border: 1px solid var(--linea); border-radius: 14px; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.elegir label:hover { border-color: var(--linea-2); }
.elegir label:has(input:checked) { border-color: var(--tinta); background: var(--papel); }
.elegir input { position: absolute; opacity: 0; }
.elegir__caja { display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border: 1.5px solid var(--linea-2); border-radius: 8px; color: transparent; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.elegir__caja svg { width: 15px; height: 15px; }
.elegir input:checked + .elegir__caja { border-color: var(--tinta); background: var(--tinta); color: var(--blanco); }
.elegir input:focus-visible + .elegir__caja { outline: 2px solid var(--indigo); outline-offset: 2px; }
.elegir__foto { flex: none; width: 42px; aspect-ratio: 940 / 1215; overflow: hidden; border-radius: 6px; background: var(--arena); }
.elegir__foto img { width: 100%; height: 100%; object-fit: cover; }
.elegir__texto { display: grid; min-width: 0; }
.elegir__texto strong { font: 800 21px/1.1 var(--titulos); text-transform: uppercase; }
.elegir__texto span { font-size: 14.5px; color: var(--tinta-2); }
.carga-nueva { display: grid; grid-template-columns: auto minmax(0, 320px) auto; align-items: center; justify-content: end; gap: 12px; margin-top: 20px; }
.carga-nueva label { font-weight: 500; }

.subir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: paso; }
.subir li { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 14px; background: var(--papel); font-size: 14.5px; line-height: 1.45; color: var(--tinta-2); counter-increment: paso; }
.subir li::before { content: counter(paso); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 50%; background: var(--tinta); font: 800 17px/1 var(--titulos); color: var(--blanco); }
.subir strong { font-weight: 600; font-size: 16px; line-height: 1.25; color: var(--tinta); }
.archivo { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 8px; padding: 8px 14px; border: 1px solid var(--linea-2); border-radius: 999px; background: var(--blanco); font-weight: 500; font-size: 14px; color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; transition: border-color 0.2s; }
.archivo:hover { border-color: var(--tinta); }
.archivo svg { width: 15px; height: 15px; flex: none; }
.carga__pie { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 14.5px; color: var(--gris); }
.carga__pie span { flex: 1 1 240px; }
.subir-plantilla { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-top: 18px; }

/* ── Códigos ───────────────────────────────────────────────── */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.cifras div { display: grid; gap: 4px; padding: 20px 22px; border: 1px solid var(--linea); border-radius: 18px; background: var(--blanco); }
.cifras strong { font: 800 clamp(38px, 5vw, 54px)/1 var(--titulos); }
.cifras span { font-size: 14.5px; color: var(--tinta-2); }

/* ── Aviso flotante ────────────────────────────────────────── */
.aviso { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 80; max-width: min(560px, calc(100vw - 32px)); padding: 14px 22px; border-radius: 16px; background: var(--tinta); font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--blanco); text-align: center; box-shadow: 0 18px 40px -16px rgba(19, 20, 22, 0.5); transform: translateX(-50%); animation: sube 0.5s var(--suave) both; }
.aviso.se-va { opacity: 0; transform: translate(-50%, 12px); transition: opacity 0.3s, transform 0.3s; }
@keyframes sube { from { opacity: 0; transform: translate(-50%, 18px); } }

/* ── Pantallas chicas ──────────────────────────────────────── */
@media (max-width: 760px) {
    .barra__dentro { height: 56px; }
    .marca__ac { display: none; }
    .menu a { padding: 9px 9px; font-size: 14.5px; }
    .menu a[aria-current]::after { left: 9px; right: 9px; }
    .dos, .preguntas { grid-template-columns: minmax(0, 1fr); }
    .pasos { border-radius: 18px; }
    .pasos__uno { flex-direction: column; gap: 4px; min-height: 58px; padding: 6px 2px; border-radius: 13px; font-size: 11.5px; }
    .pasos__nombre { max-width: 100%; }
    .colores__fila { grid-template-columns: minmax(0, 1fr) auto; }
    .colores__fila > :first-child { grid-column: 1 / -1; }
    .colores__fila--nueva .boton { grid-column: 1 / -1; }
    .colores__fila--nueva .combo { grid-column: 1 / -1; }
    .variantes__fila { grid-template-columns: 56px minmax(0, 1fr) 68px 32px; gap: 6px; }
    .variantes__fila .campo { padding: 11px 9px; }
    .variantes__fila .campo--codigo { font-size: 14px; letter-spacing: 0; }
    .medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .copiar, .carga-nueva { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
    .subir, .vacio__pasos { grid-template-columns: minmax(0, 1fr); }
    .vacio__pasos li { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; }
    .cifras div { padding: 16px; }
    .tarjetas { grid-template-columns: minmax(0, 1fr); }
    .tarjeta { grid-template-columns: 92px minmax(0, 1fr); gap: 0 14px; }
    .listas { flex-wrap: wrap; }
    .listas .boton, .lista-para .boton { flex: 1 1 100%; }
    .lista-para { flex-wrap: wrap; }
    .fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pie .boton { flex: 1 1 auto; }
    .subir-plantilla, .otra-talla { grid-template-columns: minmax(0, 1fr); }
    .hoja__cabeza .boton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
    @view-transition { navigation: none; }
}

/* ══════════════════════════════════════════════════════════
   2.0 · Transiciones, menú, Liverpool, stock, cotizaciones, acceso
   ══════════════════════════════════════════════════════════ */

/* Transición entre páginas: el contenido se desliza, la barra se queda. */
::view-transition-old(root) { animation: 0.22s ease both sale; }
::view-transition-new(root) { animation: 0.45s var(--suave) both llega; }
@keyframes sale { to { opacity: 0; transform: translateY(-6px); } }
@keyframes llega { from { opacity: 0; transform: translateY(12px); } }
::view-transition-old(barra) { display: none; }
::view-transition-new(barra) { animation: none; }

/* Menú */
.menu a { display: inline-flex; align-items: center; gap: 6px; }
.menu__vivo { width: 7px; height: 7px; border-radius: 50%; background: var(--bien); box-shadow: 0 0 0 0 rgba(30, 122, 76, 0.5); animation: late-vivo 2s ease-out infinite; }
@keyframes late-vivo { 0% { box-shadow: 0 0 0 0 rgba(30, 122, 76, 0.45); } 70% { box-shadow: 0 0 0 7px rgba(30, 122, 76, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 122, 76, 0); } }
.menu__mas { position: relative; }
.menu__mas summary { list-style: none; padding: 10px 12px; border-radius: 999px; font-weight: 500; font-size: 15px; color: var(--tinta-2); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.menu__mas summary::-webkit-details-marker { display: none; }
.menu__mas summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform 0.3s var(--suave); }
.menu__mas[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.menu__mas summary:hover, .menu__mas[open] summary { background: var(--arena); color: var(--tinta); }
.menu__mas summary[aria-current] { color: var(--tinta); font-weight: 600; }
.menu__lista { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; display: grid; min-width: 200px; padding: 6px; border: 1px solid var(--linea-2); border-radius: 14px; background: var(--blanco); box-shadow: 0 18px 40px -18px rgba(19, 20, 22, 0.35); animation: entra 0.25s var(--suave) both; }
.menu__lista a, .menu__lista button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: none; font: 500 15px/1.3 var(--texto); color: var(--tinta-2); text-align: left; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.menu__lista a:hover, .menu__lista button:hover, .menu__lista a[aria-current] { background: var(--arena); color: var(--tinta); }
.menu__lista form { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--linea); }

/* Cabeza con acciones */
.cabeza__acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.boton.cargando { pointer-events: none; opacity: 0.7; }
.boton.cargando svg { animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.boton[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* Diálogo de confirmación */
.dialogo { max-width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; background: var(--blanco); color: var(--tinta); box-shadow: 0 30px 80px -30px rgba(19, 20, 22, 0.5); }
.dialogo::backdrop { background: rgba(19, 20, 22, 0.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: aparece 0.25s ease both; }
.dialogo[open] { animation: brota 0.35s var(--suave) both; }
@keyframes aparece { from { opacity: 0; } }
@keyframes brota { from { opacity: 0; transform: scale(0.94) translateY(10px); } }
.dialogo__caja { display: grid; gap: 10px; padding: 26px 28px 24px; }
.dialogo__caja p { color: var(--tinta-2); line-height: 1.5; }
.dialogo__pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }

/* Tiras de aviso en inicio */
.tira { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding: 14px 14px 14px 22px; border-radius: 16px; background: var(--tinta); color: var(--blanco); text-decoration: none; animation: entra 0.5s var(--suave) both; }
.tira--ojo { background: #6d4a1c; }
.tira--mal { background: var(--mal); }
.tira__texto { flex: 1; font-size: 16px; }
.tira__texto strong { font-weight: 600; }
.tira .boton { min-height: 40px; padding: 0 16px; font-size: 14px; color: var(--tinta); }

/* Cifras */
.cifras--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cifras--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cifras div { position: relative; overflow: hidden; }
.cifras div::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background-color 0.3s; }
.cifras .cifras__mal strong { color: var(--mal); }
.cifras .cifras__mal::after { background: var(--mal); }
.cifras .cifras__ojo strong { color: #b06a12; }
.cifras .cifras__ojo::after { background: var(--pespunte); }
.cifras strong[data-cuenta] { transition: transform 0.3s var(--suave); }
.cifras strong.salta { animation: salto 0.5s var(--suave); }
@keyframes salto { 40% { transform: scale(1.15); } }

/* Etiquetas y números */
.etiqueta { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--arena); font-weight: 500; font-size: 12.5px; line-height: 1; color: var(--tinta-2); white-space: nowrap; }
.etiqueta--bien { background: var(--bien-fondo); color: var(--bien); }
.etiqueta--mal { background: var(--mal-fondo); color: var(--mal); }
.etiqueta--ojo { background: #fbf3e6; color: #8a5a17; }
.tabla .num--mal { color: var(--mal); font-weight: 600; }
.tabla .num--ojo { color: #b06a12; font-weight: 600; }
.tabla tbody tr { transition: background-color 0.2s; }
.tabla tbody tr:hover { background: var(--papel); }

/* Liverpool */
.columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.columnas > .hoja { margin-bottom: 0; }
.columnas + .hoja { margin-top: 18px; }
.vivo__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--linea-2); transition: background-color 0.3s; }
.vivo__punto.activo { background: var(--bien); animation: late-vivo 2s ease-out infinite; }
.pedidos { display: grid; gap: 8px; }
.pedido details { border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; transition: border-color 0.2s; }
.pedido details[open], .pedido details:hover { border-color: var(--linea-2); }
.pedido summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; list-style: none; cursor: pointer; }
.pedido summary::-webkit-details-marker { display: none; }
.pedido--abierto summary { border-left: 3px solid var(--pespunte); }
.pedido__texto { display: grid; gap: 2px; min-width: 0; }
.pedido__texto strong { font-weight: 600; }
.pedido__texto span { font-size: 14px; color: var(--gris); }
.pedido__lineas { padding: 4px 14px 14px 54px; font-size: 14.5px; color: var(--tinta-2); animation: entra 0.3s var(--suave) both; }
.pedido__lineas li { padding: 3px 0; }
.novedades { display: grid; gap: 2px; max-height: 420px; overflow-y: auto; }
.novedad { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14.5px; line-height: 1.4; color: var(--tinta-2); animation: entra 0.4s var(--suave) both; }
.novedad time { font-size: 13px; color: var(--gris); }
.novedad--alerta { background: #fbf3e6; color: #6d4a1c; }
.novedad--error { background: var(--mal-fondo); color: var(--mal); }
.novedad--pedido { background: var(--bien-fondo); color: var(--bien); font-weight: 500; }
.novedad--vacia { display: block; color: var(--gris); }
.novedad.nueva { animation: resalta 1.6s var(--suave) both; }
@keyframes resalta { 0% { opacity: 0; transform: translateY(-8px); background: var(--arena); } 30% { opacity: 1; transform: none; } }
.opciones--chicas .opcion span { min-height: 36px; padding: 0 13px; font-size: 14px; }

/* Stock: una tabla con las tallas a la vista, hecha para cientos de prendas. */
.pagina--inventario { max-width: 1560px; padding-top: 0; }
body:has(.pagina--inventario) .barra__dentro { max-width: 1560px; }

/* Tira fija: título, filtros y páginas en un renglón. */
.inventario__tira { position: sticky; top: 65px; z-index: 30; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 12px 0; background: var(--papel); }
.inventario__titulo { position: relative; flex: none; min-width: 176px; }
.inventario__titulo h1 { font-size: 30px; line-height: 1; }
.inventario__titulo p:not(.guardado) { margin-top: 3px; font-size: 12.5px; color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inventario__titulo .guardado { position: absolute; left: 78px; top: 5px; font-size: 13px; white-space: nowrap; animation: aparece 0.2s ease-out both; }
.inventario__filtros { display: flex; align-items: center; flex: 1 1 auto; flex-wrap: wrap; gap: 8px; min-width: 0; }
.inventario__filtros .campo { min-height: 40px; padding: 7px 12px; border-radius: 10px; font-size: 14.5px; }
.inventario__filtros input.campo { flex: 1 1 200px; width: auto; max-width: 320px; }
.inventario__filtros select.campo { flex: none; width: auto; max-width: 190px; padding-right: 34px; background-position: right 10px center; }
.inventario__lado { margin-left: auto; }

.pestanas { display: flex; padding: 3px; border-radius: 11px; background: var(--arena); }
.pestana { position: relative; }
.pestana input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pestana span { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 8px; font-weight: 500; font-size: 14px; color: var(--tinta-2); white-space: nowrap; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.pestana b { font-weight: 500; font-size: 12.5px; color: var(--gris); font-variant-numeric: tabular-nums; }
.pestana:hover span { color: var(--tinta); }
.pestana input:checked + span { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 2px rgba(19, 20, 22, 0.14); }
.pestana input:focus-visible + span { outline: 2px solid var(--indigo); outline-offset: 1px; }

.paginas { display: flex; align-items: center; gap: 6px; }
.paginas__donde { margin-right: 4px; font-size: 13.5px; color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.paginas__boton { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--linea-2); border-radius: 10px; background: var(--blanco); color: var(--tinta); transition: border-color 0.2s, background-color 0.2s; }
.paginas__boton svg { width: 16px; height: 16px; }
a.paginas__boton:hover { border-color: var(--tinta); }
a.paginas__boton:active { background: var(--arena); }
.paginas__boton[aria-disabled] { opacity: 0.4; }

/* La tabla: un renglón por color; lo de la prenda abarca todos sus colores. */
.inventario__lista { overflow: clip; border: 1px solid var(--linea); border-radius: 16px; background: var(--blanco); transition: opacity 0.15s; }
.inventario.cargando .inventario__lista { opacity: 0.55; transition-delay: 0.12s; }
.inventario__lista > .hueco { margin: 18px; }
.inv { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; font-variant-numeric: tabular-nums; }
.inv th { position: sticky; top: calc(65px + var(--tira, 64px)); z-index: 5; padding: 9px 10px; border-bottom: 1px solid var(--linea-2); background: var(--arena); font-weight: 600; font-size: 12.5px; color: var(--gris); text-align: left; white-space: nowrap; }
.inv td { padding: 6px 10px; border-bottom: 1px solid var(--linea-2); vertical-align: middle; transition: background-color 0.15s; }
.inv tr:not(:last-child) > td:not([rowspan]) { border-bottom-color: var(--arena); }
.inv tbody:last-child > tr:last-child > td, .inv tbody:last-child > tr > td[rowspan] { border-bottom: 0; }
.inv td[rowspan]:not([rowspan="1"]) { padding-top: 10px; vertical-align: top; }
.inv tbody:hover > tr > td { background: #fdfcfa; }
.inv tbody:has([data-elegir]:checked) > tr > td { background: #f8f5ef; }
.inv .num { text-align: right; }
.inv__marca { width: 44px; }
.inv__prenda { width: 224px; }
.inv__color { width: 152px; }
.inv__piezas { width: 70px; }
.inv__estado { width: 172px; }
.inv__precio { width: 116px; }
.inv__ligas { width: 88px; }
.inv td.inv__marca, .inv th.inv__marca { padding-right: 0; padding-left: 14px; }
.inv td.inv__marca[rowspan]:not([rowspan="1"]) { padding-top: 11px; }
.inv .elegir__caja { width: 22px; height: 22px; border-radius: 7px; background: var(--blanco); }
.inv .elegir__caja svg { width: 13px; height: 13px; }
.elegir__caja-linea input:checked + .elegir__caja, .elegir__caja-linea input:indeterminate + .elegir__caja { border-color: var(--tinta); background: var(--tinta); color: var(--blanco); }
.elegir__caja-linea input:indeterminate + .elegir__caja svg { display: none; }
.elegir__caja-linea input:indeterminate + .elegir__caja::after { content: ""; width: 10px; height: 2px; border-radius: 2px; background: var(--blanco); }
.inv__modelo { display: block; overflow: hidden; font: 800 19px/1.15 var(--titulos); text-decoration: none; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.inv__modelo:hover { color: var(--indigo); }
.inv__nombre, .inv__total { display: block; overflow: hidden; font-size: 12.5px; line-height: 1.4; color: var(--gris); text-overflow: ellipsis; white-space: nowrap; }
.inv__total { margin-top: 2px; font-weight: 500; color: var(--tinta-2); }
.inv td.inv__color { overflow: hidden; font-weight: 500; color: var(--tinta-2); text-overflow: ellipsis; white-space: nowrap; }
.inv td.inv__piezas { font-weight: 600; }
.inv td.inv__prenda { cursor: pointer; }
.inv td.inv__prenda:hover .inv__modelo { color: var(--indigo); }
.inv tbody.activa > tr > td { background: #f6f2ea; }
.inv tbody.activa > tr > td.inv__marca { box-shadow: inset 3px 0 0 var(--pespunte); }
.inv tbody { scroll-margin-top: calc(120px + var(--tira, 64px)); }
.inv__foto { display: inline-block; width: 24px; height: 31px; margin-right: 8px; padding: 0; overflow: hidden; border: 0; border-radius: 5px; background: var(--arena); vertical-align: middle; }
button.inv__foto { cursor: pointer; transition: box-shadow 0.15s; }
button.inv__foto:hover { box-shadow: 0 0 0 2px var(--tinta); }
.inv__foto img { width: 100%; height: 100%; object-fit: cover; }
.inv__etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
.inv .etiqueta { min-height: 22px; padding: 0 8px; font-size: 12px; }
.inv__ligas .enlace { display: block; width: max-content; padding: 2px 0; font-size: 13px; line-height: 1.3; }
.orden { display: inline-flex; gap: 4px; color: inherit; text-decoration: none; transition: color 0.2s; }
.orden:hover, .orden i { color: var(--tinta); }
.orden i { font-style: normal; }

/* Cada talla: su nombre y sus piezas en una misma cajita. */
.tallas { display: flex; flex-wrap: wrap; gap: 4px; }
.talla { display: flex; flex-direction: column; flex: none; width: 66px; }
.talla__caja, .precio { display: flex; align-items: center; height: 32px; padding-left: 7px; border: 1px solid var(--linea-2); border-radius: 8px; background: var(--blanco); cursor: text; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; }
.talla__caja:hover, .precio:hover { border-color: #b9b2a3; }
.talla__caja:focus-within, .precio:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(34, 53, 90, 0.14); }
.talla__nombre, .precio span { flex: none; font-weight: 500; font-size: 11.5px; color: var(--gris); white-space: nowrap; }
.talla input, .precio input { flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0 7px 0 2px; border: 0; outline: 0; background: none; font-weight: 600; font-size: 14.5px; text-align: right; }
.precio input::placeholder { font-weight: 400; color: #a7a39b; }
.talla--hueco { height: 32px; border: 1px dashed var(--linea); border-radius: 8px; }
.talla__lvp, .precio__lvp { display: block; margin-top: 2px; padding-right: 7px; font-weight: 600; font-size: 11.5px; line-height: 1.25; color: #8a5a17; text-align: right; white-space: nowrap; }
.talla__lvp { display: none; }
.talla--difiere .talla__lvp { display: block; }
.talla--difiere .talla__caja { border-color: #e6c690; background: #fffaf0; }
.talla--agotada .talla__caja { border-color: #f1c9c3; background: #fff7f5; }
.talla--agotada input { color: var(--mal); }
.talla__caja.guardo, .precio.guardo { animation: guardo 1s ease-out; }
.talla__caja.falla, .precio.falla { border-color: var(--mal); background: var(--mal-fondo); }
@keyframes guardo { 0%, 35% { border-color: var(--bien); background: var(--bien-fondo); } }

.inventario__pie { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding: 10px 14px; border-top: 1px solid var(--linea-2); }
.inventario__pie .nota { font-size: 13px; }
kbd { display: inline-block; min-width: 20px; padding: 1px 5px; border: 1px solid var(--linea-2); border-radius: 5px; background: var(--papel); font: 500 11.5px/1.5 var(--texto); color: var(--tinta-2); text-align: center; }

/* Lo elegido: una barra que flota abajo y no mueve la tabla. */
.seleccion { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 24px); padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--tinta); color: var(--blanco); box-shadow: 0 18px 40px -16px rgba(19, 20, 22, 0.55); transform: translateX(-50%); animation: sube 0.35s var(--suave) both; }
.seleccion p { margin-right: 4px; white-space: nowrap; color: rgba(255, 255, 255, 0.78); }
.seleccion strong { font-weight: 600; color: var(--blanco); }
.seleccion .enlace { margin-right: 6px; color: rgba(255, 255, 255, 0.78); text-decoration-color: rgba(255, 255, 255, 0.35); }
.seleccion .enlace:hover { color: var(--blanco); text-decoration-color: var(--blanco); }
.seleccion .boton { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.seleccion .boton--linea { border-color: rgba(255, 255, 255, 0.4); color: var(--blanco); }
.seleccion .boton--linea:hover, .seleccion .boton--lleno { border-color: var(--blanco); background: var(--blanco); color: var(--tinta); }
.seleccion .boton--lleno:hover { border-color: var(--arena); background: var(--arena); }
.seleccion .boton[disabled] { opacity: 0.4; pointer-events: auto; cursor: not-allowed; }
body:has(.seleccion:not([hidden])) .aviso { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* Vistazo: la foto en grande al pasar el cursor por la miniatura. */
.vistazo { position: fixed; z-index: 70; width: 232px; aspect-ratio: 940 / 1215; overflow: hidden; border-radius: 14px; background: var(--arena); box-shadow: 0 24px 60px -20px rgba(19, 20, 22, 0.5), 0 0 0 1px rgba(19, 20, 22, 0.08); pointer-events: none; animation: aparece 0.12s ease-out both; }
.vistazo img { width: 100%; height: 100%; object-fit: cover; }

/* Vista previa: la prenda en un panel de junto, sin salir de la tabla. */
/* Empieza debajo de la tira: buscador, filtros y páginas siguen a la mano. */
.ficha { position: fixed; top: calc(65px + var(--tira, 64px)); right: 0; bottom: 0; z-index: 45; display: flex; flex-direction: column; width: min(480px, 100vw); overflow: hidden; border-top: 1px solid var(--linea-2); border-left: 1px solid var(--linea-2); border-top-left-radius: 16px; background: var(--blanco); box-shadow: -28px 0 56px -36px rgba(19, 20, 22, 0.4); animation: llega-ficha 0.28s var(--suave) both; }
@keyframes llega-ficha { from { opacity: 0; transform: translateX(28px); } }
.ficha__hoja { display: flex; flex: 1; flex-direction: column; min-height: 0; transition: opacity 0.15s; }
.ficha.cargando .ficha__hoja { opacity: 0.5; transition-delay: 0.12s; }
.ficha__cabeza { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--linea); }
.ficha__titulo { flex: 1; min-width: 0; }
.ficha__titulo h2 { overflow: hidden; font-size: 26px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.ficha__titulo p { overflow: hidden; font-size: 13px; line-height: 1.35; color: var(--gris); text-overflow: ellipsis; white-space: nowrap; }
.ficha__mando { display: flex; flex: none; gap: 4px; }
button.paginas__boton { padding: 0; cursor: pointer; }
button.paginas__boton:hover { border-color: var(--tinta); }
button.paginas__boton[disabled] { opacity: 0.4; pointer-events: none; }
.ficha__cuerpo { display: grid; flex: 1; align-content: start; gap: 16px; padding: 16px 20px 32px; overflow-y: auto; overscroll-behavior: contain; }
.ficha__arriba { display: grid; grid-template-columns: 164px minmax(0, 1fr); gap: 16px; }
.ficha__foto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 940 / 1215; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: var(--arena); font-weight: 500; font-size: 13px; color: var(--gris); text-decoration: none; cursor: zoom-in; }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha__foto svg { width: 28px; height: 28px; }
.ficha__foto--vacia { cursor: pointer; }
.ficha__foto--vacia:hover { color: var(--tinta); }
.ficha__datos { display: grid; align-content: start; gap: 12px; min-width: 0; }
.ficha__dato > span:first-child { display: block; margin-bottom: 4px; font-size: 12px; color: var(--gris); }
.ficha__dato strong { font-weight: 600; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ficha__dato .precio { width: 132px; height: 36px; }
.ficha__dato .precio__lvp { width: 132px; }
.ficha .etiqueta { min-height: 22px; padding: 0 8px; font-size: 12px; }
.ficha__ligas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 2px; }
.ficha__ligas .boton { min-height: 40px; padding: 0 18px; font-size: 14px; }
.ficha__minis { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha__mini { width: 42px; aspect-ratio: 940 / 1215; padding: 0; overflow: hidden; border: 0; border-radius: 7px; background: var(--arena); cursor: pointer; transition: box-shadow 0.15s; }
.ficha__mini img { width: 100%; height: 100%; object-fit: cover; }
.ficha__mini:hover { box-shadow: 0 0 0 2px var(--linea-2); }
.ficha__mini[aria-current] { box-shadow: 0 0 0 2px var(--tinta); }
.ficha__colores { display: grid; gap: 14px; font-variant-numeric: tabular-nums; }
.ficha .tallas { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); }
.ficha .talla { width: auto; }
.ficha__color-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: 13px; color: var(--gris); }
.ficha__color-cabeza b { font-weight: 600; font-size: 14px; color: var(--tinta); }
.ficha__color-nombre { padding: 0; border: 0; background: none; font-weight: 600; font-size: 14.5px; color: var(--tinta); }
button.ficha__color-nombre:hover { color: var(--indigo); }
.ficha__color.resalta .ficha__color-nombre { color: var(--indigo); }
.ficha__mas { border-top: 1px solid var(--linea); }
.ficha__mas summary { padding: 12px 0 2px; font-weight: 500; font-size: 14px; cursor: pointer; }
.ficha__mas .tabla { margin-top: 6px; font-size: 13px; }
.ficha__mas .tabla th, .ficha__mas .tabla td { padding: 7px 6px; }
.ficha__texto { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--tinta-2); white-space: pre-line; }
@media (min-width: 1100px) { .inventario:has(.ficha:not([hidden])) ~ .seleccion { left: calc(50% - 240px); } }

/* Lupa: la foto a todo lo alto. */
.lupa { max-width: none; max-height: none; padding: 0; overflow: visible; border: 0; background: none; }
.lupa img { display: block; max-width: 94vw; max-height: 92vh; border-radius: 14px; cursor: zoom-out; }
.lupa::backdrop { background: rgba(19, 20, 22, 0.62); animation: aparece 0.2s ease both; }
.lupa[open] { animation: brota 0.3s var(--suave) both; }

.elegir__caja-linea { position: relative; display: flex; cursor: pointer; }
.elegir__caja-linea input { position: absolute; opacity: 0; }
.elegir__caja-linea input:focus-visible + .elegir__caja { outline: 2px solid var(--indigo); outline-offset: 2px; }

@media (max-width: 1400px) {
    .inventario__filtros { order: 3; flex-basis: 100%; }
}
@media (max-width: 1240px) {
    .inv__ligas { display: none; }
    .inv__prenda { width: 196px; }
    .inv__color { width: 138px; }
    .inv__estado { width: 128px; }
}
/* Pantallas chicas: cada prenda se vuelve una ficha. */
@media (max-width: 860px) {
    .inventario__tira { position: static; }
    .inventario__filtros input.campo { flex-basis: 100%; max-width: none; }
    .inventario__filtros select.campo { flex: 1 1 auto; max-width: none; }
    .inventario__filtros .campo, .talla input, .precio input { font-size: 16px; }
    .pestanas { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
    .inv, .inv thead, .inv tbody { display: block; }
    .inv thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .inv tbody { display: grid; grid-template-columns: auto minmax(0, 1fr) 104px; grid-auto-flow: row dense; align-items: center; gap: 0 10px; padding: 14px; border-bottom: 1px solid var(--linea-2); }
    .inv tbody:last-child { border-bottom: 0; }
    .inv tr { display: contents; }
    .inv td { display: block; width: auto; padding: 0; border: 0; background: none !important; }
    .inv td[rowspan]:not([rowspan="1"]), .inv td.inv__marca[rowspan]:not([rowspan="1"]) { padding: 0; }
    .inv td.inv__marca { grid-area: 1 / 1; padding: 0; }
    .inv td.inv__prenda { grid-area: 1 / 2; }
    .inv td.inv__precio { grid-area: 1 / 3; }
    .inv td.inv__estado { grid-area: 2 / 1 / 3 / 4; margin-top: 8px; }
    .inv td.inv__ligas { display: none; }
    .inv td.inv__color { grid-column: 1 / 3; margin-top: 12px; }
    .inv td.inv__piezas { grid-column: 3; margin-top: 12px; font-size: 13px; color: var(--gris); }
    .inv td.inv__piezas::after { content: " pz"; font-weight: 400; }
    .inv td.inv__tallas { grid-column: 1 / -1; margin-top: 5px; }
    .tallas { gap: 6px; }
    .talla { width: 84px; }
    .talla__caja, .precio, .talla--hueco { height: 40px; }
    .inventario__pie .nota { display: none; }
    .ficha { top: 0; z-index: 70; border: 0; border-radius: 0; }
    .inv td.inv__color { display: flex; align-items: center; }
    .seleccion { flex-wrap: wrap; justify-content: center; width: calc(100vw - 24px); border-radius: 20px; padding: 12px; }
}

/* Cotizaciones */
.cotizacion-nueva, .agregar-linea { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: 10px; }
.agregar-linea { grid-template-columns: minmax(0, 1fr) 90px 140px auto; margin-bottom: 10px; }
.agregar-linea + .nota { margin-bottom: 16px; }
.agregar-linea--libre { padding: 12px; border-radius: 14px; background: var(--papel); animation: entra 0.3s var(--suave) both; }
.lista-cot { display: grid; gap: 10px; }
.cot { display: flex; align-items: center; gap: 12px; animation: entra 0.5s var(--suave) both; animation-delay: calc(var(--i, 0) * 40ms); }
.cot__cuerpo { display: grid; flex: 1; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--linea); border-radius: 16px; background: var(--blanco); text-decoration: none; transition: border-color 0.2s, transform 0.3s var(--suave), box-shadow 0.3s var(--suave); }
.cot__cuerpo:hover { border-color: var(--linea-2); transform: translateY(-1px); box-shadow: 0 14px 30px -20px rgba(19, 20, 22, 0.4); }
.cot__folio { font: 800 20px/1 var(--titulos); }
.cot__texto { display: grid; gap: 2px; min-width: 0; }
.cot__texto strong { font-weight: 600; }
.cot__texto span { font-size: 14px; color: var(--gris); }
.cot__total { font-weight: 600; font-size: 17px; }
.columnas--cot { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.columnas--cot .hoja { margin-bottom: 18px; }
.preguntas--una { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lineas { display: grid; gap: 8px; }
.linea { animation: entra 0.4s var(--suave) both; animation-delay: calc(var(--i, 0) * 30ms); }
.linea__form { display: grid; grid-template-columns: minmax(0, 1fr) 76px 120px 90px 36px; align-items: center; gap: 8px; }
.linea__form .campo { min-height: 42px; }
.linea__importe { text-align: right; font-weight: 600; }
.linea__sku { display: block; margin: 4px 0 0 14px; font-size: 12.5px; color: var(--gris); }
.totales { display: grid; gap: 10px; }
.totales div { display: flex; justify-content: space-between; align-items: baseline; color: var(--tinta-2); }
.totales strong { font-weight: 600; color: var(--tinta); }
.totales__total { padding-top: 10px; border-top: 1px solid var(--linea); }
.totales__total strong { font: 800 32px/1 var(--titulos); }

/* Traer del sitio */
.bloque--sitio { padding: 18px 20px; border-radius: 16px; background: var(--arena); }
.bloque--sitio .nota { margin: -4px 0 12px; }
.traer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.combo__lista li.combo__sitio { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; }
.combo__sitio img { width: 36px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 5px; background: var(--arena); }
.combo__sitio span { display: block; font-size: 13px; color: var(--gris); }

/* Fotos: arrastrar para ordenar */
.foto[draggable] { cursor: grab; transition: transform 0.3s var(--suave), opacity 0.2s; }
.foto.arrastrando { opacity: 0.35; transform: scale(0.96); }
.foto.destino .foto__marco { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* Entrar */
body.entrar { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.entrar__caja { width: min(420px, 100%); padding: 36px 34px; border: 1px solid var(--linea); border-radius: 24px; background: var(--blanco); animation: brota 0.5s var(--suave) both; }
.entrar__caja .marca { margin-bottom: 26px; }
.entrar__caja h1 { font-size: clamp(36px, 7vw, 48px); }
.entrar__texto { margin: 10px 0 22px; color: var(--tinta-2); }
.entrar__form { display: grid; gap: 8px; }
.entrar__form .boton { margin-top: 14px; }
.entrar__form .pregunta__nombre { margin: 8px 0 0; }
.entrar__bloqueo { color: var(--mal); font-size: 14.5px; }

/* Imprimir cotización */
body.imprimir { background: var(--blanco); }
.imprimir__hoja { max-width: 800px; margin: 0 auto; padding: 48px 32px; }
.imprimir__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid var(--tinta); }
.imprimir__negocio { font: 800 30px/1 var(--titulos); text-transform: uppercase; }
.imprimir__folio { text-align: right; }
.imprimir__folio h1 { font-size: 34px; }
.imprimir__cliente { margin-bottom: 18px; }
.imprimir .tabla th, .imprimir .tabla td { white-space: normal; }
.imprimir .tabla tfoot td { border-bottom: 0; padding: 6px; }
.imprimir__total td { font: 800 22px/1 var(--titulos); }
.imprimir__notas { margin-top: 24px; white-space: pre-line; color: var(--tinta-2); }
.imprimir__pie { margin-top: 32px; }
@media print { .no-imprimir { display: none; } .imprimir__hoja { padding: 0; } }

@media (max-width: 760px) {
    .columnas, .columnas--cot { grid-template-columns: minmax(0, 1fr); }
    .cifras--4, .cifras--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .seleccion .boton { flex: 1 1 auto; }
    .cotizacion-nueva, .agregar-linea, .traer { grid-template-columns: minmax(0, 1fr); }
    .linea__form { grid-template-columns: minmax(0, 1fr) 64px 100px 36px; }
    .linea__importe { grid-column: 1 / -1; text-align: left; }
    .cot__cuerpo { grid-template-columns: auto minmax(0, 1fr); }
    .cot__total, .cot .etiqueta { grid-column: 2; }
    .pedido summary { grid-template-columns: minmax(0, 1fr) auto; }
    .pedido__id { grid-column: 1 / -1; }
    .menu__lista { right: -8px; }
}

/* Menú en pantallas chicas: se desliza de lado, sin desbordar la página. */
.barra__dentro { min-width: 0; }
.menu { min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.menu::-webkit-scrollbar { display: none; }
.menu__mas { flex: none; }
.menu__mas .menu__lista { position: fixed; right: var(--orilla); top: 60px; }
@media (max-width: 760px) {
    .menu { flex: 1; justify-content: flex-start; padding-right: 24px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .menu a, .menu__mas summary { white-space: nowrap; }
    .linea__form { grid-template-columns: 64px 100px minmax(0, 1fr) 36px; }
    .linea__form .linea__desc { grid-column: 1 / -1; }
    .linea__importe { grid-column: auto; text-align: right; }
}


/* ══════════════════════════════════════════════════════════
   2.1 · Asistente de prenda: compacto, a lo ancho y sin recargar
   ══════════════════════════════════════════════════════════ */

.pagina--asistente { max-width: 1360px; padding-top: 0; padding-bottom: 112px; }
body:has(.pagina--asistente) .barra__dentro { max-width: 1360px; }

/* Tira fija: regresar, prenda y pasos en un renglón. */
.asistente__tira { position: sticky; top: 65px; z-index: 40; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; margin-bottom: 4px; padding: 12px 0; background: var(--papel); }
.asistente__volver { width: 40px; height: 40px; border-color: var(--linea-2); background: var(--blanco); color: var(--tinta); }
.asistente__volver:hover { border-color: var(--tinta); }
.asistente__titulo { min-width: 0; }
.asistente__titulo h1 { overflow: hidden; font-size: 30px; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
.asistente__titulo p { overflow: hidden; font-size: 13.5px; line-height: 1.3; color: var(--gris); white-space: nowrap; text-overflow: ellipsis; }
.asistente .pasos { grid-template-columns: repeat(5, auto); margin: 0; padding: 4px; }
.asistente .pasos__uno { min-height: 40px; padding: 0 16px 0 9px; font-size: 14.5px; }

/* Barra fija con los botones del paso. */
.asistente__pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; border-top: 1px solid var(--linea); background: rgba(250, 248, 244, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.asistente__pie-dentro { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1360px; margin: 0 auto; padding: 10px var(--orilla) max(10px, env(safe-area-inset-bottom)); }
.asistente__pie .guardado { animation: aparece 0.2s ease-out both; }
body:has(.asistente__pie) .aviso { bottom: calc(78px + env(safe-area-inset-bottom)); }

/* Mismo sistema, más apretado. */
.asistente .hoja { margin-bottom: 14px; padding: 20px 24px; animation: none; }
.asistente h2 { font-size: 23px; }
.asistente .hoja > h2, .asistente .hoja__cabeza { margin-bottom: 14px; }
.asistente .nota--arriba { margin: -6px 0 14px; }
.asistente .boton { min-height: 44px; padding: 0 20px; }
.asistente .campo { min-height: 42px; padding: 8px 12px; font-size: 15.5px; }
.asistente .campo--grande, .asistente .campo--grande.campo--codigo { min-height: 46px; font-size: 17px; }
.asistente .con-unidad .campo { padding-right: 40px; }
.asistente .con-unidad--antes .campo { padding: 8px 12px 8px 32px; }
.asistente .bloque { margin-bottom: 16px; }
.asistente .bloque__titulo { margin-bottom: 7px; font-size: 15.5px; }
.asistente .bloque .nota { margin-top: 6px; font-size: 13.5px; }
.asistente .opciones { gap: 6px; }
.asistente .opcion span { min-width: 44px; min-height: 40px; padding: 0 14px; font-size: 14.5px; }
.asistente .opciones--tallas .opcion span { min-width: 54px; min-height: 44px; font-size: 15.5px; }

/* 1 · Prenda: datos a la izquierda, descripción a la derecha. */
.paso-prenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.paso-prenda__descripcion { display: flex; flex-direction: column; }
.paso-prenda__descripcion textarea { flex: 1; min-height: 150px; resize: none; }
.paso-prenda__ligas { grid-column: 1 / -1; gap: 0 28px; }
.paso-prenda__ligas .bloque { margin-bottom: 0; }

/* 2 · Colores y tallas a un lado, códigos al otro. */
.paso-dos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 14px; }
.asistente .colores { gap: 8px; margin-bottom: 12px; }
.asistente .colores__fila--nueva { padding: 10px; border-radius: 14px; }
.asistente .otra-talla { margin-top: 14px; }
.variantes-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 18px 26px; }
.asistente .variantes { margin: 0; }
.asistente .variantes__color { margin-bottom: 6px; font-size: 15.5px; }
.asistente .variantes__fila { grid-template-columns: 50px minmax(0, 1fr) 62px 32px; gap: 6px; padding: 3px 0; }
.asistente .variantes__fila .campo { min-height: 38px; padding: 6px 9px; }
.asistente .variantes__fila .campo--codigo { font-size: 14px; letter-spacing: 0; }
.asistente .variantes__talla { min-height: 38px; border-radius: 10px; font-size: 14.5px; }
.asistente .redondo--chico { position: relative; width: 32px; height: 32px; }
.asistente .redondo--chico::before { content: ""; position: absolute; inset: -4px; }

/* 3 · Fotos: los colores se reparten a lo ancho. */
.paso-fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); align-items: start; gap: 14px; margin-bottom: 14px; }
.paso-fotos .hoja { margin: 0; }
.asistente .fotos { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; }
.asistente .foto__acciones button { min-width: 30px; }

/* 4 · Detalles: tantas columnas como quepan; la ayuda va en un globo. */
.asistente .preguntas { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px 22px; }
.asistente .preguntas .opcion span { min-width: 40px; min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.asistente .preguntas .opcion input { inset: -2px; }
.pregunta__cabeza { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.pregunta__cabeza .pregunta__nombre { margin: 0; font-size: 15px; }
.ayuda { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--arena); font: 600 11.5px/1 var(--texto); color: var(--gris); cursor: help; transition: background-color 0.15s, color 0.15s; }
.ayuda::before { content: ""; position: absolute; inset: -11px; }
/* El globo sólo existe mientras se ve: así no ensancha la página en pantallas chicas. */
.ayuda::after { content: attr(data-ayuda); position: absolute; left: -10px; bottom: calc(100% + 8px); z-index: 35; width: max-content; max-width: min(280px, 70vw); padding: 9px 12px; border-radius: 10px; background: var(--tinta); font: 400 13px/1.4 var(--texto); color: var(--blanco); text-align: left; display: none; pointer-events: none; }
.ayuda:hover, .ayuda:focus { background: var(--tinta); color: var(--blanco); }
.ayuda:hover::after, .ayuda:focus::after { display: block; animation: llega-paso 0.15s ease-out both; }
.medidas-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.asistente .medidas { gap: 8px; margin-bottom: 14px; }
.asistente .medidas__titulo { margin: 0 0 8px; font-size: 14.5px; }
.asistente .preguntas--unidades { margin-top: 2px; padding-top: 14px; }
.asistente .hoja--plegable { padding: 0; }
.asistente .hoja--plegable summary { padding: 16px 24px; }
.asistente .hoja--plegable .preguntas { padding: 0 24px 22px; }
.asistente .copiar { margin-bottom: 14px; padding: 10px 14px; }

/* 4 · Detalles: todo en listas parejas. Arriba lo que cambia; lo de siempre, más discreto, abajo. */
.hoja__titulo { display: flex; align-items: center; gap: 10px; }
.asistente .hoja__cabeza .nota { margin: 0; }
.copiar-de, .medidas-mando { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.copiar-de .campo { width: 310px; max-width: 100%; }
.asistente select.campo { padding-right: 36px; background-position: right 12px center; }
.medidas-mando select.campo { width: auto; }
.asistente .copiar-de .boton, .asistente .medidas-mando .boton { min-height: 42px; padding: 0 16px; font-size: 14px; }
.boton--pin svg { width: 16px; height: 16px; }
.boton--pin-puesto { border-color: #e2bd85; background: #fbf3e6; color: #8a5a17; }
.boton--pin-puesto svg { fill: currentColor; }
.pregunta__cabeza { min-height: 26px; }
.pin { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; margin-left: auto; padding: 0; border: 0; border-radius: 8px; background: none; color: #b5ae9f; transition: background-color 0.15s, color 0.15s; }
.pin::before { content: ""; position: absolute; inset: -7px; }
.pin svg { width: 17px; height: 17px; }
.pin:hover { background: var(--arena); color: var(--tinta); }
.pin[disabled] { opacity: 0.35; pointer-events: none; }
.pin--puesto { color: var(--pespunte); }
.pin--puesto svg { fill: currentColor; }
.pregunta--falta .campo { border-color: #e2bd85; background-color: #fffaf1; }
.pregunta__distinta { margin-top: 5px; font-size: 12.5px; line-height: 1.35; color: #8a5a17; }
.pregunta__distinta button { padding: 0; border: 0; background: none; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.nota--pin { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; }
.nota--pin svg { flex: none; width: 15px; height: 15px; }
.asistente .hoja--siempre { border-style: dashed; border-color: var(--linea-2); background: var(--papel); }
.asistente .hoja--siempre .preguntas { grid-template-columns: repeat(auto-fill, minmax(204px, 1fr)); gap: 12px 16px; }
.hoja--siempre .pregunta__cabeza .pregunta__nombre { font-weight: 500; font-size: 13.5px; color: var(--tinta-2); }
.asistente .hoja--siempre .campo { min-height: 38px; padding-top: 6px; padding-bottom: 6px; border-color: var(--linea); background-color: transparent; font-size: 14.5px; }
.asistente .hoja--siempre .campo:hover, .asistente .hoja--siempre .campo:focus { background-color: var(--blanco); }
.asistente .hoja--siempre .pregunta--falta .campo { border-color: #e2bd85; background-color: #fffaf1; }

/* 5 · Revisar: lo que falta junto a lo que se va a subir. */
.paso-revisar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 14px; }
.paso-revisar--solo { grid-template-columns: minmax(0, 1fr); }
.asistente .lista-para { margin-bottom: 14px; padding: 18px 22px; animation: none; }

/* Cambio de paso: sólo se funde el contenido; barra, tira y botones se quedan quietos. */
.asistente__paso { view-transition-name: paso; }
html.cambia-paso::view-transition-old(root) { display: none; }
html.cambia-paso::view-transition-new(root) { animation: none; }
html.cambia-paso::view-transition-old(paso) { animation: 0.14s ease-out both se-funde; }
html.cambia-paso::view-transition-new(paso) { animation: 0.28s var(--suave) both llega-paso; }
@keyframes se-funde { to { opacity: 0; } }
@keyframes llega-paso { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1080px) {
    .asistente__tira { grid-template-columns: auto minmax(0, 1fr) auto; }
    .asistente .pasos { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .paso-dos, .paso-revisar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .asistente__tira { position: static; }
    .asistente__titulo h1 { font-size: 26px; }
    .asistente .pasos__uno { min-height: 54px; padding: 6px 2px; font-size: 11.5px; }
    .asistente .hoja { padding: 16px; }
    .asistente .hoja--plegable { padding: 0; }
    .asistente .hoja--plegable summary { padding: 14px 16px; }
    .asistente .hoja--plegable .preguntas { padding: 0 16px 18px; }
    .paso-prenda, .medidas-par { grid-template-columns: minmax(0, 1fr); }
    .asistente__pie .boton { flex: 1 1 0; }
    .asistente__pie .guardado { position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 7px 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco); translate: -50% 0; }
}

/* ── Comentarios del sitio ──────────────────────────────────── */
a.pestana { text-decoration: none; }
a.pestana[aria-current] span { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 2px rgba(19, 20, 22, 0.14); }
a.pestana:focus-visible span { outline: 2px solid var(--indigo); outline-offset: 1px; }
.nota--ojo { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #fbf3e6; color: #8a5a17; }
.opiniones { display: grid; gap: 10px; }
.opinion { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; padding: 16px 18px; border: 1px solid var(--linea); border-radius: 16px; background: var(--blanco); animation: entra 0.5s var(--suave) both; animation-delay: calc(var(--i, 0) * 30ms); }
.opinion__cuerpo { display: grid; gap: 8px; min-width: 0; }
.opinion__nota { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 14.5px; }
.opinion__nota a { font-weight: 500; text-underline-offset: 3px; }
.opinion__nota code { font-size: 12.5px; color: var(--gris); }
.estrellas { font-size: 17px; line-height: 1; letter-spacing: 1px; color: transparent; background: linear-gradient(90deg, var(--pespunte) calc(var(--v, 0) * 20%), var(--linea-2) calc(var(--v, 0) * 20%)); -webkit-background-clip: text; background-clip: text; }
.opinion__texto { max-width: 88ch; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.opinion__datos { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: var(--gris); }
.opinion__datos strong { font-weight: 600; color: var(--tinta-2); }
.opinion__acciones { display: flex; align-items: center; gap: 14px; }
.opinion__acciones .boton { min-height: 42px; padding: 0 16px; font-size: 14.5px; }
@media (max-width: 700px) {
    .opinion { grid-template-columns: minmax(0, 1fr); }
}

/* ── Prenda: cambiar entre el asistente por pasos y la hoja ──── */
.vistas { display: flex; padding: 3px; border-radius: 11px; background: var(--arena); }
.vistas a { display: flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 8px; font-weight: 500; font-size: 14px; color: var(--tinta-2); text-decoration: none; white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.vistas a:hover { color: var(--tinta); }
.vistas a[aria-current] { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 2px rgba(19, 20, 22, 0.14); }

/* ── Vista «Hoja»: la prenda como la plantilla de Liverpool ────
   Un renglón por variante y una columna por dato. La tabla se desplaza dentro de su caja para
   que los títulos y la columna de la variante se queden fijos, como paneles inmovilizados. */
.pagina--rejilla { max-width: none; }
body:has(.pagina--rejilla) .barra__dentro { max-width: none; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rejilla-vista .nota--ojo a { color: inherit; font-weight: 600; }
.rejilla-caja { max-height: calc(100vh - 230px); min-height: 220px; overflow: auto; border: 1px solid var(--linea-2); border-radius: 12px; background: var(--blanco); overscroll-behavior: contain; }
.rejilla { border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 1.2; }
.rejilla th, .rejilla td { height: 34px; padding: 0; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); white-space: nowrap; }
.rejilla thead th { position: sticky; z-index: 3; background: var(--arena); font-weight: 600; color: var(--tinta-2); text-align: left; }
.rejilla__grupos th { top: 0; height: 28px; padding: 0 10px; font-size: 12.5px; color: var(--gris); }
/* El nombre de la sección acompaña al desplazamiento horizontal mientras su grupo siga a la vista. */
.rejilla__grupos th span { position: sticky; left: 208px; }
.rejilla__titulos th { top: 28px; padding: 0 10px; border-bottom-color: var(--linea-2); }
.rejilla__titulos th i { margin-left: 3px; font-style: normal; color: var(--pespunte); }
.rejilla th.rejilla__num { position: sticky; left: 0; z-index: 2; width: 38px; min-width: 38px; background: var(--arena); font-weight: 500; font-size: 12px; color: var(--gris); text-align: center; }
.rejilla th.rejilla__fila { position: sticky; left: 38px; z-index: 2; min-width: 150px; max-width: 220px; padding: 0 10px; overflow: hidden; border-right-color: var(--linea-2); background: var(--papel); font-weight: 600; color: var(--tinta); text-align: left; text-overflow: ellipsis; }
.rejilla thead th.rejilla__num, .rejilla thead th.rejilla__fila { top: 0; z-index: 4; background: var(--arena); }
.rejilla td { position: relative; min-width: 110px; background: var(--blanco); }
.rejilla td > span { display: block; max-width: 260px; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; }
.rejilla td.fija { background: var(--papel); color: var(--gris); }
.rejilla td :is(input, select) { display: block; width: 100%; min-width: 130px; height: 33px; margin: 0; padding: 0 10px; border: 0; border-radius: 0; background: transparent; font: inherit; color: var(--tinta); outline: none; }
.rejilla td select { min-width: 150px; padding-right: 26px; -webkit-appearance: none; appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236f727a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E") right 8px center / 11px no-repeat; }
.rejilla td input[inputmode] { min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.rejilla td[data-col="MainBarCode"] input { min-width: 140px; font-variant-numeric: tabular-nums; }
.rejilla td[data-col="DescriptionLong"] input { min-width: 320px; }
.rejilla td:focus-within { z-index: 1; box-shadow: inset 0 0 0 2px var(--indigo); }
.rejilla tbody tr:hover td:not(.fija):not(.falta):not(.mal) { background: #fdfcfa; }
.rejilla tbody tr:focus-within th.rejilla__num { background: var(--indigo); color: var(--blanco); }
.rejilla td.falta { background: #fffaf1; }
.rejilla td.falta::after { content: ""; position: absolute; top: 0; right: 0; border: 4px solid transparent; border-top-color: var(--pespunte); border-right-color: var(--pespunte); pointer-events: none; }
.rejilla td.mal { background: var(--mal-fondo); }
.rejilla td.mal :is(input, select, span) { color: var(--mal); }
.rejilla td.guardando { opacity: 0.6; }
.rejilla__cuenta { display: flex; align-items: center; gap: 14px; font-weight: 500; font-size: 14.5px; color: var(--tinta-2); }
@media (max-width: 760px) {
    .rejilla-caja { max-height: calc(100vh - 250px); }
    .rejilla th.rejilla__fila { left: 0; min-width: 120px; max-width: 150px; }
    .rejilla th.rejilla__num { display: none; }
    .rejilla thead th.rejilla__fila { left: 0; }
}