/* ============================================================================
   MARCOS — lo que la app agrega para un marco (marco-flex/1): el dibujo del
   marco en el lienzo (lienzo.js y, con el ratón, lienzo-marco.js; también
   el de una armadura), las filas y avisos de sus paneles
   (paneles-marco.js), la paleta del teléfono (movil.js), la hoja del
   teléfono (tablas anchas con desplazamiento propio), la ayuda (su aviso) y
   el segmentado de plantillas del catálogo. Todo con los tokens de
   tokens.css: se ve igual en claro y en oscuro. Prefijo .mc-
   ========================================================================== */

/* ---- lienzo: el dibujo de VigaFigsMarco.frame, centrado en la zona libre
   (el respaldo de lienzo.js, sin lienzo-marco.js) */
.mc-lz { z-index: 1; display: flex; align-items: center; justify-content: center; }
.mc-lz[hidden] { display: none; }
.mc-lz > svg { display: block; flex: none; max-width: 100%; max-height: 100%; }
.mc-lz [data-sel] { cursor: pointer; }
.mc-lz-na { max-width: 360px; margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--fill); color: var(--ink2); font-size: 13px; line-height: 18px; text-align: center; }

/* ---- lienzo con el dibujo con el ratón (lienzo-marco.js, fase F5): el
   dibujo mide todo el lienzo y sigue a la vista (zoom y desplazamiento);
   encima, la capa de guías (tramo elástico, ajustes, ventana), que no
   recibe el puntero; el cursor lo pone la herramienta */
.mc-lz.mc-lz-full { display: block; touch-action: none; }
.mc-lz.mc-lz-full > svg { position: absolute; left: 0; top: 0; max-width: none; max-height: none; }
.mc-lz.mc-lz-full > svg.mc-lz-h { pointer-events: none; overflow: visible; }
.mc-lz.mc-lz-full [data-sel] { cursor: inherit; }
/* sin nudos: el aviso de cómo empezar (las mismas piezas que el de la viga) */
.mc-lz-empty { position: absolute; }
/* un nodo que aún no tiene barras */
.mk-loose { fill: var(--raised); stroke: var(--ink); stroke-width: 1.6; }
/* el campo del largo de la herramienta Barra: su ayuda («5 · 5<30 · @3,4») */
.lz-ed-help { padding-right: 6px; font-family: var(--mono); font-size: 11px; color: var(--ink2); white-space: nowrap; }
/* la botonera de un marco o una armadura: «Con números» solo con sus íconos
   (el nombre sigue en el tip y para el lector de pantalla) */
#ribbon .sh-grp-num .sh-tool { min-width: 40px; width: 40px; padding: 0; }
#ribbon .sh-grp-num .sh-tool .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- paneles: la burbuja del nodo en la columna del índice y el aviso de la fila */
.mc-bub { justify-self: center; }
.mc-row { position: relative; }
.mc-row .mc-flag { grid-column: 5; grid-row: 1; justify-self: end; display: inline-flex; color: var(--defl); }
.mc-sum { padding: 2px 4px 2px 34px; font-size: 12px; color: var(--ink2); list-style: none; }
.mc-err { display: flex; align-items: flex-start; gap: 6px; }
.mc-err .ic { flex: none; margin-top: 1px; }
.mc-err-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-text { flex: 1 1 auto; min-width: 0; width: 100%; }
.mc-foot-t { font-family: var(--math); font-size: 12.5px; color: var(--ink2); }
.mc-ro { align-items: flex-start; }
.mc-datos > span { white-space: normal; }

/* ---- teléfono: la paleta del marco (sus datos, de solo lectura; la nota va arriba) */
.mv-pal.mc-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 un marco (el sistema de 6 × 6, las
   tablas por barra) se desplaza dentro de su caja y no desborda la hoja */
.hj-sheet.is-marco.is-phone table { display: block; max-width: 100%; overflow-x: auto; }
.hj-sheet.is-marco.is-phone svg { max-width: 100%; height: auto; }
.hj-sheet.is-marco .mc-pend .st-p { margin: 0; }

/* ---- Resultados: los diagramas sobre el marco */
.mc-rfig svg { display: block; max-width: 100%; height: auto; }

/* ---- ayuda: el aviso de que la de marcos llega después */
.mc-ay p { max-width: 420px; }

/* ---- catálogo: [Vigas | Marcos] junto al título de las plantillas */
.mc-tplseg { margin-left: 12px; }
.mc-tplseg > button { min-width: 72px; }
.mc-lead { margin-top: -4px; }

/* ---- paneles: las acciones de un elemento (Invertir, Dividir, Eliminar) pasan a otro renglón si no caben */
.mc-acts { flex-wrap: wrap; }

/* ---- catálogo: «Marco en blanco» y «Armadura en blanco» (se dibujan con la
   herramienta Barra), aparte de las plantillas con miniatura */
.mc-blank { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 2px 0 14px; }
.mc-blank-b { flex: none; }
.mc-blank-t { font-size: 12.5px; color: var(--ink2); }

/* ---- Por barras (figs-marco.js, parts; docs/marcos.md §11c): las fuerzas
   de pasador, de unión rígida y de las barras de dos fuerzas van como las
   reacciones (decisión 20: --real): ya conocidas, en color y en su sentido
   real; por conocer, discontinuas con su nombre. La línea punteada une los
   dos lados de una pareja de acción y reacción */
.fg-pin-l { stroke: var(--real); stroke-width: 2; }
.fg-pin-arc { fill: none; stroke: var(--real); stroke-width: 2; }
.fg-pin-head { fill: var(--real); }
.fg .fg-pin-t, .fg .fg-pin-t .fg-mu { fill: var(--real); }
.fg-pinu-l { stroke: var(--ink2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fg-pinu-arc { fill: none; stroke: var(--ink2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fg-pinu-head { fill: var(--ink2); }
.fg .fg-pinu-t { fill: var(--ink2); }
.mk-pair { stroke: var(--ink3); stroke-width: 1.4; stroke-dasharray: 1 4; stroke-linecap: round; }