/* ============================================================================
   SHELL — marco del espacio de trabajo (shell.js)
   ----------------------------------------------------------------------------
   #tb barra de herramientas · #ribbon botonera · #ws área de trabajo (lo único
   que se desplaza) · #pl/#pr paneles flotantes FIJOS · #sb barra de estado.
   Variables que el shell escribe en #app y que las vistas usan para centrar su
   contenido en la zona libre:
     --ws-l / --ws-r  ancho ocupado por el panel izquierdo / derecho (+16 px), 0 si está oculto
                      (en Modelo con pestañas, --ws-l usa --pr-w y --ws-r queda en 0)
     --ws-t / --ws-b  alto de las barras de arriba (herramientas + botonera + aviso de
                      solo lectura, --ro-h) y de abajo (estado)
   Formas (data-form): desk ≥ 1100 · tablet 760–1099 · phone < 760.
   ========================================================================== */

#app {
  position: relative; min-height: 100%;
  --ro-h: 0px;
  --ws-t: calc(var(--tb-h) + var(--rb-h) + var(--ro-h)); --ws-b: var(--sb-h);
  --ws-l: calc(var(--pl-w) + 16px); --ws-r: calc(var(--pr-w) + 16px);
}
#app[data-left="off"] { --ws-l: 0px; }
#app[data-right="off"] { --ws-r: 0px; }
#app[data-form="tablet"] { --rb-h: 52px; --ws-l: 0px; --ws-r: 0px; }
#app[data-form="phone"] { --tb-h: 0px; --rb-h: 0px; --sb-h: 0px; --ws-l: 0px; --ws-r: 0px; }

/* ----------------------------------------------------- ESPACIO DE TRABAJO */
#trabajo { position: fixed; inset: 0; overflow: hidden; background: var(--canvas); }
#app[data-mode="solucion"] #trabajo, #app[data-mode="ayuda"] #trabajo { background: var(--desk); }

/* Área de trabajo: ocupa toda la ventana (a sangre) bajo las barras de vidrio;
   el contenido que se desplaza pasa por debajo de ellas. */
#ws {
  position: absolute; inset: 0; z-index: 1;
  overflow: auto; overscroll-behavior: contain; outline: none;
  padding: var(--ws-t) 0 var(--ws-b);
  scroll-padding-top: calc(var(--ws-t) + 16px); scroll-padding-bottom: calc(var(--ws-b) + 16px);
  scrollbar-width: thin; scrollbar-color: var(--fill2) transparent;
}
#ws::-webkit-scrollbar { width: 10px; height: 10px; }
#ws::-webkit-scrollbar-track { background: transparent; }
#ws::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 6px; background: var(--fill2) padding-box; }
#app[data-mode="modelo"] #ws { overflow: hidden; }
.ws-view { display: none; }
#app[data-mode="modelo"] #ws-modelo { display: block; position: absolute; inset: 0; }
#app[data-mode="solucion"] #ws-solucion, #app[data-mode="ayuda"] #ws-ayuda { display: block; min-height: 100%; }

/* ------------------------------------------------------ PANELES FLOTANTES */
#pl, #pr {
  position: absolute; z-index: 20;
  top: calc(var(--tb-h) + var(--rb-h) + var(--ro-h) + var(--gap-panel)); bottom: calc(var(--sb-h) + var(--gap-panel));
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .18s ease, visibility 0s linear 0s;
}
#pl { left: var(--gap-panel); width: min(var(--pl-w), calc(100vw - 16px)); }
#pr { right: var(--gap-panel); width: min(var(--pr-w), calc(100vw - 16px)); }
/* Modelo con un panel con pestañas (prefs.panes 'tabs'): Elementos y
   Propiedades comparten #pl con el ancho de Propiedades; #pr queda oculto */
#app[data-mode="modelo"][data-panes="tabs"] #pl { width: min(var(--pr-w), calc(100vw - 16px)); }
#app[data-left="off"] #pl { transform: translateX(calc(-100% - 16px)); opacity: 0; visibility: hidden; transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s; }
#app[data-right="off"] #pr { transform: translateX(calc(100% + 16px)); opacity: 0; visibility: hidden; transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s; }
#app[data-form="tablet"] #pl, #app[data-form="tablet"] #pr { z-index: 25; box-shadow: 0 0 0 .5px var(--glass-line), 0 18px 48px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08); }
.pane { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; }
#app[data-mode="modelo"] #pl-modelo, #app[data-mode="modelo"] #pr-modelo,
#app[data-mode="solucion"] #pl-solucion, #app[data-mode="solucion"] #pr-solucion,
#app[data-mode="ayuda"] #pl-ayuda, #app[data-mode="ayuda"] #pr-ayuda { display: flex; }

