/* ==========================================================================
   PRISMA · components/material.css — O MATERIAL COMO ELEMENTO  (D-014)
   --------------------------------------------------------------------------
   Nasceu na Home do PRISMA (19/09/2026) e foi promovido ao sistema a pedido da
   autora: "precisamos mesclar o que deu certo".

   A LIÇÃO QUE ESTE ARQUIVO GUARDA. Copiar da Orbit o "plano, sem caixa, quase
   vazio" deu errado: depois de uma abertura rica, a autora leu como "página que
   não deu tempo de ficar pronta, faltaram elementos". O elemento que preenche
   COM SENTIDO é o próprio material — que é o assunto do produto.

   PEÇAS
     .folha        painel claro (tema claro em escopo) — azul-claro, nunca branco seco
     .folhinha     o material em miniatura: papel claro em QUALQUER tema
     .modo         cartão de caminho: palco com folhinhas + texto + "Começar"
     .recente      cartão de material em andamento: capa com folhinha + próxima ação
     .linhas       lista com fio em cima, sem caixa

   ACESSO. A folhinha é SEMPRE aria-hidden: ilustra o texto ao lado, não é conteúdo.
   ORDEM. As regras responsivas ficam no fim, de propósito: elas valem para todas
   as variantes de .folhinha.
   ========================================================================== */

/* --- FOLHA — use com data-tema="prisma-light" no mesmo elemento -------------------------- */
.folha {
  border-radius: var(--radius-2xl);
  background: var(--folha-fundo);   /* azul-claro, não branco seco — tokens.css, cores em uso */
  color: var(--text-primary);
}

/* --- LINHAS — fio em cima, nada de caixa --------------------------------------------------- */
.linhas { list-style: none; margin: 0; padding: 0; }
.linhas > li { border-top: 1px solid var(--border-default); }
.linhas > li:last-child { border-bottom: 1px solid var(--border-default); }
.linha-fixa {
  width: 100%; display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  align-items: baseline; gap: var(--espaco-4);
  padding: var(--espaco-3) 0; text-align: left; color: inherit;
}
.linha-fixa b { font-size: 1rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text-primary); }
.linha-fixa span { font-size: var(--label-size); line-height: 1.5; color: var(--text-muted); }

/* --- RECENTE — base (a capa é a cena em miniatura: um céu e uma lâmina; muda só o matiz) ----- */
.recentes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px; }
.recente { display: grid; gap: 6px; align-content: start; color: inherit; text-decoration: none; }
.recente-capa {
  --capa-ceu: var(--brand-blue);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: end; padding: var(--espaco-4);
  aspect-ratio: 4 / 3; margin-bottom: var(--espaco-3);
  border-radius: var(--radius-lg);
  color: var(--text-on-destaque);
  background: linear-gradient(204deg,
    color-mix(in srgb, var(--text-on-destaque) 78%, var(--capa-ceu)) 0%,
    color-mix(in srgb, var(--text-on-destaque) 22%, var(--capa-ceu)) 42%,
    color-mix(in srgb, var(--capa-ceu) 78%, var(--tinta)) 100%);
  transition: transform var(--motion-slow) var(--easing-standard);
}
.recente-capa::before {
  content: ""; position: absolute; z-index: -1;
  left: var(--capa-x, -62%); top: var(--capa-y, 24%); width: var(--capa-l, 170%);
  aspect-ratio: 1.2; border-radius: 50%;
  transform: rotate(var(--capa-giro, -10deg));
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--capa-ceu) 34%, var(--tinta)) 0%,
    color-mix(in srgb, var(--capa-ceu) 56%, var(--tinta)) 90%,
    color-mix(in srgb, var(--capa-ceu) 60%, var(--text-on-destaque)) 99%,
    transparent 100%);
}
.recente-capa--a { --capa-ceu: var(--brand-blue); }
.recente-capa--b { --capa-ceu: var(--brand-cyan); --capa-x: -18%; --capa-y: 46%; --capa-l: 190%; --capa-giro: 8deg; }
.recente-capa--c { --capa-ceu: var(--brand-green); --capa-x: -96%; --capa-y: 10%; --capa-l: 200%; --capa-giro: -22deg; }
.recente-capa--d { --capa-ceu: var(--text-on-destaque-3); --capa-x: -40%; --capa-y: 58%; --capa-l: 150%; --capa-giro: 14deg; }
.recente-tipo  { font-size: var(--caption-size); color: var(--text-muted); }
.recente-nome  { font-size: 1rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: var(--text-primary); }
/* D-022: o título reserva DUAS linhas quando os cartões estão lado a lado. Sem isso, o cartão de título curto sobrava em altura
   e a faixa de estado (que absorve a sobra) ficava mais alta que a do vizinho — com a Sora, mais larga, passou a acontecer em dois. */
