/* =========================================================================
   Página inicial nova e botão "Menu" no tablet
   Prévia da revisão de 04/10/2026 (itens 3 e 5 da seção 11 do relatório).

   Carregado logo depois do riba.css: só usa as variáveis do tema (cores,
   bordas, raios) e vale por cima das regras antigas sem !important.
   O fundo do HUB não é tocado aqui (decisão do Edson de 02/10).

   1. Abertura: saudação, data e botões
   2. Cabeçalho dos blocos (mesmo desenho em "Para você agora" e "Seus
      aplicativos")
   3. "Para você agora": pendências reais da pessoa
   4. "Seus aplicativos": atalhos com pictograma próprio
   5. Cabeçalho do HUB: margens, nomes completos e o botão "Menu"
   6. "Seu dia na Riba": os números ao vivo ao lado da saudação

   Medidas que se repetem de propósito (para os dois blocos alinharem):
   caixa do pictograma 44 px, pictograma 22 px, seta 18 px, 14 px entre a
   caixa e o texto. No celular, 12 px de respiro dentro de cada cartão.
   ========================================================================= */

/* Pictograma da página inicial (macro picto, _icones_inicio.html). O traço
   e as pontas já vêm no próprio desenho; aqui só o tamanho. */
.pi { width: 22px; height: 22px; flex: none; display: block; }

/* ------------------------------------------------------ 1. Abertura ---- */
.inicio {
  position: relative;
  padding: clamp(22px, 3vw, 36px) 0 0;
}
.inicio__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.inicio__texto { min-width: 0; }

/* Saudação (h1) e data (parágrafo à parte, para o leitor de tela) seguem
   na mesma linha de base no computador. */
.inicio__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.35em;
  margin: 16px 0 12px;
}
/* A saudação é o título da página, mas em tamanho de trabalho: a primeira
   tela precisa ter espaço para o que a pessoa veio fazer. */
.inicio__oi {
  margin: 0;
  font-size: clamp(2.05rem, 3.1vw, 2.65rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
/* A data é mais leve e nunca quebra no meio ("4 de / outubro"). */
.inicio__data {
  margin: 0;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  color: var(--texto-suave);
  white-space: nowrap;
}
.inicio__ponto {
  margin: 0 0.5em 0 0;
  color: var(--riba-laranja);
  font-weight: 600;
}
.inicio__sub {
  max-width: 74ch;                 /* uma linha só no computador */
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texto-suave);
  text-wrap: pretty;               /* sem palavra sozinha na última linha */
}
.inicio__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* O desenho 3D (hub3d) deu lugar ao cartão "Seu dia na Riba" (10/10/2026):
   ver a seção 6, no fim deste arquivo. */

/* ------------------------------------- 2. Cabeçalho dos blocos -------- */
/* Olho laranja com traço + título: o mesmo par nos dois blocos, para a
   pendência (o mais importante) não parecer uma nota de rodapé. */
.bloco-inicio__cabeca { margin-bottom: 16px; }
.bloco-inicio__cabeca h2,
.secao--inicio .secao__cabeca h2 {
  margin-top: 10px;
  font-size: clamp(1.45rem, 2.1vw, 1.8rem);
}

/* --------------------------------------------- 3. Para você agora ---- */
.agora { margin-top: clamp(28px, 3.4vw, 40px); }

/* Título e, quando não há nada, o recado ao lado, na mesma linha de base. */
.agora__titulo-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
}
.agora--vazio .bloco-inicio__cabeca { margin-bottom: 0; }
.agora__nada {
  margin: 0;
  font-size: 0.92rem;
  color: var(--texto-suave);
}
/* Bloco comum (e não flex) de propósito: assim a linha de base dele é a
   do texto, e o ✓ só desce um pouco para ficar no meio da letra. */
.agora__nada .pi {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -4px;
  color: var(--chip-teal-texto);
}

.agora__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
}
.agora__lista > li { display: flex; min-width: 0; }

/* Cada pendência: pictograma, número, o que é, de onde vem e a seta. A
   coluna do número tem largura fixa de 2 algarismos (min-width do número,
   na própria fonte dele): "1" e "12" deixam o texto no mesmo lugar. */
.agora__item {
  flex: 1;
  display: grid;
  grid-template-columns: 44px auto minmax(0, 1fr) 18px;
  align-items: center;
  column-gap: 14px;
  min-height: 72px;
  padding: 13px 16px;
  border-radius: 16px;
  border: 1px solid var(--borda);
  background: linear-gradient(160deg, var(--superficie-forte), rgba(245, 240, 237, 0.02));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--texto);
  text-decoration: none;
  transition: border-color var(--transicao), background var(--transicao);
}
.agora__item:hover {
  border-color: rgba(255, 143, 31, 0.5);
  background: rgba(255, 143, 31, 0.07);
}
.agora__item:focus-visible {
  outline: 2px solid var(--laranja-cheio);
  outline-offset: 2px;
}
.agora__ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--riba-laranja);
  background: rgba(255, 143, 31, 0.1);
  border: 1px solid rgba(255, 143, 31, 0.26);
}
/* O que só informa (avisos, fila, chamados andando) usa o teal de apoio; o
   laranja fica para o que pede uma decisão desta pessoa. */
.agora__item--info .agora__ico {
  color: var(--chip-teal-texto);
  background: rgba(17, 94, 103, 0.22);
  border-color: rgba(17, 94, 103, 0.55);
}
.agora__num {
  min-width: 2ch;                  /* 2 algarismos na fonte do número */
  font-family: var(--fonte-titulo);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--texto);
}
.agora__item--acao .agora__num { color: var(--riba-laranja); }
.agora__txt { min-width: 0; }
.agora__txt strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
}
.agora__txt small {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--texto-suave);
}
.agora__seta {
  width: 18px;
  height: 18px;
  color: var(--texto-suave);
  transition: transform var(--transicao), color var(--transicao);
}
.agora__item:hover .agora__seta {
  transform: translateX(3px);
  color: var(--riba-laranja);
}