/* ------------------------------------------------ BARRA DE HERRAMIENTAS */
#tb {
  position: absolute; top: 0; left: 0; right: 0; z-index: 31; height: var(--tb-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 12px;
  padding: 0 12px; border-bottom: 1px solid var(--sep);
}
.sh-l, .sh-r, .sh-c { display: flex; align-items: center; min-width: 0; }
.sh-l { gap: 12px; }
.sh-r { gap: 12px; justify-content: flex-end; }
.sh-c { position: relative; gap: 8px; }
.sh-gbtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 17px; background: var(--glass2); color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 .5px var(--glass-line), 0 1px 3px rgba(0, 0, 0, .06);
}
.sh-gbtn:hover { background: var(--raised); }
.sh-gbtn:active { filter: brightness(.95); }
.sh-gbtn[aria-pressed="false"] { color: var(--ink2); }
.sh-gbtn[aria-expanded="true"] { background: var(--sel); }
.sh-flip .ic { transform: scaleX(-1); }
/* logo: isotipo (colores propios, VigaIcons.logo) y la palabra «Uttensio» en
   STIX Two Text 500, la misma familia de las fórmulas (--math) */
.sh-logo { flex: none; display: flex; align-items: center; gap: 6px; color: var(--ink); }
.sh-logo .brand-word { font-family: var(--math); font-size: 18px; line-height: 1; font-weight: 500; letter-spacing: .012em; white-space: nowrap; }
.sh-vsep { flex: none; width: 1px; height: 20px; background: var(--sep2); }
.sh-back {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px 0 8px; border-radius: 17px;
  background: var(--glass2); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 .5px var(--glass-line), 0 1px 3px rgba(0, 0, 0, .06);
  color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.sh-back:hover { background: var(--raised); text-decoration: none; }
.sh-title { display: flex; flex-direction: column; min-width: 0; }
.sh-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; line-height: 17px; }
.sh-sub { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 11px; line-height: 16px; color: var(--ink2); white-space: nowrap; }
.sh-sub .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sh-sub .ic { flex: none; }
.sh-sub.is-error { color: var(--red-text); }
.sh-pencil { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ink2); }
.sh-pencil:hover { background: var(--fill); color: var(--ink); }
.sh-rename { width: min(420px, 100%); height: 22px; margin: -2px 0 -1px; padding: 0 6px; font-size: 13px; font-weight: 600; }
.sh-seg { height: 32px; }
.sh-seg > button { padding: 0 24px; color: var(--ink); }
.sh-crumb { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 4px; border: 0; border-radius: 14px; background: transparent; color: var(--ink2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.sh-crumb:hover { background: var(--fill); color: var(--ink); }
.sh-crumb b { font-weight: 600; color: var(--ink); }
.sh-study { height: 34px; color: var(--ink); }
.sh-cap { background: var(--glass2); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 .5px var(--glass-line), 0 1px 3px rgba(0, 0, 0, .06); }
.sh-cap > .btn:disabled { opacity: .35; }
.sh-solve { flex: none; gap: 8px; padding: 0 16px 0 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
/* sin viga: se ve deshabilitado, pero el clic y el tip dicen «Primero dibuja la viga» (solve()) */
.sh-solve[aria-disabled="true"] { pointer-events: auto; cursor: not-allowed; box-shadow: none; }
/* «Resolver» solo en Modelo, como .sh-mo: en Solución no haría nada y en Ayuda
   ya están «Volver a la solución» y la miga (el foco pasa a Solución: solve()) */
#app:not([data-mode="modelo"]) .sh-solve { display: none; }

/* ----------------------------------------------------- BOTONERA (Revit) */
#ribbon {
  position: absolute; top: var(--tb-h); left: 0; right: 0; z-index: 30; height: var(--rb-h);
  display: flex; align-items: stretch; padding: 0 8px;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 .5px var(--glass-line), var(--float);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
#ribbon::-webkit-scrollbar { display: none; }
.sh-grp { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 8px; }
.sh-grp-b { display: flex; gap: 2px; }
.sh-grp-l { font-size: 10.5px; line-height: 14px; color: var(--ink2); white-space: nowrap; }
.sh-rsep { flex: none; width: 1px; margin: 12px 0; background: var(--sep); }
.sh-spacer { flex: 1 1 auto; min-width: 8px; }
.sh-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 56px; height: 44px; padding: 0 6px; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  font-size: 10.5px; line-height: 12px; white-space: nowrap;
}
.sh-tool:hover { background: var(--fill); }
.sh-tool:active { background: var(--fill2); }
.sh-tool[aria-pressed="true"], .sh-tool[aria-expanded="true"] { background: var(--sel); }
.sh-tool[aria-disabled="true"], .sh-tool:disabled { opacity: .38; }
.sh-tool:disabled { pointer-events: none; }
.sh-glyph { height: 20px; display: flex; align-items: center; justify-content: center; }
/* Modo: el avatar de Salviati (salviati.js) y «Pronto» sobre Sagredo */
.sh-tool[data-act="modo"] { position: relative; }
.sh-avatar { display: flex; width: 20px; height: 20px; }
.sh-avatar > svg { width: 20px; height: 20px; }
/* Sagredo (aria-disabled): se atenúan su ícono y su nombre, no su «Pronto» */
.sh-tool[data-act="modo"][aria-disabled="true"] { opacity: 1; }
.sh-tool[data-act="modo"][aria-disabled="true"] > :not(.sh-pronto) { opacity: .38; }
/* Salviati en un marco o una armadura (aria-disabled): igual que Sagredo, con su «Pronto» */
.sh-tool[data-act="ayuda"][data-v="salviati"] { position: relative; }
.sh-tool[data-act="ayuda"][aria-disabled="true"] { opacity: 1; }
.sh-tool[data-act="ayuda"][aria-disabled="true"] > :not(.sh-pronto) { opacity: .38; }
.sh-pronto { position: absolute; top: 0; right: -2px; padding: 0 4px; border-radius: 6px; background: var(--raised); box-shadow: 0 0 0 .5px var(--sep2); color: var(--ink2); font-size: 9px; line-height: 13px; font-weight: 600; letter-spacing: .01em; }
.sh-glyph.mono { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: -.02em; }
.sh-glyph.frac { flex-direction: column; font-family: var(--math); font-size: 10px; line-height: 9px; }
.sh-glyph.frac span:first-child { padding: 0 3px 1px; border-bottom: 1.2px solid currentColor; }
.sh-glyph.frac span:last-child { padding-top: 1px; }

/* ------------------------------------------------------ BARRA DE ESTADO */
#sb {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--sb-h);
  display: flex; align-items: center; gap: 12px; padding: 0 8px 0 12px;
  border-top: 1px solid var(--sep); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 .5px var(--glass-line), var(--float);
  font-size: 11.5px; color: var(--ink2); white-space: nowrap;
}
/* el relleno compensa el margen −6 px de .sh-sbbtn: con un aviso largo el botón no se recorta */
.sh-st, .sh-st2 { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; padding: 0 6px; margin: 0 -6px; }
.sh-st { color: var(--ink); flex: 0 1 auto; }
.sh-st2 { flex: 0 1000 auto; }
.sh-st .tx, .sh-st2 .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sh-st .ok { color: var(--green); }
.sh-st .bad { color: var(--red-text); }
.sh-st .warn { color: var(--defl); }
/* estado de los resultados en el Modelo: sin resolver, resuelto, cambiaste el modelo, tiempo real */
.sh-st3 { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; flex: 0 10 auto; color: var(--ink); }
.sh-st3[hidden] { display: none; }
.sh-st3 .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sh-st3 .muted { color: var(--ink2); }
.sh-st3 .warn { display: inline-flex; color: var(--defl); }
.sh-st3 .live { display: inline-flex; color: var(--accent-text); }
.sh-sbbtn { display: inline-flex; align-items: center; gap: 6px; height: 22px; min-width: 0; padding: 0 6px; margin: 0 -6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: 11.5px; white-space: nowrap; }
.sh-sbbtn:hover { background: var(--fill); }
.sh-sbbtn[aria-expanded="true"] { background: var(--fill2); }
.sh-sbsep { flex: none; width: 1px; height: 14px; background: var(--sep2); }
.sh-fill { flex: 1 1 auto; }
.sh-mono { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.sh-m { font-family: var(--math); font-size: 13px; color: var(--ink); white-space: nowrap; }
.sh-m sub { font-size: 9px; line-height: 0; }
.sh-m .d { color: var(--defl); }
.sh-units {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px 0 8px; border: 0; border-radius: 6px;
  background: var(--raised); box-shadow: 0 0 0 .5px var(--sep2), 0 .5px 1.5px rgba(0, 0, 0, .06);
  color: var(--ink); font-size: 11.5px; font-weight: 500;
}
.sh-units .ic { color: var(--ink2); }
.sh-units:hover { filter: brightness(.97); }
.sh-units[aria-expanded="true"] { box-shadow: 0 0 0 1.5px var(--accent); }
#app:not([data-mode="modelo"]) .sh-mo { display: none; }

/* ------------------------------------------------ AVISO DE SOLO LECTURA
   Franja fija que RESERVA su espacio (nunca flota sobre el contenido): con
   data-ro="on" en #app, --ro-h suma su alto a --ws-t y el área de trabajo, los
   paneles y el encuadre del lienzo empiezan debajo de ella. Escritorio y
   tableta: franja de vidrio a todo lo ancho bajo la botonera. Teléfono:
   cápsula compacta bajo los controles de arriba, que baja --m-top-h (la hoja
   de solución empieza debajo); en la ayuda, arriba, y la hoja se recorre.  */
#app[data-ro="on"] { --ro-h: 40px; }
.sh-ro {
  position: absolute; z-index: 29; top: calc(var(--tb-h) + var(--rb-h)); left: 0; right: 0; height: var(--ro-h);
  display: flex; align-items: center; justify-content: center; padding: 0 16px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx);
  border-bottom: 1px solid var(--sep); box-shadow: inset 0 1px 0 var(--glass-hi);
}
.sh-ro[hidden] { display: none; }
.sh-ro-in { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font-size: 12.5px; color: var(--ink); }
.sh-ro-in .ic { flex: none; color: var(--ink2); }
.sh-ro-in .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-ro-in .btn { flex: none; height: 26px; margin-left: 4px; padding: 0 12px; border-radius: 13px; font-size: 12.5px; }
/* teléfono (más específico que movil.css) */
#app[data-form="phone"] { --ro-h: 0px; }
#app[data-form="phone"][data-ro="on"] { --m-top-h: calc(var(--m-st) + 144px); }
#app[data-form="phone"] #trabajo > .sh-ro {
  top: calc(var(--m-st) + 96px); left: calc(16px + var(--m-sl, 0px)); right: calc(16px + var(--m-sr, 0px)); height: 40px;
  padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none;
}
#app[data-form="phone"][data-mode="ayuda"] #trabajo > .sh-ro { top: max(12px, env(safe-area-inset-top, 0px)); }
#app[data-form="phone"] .sh-ro-in {
  pointer-events: auto; height: 40px; padding: 0 4px 0 14px; border-radius: 20px; font-size: 14px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 .5px var(--glass-line), var(--float);
}
#app[data-form="phone"] .sh-ro-in .btn { position: relative; height: 32px; border-radius: 16px; font-size: 14px; }
/* el botón compacto conserva un área de toque de 44 px */
#app[data-form="phone"] .sh-ro-in .btn::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }

