/* ============================================================================
   ARMADURAS EN LA APP — lo que la interfaz agrega para una armadura
   (armadura-flex/1, docs/armaduras.md §8; su dibujo con el ratón usa las
   piezas de marcos.css, .mc-lz): las filas, avisos y fuerzas de sus
   paneles (paneles-armadura.js),
   el dibujo de respaldo del lienzo (lienzo.js, mientras figs-armadura.js no
   esté), el segmentado de plantillas del catálogo, la paleta del teléfono,
   Resultados (hoja.js) y el aviso de la ayuda. La hoja y sus figuras son de
   armaduras.css (prefijo ak-). Todo con los tokens de tokens.css: se ve
   igual en claro y en oscuro. Prefijo .au-
   ========================================================================== */

/* ---- paneles: la burbuja del nudo en la columna del índice y el aviso de la fila */
.au-bub { justify-self: center; }
.au-row { position: relative; }
.au-row .au-flag { grid-column: 5; grid-row: 1; justify-self: end; display: inline-flex; color: var(--defl); }
.au-sum { padding: 2px 4px 2px 34px; font-size: 12px; color: var(--ink2); list-style: none; }
.au-err { display: flex; align-items: flex-start; gap: 6px; }
.au-err .ic { flex: none; margin-top: 1px; }
.au-err-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.au-text { flex: 1 1 auto; min-width: 0; width: 100%; }
.au-foot-t { font-family: var(--math); font-size: 12.5px; color: var(--ink2); }
.au-ro { align-items: flex-start; }
.au-datos > span { white-space: normal; }
/* las acciones de un elemento (Barra desde, Invertir, Dividir, Eliminar) pasan a otro renglón si no caben */
.au-acts { flex-wrap: wrap; }

/* ---- la fuerza de una barra: tensión (T) o compresión (C), siempre con su letra */
.au-tc { font-family: var(--ui); font-weight: 600; font-size: 0.92em; color: var(--real); }
.au-tc-C { color: var(--real); }

/* ---- lienzo: la armadura en la zona libre (la misma caja que el marco, .mc-lz) */
.au-lz-na { max-width: 380px; }
.au-fb { display: block; overflow: visible; font-family: var(--ui); }
.au-fb .au-fb-bar { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.au-fb .au-fb-gap { fill: none; stroke: var(--canvas); stroke-width: 7; stroke-linecap: butt; }
.au-fb .au-fb-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.au-fb circle.au-fb-hit { fill: transparent; stroke: none; pointer-events: all; }
.au-fb .au-fb-halo { fill: none; stroke: var(--accent); stroke-opacity: 0.35; stroke-width: 9; stroke-linecap: round; }
.au-fb .au-fb-node { fill: var(--raised); stroke: var(--ink); stroke-width: 1.6; }
.au-fb .au-fb-nhalo { fill: var(--accent); fill-opacity: 0.18; stroke: var(--accent); stroke-width: 1.6; }
.au-fb .au-fb-let { font-family: var(--math); font-style: italic; font-size: 15px; fill: var(--ink); paint-order: stroke; stroke: var(--canvas); stroke-width: 3px; stroke-linejoin: round; }
.au-fb .au-fb-sup { fill: var(--raised); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.au-fb .au-fb-gnd { fill: none; stroke: var(--ink2); stroke-width: 1.3; stroke-linecap: round; }
.au-fb g.is-sel .au-fb-sup { stroke: var(--accent); stroke-width: 2; }
.au-fb .au-fb-ld { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.au-fb .au-fb-ld.au-fb-head { fill: var(--ink); stroke: none; }
.au-fb g.is-sel .au-fb-ld { stroke: var(--accent); }
.au-fb g.is-sel .au-fb-ld.au-fb-head { fill: var(--accent); stroke: none; }
.au-fb .au-fb-r { fill: none; stroke: var(--ink2); stroke-width: 1.6; stroke-linecap: round; }
.au-fb .au-fb-r.au-fb-head { fill: var(--ink2); stroke: none; }
.au-fb .is-solved .au-fb-r { stroke: var(--real); stroke-width: 2; }
.au-fb .is-solved .au-fb-r.au-fb-head { fill: var(--real); stroke: none; }
.au-fb .au-fb-lt, .au-fb .au-fb-rt, .au-fb .au-fb-gt { font-size: 12.5px; fill: var(--ink); paint-order: stroke; stroke: var(--canvas); stroke-width: 3px; stroke-linejoin: round; }
.au-fb .au-fb-rt { fill: var(--ink2); }
.au-fb .is-solved .au-fb-rt { fill: var(--real); }
.au-fb .au-fb-gt { fill: var(--defl); }
.au-fb .au-fb-i { font-family: var(--math); font-style: italic; font-size: 14px; }
.au-fb [data-sel] { cursor: pointer; }

/* ---- teléfono: la paleta de la armadura (sus datos, de solo lectura; la nota va arriba) */
.mv-pal.au-mv-pal > button { flex-direction: row; gap: 10px; font-size: 15px; line-height: 20px; font-weight: 500; }

/* ---- hoja: en el teléfono, lo ancho de una armadura (sistemas, tablas por
   barra) se desplaza dentro de su caja y no desborda la hoja */
.hj-sheet.is-armadura.is-phone table { display: block; max-width: 100%; overflow-x: auto; }
.hj-sheet.is-armadura.is-phone svg { max-width: 100%; height: auto; }
.hj-sheet.is-armadura .au-pend .st-p { margin: 0; }

/* ---- Resultados: la tabla de N con T o C y la armadura con sus fuerzas */
.au-rn .hj-ru .au-tc { margin-left: 2px; }
.au-rnote { margin: 6px 0 0; font-size: 12px; color: var(--ink2); }
.au-rnote .au-tc { margin-right: 2px; }
.au-rfig svg { display: block; max-width: 100%; height: auto; }

/* ---- ayuda: el aviso de que la de armaduras llega después */
.au-ay p { max-width: 440px; }

/* ---- catálogo: el texto de las plantillas de armaduras */
.au-lead { margin-top: -4px; }