/* ==========================================================================
   Prazo — app.css
   Componentes base. Mobile first: o CSS sem media query vale para 375 px;
   depois ajustamos em 768 px e 1024 px.
   Todo valor visual vem de tokens.css (var(--...)).
   ========================================================================== */

/* ---------- 1. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* O atributo hidden sempre esconde (senão regras de display, como as dos botões, o anulam) */
[hidden] { display: none !important; }

/* Partes do navegador que não desenhamos: seleção, cursor de texto e rolagem */
::selection { background: var(--sand-300); color: var(--ink); }
input, textarea { caret-color: var(--ink); }
* { scrollbar-color: var(--sand-300) transparent; scrollbar-width: thin; }

/* Foco visível para teclado: anel azul de 3 px (o `outline` transparente
   garante o contorno no modo de alto contraste do Windows) */
:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus);
}
:focus:not(:focus-visible) { outline: none; }

/* Texto só para leitor de tela */
.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Números alinhados (contadores, horas) */
.numeros { font-variant-numeric: tabular-nums; }

/* ---------- 2. Tipografia ---------- */

.display, .titulo-1, .titulo-2 {
  font-family: var(--font-display);
  font-weight: 500;
  text-wrap: balance;
}
.display  { font-size: var(--fs-display);  line-height: var(--lh-display); }
.titulo-1 { font-size: var(--fs-title-1);  line-height: var(--lh-title-1); }
.titulo-2 { font-size: var(--fs-title-2);  line-height: var(--lh-title-2); }
.titulo-3 { font-size: var(--fs-title-3);  line-height: var(--lh-title-3); font-weight: 600; }
.corpo-lg { font-size: var(--fs-body-lg);  line-height: var(--lh-body-lg); }
.corpo    { font-size: var(--fs-body);     line-height: var(--lh-body); }
.rotulo {
  font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.texto-2 { color: var(--ink-2); }
.texto-apagado { color: var(--muted); }

/* Link: laranja texto, sublinhado com respiro */
.link {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.link:hover { text-decoration-thickness: 2px; }

/* ---------- 3. Ícones e ponto da matéria ---------- */

.icone {
  width: var(--icon-size); height: var(--icon-size);
  flex: none;
}

/* Cada classe de cor só define --cor-materia; o ponto usa essa variável */
.cor-laranja  { --cor-materia: var(--subject-orange); }
.cor-ambar    { --cor-materia: var(--subject-amber); }
.cor-verde    { --cor-materia: var(--subject-green); }
.cor-azul     { --cor-materia: var(--subject-blue); }
.cor-roxo     { --cor-materia: var(--subject-purple); }
.cor-rosa     { --cor-materia: var(--subject-pink); }
.cor-turquesa { --cor-materia: var(--subject-teal); }
.cor-oliva    { --cor-materia: var(--subject-olive); }

.ponto {
  width: var(--dot-size); height: var(--dot-size); flex: none;
  border-radius: var(--radius-pill);
  background: var(--cor-materia, var(--muted));
}

/* ---------- 4. Botões ---------- */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: var(--btn-h); min-width: var(--tap-min);
  padding: 0 var(--space-xl);
  border: var(--border-strong) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

/* Primário: um só por tela */
.btn--primario { background: var(--ink); color: var(--surface); }
.btn--primario:hover { background: var(--ink-2); }

/* Secundário */
.btn--secundario { background: var(--sand-200); color: var(--ink); }
.btn--secundario:hover { background: var(--sand-300); }

/* Contorno */
.btn--contorno { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn--contorno:hover { background: var(--sand-100); }

/* Perigo (apagar): ícone + texto em vermelho */
.btn--perigo { background: var(--error-soft); color: var(--error); }
.btn--perigo:hover { border-color: var(--error); }

/* Link: só texto sublinhado, mas com alvo de 44 px */
.btn--link {
  min-height: var(--tap-min); padding: 0 var(--space-sm);
  background: none; color: var(--ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px;
}
.btn--link:hover { text-decoration-thickness: 2px; }

/* Pequeno: parece menor, mas o alvo de toque continua com 44 px (área extra invisível) */
.btn--pequeno { min-height: var(--btn-h-small); padding: 0 var(--space-lg); font-size: var(--fs-body); line-height: var(--lh-body); }
.btn--pequeno::after { content: ""; position: absolute; inset: calc(var(--hit-extra) * -1) 0; }

/* Desabilitado: areia com texto apagado (o texto de botão desabilitado não exige contraste) */
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--sand-200); color: var(--muted); border-color: transparent;
  cursor: not-allowed;
}

/* Botão de ícone: circular, 44 px */
.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-min); height: var(--tap-min); padding: 0;
  border: 0; border-radius: var(--radius-pill);
  background: var(--sand-200); color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease);
}
.btn-icone:hover { background: var(--sand-300); }
.btn-icone--escuro { background: var(--ink); color: var(--surface); }
.btn-icone--escuro:hover { background: var(--ink-2); }