/* ------------------------------------------------------------- MENÚS */
.sh-menu { outline: none; max-height: calc(100vh - 16px); overflow: auto; }
.sh-menu > button:focus-visible { outline: none; background: var(--accent-fill); color: #fff; }
.sh-menu > button .ic { color: var(--ink2); }
.sh-menu > button:hover .ic, .sh-menu > button:focus-visible .ic { color: #fff; }
.sh-menu > button .hint { margin-left: auto; padding-left: 16px; font-size: 12px; color: var(--ink2); }
.sh-menu > button[aria-checked="true"] .hint { padding-right: 4px; }
.sh-menu > button:hover .hint, .sh-menu > button:focus-visible .hint { color: rgba(255, 255, 255, .85); }
.sh-menu > button.danger { color: var(--red-text); }
.sh-menu > button.danger:hover, .sh-menu > button.danger:focus-visible { background: var(--red); color: #fff; }
.sh-menu > button:disabled { opacity: .4; pointer-events: none; }
.sh-menu > button[role="menuitemradio"][aria-checked="false"]::after, .sh-menu > button[role="menuitemcheckbox"][aria-checked="false"]::after { content: ""; }
.sh-menu > .note { padding: 2px 10px 6px; max-width: 300px; font-size: 11.5px; line-height: 1.4; color: var(--ink2); white-space: normal; }
.sh-menu > button.wrap { white-space: normal; padding-top: 4px; padding-bottom: 4px; line-height: 1.35; }

/* ------------------------------------------------------------- AVISO */
#toast .sh-toast-t { min-width: 0; }
#toast .btn-link { flex: none; font-size: 13px; }
#app[data-form="phone"] #toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); font-size: 15px; }
/* en el teléfono la acción del aviso («Recuperar», «Deshacer») se toca en 44 px sin agrandar el aviso;
   con left: 50% el aviso solo tendría medio ancho: max-content lo deja crecer hasta su max-width */
#app[data-form="phone"] #toast { width: max-content; }
#app[data-form="phone"] #toast .btn-link { min-height: 44px; margin: -10px -8px; padding: 0 8px; font-size: 15px; }

/* ------------------------------------------------------------ DIÁLOGOS */
.sh-dlg { width: min(460px, calc(100vw - 32px)); }
.sh-dlg-wide { width: min(760px, calc(100vw - 32px)); max-width: min(760px, calc(100vw - 32px)); }
.sh-dlg .dlg-h .x { margin-right: -8px; }
.sh-dlg .dlg-b { max-height: min(68vh, 640px); overflow: auto; font-size: 13px; line-height: 1.5; color: var(--ink); }
.sh-dlg .dlg-b p { margin: 0 0 8px; }
.sh-dlg .dlg-b .muted { color: var(--ink2); }
.sh-dlg .fldset { display: flex; flex-direction: column; gap: 6px; }
.sh-dlg .fldset label { font-size: 12px; color: var(--ink2); }
.sh-dlg .fldset .field { width: 100%; height: 32px; }
.sh-dlg .dlg-f .btn { height: 30px; padding: 0 16px; }
.sh-dlg .dlg-f .grow { margin-right: auto; }
.sh-dlg .dlg-f .sh-danger { background: var(--red); }
/* salir de un ejercicio nuevo: «¿Guardar «…»?» [Descartar] [Guardar]; en el teléfono, botones de 44 px */
.sh-leave .dlg-h > span { min-width: 0; overflow-wrap: anywhere; }
/* «Descartar»: --red-text directo sobre --raised (con el relleno --fill, en oscuro bajaría a 3.65:1); el contorno lo hace botón */
.sh-leave .dlg-f .btn-danger, .sh-leave .dlg-f .btn-danger:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--sep2); }
.sh-leave .dlg-f .btn-danger:hover { box-shadow: inset 0 0 0 1.5px var(--red-text); }
#app[data-form="phone"] .sh-leave .dlg-h .x { flex: none; width: 44px; height: 44px; border-radius: 22px; margin: -10px -14px -10px 0; }
#app[data-form="phone"] .sh-leave .dlg-f .btn { flex: 1 1 0; height: 44px; border-radius: 22px; font-size: 15px; }
/* suscripción */
.sh-pay .lead { font-size: 13px; color: var(--ink2); }
.sh-pay .price { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 4px; }
.sh-pay .price b { font-family: var(--disp); font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.sh-pay .price span { color: var(--ink2); font-size: 13px; }
.sh-pay ul { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; padding: 0; list-style: none; }
.sh-pay li { display: flex; align-items: flex-start; gap: 8px; }
.sh-pay li .ic { margin-top: 2px; color: var(--accent); }
.sh-pay .fine { font-size: 12px; color: var(--ink2); }
.sh-pay .fine + .fine { margin-top: 2px; }
/* atajos */
.sh-keys { width: 100%; border-collapse: collapse; font-size: 13px; }
.sh-keys th { padding: 12px 0 4px; font-size: 11px; font-weight: 600; color: var(--ink2); text-align: left; }
.sh-keys td { padding: 5px 0; border-top: .5px solid var(--sep); }
.sh-keys td:last-child { text-align: right; white-space: nowrap; }
.sh-keys kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 5px; background: var(--fill); box-shadow: inset 0 -.5px 0 var(--sep2); font: 500 12px/18px var(--ui); text-align: center; color: var(--ink); }
/* teoría (theory.js) */
.sh-theory { display: flex; flex-direction: column; gap: 20px; }
.sh-theory .th-lead { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink2); }
.sh-theory .th-sec { display: flex; flex-direction: column; gap: 8px; }
.sh-theory .th-h { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 15px; font-weight: 600; }
.sh-theory .th-n { font-size: 11px; color: var(--accent-text); }
.sh-theory .th-p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.sh-theory .th-p i, .sh-theory .th-ul i, .sh-theory sub i { font-family: var(--math); font-size: 1.08em; }
.sh-theory .th-eq { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; border-radius: 8px; background: var(--fill); font-family: var(--math); font-size: 17px; }
.sh-theory .th-lhs { white-space: nowrap; }
.sh-theory .th-note { font-family: var(--ui); font-size: 12px; color: var(--ink2); }
.sh-theory .th-ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; }