/* --------------------------------------------- 4. Seus aplicativos ---- */
.apps-inicio { padding: clamp(32px, 4vw, 48px) 0 clamp(8px, 2vw, 16px); }

/* Cabeçalho com o botão "Personalizar" à direita, na linha do título
   (pedido 24 da equipe, 19/10/2026). O botão é o mesmo do cartão "Seu dia
   na Riba" (.seu__ajustar); no celular ele fica só com o ícone. */
.apps-inicio__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
}
.apps-inicio__cabeca > div { min-width: 0; }

/* Pré-visualização da janela: só os nomes escolhidos, na ordem. */
.apps-dlg__previa {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.apps-dlg__previa li {
  padding: 4px 10px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie-forte);
  font-size: 0.76rem;
  color: var(--texto-suave);
}
.apps-dlg__previa .apps-dlg__vazio { border-color: var(--riba-laranja); color: var(--riba-laranja); background: transparent; }

/* Colunas pela quantidade de aplicativos (index.html calcula --col e
   --col-tablet): a última fileira não fica com um cartão sozinho. */
.apps-inicio__grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--col, 4), minmax(0, 1fr));
  grid-auto-rows: 1fr;             /* todas as fileiras com a mesma altura */
  gap: 12px;
}
/* Cada cartão mede a própria largura (container query): largo vira linha,
   estreito fica em pé. Assim o mesmo cartão serve a 3, 4 ou 5 colunas. */
.apps-inicio__grade > li {
  display: flex;
  min-width: 0;
  container-type: inline-size;
}

/* Cartão em pé (estreito): pictograma no alto, nome e uma linha do que faz.
   Todos com a mesma altura na fileira (o li estica, o link ocupa tudo). */
.app-atalho {
  position: relative;
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  grid-template-rows: auto 1fr;
  gap: 14px 10px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--borda);
  background: linear-gradient(160deg, var(--superficie-forte), rgba(245, 240, 237, 0.02));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--texto);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--transicao), border-color var(--transicao),
    box-shadow var(--transicao);
}
/* Traço laranja de trajeto no alto, como nos cartões do HUB. */
.app-atalho::after {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  width: 30px;
  height: 2px;
  background: var(--laranja-cheio);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}
.app-atalho:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 143, 31, 0.45);
  box-shadow: var(--sombra);
}
.app-atalho:hover::after,
.app-atalho:focus-visible::after { transform: scaleX(1); }
.app-atalho:focus-visible {
  outline: 2px solid var(--laranja-cheio);
  outline-offset: 3px;
}
.app-atalho__ico {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--riba-laranja);
  background: rgba(255, 143, 31, 0.1);
  border: 1px solid rgba(255, 143, 31, 0.26);
  transition: background var(--transicao);
}
.app-atalho:hover .app-atalho__ico { background: rgba(255, 143, 31, 0.18); }
.app-atalho__seta {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  color: var(--texto-suave);
  transition: transform var(--transicao), color var(--transicao);
}
.app-atalho:hover .app-atalho__seta {
  transform: translateX(3px);
  color: var(--riba-laranja);
}
.app-atalho__txt {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}
.app-atalho__txt strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.app-atalho__txt span {
  display: block;
  margin-top: 5px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--texto-suave);
  text-wrap: balance;              /* duas linhas parecidas, sem palavra sozinha */
}

/* Cartão deitado (300 px ou mais): pictograma, texto e seta numa linha,
   com as mesmas medidas das pendências -- os pictogramas dos dois blocos
   caem na mesma linha vertical quando as colunas coincidem. */
@container (min-width: 300px) {
  .app-atalho {
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    grid-template-rows: auto;
    align-items: center;
    gap: 0 14px;
    min-height: 72px;
    padding: 13px 16px;
  }
  .app-atalho__ico { grid-row: 1; }
  .app-atalho__txt { grid-column: 2; grid-row: 1; }
  .app-atalho__seta { grid-column: 3; grid-row: 1; align-self: center; margin-top: 0; }
  .app-atalho__txt span { margin-top: 3px; text-wrap: pretty; }
}

/* --------------------------------------- 5. Cabeçalho do HUB ---------- */
/* Nome curto ("RH") só no cabeçalho de 1201 a 1439 px; o completo
   ("Recursos Humanos") na lista do Menu e a partir de 1440 px. "Início"
   só existe dentro da lista do Menu. */
.nav a .nav__cheio { display: none; }
.nav .nav__inicio { display: none; }
.menu-mobile__fecha { display: none; }
.topo__veu { display: none; }

/* Até 1280 px: a mesma margem lateral do conteúdo (.container). A marca
   fica na mesma linha vertical do "Portal de soluções internas" e dos
   cartões (antes, de 1101 a 1280 px, ela ficava 20 px para fora). */
@media (max-width: 1280px) {
  .topo__inner {
    padding-left: clamp(18px, 4vw, 40px);
    padding-right: clamp(18px, 4vw, 40px);
  }
}

/* A partir de 1440 px cabem os nomes completos da regra 8 (medido: menu
   com 907 px, sem encostar na marca nem nas ações, até em 1461 px, quando
   o atalho "Ctrl K" e o nome no perfil voltam). O menu fica no meio do
   espaço entre a marca e as ações, com folgas iguais dos dois lados. Com
   o "1fr auto 1fr" antigo, as ações largas (perfil com nome) empurravam o
   menu: em 1692 px sobravam 126 px de um lado e 28 do outro. */