/* 20/09/2026 02h35, pedido da autora: a reserva de duas linhas vale SO para os quatro cartoes em fila (de 901 px para cima).
   No 2x2 compacto ela abria um vao embaixo do nome curto ("Leitura: Casa Tomada"). */
@media (min-width: 901px) { .recente-nome { min-height: calc(2 * 1.3em); } }
.recente-etapa { font-size: var(--label-size); line-height: 1.45; color: var(--text-secondary); }
.recente-acao  { margin-top: var(--espaco-2); font-size: var(--label-size); color: var(--accent-text); }
@media (hover: hover) and (pointer: fine) {
  .recente:hover .recente-capa { transform: translateY(-3px); }
  .recente:hover .recente-acao { text-decoration: underline; text-underline-offset: 3px; }
}

/* --- FOLHINHA — papel (--papel) e tinta (--tinta) não mudam com o tema ---------------------- */
.folhinha {
  position: absolute; left: 13%; top: 16%; width: 74%;
  display: grid; gap: 5px; align-content: start;
  padding: 14px 14px 18px; min-height: 120%;
  border-radius: 10px;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--surface-destaque-base) 55%, transparent),
              0 2px 6px color-mix(in srgb, var(--surface-destaque-base) 16%, transparent);
  transform: rotate(-2.5deg);
  font-size: 10.5px; line-height: 1.35; text-align: left;
  transition: transform var(--motion-slow) var(--easing-standard);
}
.folhinha--tras { left: 22%; top: 10%; transform: rotate(4deg); opacity: .62; box-shadow: none; }
.folhinha--original { left: 6%; top: 18%; width: 56%; transform: rotate(-5deg); opacity: .8; }
.folhinha--frente { left: 34%; top: 12%; width: 58%; transform: rotate(3deg); }
.folhinha-tipo { font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-primary) 86%, var(--tinta)); }
.folhinha-titulo { font-size: 13px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 4px; }
.folhinha-linha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; align-items: baseline;
  padding-top: 5px; border-top: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
.folhinha-linha i { font-style: normal; font-family: var(--fonte-mono); font-size: 9px;
  color: color-mix(in srgb, var(--tinta) 58%, transparent); }
.folhinha-barra { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--tinta) 13%, transparent); }
.folhinha-barra--curta { width: 62%; }
.folhinha-imagem { height: 38px; border-radius: 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-cyan) 38%, var(--papel)), color-mix(in srgb, var(--brand-blue) 30%, var(--papel))); }
.folhinha-selo { justify-self: start; margin-top: 3px; padding: 2px 7px; border-radius: 99px; font-size: 9px; font-weight: 600;
  background: color-mix(in srgb, var(--brand-green) 24%, var(--papel));
  color: color-mix(in srgb, var(--brand-green) 38%, var(--tinta)); }
.folhinha-selo[hidden] { display: none; }
/* BNCC: o selo afirma o alinhamento; o CÓDIGO da habilidade só o material real traz — nunca inventar */
.folhinha-selo--bncc { margin: 0 0 4px;
  background: color-mix(in srgb, var(--brand-blue) 18%, var(--papel));
  color: color-mix(in srgb, var(--accent-primary) 80%, var(--tinta)); }
.folhinha-item { display: grid; grid-template-columns: 14px 14px minmax(0, 1fr); gap: 6px; align-items: center;
  padding-top: 5px; border-top: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
.folhinha-item i { font-style: normal; font-family: var(--fonte-mono); font-size: 9px; color: color-mix(in srgb, var(--tinta) 58%, transparent); }
.folhinha-item b { font-weight: 600; }
.folhinha-item svg { width: 12px; height: 12px; stroke-width: 2.6; justify-self: end;
  color: color-mix(in srgb, var(--brand-green) 60%, var(--tinta)); }
.folhinha-item em { font-style: normal; font-size: 9px; line-height: 1.25; }
.folhinha-item--alerta { margin-inline: -6px; padding: 5px 6px; border-top: 0; border-radius: 6px;
  background: color-mix(in srgb, var(--brand-orange) 20%, var(--papel)); }

/* --- MODO — cartão de caminho ------------------------------------------------------------------ */
.modos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.modo {
  width: 100%; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--espaco-4);
  padding: 10px 10px var(--espaco-5);
  border-radius: var(--radius-xl);
  background-color: var(--surface-1); background-image: var(--surface-veu);
  box-shadow: inset 0 0 0 1px var(--border-subtle), var(--elev-floating);
  text-align: left; color: inherit; cursor: pointer;
  transition: transform var(--motion-slow) var(--easing-standard);
}
.modo-palco {
  position: relative; overflow: hidden; display: block; height: clamp(190px, 17vw, 236px);
  border-radius: calc(var(--radius-xl) - 8px);
  background: linear-gradient(200deg,
    color-mix(in srgb, var(--palco, var(--brand-blue)) 20%, var(--papel)) 0%,
    color-mix(in srgb, var(--palco, var(--brand-blue)) 62%, var(--papel)) 100%);
}
.modo-palco--ciano { --palco: var(--brand-cyan); }
.modo-palco--verde { --palco: var(--brand-green); }
.modo-texto { display: grid; gap: 6px; align-content: start; padding-inline: var(--espaco-3); }
.modo-texto b { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.03em; }
.modo-texto span { font-size: var(--label-size); line-height: 1.55; color: var(--text-secondary); }
.modo-ir { display: inline-flex; align-items: center; gap: 6px; padding-inline: var(--espaco-3);
  font-size: var(--label-size); font-weight: 500; color: var(--accent-text); }