/* ------------------------------------------------------------- TABLETA */
#app[data-form="tablet"] #tb { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; padding: 0 8px; }
#app[data-form="tablet"] .sh-l, #app[data-form="tablet"] .sh-r { gap: 8px; }
#app[data-form="tablet"] .sh-logo, #app[data-form="tablet"] .sh-l > .sh-vsep { display: none; }
#app[data-form="tablet"] .sh-back { width: 34px; padding: 0; justify-content: center; }
#app[data-form="tablet"] .sh-back .t,
#app[data-form="tablet"] .sh-study .t,
#app[data-form="tablet"] .sh-tool .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#app[data-form="tablet"] .sh-seg > button { padding: 0 14px; }
#app[data-form="tablet"] .sh-crumb { display: none; }
#app[data-form="tablet"] .sh-grp { padding: 0 3px; }
#app[data-form="tablet"] .sh-grp-l { display: none; }
#app[data-form="tablet"] .sh-tool { min-width: 44px; width: 44px; padding: 0; }
#app[data-form="tablet"] .sh-rsep { margin: 10px 2px; }
#app[data-form="tablet"] .sh-sbsep.sh-opt, #app[data-form="tablet"] .sh-st2 { display: none; }

/* escritorio estrecho: la botonera se compacta antes de desplazarse */
@media (max-width: 1320px) {
  #app[data-form="desk"] .sh-grp { padding: 0 4px; }
  #app[data-form="desk"] .sh-tool { min-width: 50px; padding: 0 4px; }
  #app[data-form="desk"] .sh-logo .brand-word { display: none; }
}
/* escritorio angosto (hasta 1240 px, con el grupo Resultados): herramientas solo
   con ícono, como en la tableta; su nombre sigue accesible y en el tip */