@media (min-width: 1440px) {
  .nav a .nav__curto { display: none; }
  .nav a .nav__cheio { display: inline; }
  .nav a { padding-left: 8px; padding-right: 8px; }
  .topo__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* Com 8 seções no cabeçalho (o Financeiro aparece só para quem tem o papel,
   09/10/2026): medido, os nomes completos só cabem a partir de 1600 px; de
   1440 a 1599 px ficam os curtos e, de 1201 a 1300 px, sem os pictogramas. */
@media (min-width: 1440px) and (max-width: 1599px) {
  .nav--mais a .nav__cheio { display: none; }
  .nav--mais a .nav__curto { display: inline; }
}
@media (min-width: 1201px) and (max-width: 1300px) {
  .nav--mais a .ic { display: none; }
}

/* O botão "Menu" vale até 1200 px (antes: 1100). Medido: com a margem
   de 40 px, os 7 nomes curtos + Riba ON, busca e perfil só cabem a partir
   de 1201 px; abaixo disso a página rolaria para o lado. De quebra, o
   iPad Air deitado (1180 px) ganha o Menu com os nomes completos. */
@media (max-width: 1200px) {
  /* Pílula de 40 px: mesma altura do Riba ON, da busca e do perfil. */
  .menu-mobile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    width: auto;
    height: 40px;
    padding: 0 16px 0 13px;
    border-radius: 99px;
    border: 1px solid var(--borda-forte);
    background: var(--superficie);
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
  }
  .menu-mobile .pi { width: 18px; height: 18px; }
  .menu-mobile:hover { background: var(--superficie-forte); }
  .menu-mobile:focus-visible {
    outline: 2px solid var(--laranja-cheio);
    outline-offset: 3px;
  }
  /* Aberto: o ≡ vira X e o botão acende em laranja. */
  .menu-mobile[aria-expanded="true"] {
    color: var(--riba-laranja);
    border-color: rgba(255, 143, 31, 0.55);
    background: rgba(255, 143, 31, 0.1);
  }
  .menu-mobile[aria-expanded="true"] .menu-mobile__abre { display: none; }
  .menu-mobile[aria-expanded="true"] .menu-mobile__fecha { display: block; }

  .nav .nav__inicio { display: inline-flex; }
  .topo__gaveta .nav a .nav__curto { display: none; }
  .topo__gaveta .nav a .nav__cheio { display: inline; }

  /* "Início" separado das seções por um fio, como no Guia Visual -- igual
     na lista do tablet e na gaveta do celular. */
  .topo__gaveta .nav .nav__inicio {
    margin-bottom: 7px;            /* + 2 px de vão = fio no meio de 9 px */
    position: relative;
  }
  .topo__gaveta .nav .nav__inicio::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -5px;
    height: 1px;
    background: var(--borda);
  }

  /* Véu: escurece a página atrás da lista; clicar nele fecha (riba.js). */
  .topo__gaveta[data-aberto="true"] ~ .topo__veu {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    height: calc(100dvh - var(--header-h));
    z-index: 55;
    background: rgba(3, 8, 10, 0.55);
  }
}

/* Tablet (721 a 1200 px): as ações (Riba ON, busca, perfil) continuam no
   topo; só a navegação vira uma lista que desce do botão Menu. */