/* Botão + flutuante "Nova tarefa": o único elemento com sombra */
.fab {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--fab-size); height: var(--fab-size); padding: 0;
  border: 0; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--ink);
  box-shadow: var(--shadow-fab);
  transition: transform var(--dur-fast) var(--ease);
}
.fab:hover { transform: translateY(-1px); }
.fab:active { transform: translateY(0); }
.fab:focus-visible { box-shadow: var(--focus), var(--shadow-fab); }
.fab .icone { width: var(--icon-lg); height: var(--icon-lg); }

/* ---------- 5. Chips, selos e tipo ---------- */

.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-sm);
  min-height: var(--btn-h-small); padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-pill);
  background: var(--sand-200); color: var(--ink);
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease);
}
.chip::after { content: ""; position: absolute; inset: calc(var(--hit-extra) * -1) 0; } /* alvo de 44 px */
.chip:hover { background: var(--sand-300); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.chip .icone { width: var(--icon-sm); height: var(--icon-sm); }

/* Selo de status: SEMPRE ícone + texto (a cor é só reforço) */
.selo {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 700;
  letter-spacing: 0.02em; white-space: nowrap;
}
.selo .icone { width: var(--icon-xs); height: var(--icon-xs); }
.selo--atrasada  { background: var(--error-soft);   color: var(--error); }
.selo--hoje      { background: var(--accent-soft);  color: var(--accent-text); }
.selo--proximos  { background: var(--info-soft);    color: var(--info); }
.selo--concluida { background: var(--success-soft); color: var(--success); }

/* Tipo da tarefa: Prova, Trabalho, Entrega, Leitura */
.tipo {
  display: inline-flex; align-items: center;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--sand-200); color: var(--ink-2);
  font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}

/* ---------- 6. Campos de formulário ---------- */

.campo { display: flex; flex-direction: column; gap: var(--space-sm); }

.campo__rotulo { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }

.campo__controle { position: relative; display: flex; align-items: center; }