@media (max-width: 1240px) {
  #app[data-form="desk"] .sh-tool { min-width: 44px; width: 44px; padding: 0; }
  #app[data-form="desk"] .sh-tool .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ------------------------------------------------------------ TELÉFONO */
#app[data-form="phone"] #tb, #app[data-form="phone"] #ribbon, #app[data-form="phone"] #pl,
#app[data-form="phone"] #pr, #app[data-form="phone"] #sb { display: none; }

@media (prefers-reduced-motion: reduce) {
  #pl, #pr { transition: none !important; }
}

/* ----------------------------------------------------------- IMPRESIÓN */
@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  #app { min-height: 0; }
  #tb, #ribbon, #pl, #pr, #sb, #m-top, #m-bottom, #m-sheets, #menus, #toast, .sh-ro, #inicio, #dlg { display: none !important; }
  #trabajo { position: static; overflow: visible; background: #fff !important; }
  #ws { position: static; overflow: visible !important; padding: 0; }
  #app { --ro-h: 0px; --ws-t: 0px; --ws-b: 0px; --ws-l: 0px; --ws-r: 0px; }
}

/* ------------------------------------------ MÉTODOS (mt-, docs/botonera-metodos.md)
   La botonera de Solución: Método y Deflexiones, un botón con el método en
   uso que abre su menú; sin nada que elegir, el botón deshabilitado y su
   nota al lado. El menú, las opciones del Menú del teléfono y el aviso de
   la hoja cuando lo elegido no se pudo usar. Colores: solo tokens.        */
