/* roteiros: estilos do módulo (arquivo próprio para não conflitar com app.css) */

/* ---------- abas e guia dentro de roteiros ---------- */
.rot-tabs { margin-bottom: 2px; }
.rot-how .rs { white-space: normal; }
.rot-how-body { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.rot-how-line { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.rot-how-line .ic { flex: none; margin-top: 2px; color: var(--tint-text); }
.rot-how-line b { font-weight: 600; }

/* conteúdo do guia: funciona na página, na aba e dentro da folha */
.gui-content { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.gui-content.compact { gap: 16px; padding-top: 4px; }

/* seletor de orientação: duas linhas por botão para caber no celular */
.gui-orient .segmented button { white-space: normal; padding: 6px 8px; min-height: 46px; }
.gui-seg-l { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.gui-seg-l b { font-weight: 600; }
.gui-seg-l small { font-size: 11px; font-weight: 500; color: var(--label2); }

/* ---------- figuras de enquadramento (SVG) ---------- */
.gui-frame { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; min-width: 0; }
.gui-frame-svg { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }
.gui-frame-svg.v { max-width: 240px; }
.gui-frame-svg.h { max-width: 420px; }
.gui-frame-svg text { font-family: var(--font); }
.gui-f-shell { fill: var(--bg-elev2); stroke: var(--sep); stroke-width: 1.5; }
.gui-f-grid { stroke: var(--sep); stroke-width: 1; stroke-dasharray: 4 5; fill: none; }
.gui-f-hatch { opacity: .18; }
.gui-f-hl { stroke: var(--label2); stroke-width: 1.6; }
.gui-f-edge { stroke: var(--sep); stroke-width: 1; fill: none; }
.gui-f-ui { fill: var(--sep); }
.gui-f-sil { fill: var(--label3); }
.gui-f-eye { stroke: var(--tint); stroke-width: 2; fill: none; }
.gui-f-eyed { fill: var(--tint); }
.gui-f-lbl { fill: var(--label); opacity: .82; }
.gui-f-chip { fill: var(--bg-elev); }
.gui-f-t { font-size: 11px; fill: var(--label2); }
.gui-f-t.on { fill: var(--bg-elev); font-weight: 600; }
.gui-f-t.md { font-size: 12px; }
.gui-f-t.sm { font-size: 10.5px; }
.gui-f-dim { stroke: var(--label2); stroke-width: 1.2; fill: none; }
.gui-f-dimh { fill: var(--label2); }
.gui-f-scr { fill: var(--bg-elev); stroke: var(--sep); stroke-width: 1; }
.gui-f-desk { fill: var(--fill2); }
.gui-f-chart { stroke: var(--tint); stroke-width: 1.5; fill: none; opacity: .8; stroke-linejoin: round; stroke-linecap: round; }

/* legenda da figura: 2 colunas no celular */
.gui-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; width: 100%; font-size: 12px; color: var(--label2); }
.gui-lg { display: flex; align-items: flex-start; gap: 8px; line-height: 1.3; min-width: 0; }
.gui-sw { flex: none; width: 20px; height: 12px; border-radius: 3px; display: inline-block; margin-top: 2px; box-sizing: border-box; }
.gui-sw.line { height: 0; border-top: 2px solid var(--tint); border-radius: 0; margin-top: 7px; }
.gui-sw.hatch { background: repeating-linear-gradient(45deg, var(--label2) 0 1px, transparent 1px 5px); opacity: .55; border: 1px solid var(--sep); }
.gui-sw.dash { height: 0; border-top: 1px dashed var(--label2); border-radius: 0; margin-top: 7px; }
.gui-sw.sil { background: var(--label3); border-radius: 6px 6px 2px 2px; }

/* figura horizontal pede mais largura que a vertical no desktop */
@media (min-width: 760px) {
  .gui-split.gui-h { grid-template-columns: minmax(300px, 1.2fr) 1fr; }
}