/* ==========================================================================
   Home — camada responsiva. Os estilos da Home vivem em styles.css (legado), quase todos com !important,
   então aqui também. Faixas de largura (convenção do projeto para telas com sidebar):
     <= 900px      celular e tablet em retrato: sidebar vira drawer (mobile-shell.css), coluna única;
     901–1800px    sidebar fixa, mas o desenho de 1920px não cabe: banner desce para o fluxo etc.;
     >= 1801px     desenho aprovado, sem alterações.
   O banner "Progresso do edital" é, no desktop, um card flutuante que sobe sobre o cabeçalho
   (margin negativa, translateX, colunas fixas); abaixo dos limites acima volta ao fluxo. Os cards de tempo e de
   questões pressupõem largura de desktop (colunas fixas de 165+240+134px).
   Carregado antes de mobile-shell.css, depois de styles.css.
   ========================================================================== */
@media (max-width: 900px) {
  .dashboard-grid > .edital-progress-banner,
  .edital-progress-banner {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    transform: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: "left right" "center center";
    gap: 14px 16px !important;
  }

  .edital-progress-left { grid-area: left; }
  .edital-progress-right { grid-area: right; transform: none !important; }
  .edital-progress-center { grid-area: center; }

  .edital-progress-right p,
  .edital-progress-right small {
    max-width: none !important;
  }

  .edital-progress-left small {
    white-space: normal !important;
  }

  .edital-progress-visual {
    grid-template-columns: auto minmax(0, 1fr) !important;
    justify-items: stretch !important;
    align-items: center;
    gap: 14px;
  }

  /* 34 segmentos com mínimo de 4px + 4px de gap somam ~268px, mais que o espaço ao lado do anel. */
  .edital-progress-segments {
    min-width: 0;
  }

  .segment-track {
    grid-template-columns: repeat(34, minmax(2px, 1fr)) !important;
    gap: 2px !important;
  }

  .home-stats .weekly-time-card,
  .home-stats .home-question-week-card {
    grid-column: 1 / -1;
    height: auto !important;
  }

  /* Duas colunas de ~300px espremiam a rosca e cortavam a legenda de "Foco por disciplina" (768px). */
  .dashboard-content {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Larguras intermediárias com sidebar (901–1800px). O desenho aprovado do banner (entre o título e as ações do
   cabeçalho, com deslocamentos por transform/margin negativa) só cabe a partir de ~1800px: o texto do subtítulo
   termina em x≈496 e o banner de 900px centralizado só começa depois disso a partir dessa largura. Abaixo dela ele
   cobre o subtítulo e o botão "Iniciar Sessão". Aqui ele desce para uma linha própria, com as 3 colunas de sempre,
   e o cabeçalho perde os deslocamentos que existiam para acomodá-lo. Acima de 1800px nada muda. */
@media (min-width: 901px) and (max-width: 1800px) {
  .dashboard-grid .home-head .page-context-title-lockup,
  .dashboard-grid .home-head .page-context-actions {
    transform: none !important;
  }

  .dashboard-grid > .edital-progress-banner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    grid-template-columns: 215px minmax(0, 1fr) 240px !important;
  }
}

/* Os cards de tempo e de questões pressupõem ~600px; em 2×2 abaixo de ~1280px não cabem e cortavam o conteúdo. */
@media (min-width: 901px) and (max-width: 1280px) {
  .home-stats .weekly-time-card,
  .home-stats .home-question-week-card {
    grid-column: 1 / -1;
  }
}

/* Em 4 colunas (>1500px) e em 2×2 (1281–1500px) o card de tempo recebe menos que os ~600px do desenho original:
   a coluna do gráfico cede espaço e o botão "Ver análise completa" (160px) passa a quebrar linha em vez de
   estourar a coluna lateral de 128px. */
@media (min-width: 1281px) and (max-width: 1800px) {
  .weekly-time-card-layout {
    grid-template-columns: 150px minmax(0, 1fr) 128px !important;
  }
}

/* .ghost.full tem min-width: 160px e nowrap (styles.css) numa coluna lateral de 128px; sem isto o botão vaza do card. */
@media (max-width: 1800px) {
  .weekly-time-aside .card-bottom-action.ghost.full {
    width: 100%;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 8px;
    white-space: normal;
    line-height: 1.2;
  }
}

/* "Foco por disciplina": a rosca de 280px + gap + legenda pede ~410px de card; com sidebar e 3 cards na linha
   (901–1500px) ele recebe ~300–380px e a legenda saía do card. Empilha como no mobile. */
@media (min-width: 901px) and (max-width: 1500px) {
  .focus-card .focus-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    justify-items: center;
  }

  .focus-card .focus-list {
    width: 100%;
  }
}