/* el glifo va en línea (no flex, como .sh-glyph): así el subíndice de f_ij baja */
.mt-glyph { display: block; height: 20px; font-family: var(--math); font-size: 14.5px; line-height: 20px; text-align: center; white-space: nowrap; }
.mt-glyph sub { font-size: 9.5px; line-height: 0; }
.mt-note { align-self: center; max-width: 112px; padding: 0 4px 0 2px; font-size: 10.5px; line-height: 12px; color: var(--ink2); white-space: normal; }
.mt-note[hidden] { display: none; }
/* sin nada que elegir el botón es solo su glifo, junto a la nota */
.mt-tool[aria-disabled="true"] { min-width: 40px; width: auto; padding: 0 4px; }
/* el escritorio angosto deja las herramientas solo con ícono; el método en uso sí se lee (cabe: docs/botonera-metodos.md §5) */
@media (max-width: 1240px) {
  #app[data-form="desk"] .mt-tool { width: auto; min-width: 44px; padding: 0 6px; }
  #app[data-form="desk"] .mt-tool .lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
.mt-menu { min-width: 240px; }
.mt-menu > button.wrap { align-items: center; padding-top: 5px; padding-bottom: 5px; }
.mt-mi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mt-mi-d { font-size: 11.5px; line-height: 1.35; color: var(--ink2); }
.mt-menu > button:hover .mt-mi-d, .mt-menu > button:focus-visible .mt-mi-d { color: rgba(255, 255, 255, .85); }
/* lo que no está listo: no se ilumina como una opción; «Pronto», como Sagredo */
.mt-menu > button[aria-disabled="true"] .mt-mi-l { color: var(--ink2); }
.mt-menu > button[aria-disabled="true"]:hover { background: var(--fill); color: var(--ink); }
.mt-menu > button[aria-disabled="true"]:hover .mt-mi-d { color: var(--ink2); }
.mt-menu > button[aria-disabled="true"]:focus-visible { background: var(--fill); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
.mt-menu > button[aria-disabled="true"]:focus-visible .mt-mi-d { color: var(--ink2); }
.mt-menu > button .hint { flex: none; align-self: center; margin-left: auto; padding: 0 6px; border-radius: 6px; background: var(--raised); box-shadow: 0 0 0 .5px var(--sep2); color: var(--ink2); font-size: 10px; line-height: 15px; font-weight: 600; }
.mt-menu > button:hover .hint, .mt-menu > button:focus-visible .hint { color: var(--ink2); }
/* el Menú del teléfono: un rótulo por grupo, las opciones y la nota */
.mt-mgrp + .mt-mgrp { margin-top: 12px; }
.mt-mlabel { margin: 0 0 6px; padding: 0 16px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink2); }
.mt-mrow[aria-disabled="true"] .mv-row-t { color: var(--ink2); }
/* un grupo sin nada que elegir: sus opciones se ven apagadas y la nota, no */
.mv-card[aria-disabled="true"] > .mt-mrow > * { opacity: .6; }
.mt-mrow .mv-row-t small { white-space: normal; }
.mt-pill { flex: none; padding: 0 8px; border-radius: 8px; background: var(--raised); box-shadow: 0 0 0 .5px var(--sep2); color: var(--ink2); font-size: 11px; line-height: 20px; font-weight: 600; }
.mt-mnote { margin-top: 6px; }
/* la hoja: lo elegido no se pudo usar y va el de omisión (una línea, arriba del desarrollo) */
.mt-aviso { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; padding: 8px 12px; border-radius: 8px; background: var(--fill); color: var(--ink2); font-size: 13px; line-height: 1.45; }
.mt-aviso .ic { flex: none; margin-top: 2px; color: var(--defl); }

/* Sin sesión, fuera de un ejemplo: la app sale a Entrar sin mostrar Inicio (shell.js, soloEjemplos) */
html[data-saliendo] body { visibility: hidden; }