/* SEMANA COM VIDA: ícones, cor por matéria, progresso por dia e movimento leve (semana-vida.js) */

/* ---- fichas do topo ---- */
.sm-chip em{display:flex;align-items:center;gap:6px}
.sv-ic{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;
  background:var(--marca-fraca);color:var(--marca)}
.sv-ic svg{width:14px;height:14px}
.sm-chip:nth-child(2) .sv-ic{background:#EDE9FE;color:#7C3AED}
.sm-chip:nth-child(3) .sv-ic{background:#FEF3C7;color:#B45309}
.sm-chip:nth-child(4) .sv-ic{background:#DCFCE7;color:#15803D}
.sm-chip{transition:transform .18s ease,box-shadow .18s ease}
.sm-chip:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.10)}
.sm-tr i{background:linear-gradient(90deg,#22C55E,#16A34A)}

/* ---- faixa de hoje ---- */
.sv-hoje{display:flex;align-items:center;gap:14px;margin:16px 0 12px;padding:14px 16px;border-radius:16px;
  color:#fff;background:linear-gradient(120deg,#2563EB,#7C3AED);box-shadow:0 8px 22px rgba(37,99,235,.25);
  animation:sv-sobe .5s ease both}
.sv-hoje.sv-pronto{background:linear-gradient(120deg,#16A34A,#0D9488);box-shadow:0 8px 22px rgba(22,163,74,.25)}
.sv-hoje.sv-livre{background:linear-gradient(120deg,#0EA5E9,#6366F1)}
.sv-hoje-ic{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:rgba(255,255,255,.2)}
.sv-hoje-ic svg{width:24px;height:24px}
.sv-hoje-tx{flex:1;min-width:0;font-size:14px;line-height:1.4}
.sv-hoje-tx b{display:block;font-family:var(--display);font-size:16px;margin-bottom:1px}
.sv-hoje-pct{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.sv-hoje-pct i{display:block;width:90px;height:8px;border-radius:999px;background:rgba(255,255,255,.28);overflow:hidden;position:relative}
.sv-hoje-pct i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--p) * 1%);border-radius:999px;background:#fff;
  animation:sv-enche .9s .2s ease both}
.sv-hoje-pct em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}

/* ---- dias ---- */
.sv-barra{display:block;height:4px;border-radius:999px;background:var(--superficie3);overflow:hidden;margin-top:6px}
.sv-barra s{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22C55E,#16A34A);
  animation:sv-enche .8s ease both}
.cel-dia .sv-barra{flex:1;margin:0 0 0 6px;align-self:center}
.grade-cab .e-hoje b::after{content:"";display:inline-block;width:8px;height:8px;margin-left:7px;border-radius:50%;
  background:#EF4444;vertical-align:middle;animation:sv-pulso 1.8s ease-out infinite}
.grade-cab .sv-completo b::after{content:"✓";width:auto;height:auto;margin-left:6px;background:none;color:#16A34A;
  animation:none;font-size:13px}
.cel .livre{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 6px;
  border:1.5px dashed var(--linha);border-radius:12px;text-align:center}
.sv-cafe{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--superficie2);color:var(--suave)}
.sv-cafe svg{width:18px;height:18px}

/* ---- cartão de atividade ---- */
.bloco{display:flex;flex-direction:column;align-items:stretch;gap:5px;
  animation:sv-sobe .45s ease both;animation-delay:calc(var(--i,0) * 55ms + var(--j,0) * 70ms);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.bloco:hover{transform:translateY(-3px) scale(1.01)}
.bl-topo{display:flex;align-items:center;gap:7px}
.bl-topo .pe{flex:1;display:flex;align-items:center;justify-content:space-between;gap:4px;margin:0;min-width:0;font-size:11px}
.bl-ico{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:9px;
  background:color-mix(in srgb,var(--cor) 14%,transparent);color:var(--cor);transition:transform .2s ease}
.bl-ico svg{width:15px;height:15px}
.bloco:hover .bl-ico{transform:rotate(-8deg) scale(1.1)}
.bl-ponto{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;
  background:hsl(var(--mt) 70% 52%)}
.bloco.feito .bl-ico{animation:sv-pop .5s ease both;background:#DCFCE7;color:#16A34A}
.bloco[data-atrasada="1"] .bl-ico{background:#FEE2E2;color:#DC2626}
.bloco[data-atrasada="1"]{box-shadow:0 0 0 1px rgba(220,38,38,.18)}
:root[data-tema="escuro"] .bloco.feito .bl-ico{background:rgba(22,163,74,.2)}
:root[data-tema="escuro"] .bloco[data-atrasada="1"] .bl-ico{background:rgba(220,38,38,.2)}

@keyframes sv-sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sv-enche{from{width:0}}
@keyframes sv-pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes sv-pulso{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}100%{box-shadow:0 0 0 9px rgba(239,68,68,0)}}

@media (prefers-reduced-motion:reduce){
  .sv-hoje,.bloco,.sv-barra s,.sv-hoje-pct i::after,.bloco.feito .bl-ico,.grade-cab .e-hoje b::after{animation:none}
  .sm-chip,.bloco,.bl-ico{transition:none}
}
@media (max-width:560px){
  .sv-hoje{flex-wrap:wrap}
  .sv-hoje-pct{width:100%}
  .sv-hoje-pct i{flex:1;width:auto}
}
.bloco .pe em{white-space:nowrap;font-size:10px;padding:1px 6px;flex:0 0 auto}
.bloco .pe{overflow:visible;flex-wrap:wrap;row-gap:2px}
.bloco .pe em{margin-left:auto}

/* ---- mapa da semana (modelo 3): colunas por dia, blocos do mesmo tamanho, cor só como tinta leve ---- */
@media (min-width:821px){
  .grade{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .grade-cab{gap:6px;background:none;margin-bottom:8px;border:0}
  .grade-cab .dh{padding:6px 6px 8px;border:0;background:none;text-align:center;align-items:center;gap:1px}
  .grade-cab .dh b{font-size:16px}
  .grade-cab .dh .num{font-size:12.5px;color:var(--suave)}
  .grade-cab .dh .carga{font-size:12px;font-weight:700;color:var(--texto)}
  .grade-cab .dh .sv-barra{align-self:stretch}
  .grade-cab .dh.e-hoje{background:none}
  .grade-cab .dh.e-hoje::before{display:none}
  .grade-cab .dh.e-hoje b{color:var(--roxo,#7C3AED)}
  .grade-cab .dh.e-hoje .carga{color:var(--roxo,#7C3AED)}
  .grade-corpo{gap:6px}
  .grade-corpo .cel{border:1px solid var(--linha);border-radius:16px;background:var(--superficie);padding:5px;gap:6px}
  .grade-corpo .cel.e-hoje{border-color:#7C3AED;box-shadow:0 0 0 3px rgba(124,58,237,.14);
    background:color-mix(in srgb,#7C3AED 5%,var(--superficie))}
}
/* todos os blocos com a mesma altura, para a semana ler como um mapa */
.grade-corpo .bloco{height:114px;min-height:114px;overflow:hidden;
  background:color-mix(in srgb,var(--cor) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--cor) 26%,transparent);border-left-width:3px;
  box-shadow:none}
.grade-corpo .bloco:hover{background:color-mix(in srgb,var(--cor) 10%,transparent);box-shadow:0 8px 18px color-mix(in srgb,var(--cor) 25%,transparent)}
.grade-corpo .bloco .bl-ico{background:color-mix(in srgb,var(--cor) 16%,transparent)}
.grade-corpo .bloco.feito{background:color-mix(in srgb,#16A34A 8%,transparent)}
.grade-corpo .bloco[data-atrasada="1"]{background:color-mix(in srgb,#DC2626 8%,transparent)}
.grade-corpo .bloco .assunto{-webkit-line-clamp:2}
.grade-corpo .bloco b{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.grade-corpo .bloco .assunto{-webkit-line-clamp:1}
.grade-corpo .bloco b{-webkit-line-clamp:2}
@media (min-width:821px){.grade-corpo .bloco{padding:8px 8px 8px 10px;gap:4px}}
/* a semana usa a largura toda da tela */
.area:has(.grade){max-width:1680px}
@media (min-width:821px){.grade-corpo .cel{padding:4px}.grade-corpo .bloco{height:108px;min-height:108px}}