.entrada {
  width: 100%; min-height: var(--btn-h);
  padding: 0 var(--space-lg);
  border: var(--border-strong) solid var(--field-border);
  border-radius: var(--radius-md);
  background: var(--sand-100); color: var(--ink);
  font-size: var(--fs-body-lg); line-height: var(--lh-body-lg);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.entrada::placeholder { color: var(--muted); opacity: 1; }
.entrada:hover { background: var(--sand-200); }
.entrada:focus { background: var(--surface); border-color: var(--info); }
.entrada:disabled { background: var(--sand-200); color: var(--muted); cursor: not-allowed; }

.entrada--area { min-height: var(--textarea-min); padding: var(--space-md) var(--space-lg); resize: vertical; }

/* Ícone dentro do campo (calendário, seta do select): não recebe clique */
.campo__icone {
  position: absolute; right: var(--space-lg); top: 50%; translate: 0 -50%;
  color: var(--ink-2); pointer-events: none;
}
.campo__controle .entrada--com-icone { padding-right: calc(var(--space-lg) + var(--icon-size) + var(--space-sm)); }

/* Select de matéria: o ponto colorido fica à esquerda do texto */
select.entrada--com-icone { appearance: none; -webkit-appearance: none; }
.entrada--select { appearance: none; -webkit-appearance: none; padding-left: calc(var(--space-lg) + var(--dot-size) + var(--space-sm)); }
.campo__ponto { position: absolute; left: var(--space-lg); pointer-events: none; }

.campo__ajuda { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }

/* Erro: borda + ícone + mensagem que diz o que fazer */
.entrada[aria-invalid="true"] { border-color: var(--error); background: var(--surface); }
.campo__erro {
  display: flex; align-items: flex-start; gap: var(--space-xs);
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; color: var(--error);
}
.campo__erro .icone { width: var(--icon-sm); height: var(--icon-sm); margin-top: 2px; }

/* ---------- 7. Caixa de conclusão (checkbox) ---------- */

/* O <label> tem 44 px (alvo de toque); a caixa desenhada tem 24 px */
.caixa {
  display: inline-grid; place-items: center; flex: none;
  width: var(--tap-min); height: var(--tap-min);
  cursor: pointer;
}
.caixa__input {
  appearance: none; -webkit-appearance: none;
  position: relative; margin: 0;
  width: var(--check-size); height: var(--check-size);
  border: 2px solid var(--ink-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.caixa__input:hover { border-color: var(--ink); background: var(--sand-100); }
.caixa__input:checked { background: var(--ink); border-color: var(--ink); }
/* O "visto" é desenhado com duas bordas giradas */
.caixa__input:checked::after {
  content: ""; position: absolute; left: 6px; top: 1px;
  width: 6px; height: 12px;
  border: solid var(--surface); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.caixa__input:disabled { border-color: var(--sand-300); background: var(--sand-100); cursor: not-allowed; }

/* ---------- 7b. Interruptor (switch) ---------- */

/* O <input> fica por cima de tudo, invisível, para receber foco e toque;
   o trilho e a bolinha são só desenho. */
.interruptor {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-md);
  min-height: var(--tap-min); cursor: pointer;
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.interruptor__input { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.interruptor__trilho {
  position: relative; flex: none;
  width: var(--switch-w); height: var(--switch-h);
  border: var(--border-strong) solid var(--field-border); border-radius: var(--radius-pill);
  background: var(--sand-100);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.interruptor__trilho::after {
  content: ""; position: absolute; top: 50%; left: var(--space-xs);
  width: var(--switch-thumb); height: var(--switch-thumb); translate: 0 -50%;
  border-radius: var(--radius-pill); background: var(--ink-2);
  transition: left var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.interruptor__input:checked + .interruptor__trilho { background: var(--ink); border-color: var(--ink); }
.interruptor__input:checked + .interruptor__trilho::after { left: calc(100% - var(--switch-thumb) - var(--space-xs)); background: var(--surface); }
.interruptor__input:focus-visible + .interruptor__trilho { box-shadow: var(--focus); }
.interruptor__input:focus-visible { box-shadow: none; }

/* ---------- 8. Cartão de tarefa (componente principal) ---------- */

.cartao-tarefa {
  position: relative; /* o botão do título se estende por cima do cartão todo */
  display: flex; align-items: stretch; gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-xs);
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease);
}
.cartao-tarefa:hover { border-color: var(--sand-300); }

/* A caixa fica acima da área clicável do cartão */
.cartao-tarefa .caixa { position: relative; z-index: 1; align-self: flex-start; }

/* Faixa lateral de urgência: barra vertical arredondada (cor + posição; o texto do selo diz o status) */
.cartao-tarefa__faixa {
  flex: none; width: var(--urgency-bar-w);
  margin: var(--space-sm) 0;
  border-radius: var(--radius-pill);
  background: var(--sand-300);
}
.cartao-tarefa--atrasada .cartao-tarefa__faixa { background: var(--error); }
.cartao-tarefa--hoje .cartao-tarefa__faixa     { background: var(--accent); }
.cartao-tarefa--proximos .cartao-tarefa__faixa { background: var(--info); }
.cartao-tarefa--concluida .cartao-tarefa__faixa { background: var(--sand-300); }

.cartao-tarefa__corpo {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs);
  padding: var(--space-xs) 0;
}

.cartao-tarefa__titulo { font-size: var(--fs-title-3); line-height: var(--lh-title-3); font-weight: 600; overflow-wrap: anywhere; }

/* Tocar no cartão abre a edição: o botão do título cobre o cartão inteiro */
.cartao-tarefa__abrir {
  padding: 0; border: 0; background: none;
  text-align: left; font: inherit; color: inherit;
}
.cartao-tarefa__abrir::after {
  content: ""; position: absolute; inset: -1px; /* cobre também a borda */
  border-radius: var(--radius-lg);
}
.cartao-tarefa__abrir:focus-visible { box-shadow: none; }
.cartao-tarefa__abrir:focus-visible::after { box-shadow: var(--focus); }

.cartao-tarefa__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.cartao-tarefa__prazo { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.cartao-tarefa__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); min-width: 0;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2);
}

/* Tarefa concluída: título riscado e apagado */
.cartao-tarefa--concluida .cartao-tarefa__titulo { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* ---------- 9. Abas com contador (Hoje · Próximos 7 dias · Atrasadas) ---------- */

/* A lista rola na horizontal se não couber (tela estreita ou texto ampliado) */
.abas {
  display: flex; gap: var(--space-md);
  padding: var(--space-xs) var(--space-xs) 0; margin: 0 calc(var(--space-xs) * -1);
  overflow-x: auto; scrollbar-width: none;
  border-bottom: var(--border) solid var(--line);
}
.abas::-webkit-scrollbar { display: none; }

.aba {
  display: inline-flex; align-items: center; gap: var(--space-sm); flex: none;
  min-height: var(--tap-min); padding: 0 var(--space-xs);
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; color: var(--ink-2);
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; /* 14 px: as 3 abas cabem em 375 px */
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.aba:hover { color: var(--ink); }
.aba[aria-selected="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.aba:focus-visible { box-shadow: inset var(--focus); border-radius: var(--radius-sm); }

.contador {
  min-width: var(--counter-min); padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--sand-200); color: var(--ink-2);
  font-size: var(--fs-label); line-height: var(--lh-body); font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
.contador--atrasadas { background: var(--error-soft); color: var(--error); }

/* ---------- 10. Barra inferior: Início · Matérias · Conta ---------- */

.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: space-around;
  min-height: var(--bar-h);
  background: var(--surface); border-top: var(--border) solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-inferior--na-vitrine { position: static; padding-bottom: 0; border: var(--border) solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }

.barra-inferior__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: var(--bar-h); padding: var(--space-sm);
  color: var(--ink-2); text-decoration: none;
  font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600;
  transition: color var(--dur-fast) var(--ease);
}
.barra-inferior__item:hover { color: var(--ink); }
.barra-inferior__item[aria-current="page"] { color: var(--ink); font-weight: 700; }
.barra-inferior__item .icone { width: var(--icon-lg); height: var(--icon-lg); }
.barra-inferior__item:focus-visible { box-shadow: inset var(--focus); }

/* ---------- 11. Feedback: toast, mensagens, carregando, vazio ---------- */

/* Região onde os toasts aparecem (leitor de tela anuncia o que entra aqui) */
.toasts {
  position: fixed; left: var(--space-lg); right: var(--space-lg);
  bottom: calc(var(--bar-h) + var(--fab-size) + var(--space-lg) * 2 + env(safe-area-inset-bottom)); z-index: 20;
  display: flex; flex-direction: column; gap: var(--space-sm);
  pointer-events: none;
}
.toasts > * { pointer-events: auto; }

.toast {
  display: flex; align-items: center; gap: var(--space-md);
  min-height: var(--btn-h); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg);
  background: var(--ink); color: var(--surface);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-lg); line-height: var(--lh-body-lg);
  animation: toast-entra var(--dur-slow) var(--ease);
}
.toast__texto { flex: 1; }
.toast__acao {
  position: relative; flex: none;
  min-height: var(--btn-h-small); padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-pill);
  background: var(--ink-2); color: var(--surface);
  font-size: var(--fs-body); font-weight: 700;
  transition: background-color var(--dur-fast) var(--ease);
}
.toast__acao::after { content: ""; position: absolute; inset: calc(var(--hit-extra) * -1) 0; }
.toast__acao:hover { background: var(--muted); }
.toast--saindo { animation: toast-sai var(--dur) var(--ease) forwards; }

@keyframes toast-entra { from { opacity: 0; transform: translateY(var(--space-sm)); } }
@keyframes toast-sai { to { opacity: 0; transform: translateY(var(--space-sm)); } }

/* Mensagem em faixa: sucesso, aviso, erro */
.mensagem {
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-md) var(--space-sm) var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
}
.mensagem__icone { margin-top: 2px; }
.mensagem__corpo { flex: 1; min-width: 0; }
.mensagem__titulo { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; color: var(--ink); }
.mensagem__ajuda { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.mensagem__fechar {
  display: inline-grid; place-items: center; flex: none;
  width: var(--tap-min); height: var(--tap-min); margin: -10px 0;
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-2);
}
.mensagem__fechar:hover { background: var(--sand-200); }
.mensagem--sucesso { background: var(--success-soft); } .mensagem--sucesso .mensagem__icone { color: var(--success); }
.mensagem--aviso   { background: var(--warn-soft); }    .mensagem--aviso .mensagem__icone   { color: var(--warn); }
.mensagem--erro    { background: var(--error-soft); }   .mensagem--erro .mensagem__icone    { color: var(--error); }

