/* ============================================================
   x18.ceipbelesar.org · Aula x18 · 3.º de Primaria
   CEIP Plurilingüe de Belesar · Baiona
   Require tokens.css e componentes.css cargados antes.
   Deriva do chrome de estilo.ceipbelesar.org, engadindo tema escuro.
   ============================================================ */

/* ---------- Roles de cor do sitio · tema claro ---------- */
:root{
  color-scheme:light;
  --x-fondo:var(--bl-fondo);
  --x-superficie:var(--bl-papel);
  --x-superficie-alt:var(--bl-crema);
  --x-borde:var(--bl-linha);
  --x-texto:var(--bl-tinta);
  --x-texto-suave:var(--bl-texto-suave);
  --x-texto-tenue:var(--bl-texto-tenue);
  --x-titulo:var(--bl-bosque);
  --x-marca:var(--bl-bosque);
  --x-marca-texto:var(--bl-crema);
  --x-marca-suave:#CFE0D3;
  --x-ligazon:var(--bl-foco);
  --x-kicker:var(--bl-terracota);
  --x-mar:var(--bl-mar);
  --x-folla:var(--bl-foco);
  --x-terracota:var(--bl-terracota);
  --x-dourado:var(--bl-dourado);
  --x-sombra-sm:var(--bl-sombra-sm);
  --x-sombra-md:var(--bl-sombra-md);
}

/* ---------- Tema escuro ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --x-fondo:#0B1712;
    --x-superficie:#14251E;
    --x-superficie-alt:#1B3128;
    --x-borde:#2C4438;
    --x-texto:#F1EADA;
    --x-texto-suave:#AFC0B4;
    --x-texto-tenue:#7E8F84;
    --x-titulo:#A8DCC0;
    --x-marca:#102A21;
    --x-marca-texto:#E9E2D2;
    --x-marca-suave:#AFC0B4;
    --x-ligazon:#6FD3A0;
    --x-kicker:#E09257;
    --x-mar:#74B4C6;
    --x-folla:#6FD3A0;
    --x-terracota:#E09257;
    --x-dourado:#E2A94E;
    --x-sombra-sm:0 1px 2px rgba(0,0,0,.35);
    --x-sombra-md:0 8px 22px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --x-fondo:#0B1712;
  --x-superficie:#14251E;
  --x-superficie-alt:#1B3128;
  --x-borde:#2C4438;
  --x-texto:#F1EADA;
  --x-texto-suave:#AFC0B4;
  --x-texto-tenue:#7E8F84;
  --x-titulo:#A8DCC0;
  --x-marca:#102A21;
  --x-marca-texto:#E9E2D2;
  --x-marca-suave:#AFC0B4;
  --x-ligazon:#6FD3A0;
  --x-kicker:#E09257;
  --x-mar:#74B4C6;
  --x-folla:#6FD3A0;
  --x-terracota:#E09257;
  --x-dourado:#E2A94E;
  --x-sombra-sm:0 1px 2px rgba(0,0,0,.35);
  --x-sombra-md:0 8px 22px rgba(0,0,0,.45);
}

/* ---------- Base (sobreescribe componentes.css cos roles do sitio) ---------- */
html,body{min-height:100%}
body{background:var(--x-fondo);color:var(--x-texto)}
h1,h2,h3,h4{color:var(--x-titulo)}
a{color:var(--x-ligazon)}
a:hover{color:var(--x-titulo)}
:focus-visible{outline:2px solid var(--x-ligazon);outline-offset:2px;border-radius:var(--bl-r-sm)}
img{max-width:100%}
[hidden]{display:none!important}

.saltar{
  position:absolute;left:var(--bl-e4);top:-100px;z-index:60;
  background:var(--x-superficie);color:var(--x-titulo);
  padding:var(--bl-e3) var(--bl-e4);border-radius:var(--bl-r-md);
  box-shadow:var(--bl-sombra-lg);font-family:var(--bl-fonte-titulo);
}
.saltar:focus{top:var(--bl-e4)}

