/* ===== Estrutura e dimensões: padrão de painel profissional =====
   --largura precisa ser maior que a área útil das telas comuns, senão
   o max-width centraliza o conteúdo e abre um vão dos dois lados. Numa
   janela de 1920 sobram 1656 px depois do menu: com 1460 o conteúdo
   descolava 98 px da barra lateral. */
:root{ --menu:264px; --largura:1720px; }

.area{max-width:var(--largura)}
@media (min-width:900px){
  .area{padding-block:26px;padding-inline:28px}
  .menu{padding:22px 16px}
  .menu .marca{margin:4px 10px 22px}
  .menu-item{padding:11px 13px;font-size:14.5px}
  h1.titulo{font-size:28px}
}
@media (min-width:1400px){ .area{padding-inline:32px} }

/* cabeçalho de página */
.pagina{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.pagina .titulos{min-width:0;flex:1}
.pagina .acoes{display:flex;gap:9px;flex-wrap:wrap}

/* painel */
.painel{background:var(--superficie);border:1px solid var(--linha);border-radius:14px;
  padding:24px 26px;box-shadow:var(--sombra)}
.painel+.painel{margin-top:14px}
.painel-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.painel-topo h2{font-size:16px;font-weight:700}

/* grade semanal */
.grade{background:var(--superficie);border:1px solid var(--linha);border-radius:14px;
  overflow:hidden;margin-top:16px;box-shadow:var(--sombra)}
.grade-cab{display:none}
.grade-corpo{display:grid;grid-template-columns:1fr}
.cel{border-top:1px solid var(--linha);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.cel:first-child{border-top:0}
.cel.e-hoje{background:var(--marca-fraca)}
.cel-dia{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.cel-dia b{font-family:var(--display);font-size:13.5px}
.cel-dia span{font-size:11.5px;color:var(--suave);font-variant-numeric:tabular-nums}
.cel .livre{font-size:12px;color:var(--suave);opacity:.75}

@media (min-width:900px){
  .grade-cab{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
    background:var(--superficie2);border-bottom:1px solid var(--linha)}
  .grade-cab div{padding:14px 14px;border-right:1px solid var(--linha);min-width:0}
  .grade-cab div:last-child{border-right:0}
  .grade-cab b{display:block;font-family:var(--display);font-size:14.5px}
  .grade-cab span{font-size:11.5px;color:var(--suave);font-variant-numeric:tabular-nums}
  .grade-cab .e-hoje b{color:var(--marca)}
  .grade-corpo{grid-template-columns:repeat(7,minmax(0,1fr));min-height:200px}
  .cel{border-top:0;border-right:1px solid var(--linha);padding:10px}
  .cel:last-child{border-right:0}
  .cel-dia{display:none}
}

/* blocos dentro da grade */
.bloco{border-radius:9px;padding:9px 10px;color:#fff;font-size:11.5px;line-height:1.35;
  text-align:left;width:100%;background:#1D4ED8;transition:transform .12s,filter .12s}
.bloco:hover{filter:brightness(1.1);transform:translateY(-1px)}
.bloco[data-t="resumo"]{background:#60A5FA}
.bloco[data-t="revisao"]{background:#D97706}
.bloco[data-t="exercicio"]{background:#0D9488}
.bloco[data-atrasada="1"]{background:#DC2626}
.bloco.feito{background:#16A34A;opacity:.78}
.bloco b{font-family:var(--display);font-size:12.5px;line-height:1.3;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bloco .disc{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-size:10.5px;opacity:.78}
.bloco .pe{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:10.5px;opacity:.95}
.bloco .pe em{font-style:normal;background:rgba(255,255,255,.22);padding:1px 6px;border-radius:999px;
  font-variant-numeric:tabular-nums}

/* legenda e navegação */
.legenda{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;padding-top:18px;border-top:1px solid var(--linha)}
.legenda span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--suave)}
.legenda i{width:12px;height:12px;border-radius:4px;display:block}
.navega{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
.navega .meio{flex:1;text-align:center;font-family:var(--display);font-weight:700;font-size:14.5px;min-width:160px}
.dica-linha{margin-top:16px;font-size:13px;color:var(--suave);border-top:1px solid var(--linha);padding-top:16px}

/* ===== Faixa de resumo da semana ===== */
.faixa{display:flex;align-items:center;gap:16px 40px;flex-wrap:wrap}
.fx{display:flex;flex-direction:column;gap:4px;min-width:0}
.fx .rot{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--suave)}
.fx b{font-family:var(--display);font-size:23px;font-weight:700;line-height:1.1;
  display:flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fx .selo{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  background:var(--marca-fraca);color:var(--marca);padding:3px 9px;border-radius:999px}
.fx-nav{margin-left:auto;display:flex;align-items:center;gap:6px;
  background:var(--superficie2);border:1px solid var(--linha);border-radius:10px;padding:4px}
.btn-nav{min-width:38px;height:36px;border-radius:8px;border:0;background:transparent;color:var(--texto);
  font-size:16px;line-height:1;cursor:pointer;transition:background .12s}
.btn-nav.texto{font-family:var(--display);font-size:13px;font-weight:600;padding:0 11px}
.btn-nav:hover:not(:disabled){background:var(--marca-fraca);color:var(--marca)}
.btn-nav:disabled{opacity:.42;cursor:default}

/* ===== Cabeçalho dos dias ===== */
.grade-cab .dh{display:flex;flex-direction:column;gap:1px}
.grade-cab .carga{font-size:11px;color:var(--suave);font-variant-numeric:tabular-nums}
.grade-cab .e-hoje{position:relative;background:var(--marca-fraca)}
.grade-cab .e-hoje::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--marca)}
.grade-cab .e-hoje b{color:var(--marca)}
.grade-cab .e-hoje .carga{color:var(--marca);opacity:.85}

/* ===== Semana sem atividades ===== */
.vazio-semana{padding:52px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.vazio-semana h3{font-family:var(--display);font-size:17px}
.vazio-semana p{font-size:13.5px;color:var(--suave);max-width:380px}
.vazio-semana .btn{margin-top:8px}

/* ===== Aviso de atividades atrasadas ===== */
.aviso-atraso{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  padding:11px 14px;border-radius:11px;background:var(--atraso-fraco);
  border:1px solid color-mix(in srgb,var(--atraso) 32%,transparent)}
.aviso-atraso b{font-family:var(--display);font-size:13.5px;color:var(--atraso)}
.aviso-atraso span{font-size:12.5px;color:var(--suave)}
.aviso-atraso .btn{margin-left:auto}
.lista-atraso{display:flex;flex-direction:column;gap:10px;margin-top:14px;max-height:52vh;overflow:auto}
.li-atraso{display:flex;align-items:flex-start;gap:11px}
.li-atraso .dia{flex:0 0 54px;font-size:12px;color:var(--suave);padding-top:9px;
  font-variant-numeric:tabular-nums}
.li-atraso .bloco{flex:1}

/* ===== Tela Início ===== */
.colunas{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (min-width:1150px){
  .colunas{grid-template-columns:minmax(0,1fr) minmax(320px,400px)}
}

/* cartão herói: o que fazer agora */
.heroi{display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--superficie2),var(--superficie));
  border:1px solid var(--linha);border-left:4px solid var(--marca);
  border-radius:14px;padding:24px 26px;box-shadow:var(--sombra)}
.heroi.atrasado{border-left-color:var(--atraso)}
.heroi.vazio{border-left-color:var(--ok)}
.heroi-txt{flex:1;min-width:260px}
.heroi .rot{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--marca);font-weight:700;margin-bottom:8px}
.heroi.atrasado .rot{color:var(--atraso)}
.heroi h2{font-size:24px;line-height:1.2;margin-bottom:6px}
.heroi .sub{font-size:13.5px;margin:0}
.heroi-acao{display:flex;gap:10px;flex-wrap:wrap}

/* números */
.kpi{display:flex;flex-direction:column;gap:3px;min-width:0}
.kpi b{font-family:var(--display);font-size:23px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi span{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--suave)}
.kpi em{font-style:normal;font-size:11.5px;color:var(--suave);opacity:.8}

/* barra de progresso do plano */
.progresso{display:flex;align-items:center;gap:14px;margin-top:16px}
.barra{flex:1;height:12px;border-radius:999px;background:var(--superficie3);overflow:hidden}
.barra i{display:block;height:100%;border-radius:999px;background:var(--marca);
  transition:width .4s ease}
.progresso .pc{font-family:var(--display);font-size:20px;font-weight:700;
  font-variant-numeric:tabular-nums;min-width:52px;text-align:right}

/* mural */
.mural .aviso{padding:16px 0;border-top:1px solid var(--linha)}
.mural .aviso:first-of-type{border-top:0;padding-top:14px}
.mural .quando{font-size:11.5px;color:var(--suave);font-variant-numeric:tabular-nums}
.mural .aviso h3{font-size:15px;margin:4px 0 6px}
.mural .aviso p{font-size:13.5px;color:var(--suave);line-height:1.55;white-space:pre-line}
.mural .nada{margin-top:14px;font-size:13.5px;color:var(--suave);line-height:1.55}

/* tira dos próximos 7 dias */
.tira-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:16px}
.dia-mini{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  padding:11px 10px;border-radius:10px;border:1px solid var(--linha);
  background:var(--superficie2);color:var(--texto);transition:border-color .12s,background .12s}
.dia-mini:hover{border-color:var(--linha-forte)}
.dia-mini.e-hoje{border-color:var(--marca);background:var(--marca-fraca)}
.dia-mini b{font-family:var(--display);font-size:12.5px}
.dia-mini.e-hoje b{color:var(--marca)}
.dia-mini .num{font-size:11px;color:var(--suave);font-variant-numeric:tabular-nums}
.dia-mini .carga{font-size:11.5px;color:var(--suave);margin-top:2px}
@media (max-width:760px){
  .tira-semana{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.colunas + .painel{margin-top:16px}