@media (max-width: 560px) {
  /* Meia largura (~174px): a etiqueta absoluta ("Revisão") disputava a linha com o título. Vai para baixo dele, e a
     margem que separava título de conteúdo (22px, pensada para o card largo) devolve o espaço. */
  .home-stats .next-session-card .card-title {
    padding-right: 0;
  }

  .home-stats .next-session-card > .session-tag {
    position: static;
    align-self: flex-start;
    margin-top: 6px;
  }

  .home-stats .next-session-card > strong {
    margin-top: 10px;
  }

  /* Altura fixa de 214px (desktop) cortava o subtítulo com a etiqueta ocupando uma linha; o grid mantém os dois
     cards da linha com a mesma altura. */
  .home-stats .next-session-card,
  .home-stats .review-today-card {
    height: auto !important;
    min-height: 214px !important;
  }

  .weekly-time-card-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Empilhado, o bloco lateral (média e melhor dia) vira uma tabela de duas linhas com o botão embaixo, em vez de
     quatro linhas soltas com um filete vertical. */
  .weekly-time-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 6px 12px;
    padding: 12px 0 0;
    border-top: 1px solid var(--card-border);
  }

  .weekly-time-aside::before {
    display: none;
  }

  .weekly-time-aside strong,
  .weekly-time-aside b {
    font-size: 16px;
    text-align: right;
  }

  .weekly-time-aside .card-bottom-action.ghost.full {
    grid-column: 1 / -1;
    margin-top: 6px;
  }

  .home-question-week-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}


/* ==========================================================================
   Home no celular: cards da metade de baixo mais compactos e "premium".
   Em 390px eles ocupavam 114–630px cada (rosca de 230px, três tiles de 178px empilhados, quatro tiles empilhados,
   anel de 148px, orb de 82px). Referência de composição: Desempenho mobile (rosca 116–124px ao lado da legenda,
   tiles em grade). Os números de dados nunca encolhem abaixo de uma leitura confortável; só o "ar" ao redor.
   ========================================================================== */
@media (max-width: 900px) {
  .dashboard-lower .neon-card {
    padding: 14px;
  }

  .dashboard-lower .card-title {
    font-size: 13px;
  }

  /* Plano de hoje: sem altura fixa herdada do desktop (sobrava um bloco vazio abaixo da sessão). */
  .today-plan-card {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Foco por disciplina: rosca ao lado da legenda, como no Desempenho. min-height: 300px vem do desenho de desktop
     e deixava ~100px vazios acima e abaixo da rosca de 116px. */
  .focus-card {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 14px;
  }

  .focus-card .focus-layout {
    flex: 0 0 auto;
  }

  .focus-card .focus-layout {
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
  }

  .focus-card .donut-chart {
    width: 116px;
  }

  .focus-card .donut-chart::after {
    width: 72px;
    height: 72px;
  }

  .focus-card .donut-chart span {
    font-size: 17px;
    transform: translateY(-5px);
  }

  .focus-card .donut-chart small {
    margin-top: 22px;
    font-size: 10px;
  }

  .focus-card .focus-list {
    gap: 9px;
  }

  .focus-card .focus-list div {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.25;
  }

  .focus-card .focus-list i {
    margin-top: 4px;
  }

  .focus-card .center-action {
    margin-top: 10px;
  }

  /* Revisões pendentes: três tiles lado a lado em vez de três blocos de 178px empilhados. */
  .review-pending-card .review-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .review-pending-card .review-summary {
    min-height: 0;
    padding: 10px;
  }

  .review-pending-card .review-summary strong {
    font-size: 13px;
  }

  .review-pending-card .review-summary span,
  .review-pending-card .review-summary small {
    font-size: 10.5px;
  }

  .review-pending-card .review-summary b {
    margin-top: 6px;
    font-size: 24px;
    line-height: 1.1;
  }

  .review-pending-card .review-summary-icon {
    right: 8px;
    bottom: 8px;
    width: 28px;
    height: 28px;
  }

  .review-pending-card .review-summary-icon svg {
    width: 100%;
    height: 100%;
  }

  /* Desempenho geral: taxa em destaque e os quatro números em grade 2×2. */
  .performance-card .performance-hero {
    padding: 12px;
  }

  .performance-card .performance-hero strong {
    font-size: 30px;
  }

  /* O gráfico de linha é absoluto à direita e cruzava o texto de comparação: texto e gráfico dividem a largura. */
  .performance-card .performance-hero {
    min-height: 0;
  }

  .performance-card .performance-hero small {
    max-width: 44%;
  }

  .performance-card .performance-hero .line-chart {
    width: 50%;
    right: 12px;
  }

  .performance-card .performance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
  }

  .performance-card .performance-grid div {
    padding: 10px 12px;
  }

  .performance-card .performance-grid span {
    font-size: 10.5px;
  }

  .performance-card .performance-grid strong {
    font-size: 18px;
  }

  /* Sequência de foco: anel à esquerda, mensagem à direita. */
  .streak-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
  }

  .streak-card .card-title {
    grid-column: 1 / -1;
  }

  .streak-card .streak-ring {
    width: 96px;
    height: 96px;
  }

  .streak-card .streak-ring strong {
    font-size: 26px;
  }

  .streak-card .streak-ring span {
    font-size: 11px;
  }

  .streak-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
  }

  /* Frase motivacional: orb pequeno ao lado do texto. */
  .motivation-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 2px 14px;
    min-height: 0 !important;
  }

  .motivation-card .motivation-orb {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
  }

  .motivation-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
  }

  .motivation-card small {
    font-size: 11px;
  }
}