@media (min-width: 721px) and (max-width: 1200px) {
  .topo__inner { gap: 12px; }
  .topo__acoes { margin-left: auto; }

  .topo__gaveta .nav {
    position: absolute;
    z-index: 61;
    top: calc(100% + 8px);         /* logo abaixo do cabeçalho */
    left: clamp(18px, 4vw, 40px);  /* mesma margem da marca e do conteúdo */
    width: 320px;
    max-height: calc(100dvh - var(--header-h) - 24px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid var(--borda-forte);
    background: var(--bg-2);
    box-shadow: 0 28px 60px -18px rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    /* Ao fechar, some só depois do esmaecer; ao abrir, fica visível na
       hora -- é o que deixa o foco do teclado entrar no 1º item. */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .topo__gaveta[data-aberto="true"] .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }
  .topo__gaveta .nav a {
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 0.95rem;
    color: var(--texto);
  }
  .topo__gaveta .nav a:not(.ativo) .ic { color: var(--riba-laranja); }
  /* Item da página atual: preto sobre laranja (9,2:1), texto e ícone
     iguais. A regra acima tem o mesmo peso de ".nav a.ativo" do riba.css
     e vinha depois -- o texto ficava claro sobre laranja (2:1). */
  .topo__gaveta .nav a.ativo { color: var(--riba-preto); }
  .topo__gaveta .nav a.ativo .ic { color: var(--riba-preto); stroke: var(--riba-preto); }
  .topo__gaveta .nav a:focus-visible {
    outline: 2px solid var(--laranja-cheio);
    outline-offset: -2px;
  }
  /* No item laranja o contorno laranja some: ali ele é claro e por fora,
     então o 1º passo do teclado (que cai em "Início") aparece. */
  .topo__gaveta .nav a.ativo:focus-visible {
    outline: 2px solid var(--texto);
    outline-offset: 2px;
  }
}

/* Celular: a gaveta inteira desce do topo (riba.css). Mesmo acerto da
   visibilidade, para o foco entrar no 1º item assim que ela abre. */
@media (max-width: 720px) {
  .topo__gaveta {
    /* Mesma margem lateral do topo: os itens alinham com a marca. */
    padding-left: clamp(18px, 4vw, 40px);
    padding-right: clamp(18px, 4vw, 40px);
    transition: transform 0.28s ease, opacity 0.22s ease, visibility 0s linear 0.28s;
  }
  .topo__gaveta[data-aberto="true"] {
    transition: transform 0.28s ease, opacity 0.22s ease, visibility 0s;
  }
  /* A gaveta do celular tem 4 px entre os itens (riba.css): o fio fica no
     meio do mesmo vão de 9 px da lista do tablet. */
  .topo__gaveta .nav .nav__inicio { margin-bottom: 5px; }
  .topo__gaveta .nav a.ativo:focus-visible {
    outline: 2px solid var(--texto);
    outline-offset: 2px;
  }
}

/* -------------------------------------------------- telas menores ---- */
/* Tablet: 5 ou 4 colunas de aplicativos não cabem; 3 ou 2 (index.html). */
@media (max-width: 1100px) {
  .apps-inicio__grade { grid-template-columns: repeat(var(--col-tablet, 3), minmax(0, 1fr)); }
}

/* Abaixo de 1080 px a data desce para a linha de baixo, sem o ponto. */
@media (max-width: 1080px) {
  .inicio__linha { display: block; }
  .inicio__data { margin-top: 10px; }
  .inicio__ponto { display: none; }
  .agora__num { font-size: 1.4rem; }
}

@media (max-width: 720px) {
  .inicio { padding-top: 22px; }
  .inicio__grade { grid-template-columns: minmax(0, 1fr); }
  .inicio__linha { margin: 12px 0 10px; }
  .inicio__oi { font-size: clamp(1.8rem, 8.2vw, 2.15rem); }
  .inicio__data { margin-top: 6px; font-size: 0.95rem; }
  .inicio__sub { margin-bottom: 18px; font-size: 0.94rem; }
  /* Os dois botões com a mesma largura: lado a lado quando os dois cabem
     inteiros (184 px cada, medido no "Entrar no Riba ON"), um embaixo do
     outro quando não cabem (375 px). */
  .inicio__acoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  }
  .inicio__acoes .btn { width: 100%; height: 46px; padding: 0 14px; }

  .agora__lista { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .apps-inicio__grade { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  /* Mesmo respiro (12 px) nos dois blocos: caixas, pictogramas e setas
     das pendências e dos aplicativos na mesma linha vertical. */
  .agora__item { padding: 12px; min-height: 70px; }
  .app-atalho { padding: 12px; min-height: 70px; }
  .app-atalho:hover { transform: none; }
}

/* Celular estreito: o conteúdo usa margem de 16 px (riba.css); o topo
   acompanha, senão a marca ficava fora da linha do texto. */
@media (max-width: 420px) {
  .topo__inner,
  .topo__gaveta { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-atalho, .app-atalho::after, .app-atalho__seta, .agora__item, .agora__seta,
  .menu-mobile, .topo__gaveta .nav { transition: none; }
}

/* ------------------------- 7. Como posso melhorar o seu trabalho? ---- */
/* Pedidos da equipe (08/10/2026): um campo só, discreto, no vidro dos
   cartões da inicial. O laranja fica no ícone e no botão Enviar. */
.melhorar { padding: clamp(8px, 2vw, 16px) 0 clamp(24px, 3vw, 36px); }
.melhorar__caixa {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  align-items: start;
  gap: 14px 24px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--borda);
  background: linear-gradient(160deg, var(--superficie-forte), rgba(245, 240, 237, 0.02));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.melhorar__cabeca { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.melhorar__ico {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px;
  color: var(--riba-laranja); background: rgba(255, 143, 31, 0.1); border: 1px solid rgba(255, 143, 31, 0.26);
}
.melhorar__titulo {
  margin: 2px 0 0;
  font-family: var(--fonte-titulo);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.melhorar__sub { margin: 6px 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--texto-suave); text-wrap: pretty; }
.melhorar__selo { color: #FF8F1F; font-weight: 700; }
/* "Ver minhas sugestões" (revisão transversal, 07/11/2026): a lista dos pedidos da pessoa */
.melhorar__meus { margin-left: 6px; color: var(--riba-laranja); text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap; }
.melhorar__meus:hover { color: #FFB066; }
.melhorar__meus:focus-visible { outline: 2px solid var(--riba-laranja); outline-offset: 2px; border-radius: 4px; }
.melhorar__campo { display: grid; gap: 10px; min-width: 0; }
.melhorar__campo textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--borda);
  background: rgba(7, 7, 7, 0.55);
  color: var(--texto);
  font: inherit;
  font-size: 1rem; /* 16px: abaixo disso o iPhone dá zoom ao tocar no campo */
  line-height: 1.5;
}
.melhorar__campo textarea::placeholder { color: var(--texto-fraco); }
.melhorar__campo textarea:focus-visible { outline: 2px solid var(--laranja-cheio); outline-offset: 1px; border-color: transparent; }
.melhorar__pe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.melhorar__anexar {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-suave); font-size: 0.86rem; cursor: pointer; max-width: 100%;
  transition: border-color var(--transicao), color var(--transicao);
}
.melhorar__anexar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.melhorar__anexar:hover { border-color: rgba(255, 143, 31, 0.55); color: var(--texto); }
.melhorar__anexar:focus-within { outline: 2px solid var(--laranja-cheio); outline-offset: 2px; }
.melhorar__anexar--com { color: var(--texto); border-color: rgba(255, 143, 31, 0.45); }
.melhorar__limpar {
  min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--texto-suave);
  font-size: 0.82rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.melhorar__limpar:hover { color: var(--texto); }
.melhorar__limpar:focus-visible, .melhorar__outro:focus-visible { outline: 2px solid var(--laranja-cheio); outline-offset: 2px; border-radius: 6px; }
.melhorar__enviar { margin-left: auto; height: 44px; padding: 0 26px; }
.melhorar__enviar[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.melhorar__recado { grid-column: 2; margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--texto-suave); }
.melhorar__recado:empty { display: none; }
.melhorar__recado--ok { color: var(--texto); }
.melhorar__recado--ok::before { content: "✓ "; color: var(--chip-teal-texto); font-weight: 600; }
.melhorar__recado--erro { color: #ffb38a; }
/* área de toque de 44 px sem afastar as linhas (o padding sobra para fora) */
.melhorar__outro { display: inline-block; margin: -12px 0 -12px 6px; padding: 12px 4px; color: var(--riba-laranja);
  text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; font: inherit; line-height: 1.45; cursor: pointer; }
/* Enviado: o campo dá lugar à confirmação, no mesmo lugar. */
.melhorar__caixa--enviado .melhorar__campo { display: none; }
.melhorar__caixa--enviado .melhorar__recado { align-self: center; font-size: 0.95rem; }
/* O aviso "já está no ar" na lista de pendências: duas linhas inteiras. */
.agora__item--festa { border-color: rgba(255, 143, 31, 0.45); background: rgba(255, 143, 31, 0.06); }
.agora__item--festa .agora__txt small { white-space: normal; }
@media (max-width: 820px) {
  .melhorar__caixa { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .melhorar__recado { grid-column: 1; }
}
@media (max-width: 420px) {
  .melhorar__enviar { flex: 1 0 100%; margin-left: 0; }
}

/* ------------------------------------- Cabeçalho: botão ≡ "Mais" ------ */
/* Edson, 10/10/2026: à vista só Comercial, Operação, Financeiro, Marketing e
   RH; Chamados, Padrões e Políticas e Report ESG ficam no ≡ "Mais". */
.nav__extra { position: relative; display: inline-flex; }
/* Mesma medida dos itens do menu (.nav a): letra, altura, cor e vãos iguais,
   para a linha ficar reta (Edson, 10/10/2026: "deixe tudo bem alinhado"). */
.nav__mais-botao {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px; border: 0; border-radius: 99px;
  background: transparent; color: var(--texto-suave);
  font-family: inherit; font-size: 0.86rem; font-weight: 500; line-height: 1; cursor: pointer;
  white-space: nowrap;
  transition: color var(--transicao), background var(--transicao);
}
.nav__mais-botao .pi { width: 16px; height: 16px; flex: none; }
@media (min-width: 1201px) { .nav > a { height: 40px; } }
@media (min-width: 1440px) { .nav__mais-botao { padding-left: 8px; padding-right: 8px; } }
.nav__mais-botao:hover, .nav__mais-botao[aria-expanded="true"] { color: var(--texto); background: var(--superficie); }
.nav__mais-botao.ativo { color: var(--riba-laranja); }
.nav__mais-botao:focus-visible { outline: 2px solid var(--laranja-cheio); outline-offset: 2px; }
.nav__mais-lista {
  position: absolute; z-index: 62; top: calc(100% + 10px); right: 0;
  min-width: 240px; padding: 8px;
  display: none; flex-direction: column; gap: 2px;
  border-radius: 16px; border: 1px solid var(--borda-forte);
  background: var(--bg-2); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.7);
}
.nav__extra[data-aberto="true"] .nav__mais-lista { display: flex; }
@media (min-width: 1201px) { .nav .nav__mais-lista a { justify-content: flex-start; width: 100%; height: 40px; padding: 0 12px; white-space: nowrap; } }
.nav .nav__mais-lista a .nav__curto { display: none; }
.nav .nav__mais-lista a .nav__cheio { display: inline; }
.nav .nav__mais-lista a .ic { display: inline-block; }

/* Menu do celular e do tablet: sem botão; as seções do "Mais" entram na
   mesma lista, logo depois das principais, separadas por um fio. */
@media (max-width: 1200px) {
  .nav__mais-botao { display: none; }
  .nav__extra { display: contents; }
  .nav__mais-lista { display: contents; }
  .topo__gaveta .nav .nav__mais-lista a:first-child { margin-top: 7px; position: relative; }
  .topo__gaveta .nav .nav__mais-lista a:first-child::before {
    content: ""; position: absolute; left: 12px; right: 12px; top: -5px; height: 1px; background: var(--borda);
  }
}

/* ---------------------- Cabeçalho no padrão de mercado (10/10/2026) ---- */
/* Pedido do Edson: "use padrões de mercado; achei a logo afastada". Como nos
   portais grandes, o cabeçalho usa a MESMA largura e as mesmas margens do
   conteúdo (.container): o logo começa na linha do título da página, o menu
   vem logo depois do logo e as ações terminam na borda direita do conteúdo.
   O perfil fica só com o círculo das iniciais (o nome aparece ao abrir). */
@media (min-width: 1201px) {
  .topo__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: var(--container);
    margin-inline: auto;
    padding-left: clamp(18px, 4vw, 40px);
    padding-right: clamp(18px, 4vw, 40px);
  }
  .topo__marca { flex: none; }
  .nav { margin-left: 0; justify-self: auto; gap: 2px; min-width: 0; }
  .topo__acoes { margin-left: auto; justify-self: auto; }
  .topo__acoes .perfil__nome { display: none; }
  .topo__acoes .perfil__botao { padding: 4px; }
  .btn-busca kbd { display: none; }
}

/* Atalho com o selo do programa (Riba Zerar, 10/10/2026): o selo redondo no lugar do pictograma. */
.app-atalho__ico--imagem { padding: 0; overflow: hidden; }
.app-atalho__ico--imagem img { display: block; width: 28px; height: 28px; border-radius: 50%; }

/* ------------------------------------------- 6. Seu dia na Riba ------ */
/* 2ª rodada (Edson, 10/10/2026): "mais discreto, mais moderno, com efeitos
   futuristas". Vidro fosco sutil, quase sem borda, números finos e rótulos
   pequenos; não compete com a saudação nem com o "Entrar no Riba ON".
   Efeitos (static/js/seu-dia.js), todos baratos e parados fora da tela:
   brilho da borda seguindo o ponteiro, leve paralaxe, linha luminosa que se
   desenha ao aparecer, número que "acende" quando muda, pulsação só no ponto
   de quem pede atenção. Ao fundo, só um brilho suave no canto (a grade de
   quadradinhos saiu em 06/11/2026). Com "reduzir movimento": tudo parado,
   só o desenho final. */
.seu {
  --seu-borda: rgba(245, 240, 237, 0.07);
  --seu-vidro: rgba(245, 240, 237, 0.028);
  --seu-grade: rgba(245, 240, 237, 0.035);
  --seu-luz: rgba(255, 143, 31, 0.55);
  --mx: 50%;
  --my: 0%;
  position: relative;
  isolation: isolate;
  width: 420px;
  padding: 14px 14px 10px;
  border-radius: 22px;
  border: 1px solid var(--seu-borda);
  background: var(--seu-vidro);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* sem vidro fosco no navegador: fundo quase opaco, para o texto não sumir */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .seu { background: rgba(13, 13, 14, 0.88); }
  :root[data-tema="claro"] .seu { background: rgba(255, 255, 255, 0.92); }
}
:root[data-tema="claro"] .seu {
  --seu-borda: rgba(26, 22, 19, 0.08);
  --seu-vidro: rgba(255, 255, 255, 0.55);
  --seu-grade: rgba(26, 22, 19, 0.04);
  --seu-luz: rgba(179, 97, 11, 0.5);
}
/* Fundo do cartão: um brilho suave no canto, SEM a grade de quadradinhos
   que havia aqui (regra do Edson, 28/10/2026: grade no fundo é "cara de IA";
   fundo limpo, só degradê). */
.seu::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 80% 0%, var(--seu-grade) 0%, transparent 70%);
  pointer-events: none;
}
/* a borda que acende onde está o ponteiro (só a linha de 1 px) */
.seu__luz {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(220px circle at var(--mx) var(--my), var(--seu-luz), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.seu--perto .seu__luz { opacity: 1; }

.seu__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 6px;
}
.seu__titulo {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
/* Personalizar: discreto (ícone + palavra pequena), área de toque de 44 px */
.seu__ajustar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-suave);
  font: 500 0.72rem/1 var(--fonte-texto);
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.seu__ajustar::after { content: ""; position: absolute; inset: -8px -4px; }
.seu__ajustar:hover { color: var(--texto); border-color: var(--seu-borda); background: var(--seu-vidro); }
.seu__ajustar:focus-visible { outline: 2px solid var(--laranja-cheio); outline-offset: 2px; }

.seu__grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.seu__grade[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seu__cel { display: flex; min-width: 0; }
.seu__cel[hidden] { display: none; }
/* linhas finas entre os números, em vez de caixas */
.seu__grade .seu__cel { border-top: 1px solid var(--seu-borda); }
.seu__grade .seu__cel:nth-child(odd) { border-right: 1px solid var(--seu-borda); }
.seu__grade[data-n="3"] .seu__cel { border-right: 1px solid var(--seu-borda); }
.seu__grade[data-n="3"] .seu__cel:nth-child(3n) { border-right: 0; }

.seu__item {
  position: relative;
  contain: layout paint;            /* o número que muda (CO₂, placar) não recalcula a página toda */
  flex: 1;
  min-width: 0;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 11px 12px 10px;
  border-radius: 12px;
  color: var(--texto);
  text-decoration: none;
  transition: background var(--transicao);
}
.seu__item:hover { background: rgba(255, 143, 31, 0.05); }
.seu__item:focus-visible { outline: 2px solid var(--laranja-cheio); outline-offset: -2px; }

.seu__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
}
.seu__num {
  font-family: "Space Grotesk", var(--fonte-titulo);
  font-size: 1.85rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: text-shadow 0.6s ease, color 0.6s ease;
}
.seu__num small {
  margin-left: 2px;
  font-family: var(--fonte-texto);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--texto-fraco);
}
.seu__item--acao .seu__num { color: var(--riba-laranja); }
.seu__item--falhou .seu__num { color: var(--texto-fraco); }
/* número que mudou: os dígitos rolam como placar (~600 ms), brilho rápido na
   cor do indicador e selo "+1"/"−2" que some em 3 s (seu-dia.js) */
.seu__item { --seu-cor: var(--chip-teal-texto); }
.seu__item--acao, .seu__item--alerta { --seu-cor: var(--riba-laranja); }
.seu-rola { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.seu-rola__fita { display: flex; flex-direction: column; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.seu-rola__fita > span { display: block; height: 1em; line-height: 1; }
.seu__num.seu--brilha { animation: seu-brilha 0.9s ease-out; }
@keyframes seu-brilha {
  0% { text-shadow: 0 0 0 transparent; }
  25% { text-shadow: 0 0 12px var(--seu-cor), 0 0 2px var(--seu-cor); }
  100% { text-shadow: 0 0 0 transparent; }
}
.seu__selo {
  align-self: flex-start;
  margin: 2px auto 0 -2px;
  padding: 1px 5px;
  border-radius: 999px;
  font: 600 0.62rem/1.3 var(--fonte-texto);
  color: var(--seu-cor);
  background: color-mix(in srgb, var(--seu-cor) 14%, transparent);
  animation: seu-selo 3s ease-out forwards;
  pointer-events: none;
}
@keyframes seu-selo { 0% { opacity: 0; transform: translateY(3px); } 10%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* "ao vivo · atualizado há 40 s": ponto que respira (2,5 s) ao lado do título */
.seu__titulo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.seu__titulo { white-space: nowrap; }
.seu__aovivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  color: var(--texto-fraco);
  white-space: nowrap;
}
.seu__aovivo-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chip-teal-texto);
  box-shadow: 0 0 6px color-mix(in srgb, var(--chip-teal-texto) 70%, transparent);
}
.seu--ativo .seu__aovivo-ponto { animation: seu-respira 2.5s ease-in-out infinite; }
@keyframes seu-respira { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }
.seu__aovivo--velho .seu__aovivo-ponto { background: var(--texto-fraco); box-shadow: none; animation: none !important; }
/* no cartão estreito (ao lado da saudação) e no celular o "Personalizar" fica só no ícone
   (o nome vai na dica e no leitor de tela) */
@media (min-width: 1241px), (max-width: 720px) {
  /* Só o botão DENTRO do cartão fica só com o ícone (ali o espaço é curto);
     o "Personalizar" de "Seus aplicativos" mantém a palavra. */
  .seu .seu__ajustar { padding: 0 8px; }
  .seu .seu__ajustar-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* linha dos últimos dias: luminosa e desenhada ao aparecer */
.seu__linha {
  flex: none;
  width: 48px;
  height: 18px;
  margin-bottom: 3px;
  overflow: visible;
  color: var(--riba-laranja);
  filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 55%, transparent));
}
.seu__linha[hidden] { display: none; }
.seu__linha polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.seu__linha .seu__area { fill: currentColor; opacity: 0.08; stroke: none; }
.seu__linha .seu__ponta { fill: currentColor; }
/* a ponta da linha pulsa como onda (anel que abre e some a cada ~3 s), só com o cartão à vista */
.seu__linha .seu__onda {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.seu--ativo .seu__linha .seu__onda { animation: seu-onda 3s ease-out infinite; }
@keyframes seu-onda {
  0% { transform: scale(1); opacity: 0.7; }
  60%, 100% { transform: scale(4); opacity: 0; }
}
.seu__linha.seu--anda { overflow: hidden; }
.seu__linha .seu__trilho { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.seu__item--ok .seu__linha,
.seu__item--info .seu__linha,
.seu__item--neutro .seu__linha { color: var(--chip-teal-texto); }
/* o desenho: começa apagado e se desenha quando o cartão entra na tela (JS) */
.seu--desenhar .seu__linha polyline { stroke-dashoffset: 1; }
.seu--desenhar .seu__linha .seu__ponta,
.seu--desenhar .seu__linha .seu__area { opacity: 0; }
.seu--desenhado .seu__linha polyline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.seu--desenhado .seu__linha .seu__ponta { opacity: 1; transition: opacity 0.3s ease 1s; }
.seu--desenhado .seu__linha .seu__area { opacity: 0.08; transition: opacity 0.6s ease 0.6s; }

.seu__rotulo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  min-width: 0;
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--texto-suave);
}
.seu__rotulo > [data-seu-rotulo] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seu__ponto {
  position: relative;
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--borda-forte);
}
.seu__item--acao .seu__ponto,
.seu__item--alerta .seu__ponto { background: var(--riba-laranja); }
.seu__item--ok .seu__ponto,
.seu__item--info .seu__ponto { background: var(--chip-teal-texto); }
/* pulsação leve só em quem pede atenção, e só com o cartão à vista */
.seu__item--acao .seu__ponto::after,
.seu__item--alerta .seu__ponto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
}
.seu--ativo .seu__item--acao .seu__ponto::after,
.seu--ativo .seu__item--alerta .seu__ponto::after { animation: seu-pulso 2.6s ease-out infinite; }
@keyframes seu-pulso {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}
/* detalhe em até 2 linhas (a frase inteira fica no leitor de tela e na dica) */
/* CO₂ ao vivo: o número tem um brilho teal fixo e o ponto "respira" (só com o
   cartão à vista e sem "reduzir movimento"); os dígitos sobem no seu-dia.js */
