/* ============================================================================
   ANIMA — construcción animada de los diagramas V y M (public/app/js/anima.js)
   ----------------------------------------------------------------------------
   Solo tokens de tokens.css, con estos papeles:
     --real     diagramas V y M y reacciones
     --ink      viga, cargas y sus rótulos
     --defl     el corte, V y M en la cara del corte, la barra de x
     --accent   resaltado de las reglas (y sus -fill, -soft, -text)
     --paper, --sep, --ink2 (y --fill2, --sep2, --beam, --beam-edge, *-soft)
   Los botones son .btn y .btn-primary de base.css: aquí solo su tamaño.
   La vista animada no se imprime: en papel (y en el PDF) queda la versión
   estática .st-anima-static, que en pantalla lleva .an-static-off.
   El tamaño del teléfono se decide por el ancho del componente
   (container query), no de la ventana: igual en la hoja y en un panel.
   Vista 3D (iso.js): el conmutador «Diagramas | 3D» es un .seg de base.css
   en .an-hd; con .is-iso en .an se ocultan el cuerpo libre y los diagramas y
   se ve .an-iso (canvas, leyenda y «Vista inicial»). El canvas toma sus
   colores de los tokens (ver iso.js); aquí solo los muestrarios de la
   leyenda: compresión --real (banda continua) y tensión --defl (a trozos).
   ========================================================================== */
@media screen { .an-static-off { display: none !important; } }

/* sin fondo blanco: descansa sobre la hoja cuadriculada, con su contorno fino (pedido del dueño: la hoja es una libreta) */
.an { container: anima / inline-size; display: grid; gap: 10px; min-width: 0; padding: 12px 14px 14px; border: 1px solid var(--sep); border-radius: 14px; background: transparent; color: var(--ink); font: 14px/1.45 var(--ui); }
.an-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- CONTROLES */
.an-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.an-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.an .an-btn { height: 32px; padding: 0 14px; border-radius: 16px; font-size: 13px; }
.an .an-play { min-width: 104px; }
/* base.css pone gris un .btn con aria-pressed="true": Reproducir sigue azul */
.an .an-play[aria-pressed="true"] { background: var(--accent-fill); }
.an .an-btn:focus-visible, .an-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.an-xs { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 340px; margin-left: auto; min-width: 0; }
.an-xl { font: italic 17px/1 var(--math); color: var(--ink2); cursor: pointer; }
.an-xv { min-width: 64px; font: 12.5px var(--ui); font-variant-numeric: tabular-nums; color: var(--ink2); text-align: right; white-space: nowrap; }

/* barra del corte: la parte ya recorrida en --defl (--an-p la pone anima.js) */
.an-x { --an-p: 100%; flex: 1 1 auto; min-width: 0; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.an-x::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--defl) 0 var(--an-p), var(--fill2) var(--an-p) 100%); }
.an-x::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 20px; height: 20px; margin-top: -7px; border: 2px solid var(--paper); border-radius: 50%; background: var(--defl); box-shadow: 0 0 0 1px var(--sep2); }
.an-x::-moz-range-track { height: 6px; border-radius: 3px; background: var(--fill2); }
.an-x::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--defl); }
.an-x::-moz-range-thumb { box-sizing: border-box; width: 20px; height: 20px; border: 2px solid var(--paper); border-radius: 50%; background: var(--defl); box-shadow: 0 0 0 1px var(--sep2); }

/* --------------------------------------------------- NARRADOR Y LECTURA */
.an-narr { display: flex; gap: 10px; align-items: baseline; min-height: 4.6em; padding: 10px 12px; border-radius: 10px; background: var(--defl-soft); font-size: 14.5px; line-height: 1.5; }
.an-nk { flex: none; font: 600 12px/1.5 var(--ui); letter-spacing: .02em; color: var(--defl); white-space: nowrap; }
.an-nt i { font-family: var(--math); }
.an-nt sub { font-size: .7em; }
.an-lect { display: flex; flex-wrap: wrap; gap: 2px 18px; font: 17px/1.4 var(--math); font-variant-numeric: tabular-nums; }
.an-fbd { display: grid; gap: 2px; }
.an-fbd-t { font: 600 12px var(--ui); letter-spacing: .02em; text-transform: uppercase; color: var(--ink2); }
.an-fig { min-width: 0; }
.an-svg { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }

