/* VasPanel · maqueta local 15/10/2026 · hoja común del modelo (D2–D6).
 * Solo presentación: ninguna cifra vive aquí. La generan build.py y data/<slug>.json.
 * Base: w1/modelo_assets/vaspanel-modelo.css. Procedencia de cada valor:
 *   [V1] marco de VasPanel (V1, medido en el navegador)   [R3] modelo de la contabilidad -r3 (ux-symmetry.css)
 *   [VP] adaptación para esta maqueta (D2–D6).
 * Orden de carga: esta hoja y después mobile-tables-r3.css (copia literal de -r3). El body lleva class="ux-symmetry".
 * Escala única de separaciones (R7): 8 dentro de piezas · 16 entre tarjetas y dentro de bloques · 24 entre grupos.
 * SISTEMA DE DISEÑO de VasPanel (órdenes de Dirección del 17/10/2026 00:32 y 00:33): esta hoja, mobile-tables-r3.css/.js,
 * vaspanel-maqueta.js e iconos.json son el estándar de todo VasPanel, contabilidad incluida; tarjetas (§6) y tablas (§8 y
 * la tabla del móvil, §12) son los componentes núcleo. Guía con cada componente, su marcado y lo que no se puede
 * cambiar: sistema-diseno/SISTEMA_DE_DISENO.md. Galería: _componentes.html.
 */

/* ---------- 1. Fichas de color y medida ---------- */
.ux-symmetry {
  color-scheme: light;
  --bg: #f4f5f7; --card: #fff; --field: #fff; --ink: #1b1f24; --ink-2: #4f5761; --on-ink: #fff;     /* [R3] */
  --line: #e3e6ea; --line-2: #c9ced4; --thumb: #8b95a1; --sombra: rgba(0,0,0,.14);
  --ok: #1e7f4f; --ok-text: #14603b; --ok-bg: #e6f4ec;
  --warn: #c07c12; --warn-text: #7a4f07; --warn-bg: #fbf1dc;
  --none: #7a8290; --none-text: #4f5761; --none-bg: #eceef1;
  --accent: #1d4b45;              /* [R3] barra de progreso móvil y primera serie de los gráficos */
  --serie-1: #1d4b45; --serie-2: #7aa39c; --serie-3: #4f5761;   /* [VP] gráficos: 3 series como máximo */
  --gap-tarjetas: 16px;           /* [R3] --ux-card-gap */
  --gap-grupos: 24px;             /* [R3] --ux-group-gap */
  --ancho-origen: 56px;           /* [R3] --ux-origin-width */
  --vp-fondo: #f9fafb; --vp-texto: #0f1216; --vp-borde: #e2e5e7; --vp-apagado: #6e7277; --vp-gris: #f4f5f6;   /* [V1] */
  --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;      /* [V1] w-64 */
  --vp-ancho-carril: 64px;        /* [VP] D2: carril de iconos de 768 a 1479 px */
  --vp-alto-cabecera: 64px;       /* [V1] h-16 */
  --vp-margen: 24px;              /* [R3] margen de página (16 en el móvil) */
  --vp-max: 1600px;               /* [R3] R1: máximo 1600 px */
}

/* ---------- 2. Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body.ux-symmetry {
  margin: 0; background: var(--vp-fondo); color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.ux-symmetry *, .ux-symmetry *::before, .ux-symmetry *::after { box-sizing: border-box; }
.ux-symmetry [hidden] { display: none !important; }
.ux-symmetry a { color: inherit; text-underline-offset: 2px; }
.ux-symmetry :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Ronda 1 de la revisión · foco del menú lateral: sobre su fondo oscuro (#141822) el contorno común (--ink) no se veía
 * (1,07:1). En la barra, en el panel flotante del carril y en la hoja del móvil, contorno claro (--vp-lateral-texto, unos
 * 15:1) y por dentro de la entrada, para que el deslizamiento del menú no lo recorte. El logo, con aire alrededor, por fuera. */
.ux-symmetry .vp-lateral :is(a, button, [tabindex]):focus-visible { outline-color: var(--vp-lateral-texto); outline-offset: -3px; }
.ux-symmetry .vp-lateral .vp-logo a:focus-visible { outline-offset: 3px; }
.ux-symmetry button { font: inherit; color: inherit; }
.vp-oculto { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- 3. Marco [V1] ---------- */
.vp-app { --vp-lat: var(--vp-ancho-lateral); display: flex; min-height: 100vh; width: 100%;
  /* La barra lateral es sticky (100vh): este fondo la prolonga en las capturas de página entera. */
  background: linear-gradient(90deg, var(--vp-lateral) 0 calc(var(--vp-lat) - 1px), var(--vp-lateral-borde) 0 var(--vp-lat), transparent 0); }
.vp-lateral {
  position: sticky; top: 0; height: 100vh; width: var(--vp-ancho-lateral); flex: 0 0 var(--vp-ancho-lateral);
  display: flex; flex-direction: column; background: var(--vp-lateral); color: var(--vp-lateral-texto);
  border-right: 1px solid var(--vp-lateral-borde); z-index: 40;
}
.vp-logo { height: 64px; flex: 0 0 64px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--vp-lateral-borde-suave); }
.vp-logo a { display: flex; align-items: center; }
.vp-logo img { display: block; height: 26px; width: auto; filter: invert(1); user-select: none; }
.vp-logo .vp-logo-icono { display: none; }
.vp-menu { flex: 1; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.vp-menu a {
  display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 8px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 500; line-height: 20px; color: var(--vp-lateral-inactivo); text-decoration: none;
}
.vp-menu a:hover { background: rgba(33,41,56,.6); color: var(--vp-lateral-texto); }
.vp-menu a[aria-current="page"] { background: var(--vp-lateral-activo); color: var(--vp-lateral-activo-texto); }
.vp-menu svg { width: 18px; height: 18px; flex: 0 0 18px; }
/* M-1 (orden de Dirección del 17/10/2026 00:15) · el menú en dos bloques con su título: «Ver» (informes y consulta) y
 * «Hacer» (acciones), con una raya entre los dos. «Hacer» es un submenú que se abre y se cierra con su botón (título +
 * flecha); build.py lo saca abierto si la pantalla activa es de «Hacer» y vaspanel-maqueta.js lo maneja.
 * Así, en la barra completa (1480 px o más) y en el menú del móvil: el submenú se despliega debajo de su botón. En el
 * carril de 64 px es un panel flotante (§11). Los enlaces son los de siempre [V1]. [VP]
 * D-2 (18/10/2026) · el submenú «Contabilidad» va DENTRO de «Ver», detrás de «Panel fiscal / IVA»: una entrada-botón como
 * las demás (icono, nombre y flecha; .vp-entrada-submenu) y sus 4 entradas debajo, con sangría. Se comporta como «Hacer»;
 * abrir uno cierra el otro (vaspanel-maqueta.js), así el menú cabe sin deslizarse a 390 × 844 y a 1600 × 900. */
.vp-grupo, .vp-submenu, .vp-subgrupo { display: flex; flex-direction: column; gap: 4px; }
.vp-grupo-titulo { margin: 0; padding: 4px 12px 2px; font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: rgba(225,229,235,.55); }
.vp-grupo-hacer { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--vp-lateral-borde); }
.vp-submenu-btn {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 8px 12px; border: 0; border-radius: 10px;
  background: transparent; color: rgba(225,229,235,.55); text-align: left; cursor: pointer;
}
.vp-submenu-btn:hover { background: rgba(33,41,56,.6); color: var(--vp-lateral-texto); }
.vp-submenu-btn > .vp-grupo-titulo { padding: 0; color: inherit; }
.vp-submenu-btn > svg:first-child { display: none; }      /* el icono del bloque, solo en el carril */
.vp-submenu-btn > svg.vp-chevron { width: 16px; height: 16px; flex: 0 0 16px; margin-left: auto; transition: transform .15s; }
.vp-submenu-btn[aria-expanded="true"] > svg.vp-chevron { transform: rotate(180deg); }
.vp-grupo-hacer.vp-con-activo > .vp-submenu-btn { color: var(--vp-lateral-texto); }
.vp-submenu-titulo { display: none; }                    /* título del panel flotante, solo en el carril */
.vp-submenu-btn.vp-entrada-submenu { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--vp-lateral-inactivo); }
.vp-submenu-btn.vp-entrada-submenu > svg:first-child { display: block; }
.vp-submenu-btn.vp-entrada-submenu > .vp-submenu-texto { flex: 1 1 auto; min-width: 0; }
.vp-subgrupo.vp-con-activo > .vp-submenu-btn { color: var(--vp-lateral-texto); }
.vp-subgrupo > .vp-submenu a { padding-left: 24px; }      /* sangría de sus entradas (en el carril, panel flotante sin sangría) */
/* M-1 · un nombre que no cabe en una línea («Preparar pedido de la tienda desde CASA», que es su H1) sigue en una segunda
 * línea, con 18 px entre líneas. Los nombres de una línea no cambian: la fila la manda su alto mínimo y el texto va
 * centrado igual que con 20 px. */
