/* VasPanel (app Next.js) · complemento del sistema de diseño de la maqueta (_direccion/UX/vaspanel/2026-10-15,
 * sistema-diseno/SISTEMA_DE_DISENO.md). Se carga DESPUÉS de vaspanel-modelo.css y mobile-tables-r3.css (app/layout.tsx).
 * No cambia ninguna regla de la maqueta. Solo lo que la app necesita porque, a diferencia de la maqueta, el <body> NO
 * lleva siempre class="ux-symmetry": la llevan solo las páginas del modelo (components/modelo/cuerpo-modelo.tsx). Así
 * las demás páginas de la app (Amazon, Inventario…) siguen con sus componentes y sus tablas no pasan por la tabla del
 * móvil (-r3).
 *  1. Las fichas del marco (--vp-*, apartado 1 de vaspanel-modelo.css, copiadas tal cual) en .vp-app, para que la barra
 *     lateral y la superior se vean igual en TODAS las páginas. Solo las --vp-*: las demás fichas (--card, --accent…)
 *     tienen el mismo nombre que las de la app y cambiarían sus componentes.
 *  2. La letra del sistema en el marco y en las páginas del modelo desde el primer pintado.
 *  3. El foco del marco (apartado 2 de vaspanel-modelo.css, que cuelga de .ux-symmetry).
 *     3 bis. El toque de la hamburguesa y de los botones de los submenús es del botón, no de su icono (UX-10).
 *  4. Modo oscuro: la maqueta solo tiene el tema claro; en las páginas que no son del modelo, la barra superior sigue
 *     el tema de la app (las del modelo siempre en claro, como la maqueta).
 *  6. El interruptor del bloque «Interruptores» de /configuracion: una pieza nueva (la maqueta no la tiene), bajo
 *     .ux-symmetry y solo con las fichas del modelo. También el de la lectura de envíos de Amazon, una fila más del
 *     bloque desde el 28/10/2026 (antes, una caja con su propio estilo en /almacen, /envios y /configuracion).
 *  7. La fila de tarjetas a lo ancho (Envíos a FBA). */

/* 1 · Fichas del marco [V1/VP], copia de vaspanel-modelo.css §1 */
.vp-app {
  --vp-fondo: #f9fafb; --vp-texto: #0f1216; --vp-borde: #e2e5e7; --vp-apagado: #6e7277; --vp-gris: #f4f5f6;
  --vp-lateral: #141822; --vp-lateral-texto: #e1e5eb; --vp-lateral-inactivo: #a4a8af;
  --vp-lateral-activo: #212938; --vp-lateral-activo-texto: #f2f5fc;
  --vp-lateral-borde: #292e38; --vp-lateral-borde-suave: #21252f; --vp-lateral-caja: #1b212d;
  --vp-ancho-lateral: 256px;
  --vp-ancho-carril: 64px;
  --vp-alto-cabecera: 64px;
  --vp-margen: 24px;
  --vp-max: 1600px;
}
@media (max-width: 767px) { .vp-app { --vp-margen: 16px; } }   /* vaspanel-modelo.css §11 («.ux-symmetry { --vp-margen: 16px }») */