.seu__item--vivo .seu__num { color: var(--texto); text-shadow: 0 0 18px color-mix(in srgb, var(--chip-teal-texto) 35%, transparent); }
.seu__item--vivo .seu__ponto { background: var(--chip-teal-texto); }
.seu__item--vivo .seu__ponto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
}
.seu--ativo .seu__item--vivo .seu__ponto::after { animation: seu-pulso 2.2s ease-out infinite; }
.seu__item--carregando .seu__num { color: var(--texto-fraco); animation: seu-espera 1.4s ease-in-out infinite; }
@keyframes seu-espera { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .seu__item--carregando .seu__num { animation: none; } }
.seu__detalhe {
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--texto-fraco);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.seu__todos {
  position: relative;
  display: block;
  width: max-content;
  margin: 6px 2px 0 auto;
  font-size: 0.7rem;
  color: var(--texto-fraco);
  text-decoration: none;
}
.seu__todos::after { content: ""; position: absolute; inset: -14px -8px; }
.seu__todos:hover { color: var(--riba-laranja); }
.seu__todos:focus-visible { outline: 2px solid var(--laranja-cheio); outline-offset: 3px; border-radius: 4px; }

/* ---------- Personalizar (janela) ---------- */
.seu-dlg {
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 820px);
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 20px;
  background: var(--veu-caixa);
  color: var(--texto);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.seu-dlg::backdrop { background: var(--veu-modal); backdrop-filter: blur(3px); }
