*{box-sizing:border-box} :root{--ink:#10286c;--blue:#173ea8;--green:#009b61;--yellow:#ffdb26;--muted:#65758d;--line:#d7e8e3}body{margin:0;color:var(--ink);background:#edf5f2;font-family:'Trebuchet MS',Arial,sans-serif;font-size:16px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:var(--ink);font-weight:800;transition:transform .12s,box-shadow .12s}button:hover{transform:translateY(-2px)}button:disabled{cursor:default;opacity:.5;transform:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #173ea8;outline-offset:4px}.app{min-height:100dvh;max-width:1440px;margin:auto;background:linear-gradient(150deg,#009b61 0 2%,transparent 2.05%),linear-gradient(330deg,#ffdb26 0 2%,transparent 2.05%),white;padding:20px 40px 12px;position:relative;overflow:hidden}header{display:flex;align-items:center;justify-content:space-between;gap:12px;height:68px}.brand{color:var(--ink);font-size:35px;font-weight:1000;letter-spacing:-1.8px;text-decoration:none}.brand span{background:var(--yellow);border-radius:16px;padding:2px 10px;display:inline-block;transform:rotate(-2deg)}.brand i{color:var(--green);font-size:25px;vertical-align:top}.iconbtn{border:0;border-radius:14px;background:#edf6f2;color:var(--green);width:43px;height:43px;font-size:25px}.tools{display:flex;gap:8px}.tools .off{background:#f1f2f6;color:#7c8a9c}main{max-width:1160px;margin:0 auto;min-height:calc(100dvh - 172px)}h1{font-size:32px;letter-spacing:-1px;margin:18px 0 8px;text-align:center}h2{font-size:24px;margin:12px 0}p{line-height:1.5}.subtitle{text-align:center;color:var(--muted);margin:6px 0 18px}.tabs{display:flex;gap:10px;max-width:650px;margin:18px auto 24px}.tabs button{flex:1;padding:15px;border:0;border-radius:14px;background:#edf4f4;font-size:20px}.tabs .active{background:linear-gradient(#00ad70,#008c53);color:white;box-shadow:0 5px 0 #007d4c}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.topic{min-height:126px;text-align:left;background:white;border:2px solid var(--line);box-shadow:0 4px 0 #e6efec;border-radius:20px;padding:12px;display:flex;gap:12px;align-items:center}.topic:hover{border-color:var(--green);box-shadow:0 6px 0 #ccebdc}.topic:last-child{border-color:#e6cf60;background:#fffef5}.sprite{display:block;flex-shrink:0;width:86px;height:86px;background-image:url('assets/topics.webp');background-size:300% 300%;mix-blend-mode:multiply}.topic .title{font-size:21px;display:block;line-height:1.12}.topic small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin:7px 0}.bar{height:8px;background:#e6eceb;border-radius:20px;overflow:hidden;display:block}.bar i{height:100%;background:linear-gradient(90deg,#00b670,#008950);display:block;border-radius:20px}.progressline{display:flex;gap:7px;align-items:center}.progressline .bar{flex:1}.progressline b{font-size:11px;color:#008c53}.home-bottom{display:flex;justify-content:space-between;align-items:center;background:#f4f8fc;border-radius:18px;padding:12px 20px;margin:22px 0 12px;gap:10px}.home-bottom p{margin:0;font-size:14px}.pill{display:inline-block;background:#e6f6ec;color:#008252;padding:6px 10px;border-radius:9px;font-size:12px;font-weight:800}.primary,.secondary{border:0;border-radius:14px;padding:14px 23px;font-weight:900}.primary{background:var(--yellow);box-shadow:0 4px 0 #dfbc0c}.secondary{background:#edf4f4;border:1px solid #dce8e6}.green{background:var(--green);color:#fff;box-shadow:0 4px 0 #007d4c}.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:22px 0 16px}.chip{border:1px solid #d5e1e1;background:white;border-radius:11px;padding:10px 14px;font-size:14px}.chip.selected{border-color:var(--green);background:#e3f6e8;color:#007c4e}.bottom-actions{display:flex;justify-content:center;gap:15px;margin:20px 0}.setup{max-width:950px;margin:auto}.panel{background:#f4f8fb;border:1px solid #e3ebed;border-radius:22px;padding:22px}.setupgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:block;margin:12px 0}.field select{width:100%;margin-top:8px;border:2px solid #d6e4e1;border-radius:12px;padding:12px;color:var(--ink);background:white}.modes{display:flex;gap:8px}.modes button{flex:1;font-size:14px;padding:12px 8px}.notice{font-size:14px;line-height:1.6;color:#536782}.checktypes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.checktypes label{padding:8px;background:white;border-radius:9px;font-size:13px;display:flex;gap:6px;align-items:center}input[type=checkbox]{accent-color:var(--green);width:17px;height:17px}.sessionbar{display:flex;align-items:center;gap:16px;margin:18px auto;max-width:830px}.sessionbar .bar{flex:1;height:12px}.question{max-width:900px;margin:auto}.question h1{margin:18px 0}.context{text-align:center;color:#536782;margin:10px auto 18px;max-width:760px;font-size:16px}.prompt{white-space:pre-line;border-radius:22px;background:#edf6fa;padding:24px;text-align:center;font-size:27px;font-weight:900;line-height:1.6;min-height:110px;display:flex;align-items:center;justify-content:center}.options{display:grid;gap:12px;margin:22px 0}.option{padding:16px 20px;border:2px solid var(--line);border-radius:15px;background:white;text-align:left;font-size:19px}.option.selected{border-color:var(--green);background:#e8f8ed;box-shadow:0 2px 0 #99d8b1}.answer{width:100%;padding:17px;border:2px solid #bcdccc;border-radius:14px;margin:22px 0;font-size:22px;color:var(--ink)}.slots{min-height:78px;border:2px dashed #9ccab7;border-radius:16px;padding:12px;margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.slots:empty:before{content:'Tu frase aparece aquí…';color:#78978e}.tiles{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:18px 0}.tile{border:0;border-radius:11px;padding:12px 17px;background:#eceef7;box-shadow:0 3px 0 #cdd2e3;font-size:19px}.slots .tile{background:#def3ca;box-shadow:0 3px 0 #b5d79b}.feedback{border-radius:16px;padding:16px 22px;background:#e6f8dc;border:1px solid #b9ddaa;margin:15px 0;line-height:1.5}.feedback.retry{background:#fff8dc;border-color:#efdc9a}.feedback strong{display:block;font-size:21px;margin-bottom:5px}.feedback p{margin:4px 0;font-size:15px}.hint{background:#fff7cd;padding:12px 18px;border-radius:12px;margin:15px 0}.result{text-align:center;max-width:750px;margin:20px auto}.result .sprite{width:145px;height:145px;margin:auto}.score{font-size:48px;margin:12px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px 0}.result-grid div{background:#f2f7fa;border-radius:16px;padding:20px}.result-grid b{display:block;font-size:26px;margin-bottom:8px}.statsrow{display:flex;align-items:center;gap:18px;padding:12px;border-bottom:1px solid var(--line)}.statsrow .sprite{width:50px;height:50px}.statsrow>div{flex:1}.statsrow .bar{margin-top:7px}.statsrow small{color:var(--muted)}footer{display:flex;justify-content:space-between;padding-top:20px;color:#778c8a;font-size:12px}dialog{border:0;border-radius:24px;max-width:430px;padding:28px;color:var(--ink);box-shadow:0 20px 90px #1235}dialog::backdrop{background:#11264b77}.hidden{display:none!important}@media(min-width:1050px) and (min-height:850px){.topic{min-height:140px}.sprite{width:105px;height:105px}.grid{gap:20px}h1{margin-top:30px}.tabs{margin:25px auto 32px}}@media(max-width:900px){.app{padding:14px 23px}.topic{gap:7px;padding:9px;min-height:115px}.sprite{width:65px;height:65px}.topic .title{font-size:17px}.topic small{font-size:11px}.brand{font-size:29px}.prompt{font-size:23px}}@media(max-width:620px){.app{padding:12px 16px}.brand{font-size:24px;letter-spacing:-1px}.brand i{display:none}.iconbtn{width:34px;height:36px;font-size:22px}.tools{gap:4px}header{height:55px}.grid{grid-template-columns:repeat(2,1fr);gap:11px}.topic{display:block;text-align:center;min-height:155px;padding:8px}.topic .sprite{margin:auto;width:70px;height:70px}.topic .title{font-size:16px}.topic small{min-height:24px}.topic:last-child{grid-column:span 2;display:flex;text-align:left;min-height:90px}.topic:last-child .sprite{margin:0 14px}.topic:last-child small{min-height:0}.topic:last-child>div{flex:1}h1{font-size:26px}.subtitle{font-size:14px}.tabs{margin:18px auto}.tabs button{font-size:18px;padding:13px}.home-bottom{align-items:flex-start;padding:15px;flex-direction:column}.setupgrid{grid-template-columns:1fr}.chips{gap:6px}.chip{padding:9px;font-size:12px}.bottom-actions{flex-wrap:wrap}.prompt{font-size:21px;padding:18px}.option{font-size:17px}.tile{padding:11px;font-size:17px}.result-grid{gap:8px}.result-grid div{padding:14px 8px;font-size:12px}footer{font-size:10px}.sessionbar{font-size:12px}.panel{padding:16px}}

.prompt-row{display:flex;gap:18px;align-items:center}.prompt-row .prompt{flex:1}@media(max-width:620px){.prompt-row{gap:9px}}
.spatial{width:260px;max-width:100%;height:auto;display:block;margin:auto}.prompt-row>.spatial{width:230px;flex-shrink:0}.topic:last-child{background:white;border-color:var(--line)}.topic[data-topic="versus"]{border-color:#e6cf60;background:#fffef5}@media(min-width:1100px){.grid{grid-template-columns:repeat(4,1fr)}.topic .title{font-size:18px}.topic .sprite{width:72px;height:72px}.topic{min-height:130px}}@media(max-width:620px){.topic:last-child{grid-column:auto;display:block;text-align:center;min-height:155px}.topic:last-child .sprite{margin:auto;width:70px;height:70px}.topic:last-child small{min-height:24px}.prompt-row>.spatial{width:115px}}

/* Keep native fields readable with dark OS/browser appearance. */
:root { color-scheme: only light; }
.answer, input[type="text"], textarea, select {
  color-scheme: light;
  background-color: #ffffff;
  color: #10286c;
  -webkit-text-fill-color: #10286c;
  caret-color: #173ea8;
}
.answer::placeholder, input[type="text"]::placeholder, textarea::placeholder {
  color: #65758d;
  -webkit-text-fill-color: #65758d;
  opacity: 1;
}
.answer:disabled {
  background-color: #f1f6f4;
  color: #10286c;
  -webkit-text-fill-color: #10286c;
  opacity: 1;
}
.answer::selection { background: #cee8dc; color: #10286c; }

.activities-return{color:#087448;font-size:15px;font-weight:800;text-decoration:none;padding:10px;border-radius:12px;background:#e4f7eb}.activities-return:focus-visible{outline:3px solid #173a9e}@media(max-width:600px){header{flex-wrap:wrap}.activities-return{font-size:13px}}

.difficulty{border:0;padding:0;margin:16px 0}.difficulty legend{font-weight:800;margin-bottom:10px}.difficulty-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.difficulty-button{display:flex;align-items:center;gap:8px;text-align:left;padding:9px 10px;min-height:62px;border:1.5px solid #d9e5e0;border-radius:13px;background:#fff;box-shadow:0 2px 0 #dce7e2;position:relative}.difficulty-button b{display:block;font-size:14px;line-height:1.25}.difficulty-button small{display:block;font-size:11px;line-height:1.3;margin-top:3px;font-weight:400;color:#566780}.difficulty-icon{display:grid;place-items:center;border-radius:10px;background:#e6f6ee;width:36px;height:36px;flex-shrink:0}.difficulty-0 .difficulty-icon{background:#edf1ff}.difficulty-2 .difficulty-icon{background:#fff5d5}.difficulty-3 .difficulty-icon{background:#f3ecff}.difficulty-button.selected{background:#f0fbf5;border-color:#08774b;box-shadow:0 2px 0 #08774b}.difficulty-check{position:absolute;top:3px;right:6px;color:#08774b;font-size:12px}.difficulty-button:hover{border-color:#159461;background:#f4fbf7}.answer-instruction{background:#fff4b8;border-radius:12px;padding:12px 18px;display:inline-block;font-weight:800;margin:0 0 18px}@media(max-width:420px){.difficulty-button{padding:8px 7px;gap:5px}.difficulty-button b{font-size:13px}.difficulty-button small{font-size:10px}.difficulty-icon{width:30px;height:32px}.difficulty-icon svg{width:30px}}

.translation-tools{margin:12px 0;text-align:left}.translate-button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:4px 12px 4px 5px;background:linear-gradient(135deg,#fff7ca,#fffdf1);border:1.5px solid #e6ca67;border-radius:15px;color:#14376e;box-shadow:0 3px 0 #e6d490;font-size:14px}.translate-button img{display:block;width:44px;height:38px;object-fit:contain}.translate-button:hover{background:#fff2b0;border-color:#c9a838}.translate-button[aria-expanded="true"]{background:#e7f6ef;border-color:#83b69f;box-shadow:0 2px 0 #b9d9c9}.help-toggle{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ffffffa6;font-size:17px}.translation{white-space:pre-line;background:#eef7f2;border-left:4px solid #15935e;padding:14px 18px;border-radius:10px;font-size:17px;line-height:1.6}.tools{flex-wrap:wrap;justify-content:flex-end}@media(max-width:600px){.tools{width:100%;justify-content:center}}

.contraction-symbol{display:inline-flex;align-items:center;justify-content:center;min-width:72px;height:72px;border-radius:22px;background:#e8f6ed;color:#123b7a;font-size:30px;font-weight:900;flex-shrink:0}.contraction-symbol span{color:#009b61;font-size:46px}


.group-panel{margin-bottom:20px}.verb-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.verb-group{display:flex;gap:12px;align-items:center;text-align:left;padding:14px;background:#fff;border:2px solid #dce9e3;border-radius:17px;color:var(--navy,#142d68);cursor:pointer}.verb-group.selected{background:#ebf9f0;border-color:#169966;box-shadow:0 3px #c7ead8}.group-number{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;background:#e5f3ed;border-radius:12px;font-size:23px;font-weight:900}.verb-group.selected .group-number{background:#16845b;color:white}.verb-group b,.verb-group small,.verb-group em{display:block}.verb-group small{font-size:14px;line-height:1.5;margin:5px 0}.verb-group em{font-size:12px;font-style:normal;color:#207253}.verb-group:focus-visible{outline:3px solid #173ea8;outline-offset:3px}@media(max-width:620px){.verb-groups{grid-template-columns:1fr}}

.glossary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.glossary-card{min-width:0;background:white;border:1px solid #d9e8df;border-radius:18px;padding:10px 12px 14px;text-align:center;box-shadow:0 4px #eaf4ee}.verb-word-art{width:100%;aspect-ratio:1;background-size:400% 200%;background-repeat:no-repeat;border-radius:12px}.glossary-card>p{font-size:17px;font-weight:750;color:#17734f;margin:0 0 12px;min-height:44px;display:flex;align-items:center;justify-content:center}.verb-forms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding-top:10px;border-top:1px solid #e3eee8}.verb-forms small{display:block;font-size:10px;color:#637880;margin-bottom:4px}.verb-forms b{font-size:14px;overflow-wrap:anywhere}@media(max-width:850px){.glossary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:380px){.glossary-card{padding:7px}.verb-forms b{font-size:12px}.glossary-card>p{font-size:15px}}

/* Theory: put the rule, example and its visual in the same reading order. */
.theory { max-width: 940px; margin: 0 auto; }
.theory .tabs { margin: 14px auto 18px; }
.theory-nav { margin: 0 0 16px; }
.theory-nav .chip { min-height: 44px; }
.theory-panel {
  background: #f2f8f5;
  border: 1px solid #d9e8df;
  border-radius: 22px;
  padding: clamp(16px, 3vw, 26px);
}
.theory-panel h2 { margin: 0; font-size: clamp(21px, 3vw, 27px); }
.theory-rule { margin: 8px 0 0; max-width: 68ch; color: #344c67; }
.theory-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.theory-example {
  min-width: 0;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid #dce9e4;
  border-radius: 14px;
  background: white;
}
.theory-example:only-child { grid-column: 1 / -1; }
.theory-example figcaption div { font-size: clamp(18px, 2.2vw, 23px); font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
.theory-example figcaption b { color: #075e3d; background: #e3f4e9; border-radius: 4px; padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.theory-example figcaption p { font-size: 15px; color: #455871; margin: 6px 0 0; }
.theory-example :is(img, svg) { display: block; width: min(100%, 180px); height: auto; margin: 0 0 10px; border-radius: 10px; }
.example-reading { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.theory-example .example-picture { aspect-ratio: 3 / 2; object-fit: contain; }
.example-reading span { padding: 4px 8px; border-radius: 8px; background: #e9f4ff; color: #214a7d; font-size: 13px; font-weight: 800; }
.theory-example .example-books { width: min(100%, 155px); }
.theory-example .example-clouds { width: min(100%, 155px); }
.theory-example del { color: #a12a40; }
.example-time { position: relative; display: flex; justify-content: space-between; gap: 12px; padding-top: 13px; margin: 0 0 10px; }
.example-time::before { content: ''; position: absolute; top: 5px; left: 6px; right: 6px; height: 3px; border-radius: 4px; background: #a6cabb; }
.time-stop { position: relative; color: #3e5665; font-size: 13px; line-height: 1.25; }
.time-stop::before { content: ''; position: absolute; left: 3px; top: -13px; width: 11px; height: 11px; border-radius: 50%; background: #73968a; }
.time-stop:last-child { text-align: right; }
.time-stop:last-child::before { left: auto; right: 3px; }
.time-active { font-weight: 900; color: #086142; }
.time-active::before, .shows-duration::before { background: #10845b; }
.shows-duration { padding-top: 34px; }
.shows-duration::before { top: 26px; }
.time-duration { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 13px; color: #086142; }
.position-examples { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.position-examples .theory-example { padding: 9px; }
.position-examples .theory-example figcaption div { font-size: 18px; }
.position-examples .theory-example figcaption p { font-size: 13px; }
.theory .glossary-grid { margin-top: 12px; gap: 10px; }
.theory .glossary-card { padding: 6px 9px 9px; }
.theory .verb-word-art { width: min(100%, 92px); margin: 0 auto; }
.theory .glossary-card .verb-meaning { min-height: 0; margin: 0 0 5px; font-size: 14px; }
.theory .verb-forms { padding-top: 5px; }
.theory-actions { margin: 15px 0; }
.pdf-link { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.contraction-reference { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; }
.contraction-reference li { padding: 7px 9px; background: #e2f1e9; border-radius: 8px; }

@media (max-width: 720px) {
  .position-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contraction-reference { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .theory-examples:not(.position-examples) { grid-template-columns: 1fr; }
  .theory-example :is(img, svg) { width: min(100%, 132px); }
}
@media (max-width: 600px) {
  .app:has(.theory) header { height: auto; min-height: 55px; }
}
@media (orientation: landscape) and (min-width: 721px) and (max-height: 820px) {
  .app:has(.theory) header { height: 52px; }
  .app:has(.theory) main { min-height: 0; }
  .app:has(.theory) footer { padding-top: 4px; }
  .theory h1 { margin-top: 8px; }
  .theory .tabs { margin: 9px auto 12px; }
  .theory .tabs button { padding-block: 9px; }
  .theory-nav { margin-bottom: 10px; }
  .theory-panel { padding-block: 14px; }
  .theory .verb-word-art { width: min(100%, 74px); }
  .theory-actions { margin: 12px 0; }
}
@media (orientation: landscape) and (min-width: 851px) and (max-height: 640px) {
  .app:has(.theory) { padding-block: 8px; }
  .app:has(.theory) header { height: 44px; }
  .theory .tabs { margin-block: 6px 9px; }
  .theory h1 { font-size: 27px; margin-block: 4px; }
  .theory-panel { padding-block: 10px; }
  .theory-panel h2 { font-size: 22px; }
  .theory-examples { margin-top: 8px; gap: 8px; }
  .theory-example { padding-block: 8px; }
  .theory-example figcaption div { font-size: 18px; }
  .theory-example figcaption p { margin-top: 4px; }
  .theory .glossary-grid { gap: 7px; }
  .theory .glossary-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; }
  .theory .verb-word-art { width: 100%; }
  .theory .verb-forms { grid-column: 1 / -1; }
  .theory-example :is(img, svg) { width: min(100%, 125px); }
  .contraction-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px; }
  .contraction-reference { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; gap: 5px; }
  .contraction-reference li { padding: 5px 6px; }
  .theory-actions { margin: 9px 0; }
  .theory-actions :is(button, a) { padding-inline: 14px; }
}