/* ============================================================
   IApS 4º ESO — Curso web
   Sistema de deseño. Paleta inspirada no logo do aula.
   DUA: Atkinson Hyperlegible (defecto) + OpenDyslexic (activable),
   alto contraste activable, multilingüe GL/ES/FR/AR (AR en RTL).
   ============================================================ */

/* ---- Fontes ---- */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fontes/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fontes/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fontes/OpenDyslexic-Regular.woff') format('woff');
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fontes/OpenDyslexic-Bold.woff') format('woff');
}
/* Árabe lexible */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fontes/noto-naskh-arabic-arabic-400-normal.woff2') format('woff2');
}

/* ---- Tokens ---- */
:root {
  --cian: #1BC7D4;
  --menta: #3DD6A3;
  --malva: #B58BD6;
  --azul: #1B3A6B;
  --fondo: #F4FBFC;
  --panel: #FFFFFF;
  --tinta: #0F2333;
  --tinta-suave: #3A4A5A;
  --liña: #D6E9EC;
  --sombra: 0 2px 14px rgba(27, 58, 107, .10);
  --radio: 14px;

  --chip-pe-bg: #FDE7F0;   --chip-pe-tx: #8C2153;   --chip-pe-bd: #E58AB3;
  --chip-ti-bg: #E6FAF1;   --chip-ti-tx: #12724E;   --chip-ti-bd: #57C79A;

  --fonte-cabza: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --fonte-corpo: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --ar-fonte: 'Noto Naskh Arabic', serif;
}

/* Modo dislexia */
body.dislexia {
  --fonte-cabza: 'OpenDyslexic', 'Atkinson Hyperlegible', sans-serif;
  --fonte-corpo: 'OpenDyslexic', 'Atkinson Hyperlegible', sans-serif;
  letter-spacing: .02em; word-spacing: .08em; line-height: 1.9;
}

/* Alto contraste */
body.contraste {
  --fondo: #000000;
  --panel: #0A0A0A;
  --tinta: #FFFFFF;
  --tinta-suave: #EDEDED;
  --liña: #FFFFFF;
  --azul: #7FD8FF;
  --cian: #46E4F0;
  --menta: #5BF0B8;
  --malva: #D6B4FF;
  --chip-pe-bg:#33001A; --chip-pe-tx:#FFA8CC; --chip-pe-bd:#FFA8CC;
  --chip-ti-bg:#00261A; --chip-ti-tx:#7BF0C0; --chip-ti-bd:#7BF0C0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--fonte-corpo); font-size: 18px; line-height: 1.75;
  display: grid; grid-template-columns: 300px 1fr; min-height: 100vh;
}
body[dir="rtl"] { font-family: var(--ar-fonte); }
body[dir="rtl"] .contido { direction: rtl; }

