/* Layout: lateral fixa com a assinatura Nexum e a rotina em grupos (Planejar, Produzir, Vender e medir);
   área principal larga. O Início abre com a "linha da semana" em chevrons dobrados como o símbolo da marca.
   A cor de destaque acompanha a marca escolhida (--marca), o resto é o azul-noite da Nexum. */
:root {
  --abismo: #06101d;
  --casco: #0b192b;
  --chapa: #11233a;
  --chapa-2: #162b46;
  --linha: #1c3150;
  --linha-forte: #2a4a72;
  --texto: #e7f0fb;
  --sutil: #8aa2c1;
  --azul: #2679c0;
  --ceu: #43c1f1;
  --ciano: #5ef4fd;
  --marca: #43c1f1;
  --marca-tinta: #04192b;
  --marca-suave: rgba(67, 193, 241, .14);
  --topo: #9aa5ff;
  --meio: #ffc35a;
  --fundo-funil: #ff7a85;
  --ok: #3ddc97;
  --perigo: #ff6b78;
  --raio: 16px;
  --raio-p: 10px;
  --f-titulo: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --lateral: 252px;
  color-scheme: dark;

  /* nomes antigos usados nos módulos: apontam para os novos */
  --fundo: var(--abismo);
  --painel: var(--casco);
  --painel-2: var(--chapa);
  --borda: var(--linha);
  --acento: var(--marca);
  --acento-escuro: var(--azul);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--abismo); }
body {
  margin: 0; min-height: 100vh; color: var(--texto); font: 15px/1.55 var(--f-texto);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(38, 121, 192, .16), transparent 60%),
    var(--abismo);
  display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr);
}
h1, h2, h3, h4 { font-family: var(--f-titulo); letter-spacing: -.015em; text-wrap: balance; margin: 0; }
h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: .25rem; }
h2 { font-size: 1.05rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; margin-bottom: .6rem; }
form + h3 { margin-top: 1.4rem; }
p { margin: 0; color: var(--sutil); }
small, .sutil { color: var(--sutil); }
a { color: var(--marca); }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ------------------------------------------------ lateral */
.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 1.1rem;
  padding: 1.4rem 1rem 1rem; background: linear-gradient(180deg, #0a1728, #081322);
  border-right: 1px solid var(--linha);
}
.assinatura { display: flex; align-items: flex-end; gap: .55rem; padding: 0 .4rem; }
.logo-nexum { height: 30px; width: auto; display: block; }
.studio { font-family: var(--f-titulo); font-weight: 500; font-size: .95rem; color: var(--ciano); letter-spacing: .02em; padding-bottom: 1px; }

.trocar-marca { display: grid; gap: .35rem; background: var(--casco); border: 1px solid var(--linha); border-radius: 14px; padding: .35rem; }
.trocar-marca button {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; border: 1px solid transparent;
  background: none; border-radius: 10px; padding: .45rem .55rem; color: var(--sutil); font-weight: 600;
}
.trocar-marca button:hover { color: var(--texto); background: var(--chapa); }
.trocar-marca button[aria-checked="true"] { color: var(--texto); background: var(--chapa-2); border-color: var(--linha-forte); }
.selo {
  width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--f-titulo); font-weight: 700; font-size: .85rem; color: #fff; background: var(--cor, var(--azul));
}
.selo img { width: 22px; height: 22px; object-fit: contain; }
.selo.com-imagem { background: #0d2038; }

.abas { display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.grupo { display: flex; flex-direction: column; gap: 2px; }
.grupo-nome { font-size: .78rem; color: #5f7896; padding: 0 .65rem .25rem; font-weight: 600; }
.abas button {
  position: relative; display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 10px; padding: .55rem .65rem; color: var(--sutil); font-weight: 500;
}
.abas button svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.abas button:hover { color: var(--texto); background: rgba(255, 255, 255, .03); }
.abas button.ativa { color: var(--texto); background: var(--marca-suave); }
.abas button.ativa svg { color: var(--marca); }
/* marcador da aba ativa: a dobra do símbolo Nexum */
.abas button.ativa::before {
  content: ""; position: absolute; left: -1rem; top: 50%; width: 9px; height: 18px; transform: translateY(-50%);
  background: linear-gradient(135deg, var(--ceu) 50%, var(--azul) 50%);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 0 70%, 45% 50%, 0 30%);
}

.rodape-lateral { display: flex; flex-direction: column; gap: .6rem; padding-top: .9rem; border-top: 1px solid var(--linha); }
.pilula { align-self: flex-start; font-size: .78rem; padding: .22rem .65rem; border-radius: 99px; background: var(--chapa); color: var(--sutil); }
.pilula.ok { color: var(--ok); }
.pilula.ruim { color: var(--perigo); }
.usuario { position: relative; }
#btn-usuario {
  display: flex; align-items: center; gap: .55rem; width: 100%; background: none; border: 1px solid transparent;
  padding: .4rem .45rem; border-radius: 10px; font-weight: 600;
}
#btn-usuario:hover { background: var(--chapa); }
#btn-usuario::before {
  content: attr(data-inicial); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ceu), var(--azul)); color: #fff; font-weight: 700; font-size: .85rem;
}
.menu-usuario {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: var(--chapa); border: 1px solid var(--linha-forte);
  border-radius: 12px; padding: .45rem; display: grid; gap: .2rem; z-index: 10; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6);
}
.menu-usuario button { text-align: left; background: none; border-color: transparent; }
.menu-usuario button:hover { background: var(--casco); }
.menu-usuario small { padding: .2rem .7rem; }