/* ---------- Cabeceira ---------- */
.sh{
  position:sticky;top:0;z-index:20;
  background:var(--x-marca);color:var(--x-marca-texto);
  padding-top:env(safe-area-inset-top,0px);
}
.sh-in{
  max-width:1180px;margin:0 auto;display:flex;align-items:center;
  gap:var(--bl-e4);padding:0 var(--bl-e6);min-height:var(--bl-cabeceira);
}
.sh-brand{display:flex;align-items:center;gap:var(--bl-e3);color:inherit;text-decoration:none}
.sh-brand:hover{color:inherit;text-decoration:none}
.sh-badge{
  width:42px;height:42px;border-radius:50%;background:var(--bl-crema);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;
}
.sh-badge img{width:120%;margin-top:6%}
.sh-nm{font-family:var(--bl-fonte-titulo);font-weight:var(--bl-peso-semi);font-size:16px;line-height:1.1}
.sh-nm span{
  display:block;font-size:10px;letter-spacing:var(--bl-tracking-etiqueta);
  text-transform:uppercase;color:var(--x-dourado);margin-top:3px;font-weight:var(--bl-peso-semi);
}
.sh-nav{margin-left:auto;display:flex;gap:var(--bl-e1)}
.sh-nav a{
  font-family:var(--bl-fonte-titulo);font-size:14px;font-weight:var(--bl-peso-medio);
  color:var(--x-marca-suave);padding:0 var(--bl-e3);border-radius:var(--bl-r-md);
  min-height:var(--bl-tap-min);display:inline-flex;align-items:center;gap:6px;
}
.sh-nav a:hover{background:rgba(250,241,222,.10);color:var(--x-marca-texto);text-decoration:none}
.sh-nav a[aria-current="page"]{background:var(--bl-crema);color:var(--bl-bosque);font-weight:var(--bl-peso-semi)}
.sh-nav a svg{width:15px;height:15px;flex:none;opacity:.8}
.sh-tema{
  margin-left:var(--bl-e2);
  min-width:var(--bl-tap-min);min-height:var(--bl-tap-min);padding:0 var(--bl-e3);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(250,241,222,.12);color:var(--x-marca-texto);
  border:0;border-radius:var(--bl-r-full);cursor:pointer;
  font-family:var(--bl-fonte-titulo);font-size:13px;font-weight:var(--bl-peso-medio);
  transition:background var(--bl-dur-rapida) var(--bl-easing);
}
.sh-tema:hover{background:rgba(250,241,222,.24)}
.sh-tema svg{width:18px;height:18px;flex:none}
.sh-burger{
  display:none;margin-left:auto;width:44px;height:44px;
  flex-direction:column;justify-content:center;gap:4px;align-items:center;
  background:none;border:0;cursor:pointer;
}
.sh-burger i{display:block;width:20px;height:2px;background:var(--x-marca-texto);border-radius:1px}
@media (max-width:880px){
  .sh-in{flex-wrap:wrap;gap:var(--bl-e2)}
  .sh-brand{order:1}
  .sh-tema{order:2;margin-left:auto}
  .sh-tema span{display:none}
  .sh-burger{display:flex;order:3;margin-left:0}
  .sh-nav{display:none;order:4;width:100%;flex-direction:column;gap:2px;padding-bottom:var(--bl-e3);margin-left:0}
  .sh-nav.open{display:flex}
  .sh-nav a{width:100%}
}