.modo-ir svg { width: 15px; height: 15px; transition: transform var(--motion-default) var(--easing-standard); }
@media (hover: hover) and (pointer: fine) {
  .modo:hover { transform: translateY(-4px); }
  .modo:hover .folhinha:not(.folhinha--tras):not(.folhinha--original) { transform: rotate(-1deg) translateY(-6px); }
  .modo:hover .folhinha--frente { transform: rotate(1.5deg) translateY(-6px); }
  .modo:hover .modo-ir svg { transform: translate(2px, -2px); }
}
.modo:active { transform: scale(.985); }

/* --- RECENTE vira caixa; a capa mostra o material ------------------------------------------------ */
.recente {
  padding: 10px 10px var(--espaco-4);
  border-radius: var(--radius-xl);
  background-color: var(--surface-1); background-image: var(--surface-veu);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  transition: transform var(--motion-slow) var(--easing-standard);
}
.recente > :not(.recente-capa) { padding-inline: var(--espaco-2); }
.recente .recente-capa { border-radius: calc(var(--radius-xl) - 8px); padding: 0; }
.folhinha--capa { left: 16%; top: 18%; width: 68%; transform: rotate(-3deg); }
.recente-acao { display: inline-flex; align-items: center; gap: 4px; }
.recente-acao svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .recente:hover { transform: translateY(-4px); }
  .recente:hover .recente-capa { transform: none; }
  .recente:hover .folhinha--capa { transform: rotate(-1deg) translateY(-5px); }
}
/* caixas da mesma altura, com a ação sempre no pé */
.recentes > li { display: grid; }
.recente { height: 100%; grid-template-rows: auto auto auto 1fr auto; }
.recente-acao { align-self: end; }

/* --- FAIXA DE ESTADO — no topo do cartão  (pedido da autora, 19/09/2026 23h48) ---------------------
   O cartão inteiro é o clique; a palavra de ação no pé ("Continuar ›") era redundante e saiu. O que a pessoa precisa
   saber ANTES de clicar é o ESTADO — e ele sobe para uma faixa colorida no alto:
     continuar   azul    está em andamento, é só seguir
     ajustar     ciano   você pediu ajuste; a equipe está mexendo
     decidir     âmbar   parado esperando VOCÊ (é o único que pede atenção: por isso a cor quente)
     finalizado  verde   pronto
   Estado nunca é só cor: a palavra está sempre lá, e entra no nome acessível do link.
     <a class="recente"><span class="recente-estado recente-estado--decidir">Decidir</span> …capa, tipo, nome, etapa… </a> */
/* Cartões da mesma linha têm a mesma altura. O que SOBRA não vira respiro no pé: o conteúdo desce e a sobra fica em
   cima, dentro da faixa colorida — ela cresce e continua englobando a palavra (pedido da autora, 19/09/2026 23h55). */
.recente { overflow: hidden; grid-template-rows: minmax(min-content, 1fr) auto auto auto auto; align-content: stretch; }
/* COR CHEIA, palavra centralizada em maiúsculas (desenho da autora, 20/09/2026 00h01 — o primeiro, do Claude, era uma
   tinta translúcida com ponto à esquerda: "não tá ruim, mas eu tinha pensado assim").
   A cor de cada estado é escurecida com --tinta na medida certa para o branco ler bem (≈ 4,5:1 ou mais): ciano, verde e
   âmbar puros com texto branco ficam abaixo de 2,5:1. Caixa alta pede espaçamento aberto (regra do sistema, Lote 5). */