/* 2 · Letra del sistema (body.ux-symmetry de vaspanel-modelo.css §2) */
.vp-app .vp-lateral, .vp-app .vp-cabecera,
.vp-pagina.ux-symmetry {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.vp-pagina.ux-symmetry { font-size: 15px; line-height: 1.45; color: var(--ink); }

/* 3 · Foco del marco (vaspanel-modelo.css §2, el mismo contorno) */
.vp-app .vp-cabecera :is(a, button, [tabindex]):focus-visible { outline: 3px solid #1b1f24; outline-offset: 3px; }
.vp-app .vp-lateral :is(a, button, [tabindex]):focus-visible { outline: 3px solid var(--vp-lateral-texto); outline-offset: -3px; }
.vp-app .vp-lateral .vp-logo a:focus-visible { outline-offset: 3px; }

/* 3 bis · El toque es del botón, no de su icono (UX-10, Codex 5, 28/10/2026). El icono de la hamburguesa y los de los
 *     botones de los submenús («Contabilidad», «Hacer» y su flecha) son dibujo (aria-hidden): no reciben el toque, que
 *     va al <button>. Al pulsarlos, el marco se vuelve a pintar y React 19 escribe otra vez el interior de cada <Icono>:
 *     el trazo tocado sale del documento en el mismo clic. El clic fuera ya decide con el camino del evento
 *     (components/marco/clic-fuera.ts); con esto, cualquier otro oyente del clic ve el botón y no un trazo que ya no
 *     está. Mismo aspecto: solo cambia quién recibe el toque. */
.vp-app :is(#vp-hamburguesa, .vp-submenu-btn) > svg { pointer-events: none; }

/* 4 · Barra superior en modo oscuro, solo fuera de las páginas del modelo */
html.dark body:not(.ux-symmetry) .vp-cabecera { background: rgba(22,25,31,.85); border-bottom-color: rgba(255,255,255,.1); color: #f2f5fc; }
html.dark body:not(.ux-symmetry) .vp-cabecera :is(.vp-selector, .vp-avatar) { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #f2f5fc; }
html.dark body:not(.ux-symmetry) .vp-cabecera .vp-icono-btn { color: #f2f5fc; }
html.dark body:not(.ux-symmetry) .vp-cabecera :is(a, button, [tabindex]):focus-visible { outline-color: #f2f5fc; }

/* 5 · Menús de la app (mes, mercado, alertas, cuenta) y avisos sobre una página del modelo: van en <body>, que entonces
 *     lleva .ux-symmetry, y sus fichas --accent y --card (mismo nombre en la app y en la maqueta) volverían a las de la
 *     app. Se guardan las de la app en :root y se devuelven dentro de esos menús. */
:root { --app-accent: var(--accent); --app-card: var(--card); }
body.ux-symmetry :is([data-radix-popper-content-wrapper], [data-sonner-toaster]) { --accent: var(--app-accent); --card: var(--app-card); }

/* Contador de alertas sobre la campana (la maqueta no calcula alertas; la app sí). UX-31 (B9 de Codex 5, Dirección
 *   29/10/2026): el ámbar oscuro del texto de los avisos (#7a4f07, 7,1:1 con el número blanco; el de antes, #c07c12, 3,4:1);
 *   el crítico (#b42318) ya pasaba: 6,6:1. El número también va en el nombre del botón («Alertas (2)»). */
.vp-icono-btn .vp-contador { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #7a4f07; color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }
.vp-icono-btn .vp-contador.critico { background: #b42318; }

/* 6 · Interruptor (Dirección, 24/10/2026 21:39: «dijimos interruptores y pusieron botones»). En cada fila del bloque
 *     «Interruptores» de /configuracion (dl.vp-campos.vp-interruptores), un interruptor de deslizar en lugar del botón:
 *     button[role=switch][aria-checked].vp-interruptor > span.vp-interruptor-pista (> span.vp-interruptor-bola) +
 *     span.vp-interruptor-texto («Encendido» o «Apagado»). Encendido, la pista en --ink (el color del botón principal y de
 *     la opción elegida); apagado, en --none (gris: 3,9:1 con la bola y con la tarjeta); sin poder tocarse, gris claro con
 *     el borde de rayas de los botones deshabilitados (.vp-off) y la bola gris, en su sitio; sin dato (el receptor antiguo
 *     que no se pudo leer: span.vp-interruptor-sin-dato, sin role=switch), igual pero con la bola en medio. Mismo tamaño
 *     en todas, y el botón ocupa su columna entera (el fondo de «encima» y el foco miden lo mismo en todas las filas).
 *     La fila: el valor, el interruptor en su columna fija (--ancho-interruptor) y el Origen, el último, como en toda lista
 *     de campos; debajo (div.vp-interruptor-pie), la causa del deshabilitado, la contraseña y el código con «Confirmar» y
 *     «Cancelar», o lo que contestó el servidor. Todo arriba, en la línea del interruptor (la primera, de 44 px, la del
 *     Origen): el título y su ⓘ, el valor, el interruptor y el Origen, también con algo debajo o con dos líneas. La ⓘ del
 *     título no alarga su línea (márgenes negativos: sin huecos entre las líneas del título). En el móvil, el título, el
 *     interruptor y el Origen en la primera línea, y el valor y lo de debajo, a todo el ancho de la fila (subgrid). */
.ux-symmetry .vp-interruptores { --ancho-interruptor: 136px; }
.ux-symmetry .vp-interruptores > .vp-campo { align-items: start; padding-block: 9px; }
.ux-symmetry .vp-interruptores > .vp-campo > dt { display: flex; align-items: flex-start; gap: 4px; padding-top: 11px; padding-top: calc(22px - .5lh); }
.ux-symmetry .vp-interruptores > .vp-campo > dt > span { flex: 1 1 auto; min-width: 0; }
.ux-symmetry .vp-interruptores > .vp-campo > dt > .info { margin-block: -9px; margin-block: calc((1lh - 40px) / 2); }
.ux-symmetry .vp-interruptores > .vp-campo > dd {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--ancho-interruptor) var(--ancho-origen);
  grid-template-areas: "valor interruptor origen" "pie pie ."; gap: 0 16px; align-items: start;
}
.ux-symmetry .vp-interruptores > .vp-campo > dd > .vp-valor { grid-area: valor; padding-top: 11px; padding-top: calc(22px - .5lh); }
.ux-symmetry .vp-interruptores > .vp-campo > dd > .vp-interruptor-celda { grid-area: interruptor; display: flex; align-items: center; min-width: 0; min-height: 44px; }
.ux-symmetry .vp-interruptores > .vp-campo > dd > .vp-interruptor-pie { grid-area: pie; min-width: 0; }
.ux-symmetry .vp-interruptores > .vp-campo > dd > .accion { grid-area: origen; }
.ux-symmetry .vp-interruptor {
  display: inline-flex; flex: 1 1 auto; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 0 -6px; padding: 0 6px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); white-space: nowrap; cursor: pointer;
}
.ux-symmetry button.vp-interruptor:not(:disabled):hover { background: var(--bg); }
.ux-symmetry .vp-interruptor[aria-busy="true"] { cursor: progress; }
.ux-symmetry .vp-interruptor-pista {
  position: relative; flex: 0 0 44px; width: 44px; height: 24px; border: 1px solid transparent; border-radius: 999px;
  background: var(--none); transition: background-color .15s ease;
}
.ux-symmetry .vp-interruptor-bola {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--card);
  box-shadow: 0 1px 2px var(--sombra); transition: transform .15s ease;
}
.ux-symmetry .vp-interruptor[aria-checked="true"] .vp-interruptor-pista { background: var(--ink); }
.ux-symmetry .vp-interruptor[aria-checked="true"] .vp-interruptor-bola { transform: translateX(20px); }
.ux-symmetry .vp-interruptor:is(:disabled, .vp-interruptor-sin-dato) { color: var(--ink-2); cursor: not-allowed; }
.ux-symmetry .vp-interruptor:disabled .vp-interruptor-pista { border: 1px dashed var(--line-2); background: var(--bg); }
.ux-symmetry .vp-interruptor:disabled .vp-interruptor-bola { background: var(--line-2); box-shadow: none; }
.ux-symmetry .vp-interruptor-sin-dato .vp-interruptor-pista { border: 1px dashed var(--line-2); background: var(--bg); }
.ux-symmetry .vp-interruptor-sin-dato .vp-interruptor-bola { background: var(--line-2); box-shadow: none; transform: translateX(10px); }
.ux-symmetry .vp-interruptor-texto { min-width: 0; }
/* Fechas «dd/mm/aaaa hh:mm» del valor, enteras (como las de las tablas: span.nw): nunca «24/10/2026» / «19:20». */
.ux-symmetry .vp-interruptores .nw { white-space: nowrap; }
.ux-symmetry .vp-interruptor-pie > form { margin-top: 8px; }
.ux-symmetry .vp-interruptor-pie .formulario { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.ux-symmetry .vp-interruptor-pie .form-acciones { margin-top: 12px; }
.ux-symmetry .vp-interruptor-pie > .vp-causa, .ux-symmetry .vp-interruptor-mensaje { text-align: end; }
.ux-symmetry .vp-interruptor-mensaje { margin: 0; font-size: 14px; line-height: 1.45; }
.ux-symmetry .vp-interruptor-mensaje:not(:empty) { margin-top: 8px; }
@media (max-width: 760px) {
  .ux-symmetry .vp-interruptores { --ancho-interruptor: 118px; }
  .ux-symmetry .vp-interruptores > .vp-campo { padding-block: 6px; }
  .ux-symmetry .vp-interruptores > .vp-campo > dd {
    grid-template-columns: minmax(0, 1fr) var(--ancho-interruptor) 54px;
    grid-template-areas: ". interruptor origen" "valor valor valor" "pie pie pie"; gap: 0 8px;
  }
  .ux-symmetry .vp-interruptores > .vp-campo > dd > .vp-valor { padding-top: 4px; }
  .ux-symmetry .vp-interruptores > .vp-campo > dt > .info { width: 32px; height: 32px; flex-basis: 32px; margin-block: -8px; margin-block: calc((1lh - 32px) / 2); }
  .ux-symmetry .vp-interruptor-pie > .vp-causa, .ux-symmetry .vp-interruptor-mensaje { text-align: start; }
  .ux-symmetry .vp-interruptor-mensaje { font-size: 13px; }
}
/* En el móvil, con subgrid: la primera línea, título · interruptor · Origen (el título con todo el ancho que dejan); el
 * valor y lo de debajo, a todo el ancho de la fila. El dt va por encima del dd, que lo cubre sin pintar nada. En un móvil
 * estrecho (≤ 380 px) el título no cabe al lado: va solo en la primera línea, con su ⓘ a la derecha, y debajo, el
 * interruptor y el Origen, a la derecha y en la misma columna en todas; luego el valor y lo de debajo. */
@supports (grid-template-columns: subgrid) {
  @media (max-width: 760px) {
    .ux-symmetry .vp-interruptores > .vp-campo { grid-template-columns: minmax(0, 1fr) var(--ancho-interruptor) 54px; grid-template-rows: auto auto auto; column-gap: 8px; }
    .ux-symmetry .vp-interruptores > .vp-campo > dt { grid-area: 1 / 1; position: relative; z-index: 1; }
    .ux-symmetry .vp-interruptores > .vp-campo > dd { grid-area: 1 / 1 / 4 / 4; grid-template-columns: subgrid; grid-template-rows: subgrid; }
  }
  @media (max-width: 380px) {
    .ux-symmetry .vp-interruptores > .vp-campo { grid-template-rows: auto auto auto auto; }
    .ux-symmetry .vp-interruptores > .vp-campo > dt { grid-area: 1 / 1 / 2 / 4; padding-top: 4px; }
    .ux-symmetry .vp-interruptores > .vp-campo > dd { grid-area: 2 / 1 / 5 / 4; }
  }
}
@media (prefers-reduced-motion: reduce) { .ux-symmetry :is(.vp-interruptor-pista, .vp-interruptor-bola) { transition: none; } }
@media (forced-colors: active) {
  .ux-symmetry .vp-interruptor-pista { border-color: CanvasText; }
  .ux-symmetry .vp-interruptor-bola { background: CanvasText; }
  .ux-symmetry .vp-interruptor[aria-checked="true"] .vp-interruptor-pista { background: Highlight; }
  .ux-symmetry :is(.vp-interruptor:disabled, .vp-interruptor-sin-dato) .vp-interruptor-bola { background: GrayText; }
}
/* 7 · Fila de tarjetas a lo ancho (FilaTarjetas aLoAncho → section.cifras[data-ancho="fila"]; Dirección, 24/10/2026 22:21,
 *     simetría de Envíos: «las cuatro tarjetas a lo ancho de la fila, iguales»). Desde 961 px, la fila de 3 o 4 tarjetas
 *     ocupa todo el ancho, en columnas iguales con el mismo hueco, como la de 5 (vaspanel-modelo.css §6); el alto, la
 *     anatomía (subgrid) y los pasos compactos son los de siempre. De 601 a 960 px (tableta) la maqueta pone 3 por fila y,
 *     con 4, la cuarta salía sola y centrada (3 + 1): aquí van 2 + 2, a todo el ancho, iguales y con el mismo hueco (con 3,
 *     las 3 ya van a lo ancho). Hasta 600 px, una por fila, como siempre. Sin el atributo, la fila sigue como en la maqueta. */
@media (min-width: 961px) { .ux-symmetry .cifras[data-ancho="fila"] { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); } }
@media (min-width: 601px) and (max-width: 960px) { .ux-symmetry .cifras[data-ancho="fila"][data-n="4"] { --cols: 2; } }

/* 10 · Accesibilidad de B9 (Codex 5; asignada por Dirección el 29/10/2026 14:10), aquí y no en vaspanel-modelo.css (copia
 *     byte a byte de la maqueta; el 8 y el 9, las cajas de las lecturas de envíos y de liquidaciones, se quitaron el 28/10).
 *   - UX-30: el borde de un campo propio, distinguible sin foco: --campo (#7a8290, 3,9:1 sobre blanco; --line-2, 1,6:1). Los
 *     campos compartidos (Input, Select y Combobox) lo toman de app/globals.css (border-campo).
 *   - UX-29: zonas de toque de 44 px, sin mover nada. La ⓘ (40 px; 36, 32 o 28 en la tarjeta; 32 en Configuración a lo
 *     estrecho) y el ☰ del móvil se ven igual, pero su zona activa es un ::after transparente de 44×44 centrado en el botón;
 *     los selectores de la barra (periodo y mercado) y los interruptores, que ya son anchos, crecen solo en alto, hasta 44.
 *     Los campos propios y la casilla, de 44 de alto. Ningún vecino que se pulse queda debajo: la ⓘ tiene a 4 px (tarjeta,
 *     junto a la etiqueta de estado, que no se pulsa) u 8 px (cabecera de bloque, junto a «Detalle») lo que hay al lado; el ☰,
 *     8 px hasta la marca; los selectores no crecen a lo ancho. Y por si se juntan (revisión del 29/10/2026):
 *       · el ☰ va por encima del selector del periodo (z-index 1): en el móvil, un periodo personalizado largo deja el
 *         selector encima del ☰ (UX-26, abierto), y con posición, el selector, que va después, lo tapaba;
 *       · en Configuración, el interruptor y el Origen van por encima del título y su ⓘ (z-index 2): en el móvil, la zona de
 *         44 px de la ⓘ alcanzaba el borde del interruptor (381 a 760 px) y la parte de arriba del Origen (380 o menos). */
.ux-symmetry { --campo: #7a8290; }
.ux-symmetry .campo :is(input, select, textarea) { min-height: 44px; border-color: var(--campo); }
.ux-symmetry .campo.casilla { min-height: 44px; }
.ux-symmetry .info, .vp-hamburguesa, .vp-selector, .vp-interruptor { position: relative; }
.ux-symmetry .info::after, .vp-hamburguesa::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.vp-selector::after, .vp-interruptor::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(44px, 100%); transform: translateY(-50%); }
.vp-hamburguesa { z-index: 1; }
.ux-symmetry .vp-interruptores > .vp-campo > dd :is(.vp-interruptor, .accion) { position: relative; z-index: 2; }

/* 11 · Filas de tarjetas de una misma rejilla (FilaTarjetas grupo → section.cifras[data-grupo]; Dirección, 29/10/2026
 *      22:18, Almacén: «todas las tarjetas, en la misma rejilla, a lo ancho y con el mismo tamaño»). El subgrid iguala las
 *      tarjetas de una fila; entre filas, el sitio de la cifra reserva siempre el alto de la tarjeta de texto (dos líneas,
 *      vaspanel-modelo.css §13, con sus mismos pasos), la lleve o no, para que las de todas las filas midan lo mismo. */
.ux-symmetry .cifras[data-grupo] > .tarjeta > .num-lg { min-height: calc(2.6 * 16px); }
@media (min-width: 961px) {
  @container (max-width: 1160px) { .ux-symmetry .cifras[data-grupo] > .tarjeta > .num-lg { min-height: calc(2.6 * 15px); } }
  @container (max-width: 1030px) { .ux-symmetry .cifras[data-grupo] > .tarjeta > .num-lg { min-height: calc(2.6 * 14px); } }
  @container (max-width: 920px) { .ux-symmetry .cifras[data-grupo] > .tarjeta > .num-lg { min-height: calc(2.6 * 13px); } }
}

/* 12 · Rejilla de 6 (orden 41 de Víctor, 31/10/2026: «6 tarjetas por fila sí o sí por cada web, hasta un máximo de dos
 *      filas»; Dirección, 14:05: la tarjeta, con su mismo diseño; solo cambia cuántas hay y cómo se colocan). FilaTarjetas
 *      con 6 tarjetas → section.cifras[data-n="6"][data-seis="sola"]; con 12, dos filas de 6 (data-seis="primera" y
 *      "segunda"). Desde 961 px, la fila de 6 de siempre (vaspanel-modelo.css §6), a todo el ancho; de 601 a 960, 3 + 3.
 *      Lo nuevo:
 *   - entre las dos filas de 12, el mismo hueco que entre tarjetas, como una sola rejilla (maqueta, opción 3); por debajo
 *     de 961 px, también entre las filas de dentro de cada una (en la fila única, las 8 px de la rejilla son de dentro de
 *     la tarjeta y no se tocan);
 *   - en el móvil (600 px o menos), 2 columnas en vez de 1, con el mismo modelo de tarjeta: su relleno de 16 px y el punto
 *     del chip (Dirección, 31/10/2026 23:48, P41-03). El punto, el de 6 px del chip compacto (§6 de vaspanel-modelo.css,
 *     «hasta 1.160»): con el de 8 la ⓘ se sale 3,3 px a 360 junto a «Comprobado». El chip, la ⓘ, la cifra y la fecha siguen
 *     en los pasos de la tarjeta estrecha («hasta 920»): con los del modelo entero la ⓘ se sale hasta 30 px a 360. */
.ux-symmetry .cifras[data-seis="primera"] { margin-bottom: var(--gap-tarjetas); }
@media (max-width: 960px) { .ux-symmetry .cifras[data-seis] { row-gap: var(--gap-tarjetas); } }
/* Todas del mismo alto (orden 41: «del mismo alto y ancho»): el subgrid iguala las de una fila; entre filas (las dos de 12 y,
 * por debajo de 961 px, las filas de cada una), el sitio del ámbito y el corte reserva tres líneas, las que ocupa el más
 * largo de hoy («Enviadas · dd/mm/aaaa – dd/mm/aaaa» y su corte), y el de la cifra, el de la tarjeta de texto si alguna la
 * lleva (data-grupo, §11). Revisor del 31/10/2026: con 12, cada fila medía según su ámbito más largo. */
.ux-symmetry .cifras:is([data-seis="primera"], [data-seis="segunda"]) > .tarjeta > .fecha { min-height: calc(3 * 1.45em); }
@media (max-width: 960px) { .ux-symmetry .cifras[data-seis] > .tarjeta > .fecha { min-height: calc(3 * 1.45em); } }
@media (max-width: 600px) {
  .ux-symmetry .cifras[data-seis] { --cols: 2; --gap-tarjetas: 12px; }
  .ux-symmetry .cifras[data-seis] > .tarjeta > h2 { font-size: 11px; letter-spacing: 0; line-height: 15px; min-height: 30px; }
  .ux-symmetry .cifras[data-seis] > .tarjeta > .estado { gap: 2px; }
  .ux-symmetry .cifras[data-seis] > .tarjeta > .estado .chip { font-size: 10.5px; letter-spacing: 0; padding: 1px 6px 1px 5px; }
  .ux-symmetry .cifras[data-seis] > .tarjeta > .estado .chip::before { width: 6px; height: 6px; flex-basis: 6px; margin-right: 4px; }
  .ux-symmetry .cifras[data-seis] > .tarjeta > .estado .info { width: 28px; height: 28px; flex-basis: 28px; }
  .ux-symmetry .cifras[data-seis] > .tarjeta > .num-lg { font-size: 19px; }
  .ux-symmetry .cifras[data-seis] > .tarjeta > .num-lg.vp-tarjeta-texto { font-size: 13px; }
  .ux-symmetry .cifras[data-seis] > .tarjeta > .fecha { font-size: 12.5px; }
  .ux-symmetry .cifras[data-seis][data-grupo] > .tarjeta > .num-lg { min-height: calc(2.6 * 13px); }
}

/* 13 · Detalle con un formulario vivo (components/modelo/detalle-vivo.tsx; Dirección, 31/10/2026 14:26): lo fijo y el
 *      formulario, cada uno en su caja dentro del cuerpo de dialog.dlg, con el mismo espacio que la ventana común entre sus
 *      piezas (vaspanel-modelo.css §10: 12 px y los párrafos sin margen). */
.ux-symmetry .dlg .cuerpo > :is(.vp-detalle-fijo, .vp-detalle-vivo) > * + * { margin-top: 12px; }
.ux-symmetry .dlg .cuerpo > .vp-detalle-fijo > p { margin: 0; }

/* 14 · Un alto común para todas las tarjetas de todas las pantallas (Dirección, 31/10/2026 23:48, P41-02): el de la más alta
 *      de las 35 pantallas con tarjetas, medido en el ancho más estrecho de cada tramo (banco P41 con el HTML de las 40
 *      pantallas que guardó Codex 5). No se corta nada: una tarjeta con más texto crece.
 *   - Desde 961 px la tarjeta es una subrejilla, y la norma ignora el alto de una subrejilla en su eje: el alto va en la
 *     fila, y lo que sobra se lo lleva la pista de la fecha (1fr), con los botones al pie. Por debajo, la tarjeta es flex y
 *     el alto va en ella; sus botones ya van al pie (.acciones, margin-top: auto).
 *   - Los tramos, por el ancho de la ventana. Con el carril de 64 px la fila mide la ventana menos 112 px (desde 1.480,
 *     menos 304), así que siguen los pasos de vaspanel-modelo.css §6 (fila de 920, 1.030, 1.160 y 1.393 px). Con
 *     la barra de desplazamiento de Windows la fila es 17 px más estrecha y cae en el paso siguiente, más pequeño: lo
 *     medido allí no pasa del alto de su tramo.
 *   - Alto de cada tramo, por la tarjeta que lo marca (medido con «Monedas guardadas», que desde las 00:30 cabe en dos
 *     líneas a 360 px): hasta 600, 295 (Liquidaciones y Mayor); de 601 a 960, 320 (Liquidaciones, 3 por fila); de 961 a
 *     1.032, 298; de 1.033 a 1.142, 295 (Liquidaciones); de 1.143 a 1.272, 296 (Almacén); de 1.273 a 1.697, 307 (Almacén
 *     y FBA); desde 1.698, 298 (Liquidaciones). */
@media (min-width: 961px) { .ux-symmetry .cifras[data-seis] { grid-template-rows: auto auto auto 1fr auto; min-height: var(--alto-tarjeta, 0); } }
@media (max-width: 960px) { .ux-symmetry .cifras[data-seis] > .tarjeta { min-height: var(--alto-tarjeta, 0); } }
@media (max-width: 600px) { .ux-symmetry .cifras[data-seis] { --alto-tarjeta: 295px; } }
/* Rótulos del eje que no se recortan en el móvil (Codex 5, 04/11/2026; BarrasModelo.rotulosEnVariasLineas): el nombre
 * entero, partido por palabras, con dos líneas reservadas; uno más largo ocupa más líneas y la fila crece con él. Solo
 * en los gráficos que lo piden: los demás ejes, como siempre. */
@media (max-width: 600px) {
  .ux-symmetry .barras-v .eje-x[data-rotulos="partir"] span { white-space: normal; overflow: visible; overflow-wrap: normal; word-break: normal; line-height: 14px; min-height: 28px; }
}
@media (min-width: 601px) and (max-width: 960px) { .ux-symmetry .cifras[data-seis] { --alto-tarjeta: 320px; } }
@media (min-width: 961px) and (max-width: 1032px) { .ux-symmetry .cifras[data-seis] { --alto-tarjeta: 298px; } }
@media (min-width: 1033px) and (max-width: 1142px) { .ux-symmetry .cifras[data-seis] { --alto-tarjeta: 295px; } }
@media (min-width: 1143px) and (max-width: 1272px) { .ux-symmetry .cifras[data-seis] { --alto-tarjeta: 296px; } }
@media (min-width: 1273px) and (max-width: 1697px) { .ux-symmetry .cifras[data-seis] { --alto-tarjeta: 307px; } }
@media (min-width: 1698px) { .ux-symmetry .cifras[data-seis] { --alto-tarjeta: 298px; } }

/* 15 · El menú con la arquitectura de Holded y el aspecto de VasPanel (orden 42 de Víctor; Dirección, 01/11/2026 00:30;
 *      components/nav.ts y components/marco/marco-base.tsx): a la izquierda, las áreas con su icono, y su submenú, un
 *      panel flotante a la derecha del área desde 768 px, en la barra entera como ya era en el carril (vaspanel-modelo.css
 *      §11): los mismos colores, letra, tamaños, iconos y estado activo. El área de la pantalla va marcada como una entrada
 *      activa; la abierta, como al pasar el ratón. En la barra entera el panel no repite el nombre del área (está al lado) y
 *      la flecha apunta a la derecha. Los títulos de los grupos («Áreas» y «Configuración») solo los oye el lector de
 *      pantalla (.vp-oculto); la raya de «Hacer» separa Configuración. En el móvil, todo como antes (hoja, debajo). */
@media (min-width: 768px) {
  .vp-submenu {
    position: fixed; left: calc(var(--vp-lat) + 8px); top: 80px; z-index: 45; width: 248px; padding: 8px;
    background: var(--vp-lateral); border: 1px solid var(--vp-lateral-borde); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.35);
  }
  .vp-menu .vp-subgrupo > .vp-submenu a { justify-content: flex-start; padding: 8px 12px; }
  .vp-menu .vp-submenu a > span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .vp-submenu-btn[aria-expanded="true"] { background: rgba(33,41,56,.6); color: var(--vp-lateral-texto); }
  .vp-subgrupo.vp-con-activo > .vp-submenu-btn { background: var(--vp-lateral-activo); color: var(--vp-lateral-activo-texto); }
  /* Solo el panel que el marco marca flotante (.vp-flota, al abrirlo en el navegador): pintado en el servidor, el área de la
   * pantalla sale abierta (para la hoja del móvil) y, sin esto, su panel tapaba el contenido hasta hidratar (revisor). */
  .vp-subgrupo:not(.vp-flota) > .vp-submenu { display: none; }
}
/* Orden 49 · un submenú por apartados, como Holded (Contabilidad: «Libros», «Documentos», «Revisión y firma»): el rótulo,
 * con la letra de los títulos de grupo y el sangrado de sus entradas; las entradas, debajo, como las demás. */
.vp-submenu-apartado { display: flex; flex-direction: column; gap: inherit; }
.vp-submenu-rotulo { margin: 0; padding: 8px 12px 2px 24px; font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: rgba(225,229,235,.55); }
.vp-submenu-apartado:first-of-type > .vp-submenu-rotulo { padding-top: 2px; }
@media (min-width: 768px) {
  .vp-submenu-rotulo { padding-left: 12px; }
}
@media (min-width: 1480px) {
  .vp-submenu-titulo { display: none; }
  .vp-submenu-btn > svg.vp-chevron,
  .vp-submenu-btn[aria-expanded="true"] > svg.vp-chevron { transform: rotate(-90deg); }
}