/* ---------- Contido ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:var(--bl-e10) var(--bl-e6) var(--bl-e12)}
@media (max-width:600px){.wrap{padding:var(--bl-e8) var(--bl-e4) var(--bl-e10)}}

.hero{max-width:680px;margin-bottom:var(--bl-e10)}
.hero h1{font-size:clamp(28px,5.4vw,40px);line-height:1.05}
.hero p{font-size:var(--bl-txt-lg);color:var(--x-texto-suave);margin-top:var(--bl-e3)}
.kick{
  font-family:var(--bl-fonte-titulo);font-weight:var(--bl-peso-semi);font-size:var(--bl-txt-xs);
  letter-spacing:var(--bl-tracking-etiqueta);text-transform:uppercase;color:var(--x-kicker);
  display:block;margin-bottom:var(--bl-e2);
}
.sec{margin-top:var(--bl-e12)}
.sec>h2{margin-bottom:var(--bl-e2)}
.sec>p.intro{color:var(--x-texto-suave);max-width:70ch;margin-bottom:var(--bl-e6)}

/* ---------- Grella de ferramentas ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--bl-e5)}

.tile{
  --cor:var(--x-folla);
  display:flex;flex-direction:column;gap:var(--bl-e2);
  background:var(--x-superficie);border:1px solid var(--x-borde);
  border-radius:var(--bl-r-lg);padding:var(--bl-e6);text-decoration:none;
  box-shadow:var(--x-sombra-sm);color:var(--x-texto);
  transition:box-shadow var(--bl-dur-media) var(--bl-easing),transform var(--bl-dur-media) var(--bl-easing),border-color var(--bl-dur-media) var(--bl-easing);
}
.tile:hover{
  text-decoration:none;color:var(--x-texto);
  box-shadow:var(--x-sombra-md);transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--cor) 45%,var(--x-borde));
}
.tile .sinal{
  width:46px;height:46px;flex:none;border-radius:var(--bl-r-md);
  background:color-mix(in srgb,var(--cor) 15%,transparent);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--bl-e3);
}
.tile .sinal svg{width:25px;height:25px;stroke:var(--cor);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-size:var(--bl-txt-xl);margin:0;color:var(--x-titulo)}
.tile p{color:var(--x-texto-suave);font-size:var(--bl-txt-sm);margin:0}
.tile .uso{
  margin-top:var(--bl-e2);padding-top:var(--bl-e3);
  border-top:1px dashed var(--x-borde);color:var(--x-texto-suave);
}
.tile .uso b{font-family:var(--bl-fonte-titulo);font-weight:var(--bl-peso-semi);color:var(--x-titulo)}
.tile .mais{
  font-family:var(--bl-fonte-titulo);font-size:var(--bl-txt-sm);font-weight:var(--bl-peso-semi);
  color:var(--x-ligazon);margin-top:auto;padding-top:var(--bl-e4);
  display:inline-flex;align-items:center;gap:7px;
}
.tile:hover .mais{gap:11px}
.tile .mais svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:none}
.tile .nota{
  font-size:var(--bl-txt-xs);color:var(--x-texto-tenue);
  font-family:var(--bl-fonte-titulo);margin-top:var(--bl-e1);
}

.tile--proximo{
  border-style:dashed;box-shadow:none;background:transparent;
  align-items:flex-start;justify-content:center;cursor:default;
}
.tile--proximo:hover{transform:none;box-shadow:none;border-color:var(--x-borde)}
.tile--proximo h3{color:var(--x-texto-tenue);font-size:var(--bl-txt-lg)}

/* ---------- Notas ---------- */
.notas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--bl-e5)}
.nota-b{
  background:var(--x-superficie-alt);border:1px solid var(--x-borde);
  border-radius:var(--bl-r-lg);padding:var(--bl-e5);
}
.nota-b h4{font-size:var(--bl-txt-base);margin-bottom:var(--bl-e2);color:var(--x-titulo)}
.nota-b p{font-size:var(--bl-txt-sm);color:var(--x-texto-suave);margin:0}

/* ---------- Rodapé ---------- */
.sf{background:var(--x-marca);color:var(--x-marca-suave);margin-top:var(--bl-e12);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.sf-in{
  max-width:1180px;margin:0 auto;padding:var(--bl-e10) var(--bl-e6);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--bl-e6);
}
.sf-nm{font-family:var(--bl-fonte-titulo);font-weight:var(--bl-peso-semi);font-size:var(--bl-txt-lg);color:var(--x-marca-texto)}
.sf-lema{font-family:var(--bl-fonte-titulo);font-style:italic;color:var(--x-dourado);margin-top:var(--bl-e1)}
.sf-data p{font-size:var(--bl-txt-sm);margin:0 0 var(--bl-e1)}
.sf a{color:var(--bl-folla-claro)}
.sf a:hover{color:var(--x-marca-texto)}

@media print{
  .sh,.sf,.saltar{display:none}
  .wrap{padding:0}
  .tile{break-inside:avoid;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}