/* Cards da Home: o hover levantava o cartão 2px (translateY) e o raio era 18px; nas demais abas os cards usam
   --radius-md e não se mexem. O hover mantém só o brilho da borda. */
.dashboard-grid .neon-card,
.dashboard-grid .edital-progress-banner {
  border-radius: var(--radius-md);
}

.dashboard-grid .neon-card:hover {
  transform: none;
}

/* Tooltip do "i" de Progresso do edital: abria para cima (fora do cartão, cortado pelo overflow) e sem quebra de linha.
   Agora abre abaixo do ícone, alinhado à esquerda, com largura contida, e também por foco de teclado. */
.dashboard-grid .progress-caption b::after {
  top: calc(100% + 8px);
  bottom: auto;
  left: -8px;
  width: 240px;
  max-width: 240px;
  white-space: normal;
  transform: translate(0, -4px);
}

.dashboard-grid .progress-caption b:hover::after,
.dashboard-grid .progress-caption b:focus-visible::after {
  opacity: 1;
  transform: translate(0, 0);
}

.dashboard-grid .progress-caption b { outline-offset: 2px; }

/* Conquistas: marcos obtidos (troféu) + próximo desafio com barra de progresso; drawer com o banco completo. */
.achievement-item i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.achievement-item.is-earned i { border-color: rgba(250, 204, 21, 0.5); color: #facc15; box-shadow: 0 0 22px rgba(250, 204, 21, 0.16); }
.achievement-item.is-next i { border-color: rgba(139, 92, 246, 0.5); color: var(--primary); box-shadow: none; }
html[data-theme="light"] .achievement-item.is-earned i { color: var(--warning); }
.achievement-bar { display: block; height: 5px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--progress-track-bg, rgba(30, 41, 59, 0.76)); }
.achievement-bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--magenta)); }

.achievement-groups { display: grid; gap: 16px; }
.achievement-group header h3 { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.achievement-group header p { margin: 2px 0 8px; color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.achievement-group ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.achievement-group li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 9px 11px; border: 1px solid var(--card-border); border-radius: var(--radius-md); }
.achievement-group li.is-unlocked { border-color: rgba(250, 204, 21, 0.4); background: rgba(250, 204, 21, 0.05); }
.achievement-group li.is-locked { opacity: 0.86; }
.achievement-group li strong { display: block; color: var(--ink); font-size: 13px; font-weight: 560; }
.achievement-group li span { display: block; margin-top: 1px; color: var(--text-secondary); font-size: 12px; }
.achievement-progress { display: grid; gap: 4px; min-width: 130px; max-width: 200px; }
.achievement-progress small { color: var(--muted); font-size: 11px; }
.achievement-track { height: 5px; }
.achievement-done { color: #facc15; font-size: 12px; font-weight: 600; }
html[data-theme="light"] .achievement-done { color: var(--warning); }

/* Frase do dia: tema em legenda pequena e o texto ao lado da esfera. */
.motivation-card { grid-template-areas: "orb theme" "orb text"; grid-template-rows: auto 1fr; align-content: center; }
.motivation-card .motivation-orb { grid-area: orb; }
.motivation-card .motivation-theme { grid-area: theme; align-self: end; letter-spacing: 0.04em; text-transform: uppercase; }
.motivation-card p { grid-area: text; align-self: start; line-height: 1.45; }
.dashboard-grid .edital-progress-left { position: relative; z-index: 6; }

/* Parte inferior da Home em desktop: cartões da esquerda e da coluna direita terminam na mesma linha. A coluna direita
   (sequência + conquistas + frase) é mais alta que as duas fileiras da esquerda quando há conquistas; a sequência de foco
   vira anel + mensagem lado a lado para encurtá-la, e a área principal estica as fileiras para acompanhar a altura. */
@media (min-width: 1101px) {
  .dashboard-lower { align-items: stretch; }
  .dashboard-main,
  .dashboard-content { align-content: stretch; }
  .dashboard-main { grid-template-rows: minmax(0, 1fr); }
  .dashboard-rail { grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }

  .dashboard-rail .streak-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
    min-height: 0;
  }

  .dashboard-rail .streak-card .card-title { grid-column: 1 / -1; }
  .dashboard-rail .streak-card .streak-ring { width: 104px; height: 104px; }
  .dashboard-rail .streak-card .streak-ring strong { font-size: 28px; }
  .dashboard-rail .streak-card .streak-ring span { font-size: 11px; }
  .dashboard-rail .streak-card p { margin: 0; font-size: 14.5px; line-height: 1.4; text-align: left; }

  .dashboard-rail .motivation-card { min-height: 0; }
}

/* Desempenho resumido: os quatro mini cards encostavam na borda inferior do bloco "Taxa de acertos". */
.performance-card .performance-grid { margin-top: 14px; }