.vp-menu a > span { line-height: 18px; }
/* Barra completa en una ventana de menos de 1048 px de alto (p. ej. 1600 × 1000): con «Hacer» abierto, las filas de 36 px
 * y 4 px entre ellas no caben (el menú entero mide 1044 px) y el menú se deslizaba (se perdía el título «Ver»). Ahí van
 * de 34 px y 2 px entre ellas, con 8 px arriba y abajo: el menú entero cabe desde 944 px de alto. Por debajo de 948 px
 * (p. ej. 1600 × 900), filas de 30 px: cabe desde 864 px. Los cortes dejan 4 px de margen. Más bajo, se desliza solo el
 * menú, hasta el submenú abierto (vaspanel-maqueta.js).
 * D-2 (18/10/2026): con la entrada «Contabilidad» (y sus 4 entradas al abrirla) los cortes de alto pasan de 1047 y 947 px
 * a 1083 y 983 px (los max-height de abajo). Con «Hacer» abierto, que es lo más alto (abrir uno cierra el otro), el menú
 * entero cabe con filas de 36 px por encima de 1083 px de alto, con filas de 34 hasta 1083 px y con filas de 30 hasta 983 px
 * (cabe desde 896 px; 1600 × 900 incluido). */
@media (min-width: 1480px) and (max-height: 1083px) {
  .vp-menu { padding-top: 8px; padding-bottom: 8px; gap: 2px; }
  .vp-grupo, .vp-submenu, .vp-subgrupo { gap: 2px; }
  .vp-menu :is(a, .vp-submenu-btn) { min-height: 34px; padding-top: 7px; padding-bottom: 7px; }
}
@media (min-width: 1480px) and (max-height: 983px) {
  .vp-menu :is(a, .vp-submenu-btn) { min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
}
.vp-lateral-pie { border-top: 1px solid var(--vp-lateral-borde-suave); padding: 12px; }
.vp-lateral-pie > div { border-radius: 10px; background: var(--vp-lateral-caja); padding: 10px 12px; font-size: 12px; line-height: 16px; }
.vp-lateral-pie strong { display: block; font-weight: 500; color: var(--vp-lateral-texto); }
.vp-lateral-pie span { color: rgba(225,229,235,.6); }

.vp-columna { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.vp-cabecera {
  position: sticky; top: 0; z-index: 30; height: var(--vp-alto-cabecera); display: flex; align-items: center; gap: 12px;
  padding: 0 24px; border-bottom: 1px solid var(--vp-borde); background: rgba(249,250,251,.85); backdrop-filter: blur(8px);
  color: var(--vp-texto);
}
.vp-cabecera-izq { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.vp-cabecera-der { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/* DEC-B: sin buscador en la barra superior (no existe todavía en VasPanel). DEC-A: los dos selectores, en todas. */
.vp-selector {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--vp-borde); border-radius: 8px;
  background: var(--vp-fondo); font-size: 12.8px; font-weight: 500; line-height: 1; color: var(--vp-texto); cursor: pointer; white-space: nowrap;
}
.vp-selector svg { width: 16px; height: 16px; flex: 0 0 16px; }
.vp-selector svg.vp-flechas { width: 14px; height: 14px; flex-basis: 14px; opacity: .6; }
.vp-icono-btn { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--vp-texto); cursor: pointer; padding: 0; }
.vp-icono-btn svg { width: 16px; height: 16px; }
.vp-icono-btn.vp-alertas svg { width: 18px; height: 18px; }
.vp-avatar { width: 32px; height: 32px; margin-left: 4px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--vp-gris); color: var(--vp-texto); }
.vp-avatar svg { width: 16px; height: 16px; }
.vp-hamburguesa, .vp-marca-movil { display: none; }
/* R-4 · valor corto del mes («Sep 2026») solo en el móvil; Tema y Alertas dentro del menú solo en el móvil (§11) */
.vp-selector-corto, .vp-menu-extra { display: none; }

.vp-main { flex: 1 1 auto; padding: 24px var(--vp-margen) 48px; }
.vp-contenido { width: 100%; max-width: var(--vp-max); margin: 0 auto; }

/* Cabecera de página: H1 + ⓘ, y el período debajo [V1 CabeceraPagina + R3 .cabecera] */
.ux-symmetry header.cabecera { margin: 0 0 var(--gap-grupos); }
.vp-fila-titulo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vp-fila-titulo h1 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; }
.vp-periodo { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); white-space: nowrap; }

/* ---------- 4. Estados (chips) [R3] · D6: solo Comprobado, Pendiente, Atención, Estimado y Sin dato ---------- */
.ux-symmetry .chip {
  display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1.4;
  padding: 2px 9px 2px 7px; border-radius: 999px; border: 1px solid;
}
.ux-symmetry .chip::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.ux-symmetry .chip.ok   { color: var(--ok-text);   background: var(--ok-bg);   border-color: var(--ok); }    /* Comprobado */
.ux-symmetry .chip.warn { color: var(--warn-text); background: var(--warn-bg); border-color: var(--warn); }  /* Pendiente · Atención · Estimado (ámbar, como la contabilidad) */
.ux-symmetry .chip.none { color: var(--none-text); background: var(--none-bg); border-color: var(--none); }  /* Sin dato */

/* ---------- 5. Botones de icono: ⓘ, Detalle, Origen [R3] ---------- */
.ux-symmetry .info { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.ux-symmetry .accion {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px;
  min-width: 48px; min-height: 44px; padding: 2px 4px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2);
  font: 400 11px/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .01em; text-decoration: none; cursor: pointer;
}
.ux-symmetry :is(.accion, .info):hover { color: var(--ink); background: var(--bg); }
.ux-symmetry :is(.accion, .info) svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ux-symmetry :is(.accion, .info)[aria-expanded="true"] { color: var(--ink); background: var(--bg); }