/* Carregando: spinner e esqueleto (areia, sem brilho; só pulsa de leve) */
.spinner {
  width: var(--spinner-size); height: var(--spinner-size);
  border: 3px solid var(--sand-300); border-top-color: var(--ink);
  border-radius: var(--radius-pill);
  animation: gira 800ms linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.esqueleto { display: flex; flex-direction: column; gap: var(--space-sm); }
.esqueleto__barra { height: 14px; border-radius: var(--radius-pill); background: var(--sand-200); animation: pulsa 1.4s var(--ease) infinite alternate; }
.esqueleto__barra--curta { width: 40%; }
.esqueleto__barra--media { width: 70%; }
.esqueleto__barra--titulo { height: 18px; width: 85%; }
@keyframes pulsa { from { opacity: 1; } to { opacity: 0.45; } }

/* Estado vazio */
.vazio {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
  padding: var(--space-2xl) var(--space-xl);
  border: var(--border) solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); text-align: center;
}
.vazio__icone { width: var(--icon-xl); height: var(--icon-xl); color: var(--ink-2); }
.vazio__texto { color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 32ch; text-wrap: balance; }

/* ---------- 12. Avatar ---------- */

.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: var(--avatar-size); height: var(--avatar-size); border-radius: var(--radius-pill);
  background: var(--taupe); color: var(--surface);
  font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.04em;
}

