/* tc-lesson.css — THE lesson look (canon 2026-10-12, Daniel). ONE stylesheet for every lesson body on
 * TherapyConnectData: academia-leccion.html (Academia ETP) AND curso-content.html (Curso ETP, live + a tu ritmo).
 * Colors, callouts, pills, numbered parts, diagrams, tables, quizzes, practice blocks all live HERE and nowhere else.
 * A change to the lesson look is made in this file, once, and both surfaces pick it up (bump ?v= on both pages).
 * Neither page may re-declare these selectors inline: tc_style_check `lesson_look_shared` halts the deploy.
 * Scope: everything hangs off .tc-lesson (the <article>). Palette vars are set on .tc-lesson so the shell tokens
 * (tc-shell.css --blue/--green/--red) are untouched outside the lesson. Fonts: Atkinson Hyperlegible + Nunito
 * (Google Fonts link on both pages). CLAUDE.md §2.51. */
.tc-lesson{--blue:#0B57C4;--navym:#0B3F82;--sky:#E3EFFC;--cream:#FFF8EC;--sun:#F4B731;--sunsoft:#FFF1C9;--terra:#D9734E;--terrasoft:#FBE6DC;
  --green:#12A36B;--greensoft:#DDF5EA;--red:#C62828;--redsoft:#FDECEC;--ink:#1F2D3D;--sub:#55657A;--line:#E6DCC8;--page:#F7F4EE;
  color:var(--ink);font-family:'Atkinson Hyperlegible',system-ui,sans-serif}