/* ---------- 6. Tarjetas [R3 anatomía + V1 subgrid] · D3 ---------- */
/* Menos de 1261 px: flex como -r3 (601-1260: 3 por fila; hasta 600: 1 por fila). */
.ux-symmetry .cifras { --cols: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--gap-grupos) var(--gap-tarjetas); margin: 0 0 var(--gap-grupos); container-type: inline-size; }
.ux-symmetry .cifras > .tarjeta { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-tarjetas)) / var(--cols)); min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ux-symmetry .tarjeta { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; } /* sin container-type: anularía el subgrid */
.ux-symmetry .tarjeta > h2 {
  margin: 0; min-height: 2.6em; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  word-break: normal; overflow-wrap: normal; hyphens: none;
}
.ux-symmetry .tarjeta > .estado { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 4px; min-height: 40px; margin: 0; }
.ux-symmetry .tarjeta > .estado .info { width: 36px; height: 36px; flex: 0 0 36px; }
.ux-symmetry .num-lg { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ux-symmetry .tarjeta > .fecha { margin: 0; min-height: 1.45em; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.ux-symmetry .tarjeta > .fecha > span { display: block; }
.ux-symmetry .tarjeta > .fecha > .ambito { font-weight: 600; }
.ux-symmetry .acciones { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; min-height: 52px; margin: 12px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); }
.ux-symmetry .tarjeta > .acciones { margin-top: auto; }
@media (max-width: 600px) { .ux-symmetry .cifras { --cols: 1; } }

/* 961 px o más (como -r3, ux-symmetry.css: «@media(min-width:961px) … --ux-columns:6»): una sola fila de 6 huecos con
 * subgrid. Ronda 7 (D3, «nunca 3+3»): antes la fila única empezaba en 1261 px y de 961 a 1260 salían 3+3 o 3+2. Con 3-4
 * tarjetas, el mismo tamaño que en el Resumen (R2: un sexto de la fila) y la fila CENTRADA: el hueco se reparte a los dos
 * lados, como en la ronda 3 (G2: nunca todo el hueco a la derecha).
 * ORDEN de Dirección del 16/10/2026 07:23, punto 1 (D3): con 5 tarjetas (Facturas y gastos y Conciliación bancaria) la
 * fila ocupa TODO el ancho: 5 columnas iguales con el mismo hueco de 16 px (12 de 961 a 1033 px), sin hueco a los lados.
 * El alto y la anatomía son los de la fila de 6: las mismas 5 filas del subgrid y los mismos pasos compactos, que se
 * miden por el ancho de la fila (.cifras) y no por el de la tarjeta. De 768 a 960 px no cambia: 3 por fila, como -r3. */
@media (min-width: 961px) {
  .ux-symmetry .cifras {
    --n: 6; display: grid; grid-template-columns: repeat(var(--n), calc((100% - 5 * var(--gap-tarjetas)) / 6));
    grid-template-rows: repeat(5, auto); justify-content: center; column-gap: var(--gap-tarjetas); row-gap: 8px;
  }
  .ux-symmetry .cifras[data-n="3"] { --n: 3; } .ux-symmetry .cifras[data-n="4"] { --n: 4; }
  .ux-symmetry .cifras[data-n="5"] { --n: 5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ux-symmetry .cifras > .tarjeta { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 8px; }
  .ux-symmetry .cifras > .tarjeta > .acciones { margin-top: 0; align-self: end; }
}
/* Tarjeta estrecha (fila de 6 en menos de 1394 px de contenido): títulos 11,5 px y cifra 24 px [R3].
 * Ronda 7 · tarjeta compacta de 961 a 1260 px (carril de 64 px, D2): la fila de 6 sigue en una fila y el chip y la ⓘ
 * siguen en la misma línea. Por pasos, según el ancho de la fila (.cifras es el contenedor): a 1278 px la fila mide
 * 1.166 px y no cambia nada; a 1200, 1.088; a 1024, 911; a 961, 848.
 *  - hasta 1.160 (tarjeta de 180 px o menos): relleno 14, chip de 11 px, ⓘ de 32, cifra 22, fecha 14;
 *  - hasta 1.030 (158 px o menos): relleno 12, chip sin el punto, cifra 20, fecha 13;
 *  - hasta 920 (140 px o menos): relleno 10, chip de 10,5 px, ⓘ de 28, cifra 19, fecha 12,5, título 11 px y 12 px entre
 *    tarjetas (con 16 el chip «Comprobado» y la ⓘ no caben a 961 px). */
@media (min-width: 961px) {
  @container (max-width: 1393px) {
    .ux-symmetry .tarjeta > h2 { font-size: 11.5px; letter-spacing: 0; line-height: 15.6px; min-height: 31.2px; }
    .ux-symmetry .num-lg { font-size: 24px; }
  }
  @container (max-width: 1160px) {
    .ux-symmetry .cifras > .tarjeta { padding: 14px; }
    .ux-symmetry .tarjeta > .estado .chip { font-size: 11px; letter-spacing: 0; padding: 1px 7px 1px 5px; }
    .ux-symmetry .tarjeta > .estado .chip::before { width: 6px; height: 6px; flex-basis: 6px; margin-right: 4px; }
    .ux-symmetry .tarjeta > .estado .info { width: 32px; height: 32px; flex-basis: 32px; }
    .ux-symmetry .num-lg { font-size: 22px; }
    .ux-symmetry .tarjeta > .fecha { font-size: 14px; }
  }
  @container (max-width: 1030px) {
    .ux-symmetry .cifras > .tarjeta { padding: 12px; }
    .ux-symmetry .tarjeta > .estado .chip::before { display: none; }
    .ux-symmetry .num-lg { font-size: 20px; }
    .ux-symmetry .tarjeta > .fecha { font-size: 13px; }
  }
  @container (max-width: 920px) {
    .ux-symmetry .cifras > .tarjeta { padding: 10px; }
    .ux-symmetry .tarjeta > h2 { font-size: 11px; line-height: 15px; min-height: 30px; }
    .ux-symmetry .tarjeta > .estado { gap: 2px; }
    .ux-symmetry .tarjeta > .estado .chip { font-size: 10.5px; padding: 1px 6px 1px 5px; }
    .ux-symmetry .tarjeta > .estado .info { width: 28px; height: 28px; flex-basis: 28px; }
    .ux-symmetry .num-lg { font-size: 19px; }
    .ux-symmetry .tarjeta > .fecha { font-size: 12.5px; }
  }
}
/* El hueco entre tarjetas es de la propia fila (.cifras no puede preguntarse por su ancho): de 961 a 1033 px de ventana
 * la fila mide 920 px o menos. */
@media (min-width: 961px) and (max-width: 1033px) { .ux-symmetry .cifras { --gap-tarjetas: 12px; } }

/* ---------- 7. Bloques [R3] · D4 ---------- */
.ux-symmetry .bloque { width: 100%; min-width: 0; margin: 0 0 var(--gap-grupos); padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); scroll-margin-top: calc(var(--vp-alto-cabecera) + 16px); }
.ux-symmetry .bh { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; }
.ux-symmetry .bh h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.45; }
.ux-symmetry .bh .der { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; margin-left: auto; }
.ux-symmetry .bh .periodo-bloque { white-space: nowrap; }
/* Bloque sin Detalle (formulario): su hueco se guarda para que la ⓘ quede en el mismo sitio que en los demás bloques */
.ux-symmetry .bh .accion-hueco { display: inline-block; width: 48px; min-height: 44px; flex: 0 0 48px; }
.ux-symmetry .bloque.vp-destacado { outline: 3px solid var(--warn); outline-offset: 2px; }
/* Pareja de bloques de medio ancho: solo si se declara (R4). Por debajo de 1261 px, uno debajo de otro. */
.ux-symmetry .pareja { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-grupos) var(--gap-tarjetas); margin: 0 0 var(--gap-grupos); align-items: stretch; }
.ux-symmetry .pareja > .bloque { margin: 0; }
@media (min-width: 1261px) { .ux-symmetry .pareja { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 8. Tablas [R3] ---------- */
.ux-symmetry .tabla-wrap { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--thumb) var(--line); }
@media (min-width: 761px) { .ux-symmetry .tabla-wrap { overflow: visible; } } /* sin scroll interno en el PC */
.ux-symmetry table.fija { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.ux-symmetry table.fija :is(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; word-break: normal; overflow-wrap: normal; hyphens: none; }
.ux-symmetry table.fija :is(th, td):first-child { padding-left: 0; }
.ux-symmetry table.fija :is(th, td):last-child { padding-right: 0; }
.ux-symmetry table.fija thead th { font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); text-align: left; white-space: normal; }
.ux-symmetry table.fija thead th.n { text-align: right; }
.ux-symmetry table.fija tbody th { font-size: inherit; font-weight: 400; text-align: left; color: var(--ink); }
.ux-symmetry table.fija :is(tbody, tfoot) tr { height: 62px; }  /* [R3] 8 + 44 (Origen) + 8 + raya; vaspanel-maqueta.js iguala la tabla a la fila más alta */
.ux-symmetry table.fija :is(tbody, tfoot) :is(th, td).n { text-align: right; white-space: nowrap; }
.ux-symmetry table.fija :is(th, td).c { text-align: center; }
.ux-symmetry table.fija :is(tbody, tfoot) :is(th, td).cod { white-space: nowrap; }   /* códigos en una línea */
/* Código (build.py: span.cod-txt > bdi): nunca se parte, ni en el PC ni en el móvil (D5). En el móvil ver §12. */
.ux-symmetry table.fija .cod-txt { white-space: nowrap; }
/* Fechas dd/mm/aaaa (build.py las envuelve en span.nw): nunca «17/09/» / «2026» ni «17/09/202» / «6». */
.ux-symmetry table.fija .nw { white-space: nowrap; }
.ux-symmetry table.fija :is(th, td).traza,
.ux-symmetry table.fija :is(th, td).det { width: var(--ancho-origen); min-width: var(--ancho-origen); max-width: var(--ancho-origen); text-align: center; white-space: nowrap; padding-left: 4px; padding-right: 0; }
.ux-symmetry table.fija td:is(.traza, .det) > .accion { margin: 0; }
.ux-symmetry table.fija .vacio { color: var(--ink-2); }
.ux-symmetry table.fija tr.total > :is(th, td) { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 400; }
.ux-symmetry table.fija tr.total > :first-child { font-weight: 600; text-align: left; }
.ux-symmetry table.fija :is(td, th).estado-celda { background: transparent; color: var(--ink); white-space: nowrap; } /* G16: chip, nunca celda de color */
/* Contenido de celda */
.ux-symmetry table.fija .c-fuerte { font-weight: 600; }
/* Segunda línea (nombre del producto, ruta…): ocupa TODA la celda y solo sale con «…» si no cabe en ella (C9: sin «…» si
 * hay sitio). max-width: 280px solo limita cuánto empuja el nombre al ancho de la columna (las columnas no cambian);
 * min-width: 100% gana a max-width al pintar, así la línea llega al borde de la celda (antes se cortaba a 280 px en
 * celdas de 366 a 480 px). El nombre entero sigue en title. En el móvil se oculta (§12). */
.ux-symmetry table.fija .c-sub { display: block; max-width: 280px; min-width: 100%; font-size: 12px; line-height: 1.35; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-symmetry table.fija .c-corto { display: none; }
.ux-symmetry table.fija a { text-decoration: underline; text-decoration-color: var(--line-2); }
.ux-symmetry table.fija a:hover { text-decoration-color: currentColor; }
/* Tablas anchas (10 columnas o más) [R3 ux-wide-table]. F-1 (cierre): 8 px a cada lado de cada celda de datos (antes 4),
 * para que entre los textos de dos celdas vecinas queden al menos 16 px («821,44 33» y «125,84 0,030» se leían pegados
 * a 8-12 px). ORIGEN y DETALLE siguen con sus 4 px. capturar.cjs mide ese hueco y falla a 1278 px si baja de 16. */
.ux-symmetry table.fija.ancha :is(th, td) { padding-inline: 4px; }
.ux-symmetry table.fija.ancha :is(th, td):not(.traza, .det) { padding-inline: 8px; }
.ux-symmetry table.fija.ancha :is(th, td):first-child { padding-left: 0; }
.ux-symmetry table.fija.ancha :is(th, td):last-child { padding-right: 0; }
@media (min-width: 761px) and (max-width: 1439px) {
  .ux-symmetry table.fija.ancha { font-size: 13px; }
  .ux-symmetry table.fija.ancha thead th { font-size: 10px; letter-spacing: 0; }
}
/* Ronda 7 · modo compacto (PC estrecho, 761 px o más): una tabla que no cabe en su bloque no desliza la página ni el
 * bloque. vaspanel-maqueta.js mide la tabla y le pone, por pasos y solo hasta que cabe:
 *  - .vp-c1: letra de 13 px y cabeceras de 10 px (lo de las tablas anchas), con 8 px a cada lado: los 16 px entre los
 *    textos de dos celdas vecinas se mantienen (F-1);
 *  - .vp-c2: 4 px a cada lado de la celda (lo que antes era .vp-c1);
 *  - .vp-c3: sin la segunda línea (nombre del producto: sigue en title y en el Origen), la 1.ª columna con su nombre corto
 *    (el del móvil, DEC-G) y sin su ancho mínimo, y los códigos con separadores en 2 líneas (saltan solo tras «-», «_»,
 *    «.», «/» o «:», nunca dentro de un tramo, como en el móvil);
 *  - .vp-c4: letra de 12 px, cabeceras de 9,5 px y 2 px a cada lado.
 * Si aun así no cabe, .vp-desliza en la envoltura: se desliza la tabla (no la página) con la 1.ª columna fija. */
@media (min-width: 761px) {
  .ux-symmetry table.fija.vp-c1 { font-size: 13px; }
  .ux-symmetry table.fija.vp-c1 thead th { font-size: 10px; letter-spacing: 0; }
  .ux-symmetry table.fija.vp-c1 :is(th, td) { padding-inline: 4px; }
  .ux-symmetry table.fija.vp-c1 :is(th, td):not(.traza, .det) { padding-inline: 8px; }
  .ux-symmetry table.fija.vp-c2 :is(th, td),
  .ux-symmetry table.fija.vp-c2 :is(th, td):not(.traza, .det) { padding-inline: 4px; }
  .ux-symmetry table.fija.vp-c3 .c-sub { display: none; }
  .ux-symmetry table.fija.vp-c3 tr > :first-child .c-largo:has(+ .c-corto) { display: none; }
  .ux-symmetry table.fija.vp-c3 tr > :first-child .c-corto { display: inline; }
  .ux-symmetry table.fija.vp-c3 thead th[style*="min-width"] { min-width: 0 !important; }
  .ux-symmetry table.fija.vp-c3 :is(tbody, tfoot) :is(th, td).cod { white-space: normal; }
  .ux-symmetry table.fija.vp-c3 .cod-txt.cod-dos { white-space: normal; overflow-wrap: normal; word-break: normal; }
  .ux-symmetry table.fija.vp-c4 { font-size: 12px; }
  .ux-symmetry table.fija.vp-c4 thead th { font-size: 9.5px; }
  .ux-symmetry table.fija.vp-c4 :is(th, td),
  .ux-symmetry table.fija.vp-c4 :is(th, td):not(.traza, .det) { padding-inline: 2px; }
  .ux-symmetry table.fija.vp-c1 :is(th, td):first-child { padding-left: 0; }
  .ux-symmetry table.fija.vp-c1 :is(th, td):last-child { padding-right: 0; }
  .ux-symmetry .tabla-wrap.vp-desliza { overflow-x: auto; }
  .ux-symmetry .tabla-wrap.vp-desliza table.fija tr > :first-child { position: sticky; left: 0; z-index: 4; background: var(--card); box-shadow: 1px 0 0 var(--line); }
}
.ux-symmetry .tabla-vacia { margin: 0; padding: 12px 0; color: var(--ink-2); }
/* R5 · tabla más alta que la ventana (PC): cabecera fija bajo la barra de 64 px y Total fijo abajo, sin scroll interno.
 * vaspanel-maqueta.js pone .vp-alta cuando la tabla no cabe en la ventana (en un diálogo, en su cuerpo, con
 * --vp-pegado-arriba: 0px). Es la regla ux-tall-table de -r3 (ux-symmetry.css), encendida. */
@media (min-width: 761px) {
  .ux-symmetry table.fija.vp-alta > thead > tr > th { position: sticky; top: var(--vp-pegado-arriba, var(--vp-alto-cabecera)); z-index: 5; background: var(--card); box-shadow: 0 1px 0 var(--line); }
  .ux-symmetry table.fija.vp-alta > tbody > tr.total > :is(th, td) { position: sticky; bottom: 0; z-index: 5; background: var(--card); }
}
/* Una captura de página entera (capturar.cjs pone html.vp-captura) o la impresión no pueden enseñar lo fijo: la
 * cabecera y el Total vuelven a su sitio (si no, el Total sale pintado a 900 px, encima de la 5.ª fila). */
html.vp-captura .ux-symmetry table.fija.vp-alta :is(thead th, tr.total > *) { position: static !important; box-shadow: none; }
@media print { .ux-symmetry table.fija.vp-alta :is(thead th, tr.total > *) { position: static !important; } }
/* DEC-D · tabla de más de 50 filas: «Resto · N» en una fila de la misma tabla (las columnas no se mueven al abrirlo).
 * Se ve como el resumen de un plegable. El Total sigue debajo, a la vista. */
.ux-symmetry table.fija tr.fila-resto { height: 44px; }
.ux-symmetry table.fija tr.fila-resto > :is(th, td) { padding-top: 0; padding-bottom: 0; border-bottom: 1px solid var(--line); }
.ux-symmetry table.fija .resto-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.ux-symmetry table.fija .resto-btn::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); transition: transform .15s; margin: 0 4px; }
.ux-symmetry table.fija .resto-btn[aria-expanded="true"]::before { transform: rotate(45deg); }
/* «+N»: el texto corto del móvil (§12); en el PC, «Resto · N» */
.ux-symmetry table.fija .resto-btn > .resto-corto { display: none; }
/* «Lo que falta» en el Detalle: lista (hueco en negrita · por qué falta) en una sola columna ancha + ORIGEN [VP] */
.ux-symmetry table.fija.lista-huecos tbody th { white-space: normal; }
.ux-symmetry table.fija.lista-huecos .c-explica { font-weight: 400; color: var(--ink); }