/* O cartão se adapta à largura da LISTA onde está (container query), não da tela:
   assim ele funciona igual numa coluna estreita de desktop e no celular. */
.lista-cartoes > * { container-type: inline-size; }

@container (min-width: 32rem) {
  .cartao-tarefa { padding: var(--space-lg) var(--space-xl) var(--space-lg) var(--space-sm); gap: var(--space-md); }

  /* Cartão largo: selo e prazo vão para a direita, como no design system */
  .cartao-tarefa__corpo {
    display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-lg); row-gap: var(--space-xs);
    grid-template-areas: "titulo status" "meta status"; align-items: start;
  }
  .cartao-tarefa__titulo { grid-area: titulo; }
  .cartao-tarefa__meta   { grid-area: meta; }
  .cartao-tarefa__status { grid-area: status; flex-direction: column; align-items: flex-end; gap: var(--space-xs); }
}

/* ---------- 12b. Tela Início ---------- */

.app {
  max-width: 40rem; margin: 0 auto;
  /* espaço embaixo para a lista não ficar escondida atrás do botão + e da barra */
  padding: var(--space-xl) var(--space-lg) calc(var(--bar-h) + var(--fab-size) + var(--space-2xl) + env(safe-area-inset-bottom));
}

.topo { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.topo__data { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }

/* "1 atrasada" na saudação: botão que leva à aba Atrasadas (erro 5,99:1 sobre o papel) */
.saudacao__atrasadas {
  padding: 0; border: 0; background: none;
  font: inherit; color: var(--error);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em;
}
.saudacao__atrasadas:hover { text-decoration-thickness: 3px; }

.painel { margin-top: var(--space-lg); }

/* Grupos dentro da aba Hoje: "Atrasadas" no topo, depois "Hoje" */
.grupo-lista + .grupo-lista { margin-top: var(--space-xl); }
.grupo-lista__titulo {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-family: var(--font-ui); font-size: var(--fs-title-3); line-height: var(--lh-title-3); font-weight: 700;
}
.grupo-lista__titulo--atrasadas { color: var(--error); }
.grupo-lista__vazio { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.painel:focus-visible { border-radius: var(--radius-lg); }
.lista-cartoes { display: flex; flex-direction: column; gap: var(--space-md); }

/* Botão + fixo no canto, acima da barra inferior */
.fab--fixo {
  position: fixed; z-index: 11;
  right: var(--space-lg); bottom: calc(var(--bar-h) + var(--space-lg) + env(safe-area-inset-bottom));
}

.atalhos { margin-top: var(--space-xl); }
.aviso-demo { margin-top: var(--space-md); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }

/* Botão dentro de mensagem (ex.: "Tentar de novo") */
.mensagem__acao { margin-top: var(--space-sm); }

/* ---------- 13. Telas maiores ---------- */

@media (min-width: 768px) {
  .com-barra { padding-left: var(--rail-w); } /* <body class="com-barra">: abre espaço para a coluna */

  /* Navegação em coluna à esquerda (só na tela Início, não na vitrine) */
  .barra-inferior:not(.barra-inferior--na-vitrine) {
    top: 0; right: auto; bottom: 0; width: var(--rail-w); min-height: 0;
    flex-direction: column; justify-content: flex-start; gap: var(--space-sm);
    padding: var(--space-xl) 0;
    border-top: 0; border-right: var(--border) solid var(--line);
  }
  .barra-inferior:not(.barra-inferior--na-vitrine) .barra-inferior__item { flex: none; }

  .app { padding: var(--space-3xl) var(--space-2xl) var(--space-4xl); }
  .fab--fixo { right: var(--space-xl); bottom: var(--space-xl); }
  .toasts { left: calc(var(--rail-w) + var(--space-xl)); right: auto; bottom: var(--space-xl); width: 24rem; max-width: calc(100% - var(--rail-w) - var(--space-xl) * 2); }
}

/* ---------- 14. Preferência por menos movimento ---------- */

/* Sem deslocamento nem pulso. O toast continua aparecendo e sumindo, só que com
   fade curto; o spinner continua girando (é ele que diz "carregando"), mais devagar. */
@media (prefers-reduced-motion: reduce) {
  .toast { animation-name: toast-fade-entra; animation-duration: var(--dur-fast); }
  .toast--saindo { animation-name: toast-fade-sai; animation-duration: var(--dur-fast); }
  .fab:hover { transform: none; }
  .spinner { animation-duration: 2.4s; }
  .esqueleto__barra { animation: none; }
}
@keyframes toast-fade-entra { from { opacity: 0; } }
@keyframes toast-fade-sai { to { opacity: 0; } }

/* ---------- 15. Extras ---------- */

/* Link "Pular para o conteúdo": só aparece quando recebe foco pelo teclado */
.pular {
  position: absolute; left: var(--space-lg); top: var(--space-sm); z-index: 30;
  padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-pill);
  background: var(--ink); color: var(--surface); font-weight: 600; text-decoration: none;
  translate: 0 -200%;
}
.pular:focus-visible { translate: 0 0; }

/* Cartão de carregamento (esqueleto): mesma forma do cartão de tarefa */
.esqueleto--corpo { flex: 1; padding: var(--space-md) 0; }
.esqueleto__bloco { width: var(--check-size); height: var(--check-size); border-radius: var(--radius-sm); background: var(--sand-200); }

/* Marcou a caixa: o título já aparece riscado, antes mesmo do status mudar */
.cartao-tarefa:has(.caixa__input:checked) .cartao-tarefa__titulo { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }


/* ==========================================================================
   16. Etapa d: telas de conta, folha (Nova/editar), matérias
   ========================================================================== */

/* ---------- Telas de entrar e cadastrar ---------- */

.pagina-conta { max-width: 26rem; margin: 0 auto; padding: var(--space-3xl) var(--space-lg) var(--space-4xl); }
.pagina-conta__topo { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.marca { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-title-1); line-height: var(--lh-title-1); }
.formulario { display: flex; flex-direction: column; gap: var(--space-xl); }
.pagina-conta__rodape { margin-top: var(--space-xl); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.pagina-conta .mensagem { margin-bottom: var(--space-xl); }

/* Botão dentro do campo (mostrar/ocultar senha): alvo de 44 px */
.campo__acao {
  position: absolute; right: var(--space-xs); top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min);
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-2);
}
.campo__acao:hover { background: var(--sand-200); }
.entrada--com-acao { padding-right: calc(var(--tap-min) + var(--space-xs)); }