/* ------------------------------------------------ área principal */
main { padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem; max-width: 1280px; width: 100%; }
.aba { display: none; }
.aba.ativa { display: block; animation: entrar .22s ease-out; }
@keyframes entrar { from { opacity: 0; transform: translateY(4px); } }
.cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

/* ------------------------------------------------ controles */
input, select, textarea, button {
  font: inherit; color: var(--texto); background: var(--chapa);
  border: 1px solid var(--linha); border-radius: var(--raio-p); padding: .58rem .75rem;
}
textarea { resize: vertical; width: 100%; line-height: 1.5; }
input, select { min-width: 0; }
input::placeholder, textarea::placeholder { color: #5f7896; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
button { cursor: pointer; white-space: nowrap; font-weight: 500; transition: background .15s, border-color .15s, color .15s; }
button:hover { border-color: var(--linha-forte); background: var(--chapa-2); }
button.primario {
  background: linear-gradient(135deg, var(--marca), color-mix(in srgb, var(--marca) 70%, #000 30%));
  color: var(--marca-tinta); border-color: transparent; font-weight: 700;
  box-shadow: 0 8px 22px -12px var(--marca);
}
button.primario:hover { filter: brightness(1.08); }
button.mini { padding: .25rem .6rem; font-size: .82rem; border-radius: 8px; }
button:disabled { opacity: .55; cursor: wait; }
label { display: flex; flex-direction: column; gap: .35rem; color: var(--sutil); font-size: .86rem; }
label.check { flex-direction: row; align-items: center; gap: .55rem; color: var(--texto); font-size: .95rem; }
label.check input { accent-color: var(--marca); width: 17px; height: 17px; }
label.linha { flex-direction: row; align-items: center; }

.linha { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.linha input { flex: 1; }
.pilha { display: flex; flex-direction: column; gap: .8rem; }
.duas-colunas { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.cartao { background: var(--casco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.2rem; min-width: 0; }
.cartao h4 { margin: 0 0 .4rem; font-size: 1.02rem; font-weight: 600; }
.vazio { color: var(--sutil); padding: 2.2rem 1.5rem; text-align: center; border: 1px dashed var(--linha-forte); border-radius: var(--raio); }

.etiquetas { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-bottom: .55rem; }
.tag { display: inline-block; font-size: .74rem; font-weight: 600; padding: .12rem .55rem; border-radius: 99px; background: var(--chapa); color: var(--sutil); text-transform: lowercase; }
.tag::first-letter { text-transform: uppercase; }
.tag.TOPO { color: var(--topo); } .tag.MEIO { color: var(--meio); } .tag.FUNDO { color: var(--fundo-funil); }
.score { margin-left: auto; font-family: var(--f-titulo); font-weight: 700; color: var(--marca); font-variant-numeric: tabular-nums; }
.gancho { color: var(--texto); font-style: italic; border-left: 3px solid var(--marca); padding-left: .65rem; margin: .55rem 0; }
.acoes { display: flex; gap: .4rem; margin-top: .85rem; flex-wrap: wrap; align-items: center; }

.bloco { padding: .75rem .85rem; border-radius: var(--raio-p); background: var(--chapa); margin-bottom: .5rem; }
.bloco .parte { font-size: .74rem; font-weight: 700; color: var(--marca); }
.bloco .fala { font-size: 1.03rem; margin: .2rem 0; }
.bloco .cena { color: var(--sutil); font-size: .86rem; }
.slide { display: grid; grid-template-columns: 32px 1fr; gap: .6rem; padding: .65rem; border-radius: var(--raio-p); background: var(--chapa); margin-bottom: .4rem; }
.slide b.num { color: var(--marca); font-family: var(--f-titulo); }
.legenda { white-space: pre-wrap; background: var(--chapa); border-radius: var(--raio-p); padding: .75rem; font-size: .9rem; }
details summary { cursor: pointer; color: var(--sutil); margin-bottom: .5rem; }
details.cartao > summary { color: var(--texto); list-style: none; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0; }
details.cartao > summary::-webkit-details-marker { display: none; }
details.cartao > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--sutil); border-bottom: 2px solid var(--sutil); transform: rotate(-45deg); transition: transform .15s; margin-right: .2rem; }
details.cartao[open] > summary::before { transform: rotate(45deg); }
details label { margin-bottom: .5rem; }

/* calendário */
.semana { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: .6rem; overflow-x: auto; padding-bottom: .3rem; }
.semana .dia { background: var(--casco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .75rem; min-height: 170px; }
.semana .dia h4 { margin: 0 0 .55rem; font-size: .86rem; color: var(--sutil); text-transform: capitalize; font-weight: 600; }
.post-cal { background: var(--chapa); border-radius: var(--raio-p); padding: .6rem; margin-bottom: .5rem; font-size: .88rem; border-left: 3px solid var(--linha-forte); }
.post-cal.TOPO { border-left-color: var(--topo); } .post-cal.MEIO { border-left-color: var(--meio); } .post-cal.FUNDO { border-left-color: var(--fundo-funil); }
.post-cal.postado { opacity: .55; }
.post-cal select { margin-top: .45rem; padding: .2rem .35rem; font-size: .8rem; width: 100%; }

/* editor */
.soltar {
  border: 2px dashed var(--linha-forte); border-radius: var(--raio); padding: 2.2rem 1rem; text-align: center;
  align-items: center; cursor: pointer; color: var(--texto); background: rgba(255, 255, 255, .015);
}
.soltar.arrastando, .soltar:hover { border-color: var(--marca); background: var(--marca-suave); }
.soltar em { color: var(--marca); font-style: normal; }
progress { width: 100%; accent-color: var(--marca); }
.aviso { color: var(--meio); font-size: .86rem; }
.saida { white-space: pre-wrap; font-size: .82rem; color: var(--sutil); margin: 0; }
.status-video { font-weight: 600; }
.status-video.pronto { color: var(--ok); } .status-video.erro { color: var(--perigo); }

/* números e tabelas */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.kpi { background: var(--casco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.1rem; }
.kpi span { color: var(--sutil); font-size: .82rem; }
.kpi strong { display: block; font-family: var(--f-titulo); font-size: 1.65rem; font-weight: 700; font-variant-numeric: tabular-nums; }
table { width: 100%; border-collapse: collapse; font-size: .87rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .55rem .55rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { color: var(--sutil); font-weight: 500; }
td.num, th.num { text-align: right; }
.rolagem { overflow-x: auto; max-height: 540px; }
.barra { height: 6px; border-radius: 3px; background: var(--marca); }
.lista-limpa { list-style: none; padding: 0; margin: 0 0 .8rem; }
.lista-limpa li { display: flex; gap: .5rem; align-items: flex-start; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--linha); }
.lista-limpa li > span { flex: 1; min-width: 0; }

input[type=color] { padding: 3px; height: 42px; width: 100%; cursor: pointer; }
.logo-linha img { height: 56px; max-width: 200px; object-fit: contain; background: var(--chapa); border-radius: var(--raio-p); padding: 6px; }
.botao-arquivo { flex-direction: row; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .8rem; border: 1px solid var(--linha); border-radius: var(--raio-p); color: var(--texto); cursor: pointer; background: var(--chapa); }
.botao-arquivo:hover { border-color: var(--linha-forte); }
.botao-arquivo.mini { padding: .25rem .6rem; font-size: .82rem; }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; margin: .7rem 0; }
.miniaturas img { width: 100%; border-radius: var(--raio-p); border: 1px solid var(--linha); display: block; }
.caixa-link { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; background: var(--chapa); border-radius: var(--raio-p); padding: .6rem .75rem; margin: .2rem 0 .7rem; font-size: .88rem; }
.codigo { font-family: var(--f-titulo); font-weight: 700; color: var(--marca); font-variant-numeric: tabular-nums; }
td select { padding: .2rem .35rem; font-size: .82rem; }

.destaque { display: flex; flex-direction: column; gap: .55rem; }
.destaque .legenda-radar { color: var(--texto); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.multiplo { font-family: var(--f-titulo); font-weight: 700; color: var(--marca); font-size: 1.2rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.numeros { display: flex; gap: .8rem; color: var(--sutil); font-size: .83rem; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
#lista-radar { padding: .4rem 1.2rem; }
.erro-perfil { color: var(--perigo); font-size: .8rem; }

dialog { background: var(--casco); color: var(--texto); border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 1.4rem; width: min(92vw, 400px); }
dialog::backdrop { background: rgba(2, 8, 16, .7); backdrop-filter: blur(2px); }
.papel { font-size: .74rem; padding: .1rem .55rem; border-radius: 99px; background: var(--chapa); color: var(--sutil); }
.papel.admin { color: var(--ceu); }
.inativo { opacity: .5; }
body.operador .so-admin { display: none !important; }

.toast {
  position: fixed; bottom: 1.4rem; left: calc(50% + var(--lateral) / 2); transform: translateX(-50%) translateY(150%);
  background: var(--chapa-2); border: 1px solid var(--linha-forte); padding: .8rem 1.15rem; border-radius: 12px;
  transition: transform .25s, opacity .25s; max-width: min(90vw, 560px); z-index: 20; white-space: pre-wrap;
  opacity: 0; pointer-events: none; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7);
}
.toast.visivel { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.toast.erro { border-color: var(--perigo); }

/* ------------------------------------------------ início */
.saudacao { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.saudacao h1 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
.saudacao p { font-size: 1rem; }

.linha-semana {
  position: relative; overflow: hidden; padding: 1.3rem 1.3rem 1.1rem; border-radius: 20px; margin-bottom: 1.4rem;
  background:
    linear-gradient(115deg, rgba(18, 56, 101, .55), rgba(11, 25, 43, .9) 55%),
    var(--casco);
  border: 1px solid var(--linha-forte);
}
.linha-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.linha-topo p { color: var(--texto); font-weight: 500; }
.linha-topo p b { font-family: var(--f-titulo); color: var(--ciano); }
.trilho { list-style: none; margin: 0; padding: 0 0 .2rem; display: grid; grid-template-columns: repeat(7, minmax(108px, 1fr)); overflow-x: auto; }
.trilho li {
  --dobra: 20px;
  position: relative; min-height: 112px; padding: .75rem calc(var(--dobra) + .4rem) .7rem calc(var(--dobra) + .75rem);
  margin-right: -12px; background: var(--chapa);
  clip-path: polygon(0 0, calc(100% - var(--dobra)) 0, 100% 50%, calc(100% - var(--dobra)) 100%, 0 100%, var(--dobra) 50%);
  display: flex; flex-direction: column; gap: .35rem; cursor: pointer; transition: filter .15s;
}
.trilho li:first-child { clip-path: polygon(0 0, calc(100% - var(--dobra)) 0, 100% 50%, calc(100% - var(--dobra)) 100%, 0 100%); padding-left: .9rem; border-radius: 12px 0 0 12px; }
.trilho li:last-child { margin-right: 0; }
.trilho li:hover { filter: brightness(1.15); }
.trilho li.passou { background: #0d1d31; }
.trilho li.passou .dia-nome, .trilho li.passou .dia-num { color: #5f7896; }
.trilho li.hoje { background: linear-gradient(120deg, var(--ceu), var(--azul)); }
.trilho li.hoje .dia-nome, .trilho li.hoje .dia-num, .trilho li.hoje .dia-info { color: #03182c; }
.dia-nome { font-size: .8rem; color: var(--sutil); font-weight: 600; text-transform: capitalize; }
.dia-num { font-family: var(--f-titulo); font-size: 1.45rem; font-weight: 700; line-height: 1; }
.pontos { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; }
.ponto { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--cor); background: transparent; }
.ponto.feito { background: var(--cor); }
.ponto.gravado { background: linear-gradient(90deg, var(--cor) 50%, transparent 50%); }
.trilho li.hoje .ponto { border-color: #03182c; }
.trilho li.hoje .ponto.feito { background: #03182c; }
.dia-info { font-size: .76rem; color: var(--sutil); }
.legenda-marcas { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .9rem; font-size: .83rem; color: var(--sutil); }
.legenda-marcas span { display: inline-flex; align-items: center; gap: .4rem; }
.legenda-marcas i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); display: inline-block; }
.legenda-marcas i.ponto { width: 11px; height: 11px; }
.legenda-marcas i.ponto:not(.feito):not(.gravado) { background: transparent; }
.legenda-marcas .separador { width: 1px; height: 14px; background: var(--linha-forte); }

.inicio-grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 1.25rem; align-items: start; }
.painel-tarefas, .painel-numeros > section, .numeros-inicio { background: var(--casco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.2rem 1.25rem; }
.painel-numeros { display: grid; gap: 1.25rem; }
.painel-tarefas h2, .painel-numeros h2 { margin-bottom: .6rem; }
.tarefas { list-style: none; margin: 0; padding: 0; }
.tarefas li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--linha); }
.tarefas li:last-child { border-bottom: 0; }
.tarefa-icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--chapa); color: var(--ceu); }
.tarefa-icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tarefas li.atrasado .tarefa-icone { color: var(--perigo); background: rgba(255, 107, 120, .12); }
.tarefas li.hoje .tarefa-icone { color: #03182c; background: linear-gradient(135deg, var(--ceu), var(--azul)); }
.tarefas li.contato .tarefa-icone { color: var(--ok); background: rgba(61, 220, 151, .1); }
.tarefas li.numeros .tarefa-icone { color: var(--meio); background: rgba(255, 195, 90, .1); }
.tarefa-texto { font-weight: 600; }
.tarefa-sub { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .82rem; color: var(--sutil); margin-top: .15rem; }
.chip-marca { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600; color: var(--texto); }
.chip-marca::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor); }
.tudo-certo { display: grid; justify-items: start; gap: .3rem; padding: .8rem 0 .3rem; }
.tudo-certo b { font-family: var(--f-titulo); font-size: 1.05rem; }

.numeros-inicio { display: grid; gap: 1.05rem; }
.medida { display: grid; gap: .35rem; }
.medida-topo { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.medida-topo span { color: var(--sutil); font-size: .86rem; }
.medida strong { font-family: var(--f-titulo); font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.medida strong small { font-size: .9rem; color: var(--sutil); font-weight: 600; }
.progresso { height: 8px; border-radius: 99px; background: var(--chapa); overflow: hidden; }
.progresso i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--azul), var(--ceu), var(--ciano)); transition: width .5s ease-out; }
.metas { display: grid; gap: 1.1rem; }
.meta-marca { display: grid; gap: .7rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--linha); }
.meta-marca:last-child { padding-bottom: 0; border-bottom: 0; }
.meta-foco { font-size: .82rem; line-height: 1.4; }
.meta-marca .medida strong { font-size: 1.15rem; }
.proximos { list-style: none; margin: 0; padding: 0; }
.proximos li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--linha); align-items: center; }
.proximos li:last-child { border-bottom: 0; }
.data-bloco { text-align: center; background: var(--chapa); border-radius: 10px; padding: .3rem 0; line-height: 1.15; }
.data-bloco b { display: block; font-family: var(--f-titulo); font-size: 1.1rem; }
.data-bloco small { font-size: .7rem; text-transform: capitalize; }
.proximos .tema { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------ telas menores */
@media (max-width: 1100px) {
  .inicio-grade { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  body { display: block; }
  .lateral {
    position: sticky; top: 0; z-index: 8; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: .6rem; padding: .7rem 1rem; border-right: 0; border-bottom: 1px solid var(--linha);
  }
  .assinatura { padding: 0; }
  .logo-nexum { height: 24px; }
  .trocar-marca { order: 3; grid-auto-flow: column; padding: .25rem; margin-left: auto; }
  .trocar-marca button { padding: .3rem .45rem; }
  .trocar-marca .nome-marca { display: none; }
  .abas { order: 5; flex: 1 1 100%; flex-direction: row; overflow-x: auto; gap: .2rem; }
  .grupo { flex-direction: row; gap: .2rem; }
  .grupo-nome { display: none; }
  .abas button { width: auto; white-space: nowrap; padding: .45rem .6rem; }
  .abas button.ativa::before { display: none; }
  .rodape-lateral { order: 4; flex-direction: row; align-items: center; padding: 0; border: 0; }
  .rodape-lateral .pilula { display: none; }
  #btn-usuario { width: auto; padding: .2rem; }
  #btn-usuario { font-size: 0; gap: 0; }
  #btn-usuario::before { font-size: .85rem; }
  .menu-usuario { left: auto; right: 0; bottom: auto; top: calc(100% + 6px); min-width: 200px; }
  .duas-colunas { grid-template-columns: 1fr; }
  main { padding: 1.3rem 1rem 3rem; }
  .semana { grid-template-columns: repeat(7, 160px); }
  .toast { left: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}
.trilho li.hoje .ponto.gravado { background: linear-gradient(90deg, #03182c 50%, transparent 50%); }