/* DOE y ASM · «Cómo funciona» (study-theory.js) y lectura del resultado (tarjetas de veredicto). */
.study-theory{margin:0 0 16px;border:2px solid var(--module-ink,#173754);border-radius:16px;background:#fff;overflow:hidden}
.study-theory>summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;cursor:pointer;list-style:none;font:700 16px/1.3 Arial,Helvetica,sans-serif;color:var(--module-ink,#173754)}
.study-theory>summary::-webkit-details-marker{display:none}
.study-theory>summary small{font:400 12.5px Arial,Helvetica,sans-serif;color:#5d6f7d;margin-left:auto}
.study-theory .th-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--module-accent,#0a8fc2);color:#fff;font-size:15px;flex:none}
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;padding:0 16px 16px}
.th-card{margin:0;border:1px solid #d6e1ea;border-radius:12px;background:linear-gradient(180deg,#f6fafd,#fff 60%);display:flex;flex-direction:column;overflow:hidden}
.th-art{padding:8px 8px 0;background:#fff;border-bottom:1px solid #e6edf3}
.th-art svg{display:block;width:100%;height:auto}
.th-card figcaption{padding:10px 12px 12px;font:12.5px/1.45 Arial,Helvetica,sans-serif;color:#33485c}
.th-card figcaption strong{display:block;margin-bottom:4px;font-size:13.5px;color:var(--module-ink,#173754)}
@media (max-width:520px){.th-grid{grid-template-columns:1fr;padding:0 10px 12px}.study-theory>summary small{margin-left:0;width:100%}}

/* Piezas de dibujo */
.study-theory text{font-family:Arial,Helvetica,sans-serif}
.th-lab{font-size:10px;fill:#36506a}.th-b{font-weight:700}.th-c{text-anchor:middle}
.th-num{font-size:9.5px;font-weight:700;fill:#fff;text-anchor:middle}.th-num-d{font-size:10px;font-weight:700;fill:var(--module-ink,#173754);text-anchor:middle}
.th-white{fill:#fff}.th-accent{fill:var(--module-accent,#0a8fc2)}.th-red-t{fill:#c53348}.th-green-t{fill:#1f8a4c}.th-amber-t{fill:#a86b00}.th-blue-t{fill:#0752b8}
.th-acc{fill:var(--module-accent,#0a8fc2)}.th-ink-f{fill:var(--module-ink,#173754)}.th-gray{fill:#a7b4c0}.th-red{fill:#c53348}.th-green{fill:#1f8a4c}.th-amber{fill:#e0a526}.th-violet{fill:#7752ad}
.th-op0{fill:var(--module-accent,#0a8fc2)}.th-op1{fill:#b0711c}.th-op2{fill:#7752ad}
.th-edge{stroke:#8aa1b6;stroke-width:1.6}.th-dash{stroke-dasharray:4 4}
.th-axis{stroke:#9aa8b5;stroke-width:1.2}
.th-line{stroke-width:3;stroke-linecap:round}.th-blue{stroke:#0752b8}.th-blue-f{fill:#0752b8}.th-redline{stroke:#c53348}.th-ink{stroke:var(--module-ink,#173754)}
.th-mean{stroke:var(--module-ink,#173754);stroke-width:3;stroke-linecap:round}
.th-dashline{stroke:#6b7f93;stroke-width:1.4;stroke-dasharray:4 3;fill:none}
.th-arrow,.th-arrow2{stroke:var(--module-accent,#0a8fc2);stroke-width:3;stroke-linecap:round}
.th-limit{stroke:#c53348;stroke-width:1.6;stroke-dasharray:5 4}.th-green-l{stroke:#1f8a4c}
.th-curve{fill:none;stroke:#c53348;stroke-width:2.2;stroke-dasharray:240;stroke-dashoffset:0}
.th-ring{fill:none;stroke:#b8c6d3;stroke-width:1.4}.th-ring-c{fill:#e3edf5}.th-shot{fill:#c53348}
.th-bell{fill:color-mix(in srgb,var(--module-accent,#0a8fc2) 14%,#fff);stroke:var(--module-accent,#0a8fc2);stroke-width:2}
.th-slice{fill:color-mix(in srgb,var(--module-ink,#173754) 12%,transparent);stroke:#fff;stroke-width:1.5}
.th-arc{fill:none;stroke-width:16}.th-green-s{stroke:#5fb987}.th-amber-s{stroke:#efc35c}.th-red-s{stroke:#e48a96}
.th-needle-l{stroke:var(--module-ink,#173754);stroke-width:3.2;stroke-linecap:round}
.th-check{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.th-zone-r{fill:#f5c2c9}.th-zone-a{fill:#fde3a7}.th-zone-g{fill:#bfe5cd}

/* Animaciones: un ciclo de 7 s que se repite; el retardo (--d) escalona la aparición dentro del ciclo. */
@media (prefers-reduced-motion:no-preference){
 .study-theory:is([open],.th-live) .th-loop{animation-duration:7s;animation-delay:var(--d,0s);animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:ease-out}
 .study-theory .th-pop,.study-theory .th-drop,.study-theory .th-bar,.study-theory .th-grow,.study-theory .th-pulse{transform-box:fill-box;transform-origin:center}
 .study-theory .th-bar,.study-theory .th-grow{transform-origin:left center}
 .study-theory:is([open],.th-live) .th-pop{animation-name:th-pop}
 .study-theory:is([open],.th-live) .th-drop{animation-name:th-drop}
 .study-theory:is([open],.th-live) .th-bar,.study-theory:is([open],.th-live) .th-grow{animation-name:th-grow}
 .study-theory:is([open],.th-live) .th-fade{animation-name:th-fade}
 .study-theory:is([open],.th-live) .th-draw{animation-name:th-draw}
 .study-theory:is([open],.th-live) .th-pulse{animation:th-pulse 1.8s ease-in-out infinite}
 .study-theory .th-swing{transform-box:view-box;transform-origin:50px 70px}
 .study-theory:is([open],.th-live) .th-swing{animation-name:th-swing;animation-timing-function:ease-in-out}
 .study-theory:is([open],.th-live) .th-msg1{animation-name:th-msg1}
 .study-theory:is([open],.th-live) .th-msg2{animation-name:th-msg2}
 .study-theory .th-rise{transform-box:view-box}
 .study-theory:is([open],.th-live) .th-rise{animation-name:th-rise;animation-timing-function:ease-in-out}
 .study-theory .th-needle{transform-box:view-box;transform-origin:130px 135px}
 .study-theory:is([open],.th-live) .th-needle{animation-name:th-needle;animation-timing-function:ease-in-out}
 .study-theory:is([open],.th-live) .th-slide{animation-name:th-slide;animation-timing-function:ease-in-out}
 .study-theory .th-tilt{transform-box:view-box;transform-origin:40px 96px}
 .study-theory:is([open],.th-live) .th-tilt{animation-name:th-tilt;animation-timing-function:ease-in-out}
}
@media (prefers-reduced-motion:reduce){.study-theory .th-msg1{display:none}.study-theory .th-needle{transform:rotate(-54deg);transform-origin:130px 135px;transform-box:view-box}}
@keyframes th-pop{0%{opacity:0;transform:scale(.3)}7%{opacity:1;transform:scale(1.18)}11%{transform:scale(1)}82%{opacity:1}94%,100%{opacity:0}}
@keyframes th-drop{0%{opacity:0;transform:translateY(-34px)}9%{opacity:1;transform:none}82%{opacity:1}94%,100%{opacity:0}}
@keyframes th-grow{0%{transform:scaleX(0);opacity:1}11%{transform:scaleX(1)}82%{opacity:1}94%,100%{opacity:0;transform:scaleX(1)}}
@keyframes th-fade{0%{opacity:0}9%{opacity:1}82%{opacity:1}94%,100%{opacity:0}}
@keyframes th-draw{0%{stroke-dashoffset:240}14%,82%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes th-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes th-swing{0%,22%{transform:rotate(-27deg)}48%,86%{transform:rotate(0)}100%{transform:rotate(-27deg)}}
@keyframes th-msg1{0%,30%{opacity:1}38%,92%{opacity:0}100%{opacity:1}}
@keyframes th-msg2{0%,36%{opacity:0}46%,86%{opacity:1}94%,100%{opacity:0}}
@keyframes th-rise{0%,14%{transform:none}34%,86%{transform:translateY(-40px)}100%{transform:none}}
@keyframes th-needle{0%{transform:rotate(-90deg)}28%{transform:rotate(70deg)}52%,88%{transform:rotate(-54deg)}100%{transform:rotate(-90deg)}}
@keyframes th-slide{0%,12%{transform:translateX(-160px)}44%,88%{transform:none}100%{transform:translateX(-160px)}}
@keyframes th-tilt{0%,16%{transform:rotate(15.5deg)}44%,88%{transform:rotate(0)}100%{transform:rotate(15.5deg)}}

/* Resultado: tarjetas de veredicto y lectura en palabras */
.study-verdicts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0}
.study-verdict{border:2px solid #c7d4df;border-left-width:7px;border-radius:12px;padding:10px 14px;background:#fff;font:12.5px/1.4 Arial,Helvetica,sans-serif;color:#33485c}
.study-verdict b{display:block;font-size:12px;color:#5d6f7d;font-weight:700;text-transform:none}
.study-verdict strong{display:block;font-size:20px;line-height:1.25;margin:2px 0 4px;color:#173754}
.study-verdict[data-tone=good]{border-color:#9fd3b4;border-left-color:#1f8a4c;background:#f2faf5}
.study-verdict[data-tone=good] strong{color:#145a34}
.study-verdict[data-tone=warning]{border-color:#efd08a;border-left-color:#b7791f;background:#fffaf0}
.study-verdict[data-tone=warning] strong{color:#6b4508}
.study-verdict[data-tone=bad]{border-color:#eab0b8;border-left-color:#c0392b;background:#fdf3f4}
.study-verdict[data-tone=bad] strong{color:#85172b}
.study-reading{margin:0 0 14px;padding:12px 16px 12px 34px;border:2px solid color-mix(in srgb,var(--module-ink,#173754) 30%,#fff);border-radius:12px;background:color-mix(in srgb,var(--module-glow,#66daef) 8%,#fff)}
.study-reading h3{margin:0 0 6px -18px;font:700 14px Arial,Helvetica,sans-serif;color:var(--module-ink,#173754)}
.study-reading li{margin:4px 0;font:13px/1.5 Arial,Helvetica,sans-serif;color:#2b4157}