/* ---------- 9. Piezas dentro de un bloque [VP] ---------- */
/* Línea de aviso o de capacidad: una o dos líneas, nunca un párrafo (lo largo va en la ⓘ) [R3 .inventory-capacity] */
.ux-symmetry .aviso-linea { margin: 0 0 12px; padding: 10px 14px; border: 1px solid #e1d5b3; border-radius: 8px; background: #fffaf0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.ux-symmetry .aviso-linea.neutro { border-color: var(--line); background: var(--bg); }
.ux-symmetry .aviso-linea.abajo { margin: 12px 0 0; }
.ux-symmetry .aviso-linea strong { font-weight: 600; }
/* Plegable sin triángulo nativo (V1 r2, Amazon 4) */
.ux-symmetry details.plegable { margin-top: 16px; border-top: 1px solid var(--line); }
.ux-symmetry .bloque > details.plegable:first-of-type:only-child { margin-top: 0; border-top: 0; }
.ux-symmetry details.plegable > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; font-size: 15px; font-weight: 600; cursor: pointer; }
.ux-symmetry details.plegable > summary::-webkit-details-marker { display: none; }
.ux-symmetry details.plegable > summary::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); transition: transform .15s; margin: 0 4px; }
.ux-symmetry details.plegable[open] > summary::before { transform: rotate(45deg); }
.ux-symmetry details.plegable > summary .chip { margin-left: auto; }
.ux-symmetry details.plegable > .plegable-cuerpo { padding: 0 0 8px; }
.ux-symmetry details.plegable.datos-grafico > summary { font-size: 14px; font-weight: 500; color: var(--ink-2); }