/* Erro dentro da mensagem em faixa (sem botão de fechar) */
.mensagem--sem-fechar { padding-right: var(--space-lg); }

/* ---------- Folha: bottom sheet no celular, painel lateral no desktop ---------- */

.folha {
  position: fixed; inset: auto 0 0 0; margin: 0;
  width: 100%; max-width: none; max-height: var(--sheet-max-h);
  padding: 0; border: 0; overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface); color: var(--ink);
}
.folha[open] { display: flex; flex-direction: column; animation: folha-sobe var(--dur-slow) var(--ease); }
.folha::backdrop { background: var(--scrim); }
@keyframes folha-sobe { from { transform: translateY(100%); } }
@keyframes folha-entra { from { transform: translateX(100%); } }
@keyframes folha-fade { from { opacity: 0; } }

/* Enquanto a folha está aberta a página de trás não rola */
html.folha-aberta { overflow: hidden; }

.folha__form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.folha__topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex: none;
  padding: var(--space-lg) var(--space-lg) var(--space-sm) var(--space-xl);
}
.folha__corpo {
  display: flex; flex-direction: column; gap: var(--space-xl); flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--space-sm) var(--space-xl) var(--space-xl);
}
.folha__rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); flex: none;
  padding: var(--space-lg) var(--space-xl) calc(var(--space-lg) + env(safe-area-inset-bottom));
  border-top: var(--border) solid var(--line); background: var(--surface);
}
/* Celular: "Salvar" ocupa a linha de cima; "Apagar" à esquerda e "Cancelar" à direita embaixo */
.folha__rodape .btn--primario { order: -1; flex: 1 1 100%; }
.folha__rodape .btn--perigo { margin-right: auto; }
.folha__rodape .btn--secundario { margin-left: auto; }