/* ------------------------------------------------------------------ DIBUJO */
.an-svg text { font-family: var(--ui); }
.an-beam { fill: var(--beam); stroke: var(--beam-edge); stroke-width: 1; }
.an-ghost { fill: none; stroke: var(--ink2); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .7; }
.an-ld { stroke: var(--ink); stroke-width: 1.8; }
.an-lm { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.an-dl { stroke: var(--ink); stroke-width: 1.1; }
.an-de { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.an-ld-h, .an-lm-h, .an-dl-h { fill: var(--ink); }
.an-rx { stroke: var(--real); stroke-width: 2.2; }
.an-rm { fill: none; stroke: var(--real); stroke-width: 2; }
.an-rx-h, .an-rm-h { fill: var(--real); }
.an-in { fill: none; stroke: var(--defl); stroke-width: 2; }
.an-in-h { fill: var(--defl); }
.an-t { fill: var(--ink2); }
.an-t-ld { fill: var(--ink); }
.an-t-rx { fill: var(--real); }
.an-ft, .an-lab, .an-tf { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.an-sb { font-size: .72em; }
.an-tm { font-family: var(--math); font-style: italic; }
.an-tf { font-family: var(--math); fill: var(--defl); }
.an-tu { font-family: var(--ui); fill: var(--ink2); }
.an-axt { fill: var(--ink); }
.an-ax { stroke: var(--ink2); stroke-width: 1; }
.an-guide { stroke: var(--sep2); stroke-width: 1; stroke-dasharray: 3 4; }
.an-bub { fill: var(--paper); stroke: var(--ink2); stroke-width: 1; }
.an-svg .an-bub-t { font-family: var(--math); font-style: italic; fill: var(--ink); }
.an-area { fill: var(--real-soft); }
.an-curve { fill: none; stroke: var(--real); stroke-width: 2.2; stroke-linejoin: round; }
.an-lab { fill: var(--ink); font-variant-numeric: tabular-nums; transition: opacity .2s; }
.an-lab.is-big { font-weight: 600; }
.an-lab.is-off { opacity: 0; }
.an-cut { stroke: var(--defl); stroke-width: 1.5; stroke-dasharray: 5 4; }
.an-dot { fill: var(--defl); stroke: var(--paper); stroke-width: 2; }
.an-dim { fill: none; stroke: var(--ink2); stroke-width: 1; }
.an-dim-bg { fill: var(--paper); }
.an-dim-t { fill: var(--ink); }
.an-svg .an-dim-t .an-tm, .an-svg .an-dim-t { font-family: var(--math); }

/* marcas numeradas de las reglas y resaltados */
.an-mk { cursor: pointer; transition: opacity .2s; }
.an-mk circle { fill: var(--paper); stroke: var(--ink2); stroke-width: 1; }
.an-mk text { font-weight: 600; fill: var(--ink2); }
.an-mk.is-off { opacity: .18; }
.an-mk.is-on { opacity: 1; }
.an-mk.is-on circle { stroke: var(--accent); stroke-width: 2.5; }
.an-mk.is-on text { fill: var(--accent-text); }
.an-hl { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s; pointer-events: none; }
.an-hl.is-on { opacity: .45; }
.an-hla { fill: var(--accent); opacity: 0; transition: opacity .15s; pointer-events: none; }
.an-hla.is-on { opacity: .25; }
.an-f.is-lit .an-ld, .an-f.is-lit .an-lm, .an-f.is-lit .an-dl, .an-f.is-lit .an-de, .an-f.is-lit .an-rx, .an-f.is-lit .an-rm { stroke: var(--accent); }
.an-f.is-lit .an-ld-h, .an-f.is-lit .an-lm-h, .an-f.is-lit .an-dl-h, .an-f.is-lit .an-rx-h, .an-f.is-lit .an-rm-h { fill: var(--accent); }
.an-ft.is-lit { fill: var(--accent-text); }

/* ---------------------------------------------------------------- VISTA 3D */
.an-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.an-vw > button { min-width: 88px; }
.an-vw > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.an.is-iso .an-fbd, .an.is-iso .an-fig-dg { display: none; }
.an:not(.is-iso) .an-iso { display: none; }
.an-iso { display: grid; gap: 8px; min-width: 0; }
.an-iso-fig { min-width: 0; }
/* arrastre de lado para girar; el vertical se queda con la página */
.an-iso-cv { display: block; width: 100%; height: 300px; border-radius: 10px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.an-iso-cv.is-drag { cursor: grabbing; }
.an-iso-cv:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.an-iso-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font: 12.5px/1.4 var(--ui); color: var(--ink2); }
.an-iso-k { display: inline-flex; align-items: center; gap: 7px; }
.an-iso-ex sub { font-size: .75em; line-height: 0; }
.an-iso-sw { display: inline-block; flex: none; width: 24px; height: 6px; border-radius: 1px; }
.an-iso-sw.is-comp { background: var(--real); }
.an-iso-sw.is-tens { background: repeating-linear-gradient(90deg, var(--defl) 0 5px, transparent 5px 9px); }
.an-iso-hint { font-style: italic; }
.an .an-iso-reset { margin-left: auto; }

/* ---------------------------------------------------------------- TELÉFONO
   Dos renglones: los tres botones de 44 px y la barra de x a todo lo ancho. */
@container anima (max-width: 560px) {
  .an-ctl { flex-direction: column; align-items: stretch; gap: 8px; }
  /* tres columnas que sí se encogen: minmax(0, …) (con 1fr, el ancho mínimo del
     texto empujaba la fila fuera de la tarjeta en 342 px y «Reproducir» salía cortado) */
  .an-btns { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); }
  .an .an-btn { height: 44px; min-width: 0; padding: 0 6px; border-radius: 22px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .an .an-play { min-width: 0; }
  .an-xs { flex: none; max-width: none; margin-left: 0; }
  .an-x { height: 44px; }
  .an-x::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; }
  .an-x::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -10px; }
  .an-x::-moz-range-track, .an-x::-moz-range-progress { height: 8px; border-radius: 4px; }
  .an-x::-moz-range-thumb { width: 28px; height: 28px; }
  .an-narr { font-size: 14px; }
  .an-lect { gap: 2px 14px; font-size: 16px; }
  /* el conmutador a todo lo ancho y con 44 px, como los botones */
  .an-vw { display: flex; width: 100%; }
  .an-vw { border-radius: 14px; }
  .an-vw > button { flex: 1 1 0; min-width: 0; height: 44px; border-radius: 12px; font-size: 13.5px; }
  .an .an-iso-reset { height: 44px; }
  .an-iso-bar { gap: 6px 12px; font-size: 12px; }
}
@media (max-width: 600px) {
  .an { padding: 10px 10px 12px; border-radius: 12px; }
}
@media (pointer: coarse) {
  .an .an-btn { min-height: 44px; }
  .an-x { height: 44px; }
  .an-vw > button { min-height: 44px; }
}

/* Libreta: sin cuerpo libre ni narrador, como en el prototipo */
.hj-sheet[data-ayuda="libreta"] .an-fbd,
.hj-sheet[data-ayuda="libreta"] .an-narr { display: none; }

@media (prefers-reduced-motion: reduce) {
  .an *, .an *::before, .an *::after { transition: none !important; }
}
@media print {
  .an { display: none !important; }
}