/* Gráfico de barras en SVG en línea [VP]. Las cifras exactas van en «Datos del gráfico», con su Origen. */
.ux-symmetry .grafico { margin: 0; }
.ux-symmetry .leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.ux-symmetry .leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.ux-symmetry .leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
/* Barras horizontales: UNA rejilla para todo el gráfico y cada fila en subgrid. Así la columna del valor mide lo mismo en
 * todas las filas (la de la cifra más larga) y el 100 % llega al mismo sitio en todas (antes, en el móvil, cada fila
 * tenía su propia pista: de 137,9 a 190,3 px en el Resumen). */
.ux-symmetry .barras-h { display: grid; grid-template-columns: minmax(80px, 26%) minmax(0, 1fr) minmax(72px, max-content); column-gap: 12px; row-gap: 6px; }
.ux-symmetry .barras-h .bh-fila { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; min-height: 28px; }
/* Etiqueta: hasta 2 líneas que se cortan entre palabras (nunca a media palabra); el nombre entero sigue en title */
.ux-symmetry .barras-h .bh-etq { font-size: 14px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.ux-symmetry .barras-h svg { display: block; width: 100%; height: 16px; }
.ux-symmetry .barras-h .bh-val { font-size: 14px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ux-symmetry .barras-v { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: 220px auto; column-gap: 8px; }
.ux-symmetry .barras-v .eje-y { position: relative; grid-row: 1; grid-column: 1; min-width: 40px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ux-symmetry .barras-v .eje-y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.ux-symmetry .barras-v .bv-plot { grid-row: 1; grid-column: 2; position: relative; border-left: 1px solid var(--line-2); }
.ux-symmetry .barras-v .bv-plot svg { display: block; width: 100%; height: 100%; }
.ux-symmetry .barras-v .eje-x { grid-row: 2; grid-column: 2; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding-top: 6px; font-size: 12px; color: var(--ink-2); text-align: center; }
.ux-symmetry .barras-v .eje-x span { white-space: nowrap; overflow: hidden; }

/* Formulario estático (Configuración, Facturas y gastos): se pinta como en VasPanel; la maqueta no guarda nada [VP] */
.ux-symmetry .formulario { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; margin: 0; }
.ux-symmetry .campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ux-symmetry .campo.ancho { grid-column: 1 / -1; }
.ux-symmetry .campo > label, .ux-symmetry .campo > .etq { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.ux-symmetry .campo :is(input, select, textarea) { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--field); color: var(--ink); font: inherit; font-size: 15px; }
.ux-symmetry .campo textarea { min-height: 80px; resize: vertical; }
.ux-symmetry .campo.casilla { flex-direction: row; align-items: center; gap: 8px; min-height: 40px; align-self: end; }
.ux-symmetry .campo.casilla input { width: 20px; height: 20px; min-height: 0; margin: 0; }
.ux-symmetry .campo.casilla label { color: var(--ink); font-weight: 400; font-size: 15px; }
.ux-symmetry .form-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ux-symmetry .form-acciones.solo-botones { justify-content: flex-start; }   /* bloque que en VasPanel solo tiene un botón */
.ux-symmetry .boton { min-height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--card); color: var(--ink); font-weight: 600; cursor: pointer; }
.ux-symmetry .boton.principal { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
/* Desactivado como en VasPanel (p. ej. «Purgar datos de demostración» sin datos de demostración) */
.ux-symmetry .boton:disabled, .ux-symmetry .campo :is(input, select, textarea):disabled { opacity: .5; cursor: not-allowed; }
/* Botón desactivado en VasPanel: se ve igual, pero se pulsa para leer por qué (nada bloqueado) */
.ux-symmetry .boton.desactivado, .ux-symmetry .boton[aria-disabled="true"] { opacity: .5; cursor: help; }
/* DEC-C · «Ir al bloque» al pie del Detalle que resume un bloque de la página */
.ux-symmetry .ir-bloque { margin: 0; }
.ux-symmetry a.boton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---------- 10. Nota de la ⓘ y de Origen (burbuja) [V1 Burbuja] y diálogo de Detalle [R3 dialog.dlg] ---------- */
/* z-index 1060: por encima de los títulos flotantes del móvil (1040) y por debajo del menú móvil (1100).
 * Alto: el de su contenido, hasta la pantalla menos 16 px arriba y abajo (antes 260 px: la mayoría de las notas de
 * Origen no cabían y se cortaban sin aviso). Si aun así no cabe, las sombras de arriba y abajo avisan de que hay más
 * (fondo «local»: la sombra se tapa al llegar al borde). capturar.cjs falla si una nota necesita scroll. */
.ux-symmetry .burbuja { position: fixed; z-index: 1060; width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; margin: 0; padding: 10px 12px;
  background: linear-gradient(#fff 30%, rgba(255,255,255,0)) top / 100% 28px no-repeat local, linear-gradient(rgba(255,255,255,0), #fff 70%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.24), transparent) top / 100% 12px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.24), transparent) bottom / 100% 12px no-repeat scroll, #fff;
  border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 8px 24px var(--sombra); font-size: 14px; line-height: 1.45; text-align: left; color: var(--ink); }
.ux-symmetry .burbuja p { margin: 0; } .ux-symmetry .burbuja p + p { margin-top: 6px; }
.ux-symmetry .burbuja .burbuja-titulo { font-weight: 600; margin-bottom: 6px; }
/* Nota de Origen pequeña (D4): cada dato en su línea, «Fuente · texto», a todo el ancho de la nota (antes, la etiqueta
 * en una columna y el texto en otra de 180 px: notas de hasta 441 px de alto en el móvil). El Cálculo largo va plegado. */
.ux-symmetry .burbuja .origen-datos { display: block; font-size: 13px; line-height: 1.4; }
.ux-symmetry .burbuja .origen-datos dt { display: inline; color: var(--ink-2); }
.ux-symmetry .burbuja .origen-datos dt::after { content: " · "; }
.ux-symmetry .burbuja .origen-datos dd { display: inline; margin: 0; }
.ux-symmetry .burbuja .origen-datos dd::after { content: "\A"; white-space: pre; }
.ux-symmetry .burbuja .origen-datos dd + dt { margin-top: 2px; }
.ux-symmetry .burbuja details.calculo { margin-top: 4px; font-size: 13px; line-height: 1.4; }
.ux-symmetry .burbuja details.calculo > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--ink-2); cursor: pointer; list-style: none; }
.ux-symmetry .burbuja details.calculo > summary::-webkit-details-marker { display: none; }
.ux-symmetry .burbuja details.calculo > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); }
.ux-symmetry .burbuja details.calculo[open] > summary::after { transform: rotate(45deg); }
/* Código entero al tocar uno que en la celda no cabe (móvil). Solo si pasa del ancho de la burbuja salta de línea. */
.ux-symmetry .burbuja .codigo-entero { font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: all; }
.ux-symmetry dialog.dlg { width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink); box-shadow: 0 12px 40px var(--sombra); }
.ux-symmetry dialog.dlg::backdrop { background: rgba(15,18,22,.35); }
.ux-symmetry .dlg > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.ux-symmetry .dlg > header h2 { margin: 0; font-size: 16px; font-weight: 600; }
.ux-symmetry .dlg .cuerpo { max-height: calc(100dvh - 160px); padding: 16px; overflow: auto; }
.ux-symmetry .dlg .cuerpo > * + * { margin-top: 12px; }
.ux-symmetry .dlg .cuerpo > p { margin: 0; }
.ux-symmetry .dlg .cerrar { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-2); font-size: 22px; cursor: pointer; }
.ux-symmetry .dlg > footer { display: flex; justify-content: flex-end; padding: 8px 16px 12px; border-top: 1px solid var(--line); }
.ux-symmetry .dlg > footer button { min-height: 40px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 6px; background: var(--ink); color: var(--on-ink); font-weight: 600; cursor: pointer; }
.ux-symmetry .origen-datos { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.ux-symmetry .origen-datos dt { color: var(--ink-2); } .ux-symmetry .origen-datos dd { margin: 0; overflow-wrap: anywhere; }
/* R-5 · código dentro de una lista Dato · Valor (Detalle y notas de Origen): nunca partido dentro de un tramo.
 * - .cod-partes (SKU, ruta, consulta): cada trozo en .nw y <wbr> entre ellos: salta solo detrás de un separador.
 * - .cod-txt.cod-linea (identificador opaco): en una línea; si no cabe, su principio con «…» y, al tocarlo, entero en la
 *   burbuja con el nombre de su Dato (vaspanel-maqueta.js).
 * build.py (valor_lista) y vaspanel-maqueta.js (notas de Origen) marcan los códigos con la misma regla. */
.ux-symmetry .origen-datos .cod-partes .nw { white-space: nowrap; }
.ux-symmetry .origen-datos .cod-txt { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; overflow-wrap: normal; }
.ux-symmetry .origen-datos .cod-txt > bdi { unicode-bidi: isolate; }
/* Dentro de una nota de Origen el código cortado se abre entero ahí mismo al tocarlo (la nota no se cambia por otra) */
.ux-symmetry .burbuja .origen-datos .cod-txt { cursor: pointer; }
.ux-symmetry .burbuja .origen-datos .cod-txt.vp-entero { display: inline; white-space: normal; overflow-wrap: anywhere; user-select: all; cursor: text; }
/* R-4 · la nota de Tema o Alertas, que en el móvil están dentro del menú, va por encima de la hoja del menú (1100) */
.ux-symmetry .burbuja.vp-sobre-menu { z-index: 1110; }

/* ---------- 11. Marco adaptable · D2 ---------- */
/* 768-1479 px: carril de iconos de 64 px (nombre en title y aria-label). Con él caben 6 tarjetas en una fila a 1278. */
@media (max-width: 1479px) {
  .vp-app { --vp-lat: var(--vp-ancho-carril); }
  .vp-lateral { width: var(--vp-ancho-carril); flex-basis: var(--vp-ancho-carril); }
  .vp-logo { justify-content: center; padding: 0; }
  .vp-logo .vp-logo-completo { display: none; }
  .vp-logo .vp-logo-icono { display: block; height: 26px; }
  .vp-menu { padding: 16px 8px; align-items: stretch; }
  .vp-menu a { justify-content: center; padding: 8px 0; }
  .vp-menu a > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vp-lateral-pie { display: none; }
}
/* M-1 · en el carril (768-1479 px): los dos bloques separados por la raya, sin títulos a la vista (están en title y
 * aria-label). «Hacer» es un botón con su icono y una flecha pequeña; al pulsarlo, el submenú sale como panel flotante
 * al lado del carril, con su título y el nombre de cada entrada, encima de la página y sin moverla (position: fixed; la
 * altura la pone vaspanel-maqueta.js, a la del botón). Se cierra con el mismo botón, al pulsar fuera o con Escape. Si la
 * pantalla activa es de «Hacer», el botón va marcado como la entrada activa. */
@media (min-width: 768px) and (max-width: 1479px) {
  .vp-grupo-ver > .vp-grupo-titulo,
  .vp-submenu-btn > .vp-submenu-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vp-submenu-btn { justify-content: center; padding: 8px 0; color: var(--vp-lateral-inactivo); }
  .vp-submenu-btn > svg:first-child { display: block; }
  .vp-submenu-btn > svg.vp-chevron,
  .vp-submenu-btn[aria-expanded="true"] > svg.vp-chevron { position: absolute; right: 1px; top: 50%; width: 10px; height: 10px; flex-basis: 10px; margin: -5px 0 0; transform: rotate(-90deg); }
  .vp-submenu-btn[aria-expanded="true"] { background: rgba(33,41,56,.6); color: var(--vp-lateral-texto); }
  .vp-grupo-hacer.vp-con-activo > .vp-submenu-btn,
  .vp-subgrupo.vp-con-activo > .vp-submenu-btn { background: var(--vp-lateral-activo); color: var(--vp-lateral-activo-texto); }
  .vp-submenu {
    position: fixed; left: calc(var(--vp-ancho-carril) + 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-submenu-titulo { display: block; margin: 0; padding: 4px 12px 6px; font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: rgba(225,229,235,.55); }
  .vp-menu .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; }
}
/* Menos de 768 px: sin barra lateral; menú en hoja lateral desde la hamburguesa (z-index 1100) */
@media (max-width: 767px) {
  .vp-app { --vp-lat: 0px; background: none; }
  .vp-lateral { display: none; }
  .vp-lateral.vp-abierta { display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: 288px; height: 100dvh; z-index: 1100; box-shadow: 0 0 0 100vmax rgba(15,18,22,.45); }
  .vp-lateral.vp-abierta .vp-logo { justify-content: flex-start; padding: 0 20px; }
  .vp-lateral.vp-abierta .vp-logo .vp-logo-completo { display: block; height: 24px; }
  .vp-lateral.vp-abierta .vp-logo .vp-logo-icono { display: none; }
  .vp-lateral.vp-abierta .vp-menu a { justify-content: flex-start; padding: 8px 12px; }
  .vp-lateral.vp-abierta .vp-menu a > span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .vp-lateral.vp-abierta .vp-lateral-pie { display: block; }
  /* M-1 · en el móvil, los dos bloques con su título y «Hacer» desplegable debajo de su botón. Con 19 entradas (una de dos
   * líneas), 2 títulos y la raya, las filas pasan de 36 a 30 px y de 4 a 2 px entre ellas: así el menú entero, con «Hacer»
   * abierto, cabe sin deslizarse a 390 × 844 (R-4).
   * D-2 (18/10/2026): con la entrada «Contabilidad» y sus 4 entradas, las filas pasan a 28 px; con «Contabilidad» abierta o
   * con «Hacer» abierto (nunca los dos: abrir uno cierra el otro) el menú sigue cabiendo sin deslizarse a 390 × 844. */
  .vp-lateral.vp-abierta .vp-menu { padding: 4px 12px; gap: 2px; }
  .vp-lateral.vp-abierta :is(.vp-grupo, .vp-submenu, .vp-subgrupo) { gap: 2px; }
  .vp-lateral.vp-abierta .vp-subgrupo > .vp-submenu a { padding-left: 24px; }
  .vp-lateral.vp-abierta .vp-menu :is(a, .vp-submenu-btn) { min-height: 28px; padding-top: 4px; padding-bottom: 4px; }
  .vp-lateral.vp-abierta .vp-grupo-hacer { margin-top: 2px; padding-top: 4px; }
  /* R-4 · barra móvil: ☰ + monograma a la izquierda; a la derecha, los dos selectores CON su valor («Sep 2026»,
   * «Consolidado») y la cuenta. Para que quepan a 390 px (y a 360): sin el título repetido (el H1 está justo debajo y el
   * menú marca la pantalla) y con Tema y Alertas dentro del menú (arriba, junto al logo). Nada se esconde. */
  .vp-cabecera { padding: 0 16px; gap: 8px; }
  .vp-cabecera-der { gap: 6px; }
  .vp-hamburguesa { display: inline-grid; flex: 0 0 32px; }
  .vp-hamburguesa svg { width: 20px; height: 20px; }
  .vp-marca-movil { display: inline-flex; align-items: center; flex: 0 0 auto; }
  .vp-marca-movil img { display: block; height: 22px; width: auto; }
  .vp-selector { height: 32px; padding: 0 8px; gap: 5px; }
  .vp-selector svg.vp-flechas { display: none; }
  .vp-selector .vp-selector-largo { display: none; }
  .vp-selector .vp-selector-corto { display: inline; }
  .vp-avatar { margin-left: 0; }
  .vp-cabecera .vp-icono-btn.en-barra { display: none; }
  .vp-lateral.vp-abierta .vp-menu-extra { display: flex; gap: 4px; margin-left: auto; }
  .vp-menu-extra .vp-icono-btn { width: 36px; height: 36px; color: var(--vp-lateral-texto); }
  .vp-menu-extra .vp-icono-btn:hover { background: rgba(33,41,56,.6); }
  .ux-symmetry { --vp-margen: 16px; }
  .vp-periodo { white-space: normal; }
  .ux-symmetry .bh .der { margin-left: 0; }
  /* En el móvil la ⓘ va justo detrás del título: el hueco del Detalle que no hay (formulario) no la alinea con nada y, con un
     título largo («Condiciones de pago por proveedor», Configuración), la echaba a otra línea. Pulido del 17/10/2026. */
  .ux-symmetry .bh .accion-hueco { display: none; }
}
/* De 601 a 767 px sobra sitio: el mes entero y las flechas */
@media (min-width: 601px) and (max-width: 767px) { .vp-selector .vp-selector-largo { display: inline; } .vp-selector .vp-selector-corto { display: none; } .vp-selector svg.vp-flechas { display: block; } }
/* Por debajo de 380 px, selectores más justos; por debajo de 360, sin su icono (el valor sigue a la vista) */
@media (max-width: 379px) { .vp-selector { padding: 0 6px; gap: 4px; } .vp-cabecera-der { gap: 4px; } }
@media (max-width: 359px) { .vp-selector > svg { display: none !important; } .vp-cabecera { gap: 6px; } }

/* ---------- 12. Complementos al componente móvil (mobile-tables-r3.css se usa sin tocar) ---------- */
@media screen and (max-width: 760px) {
  /* Cabeceras: palabras de más de 10 letras con guion blando (build.py lo pone); esta regla deja que se use. */
  html body.ux-symmetry table.fija.r3-mobile-table thead tr th { hyphens: manual !important; -webkit-hyphens: manual !important; }
  /* Celdas de texto: build.py pone guion blando en las palabras de más de 7 letras; aquí se deja usar. */
  html body.ux-symmetry table.fija.r3-mobile-table :is(tbody, tfoot) tr :is(th, td) { hyphens: manual !important; -webkit-hyphens: manual !important; }
  /* Primera columna estrecha: texto corto si lo hay; la segunda línea se oculta para que la fila siga en 44 px. */
  .ux-symmetry table.fija .c-largo:has(+ .c-corto) { display: none; }
  .ux-symmetry table.fija .c-corto { display: inline; }
  .ux-symmetry table.fija .c-sub { display: none; }
  .ux-symmetry .barras-h { grid-template-columns: minmax(72px, 32%) minmax(0, 1fr) max-content; column-gap: 8px; }
  .ux-symmetry .barras-v .eje-x { font-size: 11px; }
  /* Códigos (ASIN, FNSKU, facturas, envíos, nombres de campo de Amazon), D5: nunca partidos dentro de un tramo. La columna
   * mide 76-80 px a 390; letra de 11 px. El componente -r3 pone white-space:normal y overflow-wrap:anywhere en la celda;
   * esto va en el span interior.
   * - .cod-dos (el código tiene separadores o jorobas, build.py pone <wbr> solo ahí): hasta 2 líneas, sin partir ningún
   *   tramo («inv-age-181-» / «to-270-days»). 2 × 13,75 px + 8 de relleno: la fila sigue en 44 px. Si necesita más de 2,
   *   se ven las 2 ÚLTIMAS (lo que distingue «…-cash» de «…-total») y vaspanel-maqueta.js pone «…» delante
   *   (.vp-corta-arriba).
   * - Un solo tramo (ASIN, envío, factura): una línea; si no cabe, se ve el FINAL con «…» delante (dirección rtl +
   *   <bdi dir="ltr">: no cambia el orden de las letras).
   * Si no cabe entero, al tocarlo sale entero en la burbuja (vaspanel-maqueta.js). */
  /* 2 px más para el código que en la 1.ª columna (79 px) no cabía por menos de 1 px: «20260A040657» medía 72,3 en 71,4 */
  html body.ux-symmetry table.fija.r3-mobile-table :is(tbody, tfoot) tr :is(th, td).cod { padding-left: 3px !important; padding-right: 3px !important; }
  html body.ux-symmetry table.fija.r3-mobile-table :is(tbody, tfoot) tr :is(th, td).cod:first-child { padding-left: 4px !important; padding-right: 2px !important; }
  .ux-symmetry table.fija .cod-txt { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; font-size: 11px; letter-spacing: 0; }
  .ux-symmetry table.fija .cod-txt > bdi { unicode-bidi: isolate; }
  .ux-symmetry table.fija .cod-txt.cod-dos { display: flex; flex-direction: column; justify-content: flex-end; position: relative; max-height: 2.5em; line-height: 1.25; direction: ltr; white-space: normal; overflow-wrap: normal; word-break: normal; }
  .ux-symmetry table.fija .cod-txt.cod-dos > bdi { display: block; flex: none; overflow: hidden; text-overflow: ellipsis; }
  /* El «…» de un código al que le sobran líneas por arriba va en su propio hueco a la izquierda (antes se pintaba encima
   * de las 1-2 primeras letras de la línea que se ve: «…ferral-fee-», «…ıriable-»). */
  .ux-symmetry table.fija .cod-txt.cod-dos.vp-corta-arriba { padding-left: 0.95em; }
  .ux-symmetry table.fija .cod-txt.cod-dos.vp-corta-arriba::before { content: "\2026"; position: absolute; left: 0; top: 0; z-index: 1; width: 0.95em; background: none; }
  /* Lista de «Lo que falta»: la explicación sigue al hueco en la misma línea y usa todo el ancho del diálogo. */
  .ux-symmetry table.fija.lista-huecos .c-explica { font-size: 13px; }
  /* DEC-G · nombre corto + lo que distingue la fila (lote, oferta): 3 líneas de 11,5 px; la fila sigue en 44 px (la celda
   * deja 35 px dentro: 44 − 4 − 4 de relleno − 1 de raya; con 3 líneas de 12 px, 36, la fila salía de 45). */
  .ux-symmetry table.fija .c-corto.c-tres { display: block; font-size: 11px; line-height: 11.5px; }
  /* Barras: etiqueta en 2 líneas (fila de 36 px) en vez de cortada con «…» a media palabra */
  .ux-symmetry .barras-h .bh-fila { min-height: 36px; }
  .ux-symmetry .barras-h .bh-etq { font-size: 13px; line-height: 1.25; }
  /* DEC-D · el botón «Resto · N» va en la 1.ª columna (fija al deslizar), que deja 68 px: «Resto · 1.296» no cabe en una
   * línea y se partía en dos. En el móvil se ve «+N» (con la flecha, en una línea); «Resto · N» sigue en su title y en su
   * nombre (aria-label). build.py pone los dos textos. */
  .ux-symmetry table.fija .resto-btn { min-height: 34px; font-size: 13px; line-height: 1.25; white-space: nowrap; text-align: left; gap: 4px; }
  .ux-symmetry table.fija .resto-btn > .resto-largo { display: none; }
  .ux-symmetry table.fija .resto-btn > .resto-corto { display: inline; }
  /* Última parada de las flechas al principio de una columna: el relleno que calcula vaspanel-maqueta.js, detrás de la
   * tabla y de sus títulos fijos (el componente -r3 no se toca) */
  .ux-symmetry .r3-mobile-frame > .r3-mobile-scroller::after,
  .ux-symmetry .r3-mobile-frame > .r3-mobile-floating-head > .r3-mobile-head-scroll::after { content: ""; display: block; height: 0; width: calc(var(--r3-table-width, 0px) + var(--vp-relleno, 0px)); }
}

/* ---------- 13. Módulo de contabilidad: componentes de vista sin datos (18/10/2026) [VP] ----------
 * Guía r3 de Codex y decisiones D-1 a D-11 del coordinador. Solo VISTA: nada se captura, edita ni emite. Lo único que se
 * mueve: menú, selector de espacio, pestañas y desplegables (vaspanel-maqueta.js). Marcado y reglas de cada pieza:
 * sistema-diseno/SISTEMA_DE_DISENO.md §3.14 a §3.21 y data/ESQUEMA.md §11. */
/* Tarjeta de texto (cabecera común del módulo, D-4): un texto en el sitio de la cifra, en 2 líneas como mucho */
.ux-symmetry .num-lg.vp-tarjeta-texto { font-size: 16px; line-height: 1.3; letter-spacing: 0; white-space: normal; overflow-wrap: normal; min-height: 2.6em; }
@media (min-width: 961px) {
  @container (max-width: 1160px) { .ux-symmetry .num-lg.vp-tarjeta-texto { font-size: 15px; } }
  @container (max-width: 1030px) { .ux-symmetry .num-lg.vp-tarjeta-texto { font-size: 14px; } }
  @container (max-width: 920px) { .ux-symmetry .num-lg.vp-tarjeta-texto { font-size: 13px; } }
}
/* Selector de espacio «Histórico importado | Futuro nativo» (D-4): dos botones con aria-pressed, centrados bajo las tarjetas */
.ux-symmetry .vp-espacio { display: flex; width: fit-content; max-width: 100%; margin: 0 auto var(--gap-grupos); border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); overflow: hidden; }
.ux-symmetry .vp-espacio-opcion { min-height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.25; cursor: pointer; }
.ux-symmetry .vp-espacio-opcion + .vp-espacio-opcion { border-left: 1px solid var(--line-2); }
.ux-symmetry .vp-espacio-opcion:hover { background: var(--bg); }
.ux-symmetry .vp-espacio-opcion[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
/* Ronda 1 · foco del selector de espacio: .vp-espacio recorta lo que sale de él (overflow: hidden), así que el contorno va
 * por dentro del botón y con el color que contrasta con su fondo: --ink en la opción no elegida y claro en la elegida. */
.ux-symmetry .vp-espacio-opcion:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
.ux-symmetry .vp-espacio-opcion[aria-pressed="true"]:focus-visible { outline-color: var(--on-ink); }
/* Pestañas: de navegación entre pantallas (enlaces, nav.vp-navegacion) y de una ficha (botones role=tab), mismo aspecto */
.ux-symmetry :is(.vp-navegacion, .vp-pestanas) { display: flex; flex-wrap: wrap; gap: 0 4px; }
.ux-symmetry .vp-navegacion { margin: 0 0 var(--gap-grupos); border-bottom: 1px solid var(--line); }
.ux-symmetry :is(.vp-nav-pestana, .vp-pestana) {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 -1px; padding: 0 12px; border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; cursor: pointer;
}
.ux-symmetry :is(.vp-nav-pestana, .vp-pestana):hover { color: var(--ink); }
.ux-symmetry :is(.vp-nav-pestana[aria-current="page"], .vp-pestana[aria-selected="true"]) { color: var(--ink); border-bottom-color: var(--ink); }
/* La ficha con pestañas: las pestañas, al pie de la tarjeta de su cabecera; debajo, el panel de la pestaña elegida */
.ux-symmetry .bloque.bloque-pestanas { padding-bottom: 0; }
.ux-symmetry .bloque-pestanas > .vp-pestanas { margin: 0 -16px; padding: 0 12px; border-top: 1px solid var(--line); }
.ux-symmetry .bloque-pestanas > .vp-pestanas > .vp-pestana { margin: 0; }
.ux-symmetry .bloque-pestanas > .bh { margin-bottom: 12px; }
/* Bloque «vista»: sus piezas una debajo de otra, con 16 px entre ellas */
.ux-symmetry .bloque-vista > * + * { margin-top: 16px; }
.ux-symmetry .bloque-vista > .vp-navegacion { margin-bottom: 0; }
.ux-symmetry .vp-subtitulo { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.ux-symmetry .bloque-vista > * + .vp-subtitulo { margin-top: 24px; }
/* Lista de campos «Etiqueta: valor»: una fila por campo, como las de una tabla (62 px en el PC), con su Origen al final.
 * Con aire arriba y abajo: si el valor ocupa varias líneas (chip encima del motivo, en el móvil), no toca las rayas. */
.ux-symmetry .vp-campos { margin: 0; }
.ux-symmetry .vp-campo { display: grid; grid-template-columns: minmax(120px, 28%) minmax(0, 1fr); align-items: center; column-gap: 16px; min-height: 62px; padding-block: 8px; border-bottom: 1px solid var(--line); }
.ux-symmetry .vp-campo > dt { color: var(--ink-2); font-weight: 600; }
.ux-symmetry .vp-campo > dd { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.ux-symmetry .vp-valor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex: 1 1 auto; min-width: 0; }
.ux-symmetry .vp-campo > dd > .accion { flex: 0 0 var(--ancho-origen); }
/* Enlaces del módulo: «Vista de diseño · ficha vacía» y «Consultar vista …» (D-7), fuera de las filas */
.ux-symmetry .vp-enlaces { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ux-symmetry a.boton.vp-enlace { min-height: 40px; }
/* Acciones deshabilitadas (D-6): disabled, el texto legible (sin transparencia) y la causa a la vista debajo */
.ux-symmetry .vp-acciones { padding-top: 16px; border-top: 1px solid var(--line); }
.ux-symmetry .vp-acciones:first-child, .ux-symmetry .bloque-vista > .bh + .vp-acciones { padding-top: 0; border-top: 0; }
.ux-symmetry .vp-acciones-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.ux-symmetry .boton.vp-off, .ux-symmetry .boton.vp-off:disabled { opacity: 1; border: 1px dashed var(--line-2); background: var(--bg); color: var(--ink-2); cursor: not-allowed; }
.ux-symmetry .vp-causa { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
/* Alineación r5 · pieza «capas» (guía r5 D01): una lista de campos de dos filas, «Metadatos» con el rótulo «Documentado en
 * r5 · PENDIENTE_CONTRASTE» como texto (nunca chip ni junto a un valor) y «Área de negocio» con «Sin dato · No se ha cargado
 * información». Cada una con su Origen al final, como las demás filas. */
.ux-symmetry .vp-capas { border-top: 1px solid var(--line); }
.ux-symmetry .vp-capa-rotulo { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ink); }
/* Desplegable de explicación (estático, cerrado al cargar) y fila «sin carga» de una tabla (D-8) */
.ux-symmetry .vp-explicacion-texto { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.ux-symmetry table.fija tr.vp-sin-carga .vp-motivo-fila { color: var(--ink-2); }
.ux-symmetry table.fija tr.vp-sin-carga .chip + .vp-oculto + .vp-motivo-fila { margin-left: 8px; }
@media (max-width: 760px) {
  .ux-symmetry .vp-espacio { width: 100%; }
  .ux-symmetry .vp-espacio-opcion { flex: 1 1 50%; padding: 0 8px; }
  .ux-symmetry :is(.vp-nav-pestana, .vp-pestana) { padding: 0 10px; font-size: 14px; }
  .ux-symmetry .vp-campo { grid-template-columns: minmax(84px, 32%) minmax(0, 1fr); column-gap: 8px; min-height: 44px; padding-block: 6px; font-size: 13px; line-height: 1.3; }
  .ux-symmetry .vp-campo > dd > .accion { flex-basis: 54px; }
  .ux-symmetry .vp-causa { font-size: 13px; }
}

@media print { .vp-lateral, .vp-cabecera, .ux-symmetry .info { display: none !important; } }