/* =========================================================
   Ecossistemas em Equilíbrio — estilos (Educa.gente Lab)
   Usa os tokens de style.css e os componentes de laboratorio.css.
   Verdes naturais (derivados, só para este laboratório):
   #2E7D4F (plantas, contraste AA), #8CC26B, #E8F3E3.
   ========================================================= */
:root { --eco-verde: #2E7D4F; --eco-verde-claro: #E8F3E3; --eco-herb: #C25E00; }

/* ---------- topo ---------- */
.eco-topo { background: radial-gradient(circle at 92% 10%, rgba(140, 194, 107, .28), transparent 40%), linear-gradient(180deg, var(--creme), #fff); }
.eco-topo__grade { display: grid; grid-template-columns: 1.4fr .8fr; gap: 28px; align-items: center; }
.eco-comecar { margin: 6px 0 16px; letter-spacing: .02em; }
.eco-aviso { display: flex; gap: 10px; align-items: flex-start; max-width: 46em; font-size: .9rem; color: var(--texto-suave); background: #fff; border: 1px solid var(--borda); border-left: 5px solid var(--eco-verde); border-radius: 12px; padding: 10px 14px; }
.eco-topo__numeros { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.eco-topo__numeros li { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 16px; box-shadow: var(--sombra); }
.eco-topo__numeros strong { font: 800 2rem var(--fonte-titulo); color: var(--eco-verde); min-width: 2.2ch; }
.eco-topo__numeros li:nth-child(2) strong { color: var(--magenta); }
.eco-topo__numeros li:nth-child(3) strong { color: var(--roxo); }
.eco-topo__numeros span { font-weight: 600; font-size: .95rem; }
@media (max-width: 860px) { .eco-topo__grade { grid-template-columns: 1fr; } .eco-topo__numeros { grid-template-columns: repeat(3, 1fr); } .eco-topo__numeros li { flex-direction: column; text-align: center; gap: 2px; padding: 10px 8px; } .eco-topo__numeros span { font-size: .78rem; } }

/* ---------- abas ---------- */
.eco-modulos { padding-top: 8px; }
.eco-abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.eco-aba {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; text-align: left; cursor: pointer;
  background: #fff; border: 2px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; font: inherit; color: var(--grafite);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.eco-aba__icone { grid-row: 1 / 4; font-size: 1.9rem; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--eco-verde-claro); }
.eco-aba__num { font: 700 .72rem var(--fonte-texto); text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); }
.eco-aba strong { font-family: var(--fonte-titulo); font-size: 1.05rem; }
.eco-aba__desc { font-size: .84rem; color: var(--texto-suave); }
.eco-aba:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.eco-aba[aria-selected="true"] { border-color: var(--eco-verde); box-shadow: 0 0 0 4px rgba(46, 125, 79, .14); background: linear-gradient(160deg, #fff 60%, var(--eco-verde-claro)); }
.eco-aba:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
@media (max-width: 760px) { .eco-abas { grid-template-columns: 1fr; gap: 8px; } .eco-aba { padding: 10px 12px; } .eco-aba__desc { display: none; } .eco-aba__icone { width: 42px; height: 42px; font-size: 1.5rem; grid-row: 1 / 3; } }

/* ---------- módulo 1: paisagem ---------- */
.eco-explorar { display: grid; grid-template-columns: 1fr minmax(260px, 330px); gap: 18px; align-items: start; }
@media (max-width: 980px) { .eco-explorar { grid-template-columns: 1fr; } }
.eco-cena-card { padding: 12px; }
.eco-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.eco-filtros__rotulo { font-weight: 700; font-size: .85rem; margin-right: 4px; }
.eco-filtro { border: 1.5px solid var(--borda); background: #fff; border-radius: 999px; padding: 6px 12px; min-height: 36px; font: 600 .82rem var(--fonte-texto); cursor: pointer; color: var(--grafite); }
.eco-filtro[aria-pressed="true"] { background: var(--grafite); color: #fff; border-color: var(--grafite); }
.eco-filtro:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.eco-cena { position: relative; border-radius: 14px; overflow: hidden; }
.eco-paisagem { display: block; width: 100%; height: auto; }
.eco-svg-rotulo { font: 600 13px var(--fonte-texto); fill: #fff; }
.eco-sol-raios { transform-origin: 90px 72px; animation: eco-girar 40s linear infinite; }
@keyframes eco-girar { to { transform: rotate(360deg); } }
.eco-seres { position: absolute; inset: 0; }
.eco-ser {
  position: absolute; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 3px solid #fff; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 16px rgba(32, 43, 53, .2);
  display: grid; place-items: center; transition: transform .2s, opacity .25s, box-shadow .2s;
}
.eco-ser__emoji { font-size: 1.55rem; line-height: 1; }
.eco-ser--abiotico { border-color: #FFC94D; }
.eco-ser--produtor { border-color: #4FA35C; }
.eco-ser--consumidor { border-color: #F58220; }
.eco-ser--decompositor { border-color: #7037A8; }
.eco-ser__nome {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: var(--grafite); color: #fff; font: 600 .78rem var(--fonte-texto); padding: 4px 8px; border-radius: 8px; opacity: 0; transition: opacity .15s;
}
.eco-ser:hover, .eco-ser:focus-visible, .eco-ser[aria-pressed="true"] { transform: translate(-50%, -50%) scale(1.14); z-index: 3; }
.eco-ser:hover .eco-ser__nome, .eco-ser:focus-visible .eco-ser__nome, .eco-ser[aria-pressed="true"] .eco-ser__nome { opacity: 1; }
.eco-ser:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
.eco-ser[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--magenta), 0 8px 20px rgba(32, 43, 53, .3); }
.eco-cena:not([data-filtro="todos"]) .eco-ser { opacity: .28; }
.eco-cena[data-filtro="abiotico"] .eco-ser--abiotico, .eco-cena[data-filtro="produtor"] .eco-ser--produtor,
.eco-cena[data-filtro="consumidor"] .eco-ser--consumidor, .eco-cena[data-filtro="decompositor"] .eco-ser--decompositor { opacity: 1; animation: eco-pulso 1.6s ease-in-out 2; }
@keyframes eco-pulso { 50% { transform: translate(-50%, -50%) scale(1.15); } }
.eco-cena__dica { margin: 8px 4px 0; }
@media (max-width: 600px) {
  .eco-ser { width: 34px; height: 34px; border-width: 2px; }
  .eco-ser__emoji { font-size: 1.05rem; }
  .eco-ser__nome { font-size: .7rem; }
}

/* ficha do organismo */
.eco-ficha { position: sticky; top: 90px; border-top: 6px solid var(--eco-verde); }
@media (max-width: 980px) { .eco-ficha { position: static; } }
.eco-ficha__emoji { font-size: 2.6rem; margin: 0; line-height: 1.2; }
.eco-ficha h2 { font-size: 1.35rem; margin: 2px 0 8px; }
.eco-ficha__vazia { text-align: center; color: var(--texto-suave); }
.eco-ficha__vazia h2 { font-size: 1.1rem; }
.eco-tipo { display: inline-block; font: 700 .72rem var(--fonte-texto); text-transform: uppercase; letter-spacing: .06em; padding: 5px 9px; border-radius: 999px; margin: 4px 0 0; }
.eco-tipo--abiotico { background: #FFF3D6; color: #7A4B00; }
.eco-tipo--produtor { background: var(--eco-verde-claro); color: #1F5C39; }
.eco-tipo--consumidor { background: #FFEBDD; color: #8A3F00; }
.eco-tipo--decompositor { background: var(--roxo-claro); color: var(--roxo-escuro); }
.eco-ficha__dados dt { font-weight: 700; font-size: .85rem; color: var(--roxo); margin-top: 10px; }
.eco-ficha__dados dd { margin: 2px 0 0; font-size: .95rem; }
.eco-ficha__cadeia { margin-top: 14px; background: var(--creme); border-radius: 12px; padding: 10px 14px; font-size: .92rem; }
.eco-ficha__cadeia p { margin: 0 0 4px; }
.eco-ficha__cadeia ul { margin: 0; padding-left: 18px; }

.eco-ciclos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 760px) { .eco-ciclos { grid-template-columns: 1fr; } }
.eco-ciclo--energia { border-top: 6px solid var(--laranja); }
.eco-ciclo--materia { border-top: 6px solid var(--eco-verde); }
.eco-ciclo p { color: var(--texto-suave); margin-bottom: 0; }
.eco-fluxo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 10px !important; color: var(--grafite) !important; font-weight: 600; font-size: .9rem; }
.eco-fluxo span:not([aria-hidden]) { background: var(--creme); border-radius: 999px; padding: 4px 10px; }

/* ---------- módulo 2: simulação ---------- */
.eco-escolhas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.eco-escolhas--3 { grid-template-columns: repeat(3, 1fr); }
.eco-escolhas legend { grid-column: 1 / -1; margin-bottom: 4px; }
.eco-escolhas label { position: relative; cursor: pointer; display: block !important; }
.eco-escolhas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eco-escolhas label span { display: block; text-align: center; border: 1.5px solid var(--borda); border-radius: 10px; padding: 8px 4px; font-size: .86rem; font-weight: 600; min-height: 40px; }
.eco-escolhas input:checked + span { border-color: var(--magenta); background: #FFF4F9; box-shadow: 0 0 0 3px rgba(217, 27, 112, .12); }
.eco-escolhas input:focus-visible + span { outline: 3px solid var(--laranja); outline-offset: 2px; }
.eco-escolhas input:disabled + span { opacity: .6; cursor: not-allowed; }
.eco-mais { border: 1px dashed var(--borda); border-radius: 12px; padding: 8px 12px; }
.eco-mais summary { cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--roxo); min-height: 32px; display: flex; align-items: center; }
.eco-mais[open] { display: grid; gap: 12px; }
.eco-check { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: .92rem; cursor: pointer; min-height: 36px; }
.eco-check input { width: 20px; height: 20px; accent-color: var(--magenta); }
.eco-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eco-acoes .botao { flex: 1 1 auto; }
.eco-nota-desafio { background: var(--roxo-claro); border-radius: 10px; padding: 8px 10px; color: var(--roxo-escuro) !important; }
.eco-desafio-cond { margin: 6px 0 8px; padding-left: 18px; font-size: .9rem; font-weight: 600; }

.eco-grafico-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.eco-mes { font: 700 .95rem var(--fonte-titulo); color: var(--roxo); margin: 0; font-variant-numeric: tabular-nums; }
.eco-grafico { border-radius: 10px; cursor: crosshair; }
.eco-grafico:focus-visible { outline: 3px solid var(--laranja); outline-offset: 4px; }
.eco-eixo { font: 500 11px var(--fonte-texto); fill: #5D6873; }
.eco-eixo--titulo { font-weight: 600; }
.eco-eixo--mudanca { fill: #B3145B; font-weight: 700; }
.eco-linha-100 { stroke: #9A8FAA; stroke-dasharray: 2 4; }
.eco-mudanca { stroke: #D91B70; stroke-width: 1.5; stroke-dasharray: 6 5; }
.eco-legenda .lg-plantas { color: #2E7D4F; } .eco-legenda .lg-herb { color: #A84F00; } .eco-legenda .lg-pred { color: #7037A8; }
.eco-legenda .lg-inv { color: #B3145B; } .eco-legenda .lg-comp { color: #4A5561; }
.eco-legenda [hidden] { display: none; }
.eco-leitura-grafico { font-size: .9rem; background: var(--creme); border-radius: 10px; padding: 8px 12px; margin: 8px 0 0; }
.eco-tabela { margin-top: 10px; }
.eco-tabela summary { cursor: pointer; font-weight: 600; color: var(--roxo); font-size: .9rem; min-height: 32px; display: flex; align-items: center; }
.eco-tabela .pl-tabela { font-size: .82rem; }

.eco-retrato-linha { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
@media (max-width: 760px) { .eco-retrato-linha { grid-template-columns: 1fr; } }
.eco-retrato { background: linear-gradient(180deg, #F6FBF3, #fff); }
.eco-retrato__linha { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; min-height: 30px; }
.eco-retrato__nome { font-size: .8rem; font-weight: 700; color: var(--texto-suave); }
.eco-retrato__icones { font-size: 1.15rem; letter-spacing: 1px; word-break: break-all; }
.eco-retrato__icones em { font-size: .8rem; color: var(--magenta-escuro); }
.eco-leituras { grid-template-columns: repeat(2, 1fr); align-content: start; }
.eco-leitura--plantas { border-left-color: #2E7D4F; } .eco-leitura--herb { border-left-color: #E06C00; }
.eco-leitura--pred { border-left-color: #7037A8; } .eco-leitura--inv { border-left-color: #D91B70; }
.eco-leituras [hidden] { display: none; }
.eco-grafico-res { background: #FBFAF7; border-radius: 12px; padding: 6px; }
.eco-antes-depois td, .eco-antes-depois th { font-variant-numeric: tabular-nums; }

/* ---------- módulo 3: cadeia e teia ---------- */
.eco-paleta__grupo { font: 700 .78rem var(--fonte-texto); text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); margin: 12px 0 6px; }
.eco-paleta__itens { display: flex; flex-wrap: wrap; gap: 6px; }
.eco-peca { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px; cursor: pointer; background: #fff; border: 1.5px solid var(--borda); font: 600 .86rem var(--fonte-texto); color: var(--grafite); transition: transform .15s, box-shadow .15s; }
.eco-peca:hover { transform: translateY(-1px); box-shadow: var(--sombra); }
.eco-peca:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.eco-peca--produtor { border-color: #9BC98A; } .eco-peca--consumidor { border-color: #F5B98A; } .eco-peca--decompositor { border-color: #C9B2E3; }
.eco-peca--sugerida { background: #FFF8E1; border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(245, 130, 32, .18); }
.eco-peca--usada { opacity: .55; }
.eco-cadeia-acoes { display: flex; gap: 4px; }
.eco-cadeia { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.eco-elo { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; width: 116px; padding: 10px 6px; margin-left: 46px; background: #fff; border: 2px solid var(--borda); border-radius: 16px; }
.eco-elo--novo { animation: eco-entra .3s ease both; }
.eco-elo:first-child { margin-left: 0; }
.eco-elo__emoji { font-size: 1.8rem; line-height: 1.1; }
.eco-elo strong { font-size: .86rem; line-height: 1.2; margin-top: 2px; }
.eco-elo__nivel { font-size: .72rem; color: var(--texto-suave); font-weight: 600; margin-top: 2px; }
.eco-elo__energia { font: 700 .78rem var(--fonte-texto); color: #A84F00; margin-top: 4px; }
.eco-elo--sol { border-color: #FFC94D; background: #FFFBEF; }
.eco-elo--produtor { border-color: #9BC98A; } .eco-elo--consumidor { border-color: #F5B98A; } .eco-elo--decompositor { border-color: #C9B2E3; }
.eco-seta { position: absolute; right: 100%; top: 50%; width: 46px; height: 2px; background: var(--laranja); }
.eco-seta::after { content: ""; position: absolute; right: -1px; top: -5px; border: 6px solid transparent; border-left: 8px solid var(--laranja); border-right: 0; }
.eco-seta span { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: .62rem; font-weight: 700; color: #A84F00; }
@keyframes eco-entra { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .eco-cadeia { flex-direction: column; align-items: center; }
  .eco-elo { margin-left: 0; margin-top: 34px; width: min(240px, 100%); }
  .eco-elo:first-child { margin-top: 0; }
  .eco-seta { right: auto; left: 50%; top: auto; bottom: 100%; width: 2px; height: 34px; }
  .eco-seta::after { right: -5px; top: auto; bottom: -1px; border: 6px solid transparent; border-top: 8px solid var(--laranja); border-bottom: 0; }
  .eco-seta span { left: 8px; bottom: 10px; transform: none; }
}
.eco-cadeia-msg { font-weight: 600; font-size: .93rem; background: #EEF8F1; border: 1px solid #9BC8A8; border-radius: 10px; padding: 8px 12px; margin: 0; }
.eco-cadeia-msg--erro { background: #FFF6E5; border-color: #F5C77E; }
.eco-piramide { display: grid; gap: 6px; justify-items: center; margin: 10px 0; }
.eco-piramide__nivel { width: var(--larg); display: flex; justify-content: space-between; align-items: center; gap: 8px; background: linear-gradient(90deg, #8CC26B, #4FA35C); color: #10301D; border-radius: 10px; padding: 6px 12px; font-size: .82rem; font-weight: 600; min-width: 220px; max-width: 100%; }
.eco-piramide__nivel:nth-last-child(n+3) { background: linear-gradient(90deg, #FDD7B0, #F5A35C); color: #4D2600; }
.eco-piramide__nivel strong { font: 800 .9rem var(--fonte-titulo); white-space: nowrap; }
.eco-piramide__perda { font-size: .88rem; color: var(--texto-suave); text-align: center; margin: 6px 0 0; }
.eco-conceitos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 760px) { .eco-conceitos { grid-template-columns: 1fr; } }
.eco-conceitos h3 { font-size: 1rem; margin-bottom: 4px; }
.eco-conceitos p { color: var(--texto-suave); font-size: .92rem; margin: 0; }
.eco-teia-svg { width: 100%; height: auto; display: block; }
.eco-teia-camada { font: 700 11px var(--fonte-texto); fill: #8A8F96; text-transform: uppercase; letter-spacing: .06em; }
.eco-teia-seta { stroke: #C9C0D6; stroke-width: 2; transition: opacity .2s; }
.eco-teia-seta.ativa { stroke: #D91B70; stroke-width: 3; }
.eco-teia-seta.apagada { opacity: .25; }
.eco-teia-no { cursor: pointer; }
.eco-teia-no circle { fill: #fff; stroke: #9BC98A; stroke-width: 3; }
.eco-teia-no.foco circle { stroke: #D91B70; stroke-width: 4; fill: #FFF4F9; }
.eco-teia-no:focus { outline: none; }
.eco-teia-no:focus-visible circle { stroke: var(--laranja); stroke-width: 5; }
.eco-teia-emoji { font-size: 22px; }
.eco-teia-nome { font: 600 11px var(--fonte-texto); fill: #202B35; }
.eco-teia-decomp { fill: var(--roxo-claro); stroke: #C9B2E3; stroke-dasharray: 5 4; }
.eco-teia-info { font-weight: 600; font-size: .92rem; background: var(--creme); border-radius: 10px; padding: 8px 12px; }

/* ---------- professor ---------- */
.eco-passos { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; counter-reset: passo; }
.eco-passos li { background: var(--creme); border-radius: 14px; padding: 12px; counter-increment: passo; }
.eco-passos li::before { content: counter(passo); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--eco-verde); color: #fff; font-weight: 800; margin-bottom: 6px; }
.eco-passos strong { display: block; }
.eco-passos span { font-size: .88rem; color: var(--texto-suave); }

@media (prefers-reduced-motion: reduce) {
  .eco-sol-raios, .eco-elo, .eco-cena .eco-ser { animation: none !important; }
  .eco-ser, .eco-aba, .eco-peca, .eco-teia-seta { transition: none; }
}
@media print { .eco-ficha__tabela td { height: 9mm; } }

/* celular e tablet: controles (hipótese, condições, organismos) antes do gráfico e da cadeia */
@media (max-width: 980px) { .eco-painel .lab-lateral { order: 0; } }
/* celular: a teia mantém um tamanho legível e rola para o lado dentro do cartão */
@media (max-width: 700px) {
  .eco-teia { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; background: #FBFAF7; }
  .eco-teia-svg { min-width: 640px; }
  .eco-teia:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
  .eco-teia-nome { font-size: 12px; } .eco-teia-emoji { font-size: 22px; } .eco-teia-camada { font-size: 11px; }
}
.eco-teia__dica { display: none; }
@media (max-width: 700px) { .eco-teia__dica { display: block; } }
.eco-cadeia-resumo { display: none; }
@media (max-width: 980px) {
  .eco-cadeia-resumo { display: block; position: sticky; top: 76px; z-index: 5; background: #fff; border: 2px solid var(--eco-verde); border-radius: 12px; padding: 8px 12px; margin: 10px 0; box-shadow: var(--sombra); }
  .eco-cadeia-resumo__elos { margin: 0; font-weight: 700; font-size: .88rem; }
  .eco-cadeia-resumo__elos b { color: var(--laranja); }
  .eco-cadeia-resumo__msg { margin: 4px 0 0; font-size: .82rem; color: #1F5C39; }
  .eco-cadeia-resumo__msg.erro { color: #8A3F00; }
}