body.tc-lesson-page{background:#F7F4EE}
.tc-lesson .mbtn,.tc-lesson-page .mbtn{display:inline-block;text-align:center;font-family:'Nunito',sans-serif;font-weight:900;border-radius:99px;padding:10px 16px;text-decoration:none;border:0;cursor:pointer;font-size:.95rem;min-height:44px;line-height:1.5}
.tc-lesson .mbtn.p,.tc-lesson-page .mbtn.p{background:var(--blue);color:#fff}
.tc-lesson .mbtn.s,.tc-lesson-page .mbtn.s{background:var(--sky);color:var(--navym)}
.tc-lesson .mbtn.g,.tc-lesson-page .mbtn.g{background:var(--green);color:#fff}
.tc-lesson .mbtn[disabled],.tc-lesson-page .mbtn[disabled]{opacity:.6;cursor:default}
.tc-lesson{font-size:1.08rem;line-height:1.6;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 32px;min-height:60vh;overflow-wrap:anywhere}
.tc-lesson h2{font-family:'Nunito',sans-serif;font-weight:900;color:var(--navym);font-size:1.75rem;line-height:1.15;margin:4px 0 12px}
.tc-lesson h3{font-family:'Nunito',sans-serif;font-weight:800;color:var(--navym);font-size:1.22rem;margin:24px 0 8px}
.tc-lesson p{margin:0 0 12px}
.tc-lesson ul,.tc-lesson ol{margin:6px 0 12px 22px;padding:0}
.tc-lesson li{margin:5px 0}
.tc-lesson ol.big>li{margin:9px 0}
.tc-lesson .pill{display:inline-block;font-family:'Nunito',sans-serif;font-weight:900;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border-radius:99px;background:var(--sunsoft);color:#7A4E00;margin:0 6px 6px 0}
.tc-lesson .pill.blue{background:var(--navym);color:#fff}
.tc-lesson .pill.greenp{background:var(--green);color:#fff}
.tc-lesson .goal{background:var(--sky);border-left:7px solid var(--blue);border-radius:12px;padding:14px 18px;font-weight:700;color:var(--navym);font-size:1.12rem;margin:10px 0 16px}
.tc-lesson .goal small{display:block;font-family:'Nunito',sans-serif;font-weight:900;font-size:.72rem;letter-spacing:.08em;color:var(--blue);text-transform:uppercase}
.tc-lesson .lede{font-size:1.18rem}
.tc-lesson .box{border-radius:14px;padding:14px 18px;margin:12px 0}
.tc-lesson .box.navy{background:var(--navym);color:#fff}
.tc-lesson .box.navy .big{font-size:1.12rem;color:var(--sun);font-weight:700}
.tc-lesson .box.sky{background:var(--sky)}
.tc-lesson .box.sun{background:var(--sunsoft)}
.tc-lesson .box.cream{background:var(--cream)}
.tc-lesson .box.green{background:var(--greensoft)}
.tc-lesson .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tc-lesson .stop{background:var(--redsoft);border:2.5px solid var(--red);border-radius:14px;padding:14px 18px;display:flex;gap:14px;align-items:flex-start;margin:14px 0}
.tc-lesson .stop .hand{flex:none;width:46px;height:46px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center}
.tc-lesson .stop .hand svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tc-lesson .stop h4{font-family:'Nunito',sans-serif;font-weight:900;color:var(--red);font-size:1.1rem;margin:0 0 2px}
.tc-lesson .chk{list-style:none;margin:6px 0!important;padding:0!important}
.tc-lesson .chk li{display:flex;gap:10px}
.tc-lesson .chk li:before{content:'';flex:none;width:22px;height:22px;border:2.5px solid var(--green);border-radius:5px;margin-top:3px}
.tc-lesson .tablewrap{overflow-x:auto;max-width:100%}
.tc-lesson table.sheet{border-collapse:collapse;width:100%;font-size:.95rem}
.tc-lesson table.sheet th,.tc-lesson table.sheet td{border:1.5px solid #C9BFAA;padding:8px 6px;text-align:center}
.tc-lesson table.sheet th{background:var(--navym);color:#fff;font-family:'Nunito',sans-serif}
.tc-lesson table.sheet .l{text-align:left}
.tc-lesson .diagram{margin:10px auto 14px;max-width:680px}
.tc-lesson .diagram svg{width:100%;height:auto;display:block}
/* Illustrations (2026-10-16, Academia ETP pilot: Higgsfield images in Unit 1).
   <figure class="fig"> = full-width rounded picture + a short caption; .fig-hero sits
   under the lede. Images are shared across languages (no text baked in); the
   caption carries the localized words. Same look on Academia and Curso pages. */
.tc-lesson figure.fig{margin:14px auto 18px;max-width:680px;padding:0}
.tc-lesson figure.fig img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 6px 22px rgba(11,37,69,.10)}
.tc-lesson figure.fig figcaption{margin:8px 6px 0;font-size:.86rem;line-height:1.4;color:var(--sub)}
.tc-lesson figure.fig-hero{max-width:none;margin-top:8px}
.tc-lesson figure.fig-hero img{border-radius:20px}
/* Data figures (2026-10-16, Daniel: numbers from the corpus, not only pictures): inline SVG on a white card,
   caption carries the point. Built by academia/build_data_figs.py. */
.tc-lesson figure.fig-data{max-width:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 14px 10px}
.tc-lesson figure.fig-data svg{display:block;width:100%;height:auto}
.tc-lesson figure.fig-data figcaption{margin:10px 4px 0;font-size:.95rem;line-height:1.45;color:var(--ink);font-weight:600}
.tc-lesson .ev-data{margin-top:12px;background:var(--sky);border-radius:12px;padding:12px 16px;font-size:.9rem}
.tc-lesson .ev-data ul{margin:6px 0 0;padding-left:20px}
.tc-lesson .ev-data li{margin:5px 0;line-height:1.45}
.tc-lesson .muted,.tc-lesson-page .muted{color:var(--sub);font-size:.92rem}
.tc-lesson .part{margin-top:22px}
.tc-lesson .parth{display:flex;gap:10px;align-items:center;margin:26px 0 8px}
.tc-lesson .parth .num{flex:none;width:34px;height:34px;border-radius:50%;background:var(--sun);color:var(--ink);font-family:'Nunito',sans-serif;font-weight:900;display:flex;align-items:center;justify-content:center}
.tc-lesson .parth h3{margin:0}
.tc-lesson .vid{background:var(--navym);color:#fff;border-radius:16px;padding:18px;display:flex;gap:16px;align-items:center}
.tc-lesson .vid .play{flex:none;width:58px;height:58px;border-radius:50%;background:var(--sun);display:flex;align-items:center;justify-content:center}
.tc-lesson .vid .play svg{width:26px;height:26px;fill:var(--navym)}
.tc-lesson .vid b{display:block;font-family:'Nunito',sans-serif;font-size:1.08rem}
.tc-lesson .vid span{color:rgba(255,255,255,.88);font-size:.95rem}
.tc-lesson .vidframe{position:relative;padding-top:56.25%;border-radius:16px;overflow:hidden;background:#000}
.tc-lesson .vidframe iframe,.tc-lesson .vidframe video{position:absolute;inset:0;width:100%;height:100%;border:0}
.tc-lesson details.own{background:var(--sunsoft);border-radius:12px;padding:10px 14px;margin-top:10px;font-size:.92rem}
.tc-lesson details.own pre{white-space:pre-wrap;font-family:inherit;margin:8px 0 0}
.tc-lesson .mqc{background:var(--cream);border:2px solid var(--sun);border-radius:16px;padding:16px 18px;margin:14px 0}
.tc-lesson .mqi+.mqi{border-top:1.5px dashed var(--line);margin-top:14px;padding-top:14px}
.tc-lesson .mqq{font-weight:700;margin:4px 0 10px!important}
.tc-lesson .mqos{display:grid;gap:8px}
.tc-lesson .mqo{display:flex;gap:10px;align-items:center;width:100%;min-height:48px;text-align:left;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:12px;padding:9px 12px;cursor:pointer;line-height:1.35}
.tc-lesson .mqo:hover:not([disabled]){border-color:var(--blue);background:var(--sky)}
.tc-lesson .mqo:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.tc-lesson .mqo[disabled]{cursor:default}
.tc-lesson .mqo .mql{flex:none;width:28px;height:28px;border-radius:50%;background:var(--sky);color:var(--navym);font-family:'Nunito',sans-serif;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.tc-lesson .mqo.right{border-color:var(--green);background:var(--greensoft)}
.tc-lesson .mqo.right .mql{background:var(--green);color:#fff}
.tc-lesson .mqo.wrong{border-color:var(--terra);background:var(--terrasoft)}
.tc-lesson .mqo.wrong .mql{background:var(--terra);color:#fff}
.tc-lesson .mqo.sel{border-color:var(--blue);background:var(--sky)}
.tc-lesson .mqo.sel .mql{background:var(--blue);color:#fff}
.tc-lesson .mqo.dim{opacity:.6}
.tc-lesson .mqo.off{opacity:.45;border-style:dashed}
.tc-lesson .mqo.off>span:nth-child(2){text-decoration:line-through}
.tc-lesson .mqhint{display:block;margin-top:8px;background:#fff;border:2px dashed var(--sun);border-radius:10px;padding:8px 12px}
.tc-lesson .mqhint b{color:#7A4E00}
.tc-lesson .mqf{margin-top:10px;border-radius:12px;font-size:.98rem}
.tc-lesson .mqf:empty{display:none}
.tc-lesson .mqf.good{background:var(--greensoft);padding:10px 14px}
.tc-lesson .mqf.bad{background:var(--terrasoft);padding:10px 14px}
.tc-lesson .mqf b.v{font-family:'Nunito',sans-serif;font-weight:900;margin-right:4px}
.tc-lesson .mqf.good b.v{color:#0B6B45}
.tc-lesson .mqf.bad b.v{color:#A4462A}
.tc-lesson .mqf .muted{display:block;margin-top:4px;font-size:.85rem}
.tc-lesson .prac{border:2px solid var(--navym);border-radius:16px;padding:16px 18px;margin:14px 0;background:#fff}
.tc-lesson .prac.extra{border-style:dashed;border-color:var(--sub)}
.tc-lesson .prac h4{font-family:'Nunito',sans-serif;font-weight:900;color:var(--navym);font-size:1.12rem;margin:0 0 6px}
.tc-lesson .prac ol{margin:8px 0 12px 22px}
.tc-lesson .prac .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.tc-lesson .ckl{list-style:none;margin:10px 0 0!important;padding:0!important}
.tc-lesson .ckl li{display:flex;gap:10px;align-items:flex-start;padding:4px 0}
.tc-lesson .ckl .ic{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem}
.tc-lesson .ckl .ok .ic{background:var(--green);color:#fff}
.tc-lesson .ckl .no .ic{background:var(--terrasoft);color:#A4462A}
.tc-lesson .ckl .inf .ic{background:var(--sky);color:var(--navym)}
.tc-lesson .res{border-radius:12px;padding:10px 14px;margin-top:10px}
.tc-lesson .res.good{background:var(--greensoft)}
.tc-lesson .res.bad{background:var(--terrasoft)}
.tc-lesson .res b{font-family:'Nunito',sans-serif}
.tc-lesson .done{display:inline-block;background:var(--greensoft);color:#0B6B45;border-radius:99px;padding:4px 12px;font-weight:700;font-size:.88rem;margin-bottom:8px}
.tc-lesson .review{background:#FFE98A;border-radius:12px;padding:12px 16px;color:#5a4500;margin:14px 0;font-size:.95rem}
.tc-lesson .review b{color:#5a4500}
.tc-lesson .locked{text-align:center;padding:30px 6px}
.tc-lesson .navrow,.tc-lesson-page .navrow{display:flex;justify-content:space-between;gap:10px;margin-top:22px;flex-wrap:wrap}
.tc-lesson .exr,.tc-lesson-page .exr{margin-top:6px;font-size:.9rem;font-weight:700}
.tc-lesson .exr.y,.tc-lesson-page .exr.y{color:#0B6B45}
.tc-lesson .exr.n,.tc-lesson-page .exr.n{color:#A4462A}
/* ── Course markdown (curso-content.html): the server turns markdown into plain h1/h2/h3/p/blockquote/table/img.
   These map that plain markup onto the SAME look the Academia builder emits by hand (.parth/.num, .goal, table.sheet,
   .diagram). Academia pages never carry .tc-lesson--md, so these do not touch them. */
.tc-lesson--md{counter-reset:tclpart}
.tc-lesson--md h1,.tc-lesson--md h2{display:flex;gap:10px;align-items:center;font-family:'Nunito',sans-serif;font-weight:800;color:var(--navym);font-size:1.22rem;line-height:1.25;margin:26px 0 8px}
.tc-lesson--md h1::before,.tc-lesson--md h2::before{counter-increment:tclpart;content:counter(tclpart);flex:none;width:34px;height:34px;border-radius:50%;background:var(--sun);color:var(--ink);font-family:'Nunito',sans-serif;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:1rem}
.tc-lesson--md h3{font-family:'Nunito',sans-serif;font-weight:800;color:var(--navym);font-size:1.08rem;margin:20px 0 6px}
.tc-lesson--md>p:first-of-type{font-size:1.18rem}
.tc-lesson--md strong{color:var(--navym)}
.tc-lesson--md blockquote{background:var(--sky);border-left:7px solid var(--blue);border-radius:12px;padding:14px 18px;font-weight:700;color:var(--navym);font-size:1.08rem;margin:10px 0 16px}
.tc-lesson--md blockquote p{margin:0}
.tc-lesson--md table{border-collapse:collapse;width:100%;font-size:.95rem;margin:10px 0 14px;display:block;overflow-x:auto}
.tc-lesson--md th,.tc-lesson--md td{border:1.5px solid #C9BFAA;padding:8px 6px;text-align:center}
.tc-lesson--md th{background:var(--navym);color:#fff;font-family:'Nunito',sans-serif}
.tc-lesson--md img{display:block;width:100%;max-width:680px;margin:10px auto 14px;border-radius:14px}
/* Course markdown figures (2026-10-16): ![alt](src) followed by an *italic* line = picture + caption, same look as Academia's figure.fig. */
.tc-lesson--md img.md-img{border-radius:16px;box-shadow:0 6px 22px rgba(11,37,69,.10);margin-bottom:6px}
.tc-lesson--md p:has(> img.md-img) + p{max-width:680px;margin:0 auto 18px;font-size:.86rem;line-height:1.4;color:var(--sub)}
.tc-lesson--md p:has(> img.md-img) + p em{font-style:normal}
.tc-lesson--md hr{margin:28px 0;border:0;border-top:1.5px dashed var(--line)}
.tc-lesson--md code{background:var(--cream);padding:2px 6px;border-radius:4px;font-size:.92em}
.tc-lesson--md a{color:var(--blue)}
@media screen and (max-width:860px){.tc-lesson{padding:20px 16px;font-size:1.03rem}.tc-lesson .two{grid-template-columns:1fr}}

/* ── Point figures (2026-10-16): one card per main point, drawn by tc-lesson-figs.js ── */
.tc-lesson--md figure.tc-fig{margin:10px 0 18px;padding:0}
.tc-fig-card{display:flex;gap:16px;align-items:center;background:#F7FBFF;border:1.5px solid #D7E5F8;border-radius:16px;padding:14px 16px;max-width:680px;box-shadow:0 4px 14px rgba(11,37,69,.05)}
.tc-fig-ic{flex:0 0 92px;width:92px;height:92px}
.tc-fig-ic svg{width:100%;height:100%;display:block}
.tc-fig-tx{min-width:0;flex:1}
.tc-fig-t{font-family:'Nunito','Inter',sans-serif;font-weight:900;color:#0b3f82;font-size:1.02rem;line-height:1.25}
.tc-fig-ul{margin:8px 0 0;padding:0 0 0 18px;color:#1A2E44;font-size:.9rem;line-height:1.4}
.tc-fig-ul li{margin:0 0 3px}
.tc-fig-ul li::marker{color:#16A34A;font-weight:900}
@media(max-width:560px){.tc-fig-card{flex-direction:column;align-items:flex-start;gap:10px}.tc-fig-ic{width:72px;height:72px;flex-basis:72px}}
@media print{.tc-fig-card{box-shadow:none}}