.seu-dlg[open] { animation: seu-dlg-entra 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes seu-dlg-entra { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
.seu-dlg__caixa {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  padding: 20px 20px 16px;
}
.seu-dlg__cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.seu-dlg__cabeca h2 { margin: 0; font-size: 1.15rem; font-weight: 500; }
.seu-dlg__cabeca p { margin: 4px 0 0; font-size: 0.82rem; color: var(--texto-suave); }
.seu-dlg__fechar {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px -10px 0 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
}
.seu-dlg__fechar:hover { background: var(--superficie-forte); color: var(--texto); }
.seu-dlg__aviso {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 143, 31, 0.12);
  font-size: 0.8rem;
}
.seu-dlg__previa {
  margin: 14px 0 0;
  padding: 10px 10px 4px;
  border: 1px dashed var(--borda);
  border-radius: 14px;
}
.seu-dlg__previa-t {
  display: block;
  margin: 0 2px 4px;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.seu-dlg__previa .seu__item { min-height: 64px; padding: 8px 10px; }
.seu-dlg__previa .seu__num { font-size: 1.4rem; }
.seu-dlg__conta { margin: 12px 2px 6px; font-size: 0.78rem; color: var(--texto-suave); }
.seu-dlg__lista {
  list-style: none;
  margin: 0;
  padding: 0 2px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 120px;
}
.seu-op {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  grid-template-areas: "alca liga valor mover" ". dias dias .";
  align-items: center;
  gap: 2px 10px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--borda);
  background: var(--veu-caixa);
}
.seu-op--arrastando { position: relative; z-index: 2; box-shadow: var(--sombra); border-radius: 10px; opacity: 0.95; }
.seu-op__alca { grid-area: alca; color: var(--texto-fraco); cursor: grab; touch-action: none; display: grid; place-items: center; height: 44px; }
.seu-op--arrastando .seu-op__alca { cursor: grabbing; }
.seu-op__liga { grid-area: liga; display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; min-width: 0; }
.seu-op__liga input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seu-op__chave {
  flex: none;
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--superficie-forte);
  border: 1px solid var(--borda-forte);
  transition: background var(--transicao), border-color var(--transicao);
}
.seu-op__chave::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--texto-suave);
  transition: transform var(--transicao), background var(--transicao);
}
.seu-op__liga input:checked + .seu-op__chave { background: rgba(255, 143, 31, 0.28); border-color: var(--riba-laranja); }
.seu-op__liga input:checked + .seu-op__chave::after { transform: translateX(14px); background: var(--riba-laranja); }
.seu-op__liga input:focus-visible + .seu-op__chave { outline: 2px solid var(--laranja-cheio); outline-offset: 2px; }
.seu-op__liga input:disabled + .seu-op__chave { opacity: 0.45; }
.seu-op__txt { min-width: 0; }
.seu-op__txt strong { display: block; font-size: 0.88rem; font-weight: 500; }
.seu-op__txt small { display: block; font-size: 0.74rem; color: var(--texto-suave); }
.seu-op__valor { grid-area: valor; font: 300 1.05rem/1 "Space Grotesk", var(--fonte-titulo); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.seu-op__mover { grid-area: mover; display: flex; gap: 2px; }
.seu-op__mover button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
}
.seu-op__mover button:hover:not(:disabled) { background: var(--superficie-forte); color: var(--texto); }
.seu-op__mover button:disabled { opacity: 0.3; cursor: default; }
.seu-op__mover button:focus-visible { outline: 2px solid var(--laranja-cheio); outline-offset: -2px; }
.seu-op__dias { grid-area: dias; display: flex; gap: 6px; margin: 0 0 4px 46px; padding: 0; border: 0; }
.seu-op__dias label { position: relative; cursor: pointer; }
.seu-op__dias input { position: absolute; opacity: 0; inset: 0; }
.seu-op__dias span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-size: 0.76rem;
  color: var(--texto-suave);
}
.seu-op__dias input:checked + span { border-color: var(--riba-laranja); color: var(--texto); background: rgba(255, 143, 31, 0.12); }
.seu-op__dias input:focus-visible + span { outline: 2px solid var(--laranja-cheio); outline-offset: 2px; }
.seu-dlg__recado { min-height: 1.2em; margin: 8px 2px 0; font-size: 0.78rem; color: var(--riba-laranja); }
.seu-dlg__rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.seu-dlg__espaco { flex: 1; }
.seu-dlg__padrao {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  font: 500 0.82rem/1 var(--fonte-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.seu-dlg__padrao:hover { color: var(--riba-laranja); }
.seu-dlg__rodape .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Até 1240 px o cartão desce para baixo da saudação, na largura toda. */
@media (max-width: 1240px) {
  .inicio__grade { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .seu { width: auto; max-width: 760px; }
  .seu__grade:not([data-seu-previa]) { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .seu__grade .seu__cel { border-right: 0; }
}

/* Celular: logo abaixo da saudação, 2 colunas. */
@media (max-width: 720px) {
  .inicio__grade { display: flex; flex-direction: column; gap: 0; }
  .inicio__texto { display: contents; }
  .inicio__texto > .olho { order: 1; }
  .inicio__linha { order: 2; }
  .seu { order: 3; margin: 6px 0 18px; padding: 12px 10px 8px; }
  .inicio__sub { order: 4; }
  .inicio__acoes { order: 5; }
  .seu__grade:not([data-seu-previa]),
  .seu__grade[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seu__grade .seu__cel:nth-child(odd) { border-right: 1px solid var(--seu-borda); }
  .seu__num { font-size: 1.7rem; }
  /* CO₂ com decimais: número menor e a linha desce para não encostar */
  .seu__item--vivo .seu__num { font-size: 1.35rem; }
  .seu__item--vivo .seu__topo { flex-wrap: wrap; }
  .seu-op { grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: "alca liga mover" ". dias dias"; gap: 2px 6px; padding: 4px 0; }
  .seu-op__valor { display: none; }
  .seu-op__txt small { display: none; }          /* no celular, só o nome: cabe numa linha */
  .seu-op__liga { gap: 10px; }
  .seu-op__dias { margin-left: 0; }
  .seu-dlg { max-height: 92vh; }
  .seu-dlg__caixa { padding: 16px 14px 12px; }
  .seu-dlg__previa { padding: 6px 6px 2px; margin-top: 10px; }
  .seu-dlg__previa .seu__item { min-height: 0; padding: 6px 8px; }
  .seu-dlg__previa .seu__num { font-size: 1.15rem; }
  .seu-dlg__previa .seu__detalhe, .seu-dlg__previa .seu__linha { display: none; }
  .seu-dlg__previa .seu__rotulo { margin-top: 3px; font-size: 0.68rem; }
  /* Seus aplicativos: a pré-visualização não pode comer a lista (até 3
     fileiras de nomes; o resto rola). */
  .apps-dlg__previa { max-height: 92px; overflow-y: auto; gap: 5px; }
  .apps-dlg__previa li { padding: 3px 8px; font-size: 0.72rem; }
  /* rodapé: "Voltar ao padrão" em cima; Cancelar e Salvar lado a lado */
  .seu-dlg__rodape { display: grid; grid-template-columns: 1fr 1fr; }
  .seu-dlg__padrao { grid-column: 1 / -1; justify-self: start; }
  .seu-dlg__espaco { display: none; }
  .seu-dlg__rodape .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .seu__onda, .seu__selo { display: none; }
  .seu-rola__fita, .seu__linha .seu__trilho { transition: none; }
  .seu, .seu__luz, .seu__num { transition: none; }
  .seu-dlg[open] { animation: none; }
}