/* ---- Menú lateral ---- */
.lateral {
  background: linear-gradient(180deg, var(--azul), #16294d);
  color: #EAF6FF; padding: 22px 18px; position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.lateral .nav-ud { flex: 0 0 auto; }
.lateral-pe { margin-top: auto; padding-top: 16px; }
body.contraste .lateral { background: #000; border-right: 2px solid #fff; }
.marca { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; text-decoration: none; }
.marca img { width: 52px; height: 52px; border-radius: 12px; box-shadow: var(--sombra); }
.marca b { color: #fff; font-size: 1.05rem; line-height: 1.2; }
.marca span { display:block; font-size: .72rem; color: var(--cian); letter-spacing: .12em; text-transform: uppercase; }

.nav-ud { list-style: none; margin: 0 0 10px; padding: 0; }
.nav-ud > li { margin-bottom: 4px; }
.nav-ud details { border-radius: 10px; overflow: hidden; }
.nav-ud summary {
  cursor: pointer; padding: 10px 12px; font-weight: 700; color: #fff;
  border-radius: 10px; list-style: none; display: flex; align-items: center; gap: 8px;
  border-left: 4px solid var(--cian);
}
body[dir="rtl"] .nav-ud summary { border-left: none; border-right: 4px solid var(--cian); }
.nav-ud summary::-webkit-details-marker { display: none; }
.nav-ud summary:hover { background: rgba(255,255,255,.08); }
.nav-ud summary .ud-num {
  background: var(--cian); color: var(--azul); font-size: .72rem; font-weight: 800;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px;
}
.nav-ud .sub { list-style: none; margin: 4px 0 8px; padding: 0 0 0 8px; }
.nav-ud .sub li a {
  display: block; padding: 7px 12px 7px 16px; color: #CFE8F5; text-decoration: none;
  font-size: .92rem; border-radius: 8px; border-left: 2px solid transparent;
}
body[dir="rtl"] .nav-ud .sub { padding: 0 8px 0 0; }
.nav-ud .sub li a:hover { background: rgba(27,199,212,.14); color: #fff; }
.nav-ud .sub li a.activa { background: rgba(27,199,212,.22); color:#fff; border-left-color: var(--menta); font-weight:700; }

/* ---- Barra de ferramentas (idioma + DUA) ---- */
.ferramentas { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); }
.ferramentas .grupo { margin-bottom: 12px; }
.ferramentas .etq { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cian); margin-bottom: 6px; }
.idiomas { display: flex; flex-wrap: wrap; gap: 6px; }
.idiomas button, .dua button {
  background: rgba(255,255,255,.10); color: #EAF6FF; border: 1px solid rgba(255,255,255,.2);
  padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: .82rem; font-family: inherit;
}
.idiomas button.activa { background: var(--cian); color: var(--azul); font-weight: 800; border-color: var(--cian); }
.dua { display: flex; flex-direction: column; gap: 6px; }
.dua button { text-align: left; }
.dua button.activa { background: var(--menta); color: var(--azul); font-weight: 800; border-color: var(--menta); }

/* ---- Contido ---- */
.contido { padding: 40px clamp(20px, 5vw, 64px); max-width: 1000px; }
.faragulla { font-size: .82rem; color: var(--tinta-suave); margin-bottom: 8px; }
.faragulla a { color: var(--azul); text-decoration: none; }
body.contraste .faragulla a { color: var(--azul); }

h1 { font-family: var(--fonte-cabza); font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.1; margin: 0 0 6px; }
h2 { font-family: var(--fonte-cabza); font-size: 1.5rem; margin: 34px 0 12px; color: var(--azul); }
body.contraste h2 { color: var(--cian); }
h3 { font-size: 1.15rem; margin: 22px 0 8px; }
p { margin: 0 0 14px; }
a { color: #0E6E9E; }
body.contraste a { color: var(--cian); }

/* Chips de CA / instrumento */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.chip {
  font-size: .8rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  border: 1.5px solid; display: inline-flex; align-items: center; gap: 6px;
}
.chip.ca { background: #F1ECFA; color: #5B3B8C; border-color: var(--malva); }
body.contraste .chip.ca { background:#1A0033; color: var(--malva); border-color: var(--malva); }
.chip.pe { background: var(--chip-pe-bg); color: var(--chip-pe-tx); border-color: var(--chip-pe-bd); }
.chip.ti { background: var(--chip-ti-bg); color: var(--chip-ti-tx); border-color: var(--chip-ti-bd); }

/* Tarxetas */
.tarxeta {
  background: var(--panel); border: 1px solid var(--liña); border-radius: var(--radio);
  padding: 20px 22px; box-shadow: var(--sombra); margin: 18px 0;
}
body.contraste .tarxeta { border-color: #fff; }
.tarxeta.destacada { border-left: 5px solid var(--cian); }
body[dir="rtl"] .tarxeta.destacada { border-left: 1px solid var(--liña); border-right: 5px solid var(--cian); }

.def { display: grid; gap: 10px; margin: 12px 0; }
.def div { padding: 12px 14px; background: var(--fondo); border-radius: 10px; border: 1px solid var(--liña); }
body.contraste .def div { background:#111; border-color:#444; }
.def b { color: var(--azul); }
body.contraste .def b { color: var(--cian); }

/* Actividade */
.actividade { border-radius: var(--radio); padding: 18px 20px; margin: 16px 0; background: linear-gradient(180deg, #EEFBF7, #E7F6FF); border: 1px solid var(--liña); }
.actividade.ti { background: linear-gradient(180deg,#E9FBF3,#F2FDF8); border-left: 6px solid var(--chip-ti-bd); }
.actividade.pe { background: linear-gradient(180deg,#FDEFF5,#FEF6FA); border-left: 6px solid var(--chip-pe-bd); }
body[dir="rtl"] .actividade.ti { border-left:1px solid var(--liña); border-right:6px solid var(--chip-ti-bd); }
body[dir="rtl"] .actividade.pe { border-left:1px solid var(--liña); border-right:6px solid var(--chip-pe-bd); }
body.contraste .actividade.ti { background:#00140D; }
body.contraste .actividade.pe { background:#1A000D; }
body.contraste .actividade { background:#0A0A0A; border-color:#fff; }
.actividade .cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.actividade .icona { width: 34px; height: 34px; border-radius: 9px; background: var(--menta); color: var(--azul); display: grid; place-items: center; font-weight: 900; }

/* Vídeo responsivo */
.video { position: relative; padding-top: 56.25%; border-radius: var(--radio); overflow: hidden; margin: 16px 0; box-shadow: var(--sombra); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Navegación entre subapartados */
.paso-nav { display: flex; justify-content: space-between; gap: 12px; margin: 40px 0 10px; flex-wrap: wrap; }
.paso-nav a { flex: 1; min-width: 200px; text-decoration: none; padding: 14px 18px; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--liña); color: var(--tinta); box-shadow: var(--sombra); }
.paso-nav a:hover { border-color: var(--cian); }
.paso-nav .dir { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-suave); }
.paso-nav .tit { font-weight: 700; color: var(--azul); }
body.contraste .paso-nav .tit { color: var(--cian); }
.paso-nav a.seguinte { text-align: right; }
body[dir="rtl"] .paso-nav a.seguinte { text-align: left; }

/* Rodapé */
.rodape { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--liña); font-size: .8rem; color: var(--tinta-suave); }
.rodape a { color: var(--azul); }

/* Só visible no idioma activo */
[data-i18n-group] { display: none; }
[data-i18n-group].visible { display: block; }
span[data-i18n-group] { display: none; }
span[data-i18n-group].visible { display: inline; }

/* Saltar ao contido */
.saltar { position: absolute; left: -999px; top: 0; background: var(--cian); color: var(--azul); padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 50; font-weight: 700; }
.saltar:focus { left: 0; }

*:focus-visible { outline: 3px solid var(--menta); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* Responsivo */
@media (max-width: 860px) {
  body { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; }
  .contido { padding: 24px 18px; }
}


/* ---- Engrenaxe flotante (idioma + accesibilidade) ---- */
.axustes-flot { position: fixed; top: 16px; right: 16px; z-index: 100; }
body[dir="rtl"] .axustes-flot { right: auto; left: 16px; }
.engrenaxe {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--cian), var(--menta)); color: var(--azul);
  box-shadow: 0 4px 16px rgba(27,58,107,.35); display: grid; place-items: center;
  transition: transform .15s;
}
.engrenaxe:hover { transform: rotate(25deg) scale(1.06); }
body.contraste .engrenaxe { background: #fff; color: #000; border: 2px solid #000; }
.panel-axustes {
  position: absolute; top: 60px; right: 0; min-width: 250px;
  background: var(--azul); color: #EAF6FF; border-radius: 14px; padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
body[dir="rtl"] .panel-axustes { right: auto; left: 0; }
body.contraste .panel-axustes { background: #000; border: 2px solid #fff; }
.panel-axustes .grupo { margin-bottom: 12px; }
.panel-axustes .grupo:last-child { margin-bottom: 0; }
.panel-axustes .etq { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cian); margin-bottom: 6px; }
.panel-axustes .idiomas { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-axustes .idiomas button, .panel-axustes .dua button {
  background: rgba(255,255,255,.10); color: #EAF6FF; border: 1px solid rgba(255,255,255,.25);
  padding: 7px 11px; border-radius: 8px; cursor: pointer; font-size: .85rem; font-family: inherit;
}
.panel-axustes .idiomas button.activa { background: var(--cian); color: var(--azul); font-weight: 800; border-color: var(--cian); }
.panel-axustes .dua { display: flex; flex-direction: column; gap: 6px; }
.panel-axustes .dua button { text-align: left; }
.panel-axustes .dua button.activa { background: var(--menta); color: var(--azul); font-weight: 800; border-color: var(--menta); }
.panel-axustes [data-font="dislexia"] { font-family: 'OpenDyslexic', sans-serif; }
.panel-axustes [data-font="atkinson"] { font-family: 'Atkinson Hyperlegible', sans-serif; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- Logo branco no lateral: chip degradado + brillo cian ---- */
.marca .logo-branco {
  width: 54px; height: 54px; border-radius: 14px; padding: 6px;
  background: linear-gradient(135deg, rgba(27,199,212,.35), rgba(181,139,214,.30));
  filter: drop-shadow(0 0 8px rgba(27,199,212,.55));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
body.contraste .marca .logo-branco { background: #000; box-shadow: inset 0 0 0 2px #fff; filter: none; }


/* ---- Pé de páxina fixo na barra lateral ---- */
.lateral-pe { border-top: 1px solid rgba(255,255,255,.18); }
.lateral-pe .cc-lic {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: #BFE0EE; font-size: .72rem; line-height: 1.35; padding: 12px 6px 4px;
  border-radius: 8px;
}
.lateral-pe .cc-lic:hover { color: #fff; background: rgba(255,255,255,.06); }
.lateral-pe .cc-iconas { display: inline-flex; gap: 3px; color: #DCEFF6; flex: 0 0 auto; }
.lateral-pe .cc-txt b { color: #fff; font-weight: 700; }
.lateral-pe .cc-cod { white-space: nowrap; letter-spacing: .02em; }
body.contraste .lateral-pe { border-top-color: #fff; }
body.contraste .lateral-pe .cc-lic { color: #fff; }
body.contraste .lateral-pe .cc-iconas { color: #fff; }
@media (max-width: 860px) {
  .lateral { height: auto; }
  .lateral-pe { margin-top: 18px; }
}

.lateral-pe .cc-web {
  display: block; margin-top: 6px; padding: 4px 6px; font-size: .68rem;
  color: #9FD0E4; text-decoration: none; border-radius: 6px;
}
.lateral-pe .cc-web:hover { color: #fff; text-decoration: underline; }
body.contraste .lateral-pe .cc-web { color: var(--cian); }

/* ---- Caixas de criterio de logro e de opcións dentro das actividades ---- */
.logro, .opcion { font-size: .86rem; border-radius: 10px; padding: 9px 12px; margin-top: 10px; }
.logro { background: rgba(61,214,163,.14); border-left: 4px solid var(--menta); }
.opcion  { background: rgba(181,139,214,.14); border-left: 4px solid var(--malva); }
body[dir="rtl"] .logro { border-left: none; border-right: 4px solid var(--menta); }
body[dir="rtl"] .opcion  { border-left: none; border-right: 4px solid var(--malva); }
.logro b { color: #12724E; } .opcion b { color: #5B3B8C; }
body.contraste .logro { background-color:#00190F; } body.contraste .opcion { background-color:#14001F; }
body.contraste .logro b { color: var(--menta); } body.contraste .opcion b { color: var(--malva); }

.btn-test { display:inline-block; background: var(--chip-pe-bd); color:#4A0F2B; font-weight:800;
  padding: 10px 18px; border-radius: 10px; text-decoration:none; }
.btn-test:hover { filter: brightness(1.05); }
body.contraste .btn-test { background:#fff; color:#000; }

/* ============================================================
   ACTIVIDADES — realce visual (engadido, sobrescribe o de arriba)
   Cada actividade queda nunha caixa con banda de cor e símbolo,
   claramente separada da teoría. Funciona en GL/ES/FR/AR e en
   alto contraste.
   ============================================================ */
.actividade{
  position:relative;
  margin:30px 0;
  padding:0 22px 20px;
  border-radius:16px;
  background:linear-gradient(180deg,#F4FDF9,#FFFFFF);
  border:2px solid var(--chip-ti-bd);
  border-left-width:11px;
  box-shadow:0 5px 20px rgba(27,58,107,.13);
  overflow:hidden;
}
.actividade.ti{ background:linear-gradient(180deg,#F1FCF7,#FFFFFF); border-color:var(--chip-ti-bd); }
.actividade.pe{ background:linear-gradient(180deg,#FEF4F8,#FFFFFF); border-color:var(--chip-pe-bd); }

/* Banda de cabeceira a sangre */
.actividade .cab{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 -22px 16px; padding:13px 22px;
  background:var(--chip-ti-bd); color:#06301E;
  font-size:1.04rem; line-height:1.3;
}
.actividade.pe .cab{ background:var(--chip-pe-bd); color:#4A0C29; }
.actividade .cab b{ font-weight:800; }

/* Símbolo en círculo, antes do enunciado */
.actividade .icona{
  width:38px; height:38px; flex:none;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#0C5B3D; font-size:1.2rem; font-weight:900;
  display:grid; place-items:center;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.actividade.pe .icona{ color:#8C2153; }

/* Os chips que van dentro da banda teñen que lerse sobre a cor */
.actividade .cab .chip{ background:#fff; border-color:rgba(0,0,0,.22); }

.actividade > p:first-of-type{ margin-top:0; }

/* Dereita a esquerda (árabe) */
body[dir="rtl"] .actividade{ border-left-width:2px; border-right-width:11px; }
body[dir="rtl"] .actividade.ti,
body[dir="rtl"] .actividade.pe{ border-left-width:2px; border-right-width:11px; }

/* Alto contraste */
body.contraste .actividade{
  background:#000; border-color:#fff; border-left-color:#fff;
  box-shadow:none;
}
body.contraste .actividade.ti,
body.contraste .actividade.pe{ background:#000; border-color:#fff; }
body.contraste .actividade .cab,
body.contraste .actividade.pe .cab{ background:#fff; color:#000; }
body.contraste .actividade .icona,
body.contraste .actividade.pe .icona{ background:#000; color:#fff; box-shadow:none; border:2px solid #000; }
body.contraste .actividade .cab .chip{ background:#000; color:#fff; border-color:#000; }

/* Menos animación/sombra se o usuario o pide */
@media (prefers-reduced-motion: reduce){ .actividade{ box-shadow:none; } }

/* Pantallas estreitas */
@media (max-width:520px){
  .actividade{ padding:0 15px 16px; }
  .actividade .cab{ margin:0 -15px 13px; padding:11px 15px; font-size:.97rem; }
}

/* ============================================================
   2026-09-11 · Refresco visual + novos tipos de bloque
   - Cabeceira de páxina con banda de cor e distintivo da UD
   - Actividades: catro variantes (PE, TI, práctica, caso real)
   - Táboa de avaliación con peso visible
   - Bloque de fontes
   Mantén DUA: alto contraste, dislexia, RTL.
   ============================================================ */

:root{
  /* lila do diagrama do axente: substitúe o ámbar para que a web use
     só as tres cores do esquema (turquesa, menta e lila) */
  --lila-bg:#F4EFFB; --lila-tx:#55307F; --lila-bd:#AC7ED2;
  --chip-pr-bg:#F1ECFA; --chip-pr-tx:#5B3B8C; --chip-pr-bd:#B58BD6;
  --acento: var(--cian);
}
body.contraste{
  --lila-bg:#1A0033; --lila-tx:#D6B4FF; --lila-bd:#D6B4FF;
  --chip-pr-bg:#1A0033; --chip-pr-tx:#D6B4FF; --chip-pr-bd:#D6B4FF;
}
/* Cor propia por unidade (engádese a <body>) */
body.u1{ --acento:#1BC7D4; } body.u2{ --acento:#B58BD6; }
body.u3{ --acento:#3DD6A3; } body.u4{ --acento:#F2A03D; }

/* ---- Cabeceira de páxina ---- */
.cabeceira{
  position:relative; margin:0 0 26px; padding:26px 26px 22px;
  border-radius:20px; overflow:hidden;
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--acento) 26%, transparent), transparent 60%),
    linear-gradient(135deg, #fff, var(--fondo));
  border:1px solid var(--liña); box-shadow:var(--sombra);
}
.cabeceira::before{
  content:""; position:absolute; inset:0 auto 0 0; width:8px; background:var(--acento);
}
body[dir="rtl"] .cabeceira::before{ inset:0 0 0 auto; }
body.contraste .cabeceira{ background:#0A0A0A; border-color:#fff; }
.cabeceira h1{ margin:0 0 8px; }
.cabeceira .entradiña{ margin:0; color:var(--tinta-suave); font-size:1.02rem; max-width:62ch; }
.cabeceira .selo{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:10px;
  font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--azul); background:color-mix(in srgb, var(--acento) 22%, #fff);
  border:1.5px solid var(--acento); padding:4px 12px; border-radius:999px;
}
body.contraste .cabeceira .selo{ background:#000; color:var(--acento); }

/* ---- Chip de práctica de aula ---- */
.chip.pr{ background:var(--chip-pr-bg); color:var(--chip-pr-tx); border-color:var(--chip-pr-bd); }
.chip.peso{
  background:#fff; color:var(--azul); border-color:var(--azul); font-variant-numeric:tabular-nums;
}
body.contraste .chip.peso{ background:#000; color:var(--cian); border-color:var(--cian); }

/* ---- Variantes de actividade ---- */
.actividade.pr{ border-color:var(--chip-pr-bd); }
.actividade.pr .cab{ background:var(--chip-pr-bd); }
.actividade.pr .icona{ background:#fff; color:var(--chip-pr-tx); }
.actividade.caso{ border-color:var(--lila-bd); }
.actividade.caso .cab{ background:var(--lila-bd); }
.actividade.caso .icona{ background:#fff; color:var(--lila-tx); }
body.contraste .actividade.pr,
body.contraste .actividade.caso{ background:#0A0A0A; border-color:#fff; }

/* ---- Caixa de posturas para debates ---- */
.posturas{ display:grid; gap:10px; margin:12px 0; }
@media (min-width:720px){ .posturas.dous{ grid-template-columns:1fr 1fr; } }
.posturas > div{
  background:var(--panel); border:1px solid var(--liña); border-radius:12px; padding:12px 14px;
  font-size:.94rem;
}
/* Só o PRIMEIRO <b> é o título e vai en bloque; os <b> do corpo seguen en liña. */
.posturas > div > b:first-child{ display:block; color:var(--azul); margin-bottom:4px; }
.posturas > div b{ color:inherit; }
body.contraste .posturas > div{ background:#111; border-color:#666; }
body.contraste .posturas > div > b:first-child{ color:var(--cian); }

/* ---- Ficha dun caso real documentado (distínguese das posturas de debate) ----
   Vai en bloques apilados, non en columnas: é texto denso para ler seguido,
   non tres opcións para comparar dun golpe de vista. */
.ficha{ display:grid; gap:10px; margin:12px 0; }
.ficha > div{
  background:rgba(27,58,107,.045); border:1px solid var(--liña);
  border-left:4px solid var(--azul); border-radius:12px; padding:12px 14px; font-size:.9rem;
}
body[dir="rtl"] .ficha > div{ border-left:1px solid var(--liña); border-right:4px solid var(--azul); }
.ficha > div > b:first-child{ display:block; color:var(--azul); margin-bottom:4px; }
.ficha > div b{ color:inherit; }
body.contraste .ficha > div{ background:#0A0A0A; border-color:#fff; }
body.contraste .ficha > div > b:first-child{ color:var(--cian); }

/* ---- Bloque de fontes ---- */
.fontes{
  margin:14px 0 0; padding:12px 14px; border-radius:10px;
  background:rgba(27,58,107,.05); border-left:4px solid var(--azul);
  font-size:.82rem; color:var(--tinta-suave);
}
body[dir="rtl"] .fontes{ border-left:none; border-right:4px solid var(--azul); }
.fontes b{ color:var(--azul); }
.fontes ul{ margin:6px 0 0; padding-left:20px; }
body[dir="rtl"] .fontes ul{ padding-left:0; padding-right:20px; }
body.contraste .fontes{ background:#0d0d0d; border-color:var(--cian); }
body.contraste .fontes b{ color:var(--cian); }

/* ---- Aviso (ficción, cautela, protección de datos) ---- */
.aviso{
  margin:12px 0; padding:12px 14px; border-radius:10px; font-size:.9rem;
  background:var(--lila-bg); border-left:4px solid var(--lila-bd); color:var(--lila-tx);
}
body[dir="rtl"] .aviso{ border-left:none; border-right:4px solid var(--lila-bd); }
.aviso b{ color:var(--lila-tx); }

/* ---- Táboa de avaliación: peso visible ---- */
.mapa td.peso{ text-align:center; white-space:nowrap; font-weight:800; color:var(--azul); font-variant-numeric:tabular-nums; }
body.contraste .mapa td.peso{ color:var(--cian); }
.barra{ display:block; height:6px; border-radius:99px; background:var(--liña); margin-top:6px; overflow:hidden; }
.barra i{ display:block; height:100%; background:var(--acento); }
body.contraste .barra{ background:#333; }

/* ---- Percorrido: tarxetas numeradas ---- */
.tempo{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); }
.tempo .s{
  display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:14px;
  border:1px solid var(--liña); background:var(--panel); box-shadow:var(--sombra);
  border-top:4px solid var(--acento);
}
.tempo .s b{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:color-mix(in srgb, var(--acento) 20%, #fff); color:var(--azul);
  font-size:.82rem; font-weight:900; margin-bottom:2px;
}
body.contraste .tempo .s b{ background:#000; color:var(--acento); border:1px solid var(--acento); }

/* Corrección: «Saltar ao contido» estaba posicionado en left:-999px, o que
   creaba desbordamento horizontal en árabe (RTL), onde o que sae pola esquerda
   si xera scroll. Agora agóchase cun translate, sen desprazar o documento. */
.saltar{ left:0; top:0; transform:translateY(-250%); transition:transform .12s; }
.saltar:focus{ left:0; transform:translateY(0); }
body[dir="rtl"] .saltar{ left:0; right:auto; border-radius:0 0 10px 0; }

/* ============================================================
   2026-09-12 · Enriquecemento multinivel e rutinas de pensamento
   Tres niveis de procesamento cognitivo sobre a mesma base
   curricular (Collicot / Bloom). Preséntanse sempre os tres á
   vista e con movemento libre entre eles: non son itinerarios
   asignados nin marcan a ninguén.
   ============================================================ */
.niveis{
  margin:14px 0 0; padding:14px 16px; border-radius:12px;
  background:rgba(27,58,107,.04); border:1px dashed var(--liña);
}
body.contraste .niveis{ background:#0c0c0c; border-color:#888; }
.niveis > .titulo{
  font-size:.74rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--azul); margin:0 0 4px;
}
body.contraste .niveis > .titulo{ color:var(--cian); }
.niveis > .libre{ margin:0 0 12px; font-size:.88rem; color:var(--tinta-suave); }
.niveis .grade{ display:grid; gap:10px; }
@media (min-width:780px){ .niveis .grade{ grid-template-columns:repeat(3,1fr); } }
.niveis .n{
  background:var(--panel); border:1px solid var(--liña); border-radius:10px;
  padding:11px 13px; font-size:.9rem; border-top:4px solid var(--acento);
}
body.contraste .niveis .n{ background:#111; border-color:#666; }
.niveis .n > b:first-child{ display:block; color:var(--azul); margin-bottom:4px; font-size:.86rem; }
body.contraste .niveis .n > b:first-child{ color:var(--cian); }
.niveis .n b{ color:inherit; }   /* os <b> do corpo seguen sendo en liña */
.niveis .n i{ font-style:normal; color:var(--tinta-suave); font-weight:400; }

/* Rutina de pensamento asociada á actividade */
.rutina{
  margin-top:10px; padding:9px 12px; border-radius:10px; font-size:.86rem;
  background:rgba(27,199,212,.10); border-left:4px solid var(--cian);
}
body[dir="rtl"] .rutina{ border-left:none; border-right:4px solid var(--cian); }
.rutina b{ color:#0E5E78; }
body.contraste .rutina{ background:#001a1f; } body.contraste .rutina b{ color:var(--cian); }

/* Figuras: imaxes e esquemas */
figure.ilustra{ margin:18px 0; }
figure.ilustra img, figure.ilustra svg{
  width:100%; height:auto; display:block; border-radius:14px;
  border:1px solid var(--liña); box-shadow:var(--sombra); background:var(--panel);
}
body.contraste figure.ilustra img, body.contraste figure.ilustra svg{ border-color:#fff; }
figure.ilustra figcaption{
  margin-top:7px; font-size:.82rem; color:var(--tinta-suave); text-align:center;
}

/* ============================================================
   Diagramas SVG en liña (2026-09-12)
   Arte de liña en currentColor: funciona igual en modo normal,
   en alto contraste e en modo dislexia. Un só acento (cian).
   ============================================================ */
figure.diagrama{
  margin: 22px 0;
  padding: 18px 16px 12px;
  background: var(--panel);
  border: 1px solid var(--liña);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
figure.diagrama svg{
  display: block;
  width: 100%; max-width: 100%; height: auto;
  color: var(--tinta);
  overflow: visible;
}
figure.diagrama svg text{
  font-family: var(--fonte-corpo);
  fill: currentColor;
}
body[dir="rtl"] figure.diagrama svg text{ font-family: var(--ar-fonte); }

/* Acento: o percorrido lento / a advertencia */
figure.diagrama svg .ac{ color: var(--azul); }
figure.diagrama svg .acf{ fill: var(--azul); }

/* ---- diagramas en cor ---------------------------------------------------
   As tres cores do esquema do axente: turquesa para o fluxo rápido, verde
   para o contorno e lila para o bucle lento da aprendizaxe. Os tons son un
   chisco máis fondos que os da paleta xeral para que as liñas cheguen a 3:1
   sobre branco e o texto a 4,5:1. Só afecta ás figuras marcadas con «cor». */
figure.diagrama.cor svg .d-caixa        { fill: var(--cian); stroke: none; }
figure.diagrama.cor svg .d-caixa-txt    { fill: #0F2333; }
figure.diagrama.cor svg .d-contorno     { color: #1E9E76; fill: #FFFFFF; }
figure.diagrama.cor svg .d-contorno-txt { fill: #0F2333; }
figure.diagrama.cor svg .d-marco        { color: #AC7ED2; opacity: 1; }
figure.diagrama.cor svg .d-marco-txt    { fill: #5B3B8C; }
figure.diagrama.cor svg .d-fluxo        { color: #0E96A3; }
figure.diagrama.cor svg .d-lento        { color: #AC7ED2; }
figure.diagrama.cor svg .d-etiq         { fill: #12724E; }
figure.diagrama.cor svg marker path     { fill: #0E96A3; }
figure.diagrama.cor svg marker .acf     { fill: #AC7ED2; }
figure.diagrama.cor svg .d-caixa-lila   { fill: var(--malva); stroke: none; }
figure.diagrama.cor svg .d-brace        { color: #1E9E76; }

/* Pirámide de risco do regulamento europeo: os catro niveis levan a súa
   propia cor porque son as do regulamento, non as da web. Só se lles pon
   fondo suave; o trazo e as letras seguen en escuro. */
figure.diagrama.cor svg .p-risco-1 { fill: #FADBD8; }
figure.diagrama.cor svg .p-risco-2 { fill: #FDEBD0; }
figure.diagrama.cor svg .p-risco-3 { fill: #FCF3CF; }
figure.diagrama.cor svg .p-risco-4 { fill: #D5F5E3; }

/* En alto contraste mandan o branco e o negro: a cor non pode ser o único
   xeito de distinguir as pezas. */
body.contraste figure.diagrama.cor svg .d-caixa{ fill:#000; stroke:#fff; stroke-width:1.8; }
body.contraste figure.diagrama.cor svg .d-caixa-txt,
body.contraste figure.diagrama.cor svg .d-contorno-txt,
body.contraste figure.diagrama.cor svg .d-marco-txt,
body.contraste figure.diagrama.cor svg .d-etiq{ fill:#fff; }
body.contraste figure.diagrama.cor svg .d-contorno{ color:#fff; fill:#000; }
body.contraste figure.diagrama.cor svg .d-marco,
body.contraste figure.diagrama.cor svg .d-fluxo,
body.contraste figure.diagrama.cor svg .d-lento{ color:#fff; }
body.contraste figure.diagrama.cor svg marker path,
body.contraste figure.diagrama.cor svg marker .acf{ fill:#fff; }
body.contraste figure.diagrama.cor svg .d-caixa-lila{ fill:#000; stroke:#fff; stroke-width:1.8; }
body.contraste figure.diagrama.cor svg .d-brace{ color:#fff; }
body.contraste figure.diagrama.cor svg .p-risco-1,
body.contraste figure.diagrama.cor svg .p-risco-2,
body.contraste figure.diagrama.cor svg .p-risco-3,
body.contraste figure.diagrama.cor svg .p-risco-4{ fill:#000; }

figure.diagrama figcaption{
  margin-top: 12px;
  font-size: .86rem; line-height: 1.55;
  color: var(--tinta-suave);
  text-align: center;
}
/* Nas pantallas estreitas o diagrama non encolle ata volverse ilexible:
   mantén un ancho mínimo e despráza:se lateralmente dentro da súa caixa.
   O <figcaption> queda fóra do desprazamento, sempre visible. */
figure.diagrama .lenzo{ overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* O corpo é unha grade: sen min-width:0 os elementos non encollen por debaixo
   do seu contido e o ancho mínimo do diagrama estiraría toda a páxina. */
.contido{ min-width: 0; }
figure.diagrama{ max-width: 100%; }
@media (max-width: 760px){
  figure.diagrama{ padding: 12px 10px 10px; }
  figure.diagrama .lenzo svg{ min-width: 620px; }
  figure.diagrama figcaption{ font-size: .8rem; }
}

/* ============================================================
   O ROBOCAT como guía (2026-09-12)
   Aparece SÓ nas caixas «Outra forma de facelo»: sempre o mesmo
   significado —hai outro camiño para entrar— e nunca noutro sitio,
   para que non se converta en decoración. Vai como imaxe de fondo,
   así que é puramente decorativo e os lectores de pantalla ignórano.
   ============================================================ */
.opcion{
  background-image: url('robocat-guia.png');
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 50px 50px;
  padding-left: 78px;
  min-height: 56px;
}
body[dir="rtl"] .opcion{
  background-position: right 14px center;
  padding-left: 12px;
  padding-right: 78px;
}
/* En alto contraste, un halo claro separa a foto do fondo negro */
body.contraste .opcion{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
/* Pantallas moi estreitas: o gato non debe comer o texto */
@media (max-width: 420px){
  .opcion{ background-size: 32px 32px; padding-left: 52px; background-position: 9px 11px; }
  body[dir="rtl"] .opcion{ padding-left: 12px; padding-right: 52px; background-position: right 9px top 11px; }
}

/* ============================================================
   Bloque que NON se debe ler antes de tempo (2026-09-12)
   Hai actividades nas que o alumnado ten que escribir unha hipótese
   antes de coñecer o desenlace. Se o resto da tarxeta está á vista,
   len e xa non hai hipótese. Isto non oculta nada: está a un clic
   e di claramente cando hai que abrilo.
   ============================================================ */
details.despois{
  margin-top: 14px; border: 2px dashed var(--azul); border-radius: 12px;
  background: rgba(27,58,107,.04);
}
details.despois > summary{
  cursor: pointer; padding: 12px 16px; font-weight: 800; color: var(--azul);
  list-style: none; border-radius: 10px;
}
details.despois > summary::-webkit-details-marker{ display: none; }
details.despois > summary::before{ content: '▸  '; }
details.despois[open] > summary::before{ content: '▾  '; }
details.despois > summary:hover{ background: rgba(27,58,107,.07); }
details.despois > *:not(summary){ margin-left: 16px; margin-right: 16px; }
details.despois > *:last-child{ margin-bottom: 14px; }
body.contraste details.despois{ background:#0A0A0A; border-color: var(--cian); }
body.contraste details.despois > summary{ color: var(--cian); }

/* ============================================================
   Tipos de actividade · unha cor por tipo
   verde  .ti    puntúa (instrumento da programación)
   ámbar  .prep  prepara o control escrito
   malva  .pr    práctica de aula
   A clase .caso xa non pon cor: só marca que a actividade é un caso.
   ============================================================ */
.actividade.prep{ border-color:var(--lila-bd);
  background:linear-gradient(180deg,var(--lila-bg),#FFFFFF); }
.actividade.prep .cab{ background:var(--lila-bd); color:#2B0F4A; }
.actividade.prep .icona{ background:#fff; color:var(--lila-tx); }
.chip.prep{ background:var(--lila-bg); color:var(--lila-tx); border-color:var(--lila-bd); }

.actividade.pr{ background:linear-gradient(180deg,var(--chip-pr-bg),#FFFFFF); }

/* .caso pasa a ser só un marcador: a cor vén de .prep ou de .pr */
.actividade.caso{ border-color:inherit; }
.actividade.caso .cab{ background:inherit; }
.actividade.caso .icona{ background:#fff; color:inherit; }
.actividade.prep.caso{ border-color:var(--lila-bd); }
.actividade.prep.caso .cab{ background:var(--lila-bd); color:#2B0F4A; }
.actividade.prep.caso .icona{ color:var(--lila-tx); }
.actividade.pr.caso{ border-color:var(--chip-pr-bd); }
.actividade.pr.caso .cab{ background:var(--chip-pr-bd); }
.actividade.pr.caso .icona{ color:var(--chip-pr-tx); }

/* a etiqueta do tipo é longa: que a cabeceira poida partir en dúas liñas */
.actividade .cab{ flex-wrap:wrap; }

body.contraste .actividade.prep{ background:#0A0A0A; border-color:#fff; }
body.contraste .actividade.prep .cab{ background:#fff; color:#000; }
body.contraste .actividade.prep .icona{ background:#000; color:#fff; border:2px solid #000; }
body.contraste .chip.prep{ background:#000; color:var(--lila-tx); border-color:var(--lila-tx); }
body[dir="rtl"] .actividade.prep{ border-left-width:2px; border-right-width:11px; }

/* ============================================================
   Actividades incrustadas (xogo.js)
   ============================================================ */
.xogo { border: 2px solid var(--chip-ti-bd); border-radius: var(--radio); background: var(--panel);
        padding: 16px 18px; margin: 18px 0; }
body.contraste .xogo { border-color: #fff; background: #0A0A0A; }
.xogo-tit { margin: 0 0 6px; font-family: var(--fonte-cabza); color: var(--azul); font-size: 1.12rem; }
body.contraste .xogo-tit { color: var(--cian); }
.xogo-local { margin: 0 0 14px; font-size: .88rem; color: var(--tinta-suave); }
.xogo-lab { display: block; font-weight: 700; margin-bottom: 4px; }
.xogo-inp { width: 100%; max-width: 420px; padding: 10px 12px; font: inherit; color: var(--tinta);
            background: var(--panel); border: 2px solid var(--liña); border-radius: 10px; }
.xogo-inp:focus { outline: 3px solid var(--cian); outline-offset: 1px; }
body.contraste .xogo-inp { border-color: #fff; background: #000; color: #fff; }
.xogo-axuda { margin: 6px 0 10px; font-size: .86rem; color: var(--tinta-suave); }
.xogo-erro { margin: 6px 0; color: #A3143C; font-weight: 700; }
body.contraste .xogo-erro { color: #FF9FBB; }
.xogo-bt { font: inherit; font-weight: 700; padding: 11px 20px; border-radius: 11px; cursor: pointer;
           border: 2px solid var(--azul); background: var(--azul); color: #fff; }
.xogo-bt:hover { filter: brightness(1.12); }
.xogo-bt:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }
.xogo-bt.secundario { background: transparent; color: var(--azul); }
.xogo-bt.pequeno { padding: 9px 14px; }
.xogo-bt[disabled], .xogo-bt.desactivado { opacity: .45; cursor: not-allowed; }
body.contraste .xogo-bt { background: #fff; color: #000; border-color: #fff; }
body.contraste .xogo-bt.secundario { background: #000; color: #fff; }
.xogo-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px;
              padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid var(--liña); }
body.contraste .xogo-barra { border-bottom-color: #fff; }
.xogo-equipo { font-weight: 700; }
.xogo-reloxo { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tinta-suave); }
.xogo-pe { margin-top: 14px; }

/* ---- informe final ---- */
.xogo-acta { border: 3px solid var(--azul); border-radius: var(--radio); padding: 16px 18px; background: var(--panel); }
body.contraste .xogo-acta { border-color: #fff; }
.xogo-acta-cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.xogo-acta-eti { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.xogo-acta-tit { font-family: var(--fonte-cabza); font-size: 1.1rem; color: var(--azul); }
body.contraste .xogo-acta-tit { color: var(--cian); }
.xogo-marca { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
              padding: 10px 14px; margin-bottom: 12px; border-radius: 12px;
              background: var(--chip-ti-bg); border: 2px solid var(--chip-ti-bd); }
.xogo-marca-n { font-size: 2.4rem; font-weight: 900; line-height: 1; color: var(--chip-ti-tx); font-variant-numeric: tabular-nums; }
.xogo-marca-d { font-size: 1.1rem; font-weight: 700; color: var(--chip-ti-tx); }
.xogo-marca-e { margin-inline-start: auto; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--chip-ti-tx); }
.xogo-datos { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 12px; }
.xogo-datos dt { font-size: .86rem; color: var(--tinta-suave); }
.xogo-datos dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.xogo-acta-corpo { border-top: 2px solid var(--liña); padding-top: 12px; margin-bottom: 12px; }
body.contraste .xogo-acta-corpo { border-top-color: #fff; }
.xogo-acta-eti2 { margin: 12px 0 6px; font-weight: 700; font-size: .9rem; }
.xogo-cod { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px;
            border-radius: 10px; background: var(--fondo); border: 1px dashed var(--liña); }
body.contraste .xogo-cod { background: #000; border-color: #fff; }
.xogo-cod-e { font-size: .8rem; color: var(--tinta-suave); }
.xogo-cod-v { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 1.05rem; letter-spacing: .12em; }
.xogo-captura { margin: 10px 0 0; font-size: .86rem; color: var(--tinta-suave); }

/* ---- nube de palabras ---- */
.nube-forma { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.nube-termo { flex: 1 1 220px; max-width: none; }
.nube-peso { font: inherit; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--liña);
             background: var(--panel); color: var(--tinta); }
body.contraste .nube-peso { background: #000; color: #fff; border-color: #fff; }
.nube-conta { margin: 4px 0 12px; font-weight: 700; color: var(--tinta-suave); }
.nube-conta.ok { color: var(--chip-ti-tx); }
.nube-lenzo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
              gap: 6px 14px; padding: 16px; min-height: 90px; border-radius: 12px;
              background: var(--fondo); border: 1px solid var(--liña); }
body.contraste .nube-lenzo { background: #000; border-color: #fff; }
.nube-final { margin-bottom: 4px; }
.nube-p { line-height: 1.15; font-weight: 700; }
.nube-p.p1 { font-size: .95rem; color: var(--tinta-suave); font-weight: 600; }
.nube-p.p2 { font-size: 1.2rem; color: var(--azul); }
.nube-p.p3 { font-size: 1.55rem; color: var(--chip-ti-tx); }
.nube-p.p4 { font-size: 2rem; color: #5B3B8C; }
.nube-p.p5 { font-size: 2.6rem; color: #8C2153; }
body.contraste .nube-p.p2 { color: var(--cian); }
body.contraste .nube-p.p3 { color: var(--menta); }
body.contraste .nube-p.p4 { color: var(--malva); }
body.contraste .nube-p.p5 { color: #FFA8CC; }
.nube-lista { margin: 12px 0 0; padding-inline-start: 22px; }
.nube-lista li { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.nube-li-t { font-weight: 700; }
.nube-li-p { font-size: .82rem; color: var(--tinta-suave); }
.nube-quitar { margin-inline-start: auto; border: 2px solid var(--liña); background: transparent;
               color: var(--tinta); border-radius: 8px; width: 30px; height: 30px; cursor: pointer;
               font-size: 1.1rem; line-height: 1; }
.nube-quitar:hover { border-color: #A3143C; color: #A3143C; }
body.contraste .nube-quitar { border-color: #fff; color: #fff; }
.nube-lista-final { margin: 0; padding-inline-start: 22px; columns: 2; column-gap: 26px; }
@media (max-width: 560px) { .nube-lista-final { columns: 1; } }

/* ---- clasificar / test ---- */
.clas-lista, .test-lista { margin: 0; padding-inline-start: 24px; }
.clas-item, .test-p { padding: 12px 0; border-bottom: 1px solid var(--liña); }
body.contraste .clas-item, body.contraste .test-p { border-bottom-color: #555; }
.clas-item:last-child, .test-p:last-child { border-bottom: 0; }
.clas-txt, .test-txt { margin: 0 0 8px; font-weight: 600; }
.clas-ops, .test-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.clas-op, .test-op { font: inherit; font-size: .92rem; padding: 8px 14px; border-radius: 999px;
                     border: 2px solid var(--liña); background: var(--panel); color: var(--tinta); cursor: pointer; }
.clas-op:hover, .test-op:hover { border-color: var(--cian); }
.clas-op:focus-visible, .test-op:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }
.clas-op.escollida, .test-op.escollida { background: var(--azul); color: #fff; border-color: var(--azul); font-weight: 700; }
body.contraste .clas-op, body.contraste .test-op { background: #000; color: #fff; border-color: #fff; }
body.contraste .clas-op.escollida, body.contraste .test-op.escollida { background: #fff; color: #000; }
.test-op { text-align: start; border-radius: 12px; }
.test-ops { flex-direction: column; align-items: stretch; }
.clas-revisar { margin: 4px 0 0; padding-inline-start: 22px; }
.clas-revisar li { padding: 2px 0; }

/* A tarxeta de actividade pode ir dentro do hero, que pinta os parágrafos en
   #DCEEF5 sobre fondo escuro. Dentro da tarxeta o fondo é claro, así que hai
   que devolverlle a cor de texto normal: se non, queda branco sobre branco. */
.actividade, .actividade p, .actividade li,
.hero .actividade, .hero .actividade p, .hero .actividade li { color: var(--tinta); }
.actividade a, .hero .actividade a { color: var(--azul); }
body.contraste .actividade, body.contraste .actividade p, body.contraste .actividade li,
body.contraste .hero .actividade, body.contraste .hero .actividade p { color: #fff; }
body.contraste .actividade a, body.contraste .hero .actividade a { color: var(--cian); }

/* ── xustificación escrita dentro dunha clasificación ───────────────── */
.clas-xust {
  font: inherit; font-size: .92rem; width: 100%; margin-top: 10px;
  padding: 9px 12px; border-radius: 10px; border: 2px solid var(--liña);
  background: var(--panel); color: var(--tinta);
}
.clas-xust:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; border-color: var(--cian); }
.clas-escrito { margin: 6px 0 0; padding-inline-start: 22px; }
.clas-escrito li { padding: 4px 0; line-height: 1.45; }

/* ── táboa de filas: cada situación cos seus ocos ───────────────────── */
.tab-lista { margin: 0; padding-inline-start: 24px; }
.tab-fila { padding: 14px 0; border-bottom: 1px solid var(--liña); }
body.contraste .tab-fila { border-bottom-color: #555; }
.tab-fila:last-child { border-bottom: 0; }
.tab-txt { margin: 0 0 10px; font-weight: 600; }
.tab-celas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.tab-cela { display: flex; flex-direction: column; gap: 5px; }
.tab-et { font-size: .78rem; font-weight: 700; letter-spacing: .02em;
          text-transform: uppercase; color: var(--tinta-suave); }
.tab-sel, .tab-inp {
  font: inherit; font-size: .92rem; padding: 9px 11px; border-radius: 10px;
  border: 2px solid var(--liña); background: var(--panel); color: var(--tinta); width: 100%;
}
.tab-sel:focus-visible, .tab-inp:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; border-color: var(--cian); }
.tab-aviso { margin: 12px 0 0; font-size: .86rem; color: var(--tinta-suave); }

/* ── calculadora de pegada ─────────────────────────────────────────── */
.calc-preg { margin: 0 0 8px; font-weight: 600; }
.calc-n { font: inherit; font-size: 1.15rem; font-weight: 700; width: 160px;
          padding: 10px 12px; border-radius: 10px; border: 2px solid var(--liña);
          background: var(--panel); color: var(--tinta); }
.calc-n:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; border-color: var(--cian); }
.calc-saida { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
              gap: 10px; margin: 14px 0 4px; }
.calc-dato { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
             border-radius: 12px; border: 2px solid var(--liña); background: var(--fondo); }
body.contraste .calc-dato { background: #000; border-color: #fff; }
.calc-dato-n { font-size: 1.3rem; font-weight: 800; color: var(--azul); line-height: 1.1; }
body.contraste .calc-dato-n { color: var(--cian); }
.calc-dato-e { font-size: .78rem; font-weight: 700; text-transform: uppercase;
               letter-spacing: .02em; color: var(--tinta-suave); }
.calc-escribir { display: grid; gap: 12px; margin-top: 16px; }

/* ── código do bloque de control ao que alimenta a páxina ───────────── */
.chip.pecod { background: transparent; color: var(--chip-pe-tx);
              border-color: var(--chip-pe-bd); border-style: dashed;
              font-variant-numeric: tabular-nums; }
body.contraste .chip.pecod { background: #000; color: #fff; border-color: #fff; }

/* ── vídeo que non contacta con ninguén ata que se preme ───────────── */
.video[data-video] { position: relative; }
/* o contedor .video xa reserva a proporción con padding-top, así que o
   botón vai posicionado enriba, igual que faría o iframe */
.video-bt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer;
  font: inherit; color: var(--tinta); text-align: center; padding: 24px 18px;
  border: 2px dashed var(--liña); border-radius: var(--radio);
  background: linear-gradient(160deg, var(--fondo), #E8F6F8);
}
body.contraste .video-bt { background: #000; color: #fff; border-color: #fff; }
.video-bt:hover { border-color: var(--cian); border-style: solid; }
.video-bt:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }
.video-ico { font-size: 2rem; line-height: 1; color: var(--azul); }
body.contraste .video-ico { color: var(--cian); }
.video-txt { font-weight: 700; }
.video-nota { font-size: .8rem; color: var(--tinta-suave); }
body.contraste .video-nota { color: #fff; }
/* Ao cargar quítase só o bordo do botón. O padding-top é o que reserva a
   proporción 16:9 do oco: se se pon a cero, o iframe queda sen altura. */
.video.cargado { border: 0; }

/* A aplicación vai dentro da tarxeta da actividade, e a cabeceira da tarxeta
   xa leva o código e o nome: o título interno da aplicación sobraría. */
.xogo-oco { margin: 14px 0 0; }
.xogo-oco > .xogo .xogo-tit,
.xogo-oco .xogo-portada .xogo-tit { display: none; }