/* Confirmação de apagar (troca o conteúdo da folha, sem abrir outra janela) */
.folha__confirmar { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-sm) var(--space-xl) var(--space-xl); }
.folha__confirmar-texto { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.folha__confirmar-acoes { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.folha__confirmar-acoes .btn { flex: 1 1 auto; }

/* Data e hora lado a lado; se faltar espaço (celular pequeno, texto ampliado) uma embaixo da outra */
.campo-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--space-md); }

/* Escolha da cor da matéria: 8 opções, cada uma com ponto E nome */
.grupo-campo { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.grupo-campo > legend { padding: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; margin-bottom: var(--space-sm); }
.opcoes-cor { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
.opcao-cor {
  position: relative; display: flex; align-items: center; gap: var(--space-sm);
  min-height: var(--tap-min); padding: 0 var(--space-lg);
  border-radius: var(--radius-pill); background: var(--sand-200); color: var(--ink);
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.opcao-cor:hover { background: var(--sand-300); }
.opcao-cor input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcao-cor:has(input:checked) { background: var(--ink); color: var(--surface); }
.opcao-cor:has(input:focus-visible) { box-shadow: var(--focus); }
.opcao-cor input:focus-visible { box-shadow: none; }

/* ---------- Lista de matérias ---------- */

.topo--linha { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.lista-materias { display: flex; flex-direction: column; gap: var(--space-md); }
.linha-materia {
  display: flex; align-items: center; gap: var(--space-md); width: 100%; min-height: calc(var(--tap-min) + var(--space-xl));
  padding: var(--space-md) var(--space-lg);
  border: var(--border) solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  color: var(--ink); text-align: left;
  transition: border-color var(--dur-fast) var(--ease);
}
.linha-materia:hover { border-color: var(--sand-300); }
.linha-materia__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.linha-materia__nome { font-size: var(--fs-title-3); line-height: var(--lh-title-3); font-weight: 600; overflow-wrap: anywhere; }
.linha-materia__qtd { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.linha-materia .icone { color: var(--ink-2); }

/* ---------- Conta ---------- */

.perfil { display: flex; align-items: center; gap: var(--space-md); }
.perfil__email { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); overflow-wrap: anywhere; }
.secao-conta { margin-top: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-md); }
.secao-conta__titulo { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-title-2); line-height: var(--lh-title-2); }

/* ---------- Telas maiores ---------- */

@media (min-width: 768px) {
  /* Painel lateral à direita */
  .folha {
    inset: 0 0 0 auto; width: var(--sheet-w); max-height: none; height: 100%;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
  .folha[open] { animation-name: folha-entra; }
  .folha__rodape .btn--primario { order: 0; flex: 0 0 auto; }
  .pagina-conta { padding-top: var(--space-4xl); }
}

@media (prefers-reduced-motion: reduce) {
  .folha[open] { animation-name: folha-fade; animation-duration: var(--dur-fast); }
}

/* Texto de apoio logo abaixo do título nas telas de entrar e cadastrar */
.pagina-conta h1 + p { margin-top: var(--space-sm); margin-bottom: var(--space-xl); }

/* Botão "Experimentar sem cadastro" (modo demonstração da feira) */
.demo { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: var(--border) solid var(--line); display: flex; flex-direction: column; gap: var(--space-sm); }