/* Herramientas de examen (F3): paneles flotantes de calculadora Desmos y hoja de referencia.
   Escritorio: panel arrastrable/redimensionable. Móvil (< 700 px): hoja a pantalla completa. */

.tool-panel {
  position: fixed; z-index: 40; left: 16px; top: 76px; width: 520px; height: 560px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--ink);
  border: var(--bw, 2px) solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.tool-panel[hidden] { display: none; }
.tool-panel.dragging { user-select: none; box-shadow: 0 18px 44px rgb(0 0 0 / .28); }
.tool-panel.dragging .tool-body { pointer-events: none; }

.tool-head {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px;
  background: var(--surface-2); border-bottom: 1px solid var(--border); cursor: move; touch-action: none;
  flex: 0 0 auto;
}
.tool-grab { display: grid; place-items: center; width: 28px; height: 32px; border-radius: 8px; color: var(--ink-2); cursor: grab; }
.tool-grab:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.tool-title { display: flex; align-items: center; gap: 6px; font-size: .95rem; white-space: nowrap; }
.tool-head-extra { flex: 1; display: flex; justify-content: center; min-width: 0; }
.tool-close { margin-left: auto; }

/* Selector gráfica ↔ científica (control segmentado). */
.tool-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: 999px; }
.tool-seg button {
  border: 0; background: transparent; color: var(--ink-2); font: 600 .85rem var(--font-ui);
  padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; min-height: 32px;
}
.tool-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .18); }
.tool-seg button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

.tool-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.tool-body:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.tool-body > .dz { position: absolute; inset: 0; }
.tool-body > .dz[hidden] { display: none; }
.calc-tool.is-fallback .tool-seg { display: none; }

.tool-resize {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--border-strong) 50% 58%, transparent 58% 70%, var(--border-strong) 70% 78%, transparent 78%);
}

.tool-loading { height: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink-2); font-weight: 600; padding: 20px; text-align: center; }
.tool-loading .spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: tool-spin .8s linear infinite; }
@keyframes tool-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tool-loading .spinner { animation: none; } }

/* Respaldo: calculadora básica. */
.dz-fallback { padding: 12px; overflow: auto; }
.tool-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; padding: 10px 12px;
  background: var(--gold-soft); color: var(--ink); border-radius: var(--r-sm); font-size: .88rem; line-height: 1.35;
}
.tool-note span { flex: 1 1 200px; }
.dz-fallback .calc-keys button { height: 46px; }

/* Desmos ocupa todo el cuerpo. En oscuro, Desmos usa invertedColors; el borde del panel sigue el tema. */
.dz-graphing .dcg-container, .dz-scientific .dcg-container { height: 100%; }

/* ---------- Hoja de referencia ---------- */
.ref-tool .tool-body { overflow: auto; }
.ref-sheet { padding: 12px 14px 18px; }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ref-card { margin: 0; padding: 8px 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); display: flex; flex-direction: column; align-items: center; }
.ref-fig { width: 100%; max-width: 190px; height: auto; color: var(--ink); overflow: visible; }
.ref-fig path, .ref-fig line, .ref-fig ellipse, .ref-fig circle, .ref-fig rect { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ref-fig .shape { fill: var(--ref-fill); }
.ref-fig .hidden-edge { stroke-dasharray: 4 3; stroke-width: 1.2; }
.ref-fig .mark { stroke-width: 1.1; }
.ref-fig .dot { fill: currentColor; stroke: none; }
.ref-fig text { fill: currentColor; stroke: var(--surface); stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; font: italic 600 13px var(--font-read); }
.ref-fig text.ang { font: 500 10px var(--font-ui); fill: var(--ink-2); stroke-width: 2px; }
.ref-card figcaption { margin-top: 4px; text-align: center; font: 500 1rem/1.5 var(--font-read); }
.ref-formula i { font-style: italic; }
.ref-formula sup { font-size: .7em; }
.ref-small { font-size: .95rem; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .72em; line-height: 1.05; margin: 0 2px; }
.frac > span:first-child { border-bottom: 1px solid currentColor; padding: 0 2px; }
.ref-notes { margin: 14px 0 0; padding: 12px 14px 12px 30px; background: var(--surface-2); border-radius: var(--r-sm); font: 400 .95rem/1.5 var(--font-read); }
.ref-notes li + li { margin-top: 4px; }

:root { --ref-fill: #eef5ff; }
:root[data-theme="dark"] { --ref-fill: rgb(90 140 220 / .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ref-fill: rgb(90 140 220 / .14); } }

/* Apps nativas: debajo de la barra de estado. */
html.native .tool-panel { margin-top: var(--sat, 0px); }

/* ---------- Móvil: hoja a pantalla completa ---------- */
@media (max-width: 699.98px) {
  .tool-panel {
    left: 0 !important; right: 0; top: 0 !important; bottom: 0; width: auto !important; height: auto !important;
    border-radius: 0; border: 0;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html.native .tool-panel { margin-top: 0; }
  .tool-head { cursor: default; padding: 8px; }
  .tool-grab, .tool-resize { display: none; }
  .tool-title { font-size: 1rem; }
  .tool-head-extra { justify-content: flex-end; }
  .tool-seg button { padding: 8px 12px; min-height: 40px; }
  .tool-close { margin-left: 0; width: 44px; height: 44px; }
  .ref-grid { grid-template-columns: repeat(2, 1fr); }
  body.tool-sheet-open { overflow: hidden; }
}
@media (max-width: 380px) {
  .tool-title span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}