.recente-estado {
  --faixa: var(--estado-continuar);
  display: flex; align-items: center; justify-content: center;
  margin: -10px -10px 0; padding: 8px var(--espaco-4);
  /* degradê VISÍVEL, como no desenho dela e na capa do cartão: cor cheia à esquerda → clara à direita.
     A cor cheia vai até passar do meio, para a palavra (centralizada) ficar sempre sobre o tom que dá leitura. */
  background: linear-gradient(90deg, var(--faixa) 0%, var(--faixa) 46%, color-mix(in srgb, var(--faixa) 46%, var(--text-on-destaque)) 100%);
  text-shadow: 0 1px 1px color-mix(in srgb, var(--tinta) 30%, transparent);
  color: var(--text-on-estado);
  font-size: 0.71875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; text-align: center;
}
.recente > .recente-estado { padding-inline: var(--espaco-4); }      /* vence o recuo genérico dos filhos do cartão */
.recente-estado--continuar { --faixa: var(--estado-continuar); }
.recente-estado--ajustar { --faixa: var(--estado-ajustar); }
.recente-estado--decidir { --faixa: var(--estado-decidir); }
.recente-estado--finalizado { --faixa: var(--estado-finalizado); }
.recente .recente-capa { margin-top: 10px; }

/* --- FOLHINHA GRANDE — a prévia com conteúdo de verdade (seções + linhas de texto) --------------- */
.folhinha--grande { left: 12%; top: 10%; width: 76%; min-height: 0; padding: 18px 18px 22px; gap: 4px; font-size: 11.5px;
  transform: rotate(3deg);
  transition: opacity var(--motion-default) var(--easing-standard), filter var(--motion-default) var(--easing-standard); }
.folhinha--grande[data-trocando] { opacity: 0; filter: blur(3px); }
.folhinha--grande .folhinha-titulo { font-size: 15px; margin-bottom: 6px; }
.folhinha--grande .folhinha-tipo { font-size: 9.5px; }
.folhinha-corpo { display: grid; gap: 4px; }
.folhinha-secao { margin-top: 9px; padding-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tinta) 56%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
.folhinha-corpo .folhinha-secao:first-child { margin-top: 2px; }
.folhinha-texto { line-height: 1.4; }

/* === RESPONSIVO — no fim, de propósito ============================================================
   Lição de 19/09: testar na largura do painel da autora (~860–1000px), não só em 1440 e 390. */

/* RECENTES: uma linha de quatro enquanto couber; quando aperta, 2x2 COMPACTO (capa pequena à esquerda) */
@media (max-width: 1100px) { .recentes { gap: 14px; } }
@media (max-width: 900px) {
  .recentes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* 20/09/2026 02h35, pedido da autora ("tamanho, espaco de respiro, espaco da faixa"): no 2x2 compacto a FAIXA tem altura fixa.
     Antes ela absorvia a sobra e a do AJUSTAR ficava mais alta que a do vizinho. Aqui a sobra, se houver, vai para o pe do texto. */
  .recente { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--espaco-4); padding: 10px; align-items: start; }
  .recente-estado { grid-column: 1 / -1; margin-bottom: 10px; align-self: stretch; }
  .recente .recente-capa { grid-row: 2 / -1; margin: 0; width: 104px; height: 104px; aspect-ratio: auto; align-self: start; }
  .recente > :not(.recente-capa) { padding-inline: 0; }
  .recente > .recente-estado { padding-inline: var(--espaco-4); }   /* a faixa mantém o seu respiro (o ponto encostava na borda) */
  .recente-tipo { padding-top: 4px; }
  .folhinha--capa { left: 14%; top: 20%; width: 72%; padding: 8px; font-size: 8px; }
  .folhinha--capa .folhinha-titulo { font-size: 9px; }
  .folhinha--capa .folhinha-barra:nth-of-type(n+3) { display: none; }
}
/* MODOS: lado a lado até 800px; só empilham em tela estreita */
@media (max-width: 1100px) {
  .modos { gap: 12px; }
  .modo-palco { height: 180px; }
  .modo-texto b { font-size: 1.125rem; }
  .folhinha { font-size: 9.5px; padding: 11px 11px 14px; }
  .folhinha-titulo { font-size: 11.5px; }
}
@media (max-width: 800px) {
  .modos { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .modo-palco { height: 220px; }
  .folhinha { font-size: 10.5px; padding: 14px 14px 18px; }
  .folhinha-titulo { font-size: 13px; }
}
@media (max-width: 720px) {
  .linha-fixa { grid-template-columns: minmax(0, 1fr) auto; }
  .linha-fixa span { grid-column: 1; grid-row: 2; }
  .recentes { grid-template-columns: minmax(0, 1fr); }
  .recente { grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--espaco-4); }
  .recente-capa { grid-row: 2 / -1; margin: 0; aspect-ratio: 1; }
  .recente { grid-template-columns: 104px minmax(0, 1fr); }
  .folhinha--capa .folhinha-barra:nth-of-type(n+4) { display: none; }
}