/* ==========================================================================
   Tema — CRM Hakan Client
   --------------------------------------------------------------------------
   Camada de aparência, carregada DEPOIS do app.css. O app.css continua
   respondendo pela estrutura (o que é grid, o que é flex, o que empilha);
   este arquivo responde pela linguagem visual.

   Está separado pelo mesmo motivo do celular.css: se algo ficar estranho,
   apagar uma linha do index.html devolve o sistema ao que era, sem
   arqueologia. Nada aqui muda comportamento — só como as coisas parecem.

   O princípio é um só: muito espaço em branco, informação bem organizada,
   quase nenhum enfeite. Três a cinco blocos grandes por tela, e não dez
   cartõezinhos disputando atenção.
   ========================================================================== */

/* ------------------------------------------------------------------ fonte */

/* Inter servida daqui mesmo, não de CDN: o sistema tem que abrir mesmo se o
   Google estiver fora do ar. São 132 KB, e a fonte é variável — um arquivo
   cobre do peso 400 ao 700. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- fichário */

:root {
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Fundo quase branco. O cinza anterior puxava para o azulado e dava ar de
     painel administrativo antigo. */
  --bg:        #fbfbfc;
  --surface:   #ffffff;
  --surface-2: #f7f8fa;

  /* Borda em cinza neutro, não azulado: é o que separa produto de tema
     de sistema interno. */
  --border:   #e5e7eb;
  --border-2: #d6d9e0;

  --text:   #0d1117;   /* grafite; preto puro cansa a vista */
  --text-2: #4b5563;
  --text-3: #8b93a3;

  /* Azul elétrico sobre azul profundo. Aparece em pouca coisa: botão
     principal, item ativo, gráfico, link. Nunca em área grande. */
  --primary:    #2f5bff;
  --primary-dk: #1e42d8;
  --primary-lt: #eef2ff;
  --primary-2:  #dbe3ff;

  --green:  #0f9d61;
  --amber:  #c2820a;
  --red:    #dc3f38;
  --violet: #4b5bd6;

  /* Entre 10 e 12px: atual sem virar bolha. */
  --radius:    11px;
  --radius-sm: 8px;

  /* Sombra quase inexistente: aqui o que separa um bloco do outro é o
     espaço e a borda. */
  --shadow:    0 1px 2px rgba(13, 17, 23, .04);
  --shadow-lg: 0 12px 34px rgba(13, 17, 23, .12);

  --sidebar-w: 74px;

  /* Escala de espaçamento. Existir por escrito evita o "16 aqui, 15 ali". */
  --e2:  8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 20px;
  --e6: 24px;
  --e8: 32px;
}

body { font-size: 14px; letter-spacing: -.006em; }

/* ---------------------------------------------------------- barra lateral */

/* De coluna navy de 222px com texto para faixa clara de 74px só com ícone.
   O nome de cada item passa a viver no atributo `title`, preenchido pelo
   app.js — ícone sem nome nenhum vira adivinhação. */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  color: var(--text-3);
  align-items: center;
}

.sidebar__brand {
  padding: 18px 0 14px;
  justify-content: center;
  width: 100%;
}
/* O logo do CRM é claro, feito para fundo navy: em faixa branca ele sumiria.
   Na faixa estreita entra a marca compacta; a marca escrita fica guardada
   para a gaveta do celular, onde há largura para ela. */
.sidebar__brand .marca-img { display: none; }   /* nenhuma na faixa estreita */
.sidebar__brand .marca-e {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
}
.sidebar__brand .marca-e svg { width: 19px; height: 19px; }

.sidebar__nav {
  padding: var(--e2) 0;
  gap: 3px;
  align-items: center;
  width: 100%;
}
.sidebar__nav a {
  width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
  border-radius: 10px;
  color: var(--text-3);
  position: relative;
  font-size: 0;     /* o rótulo não cabe em 74px; segue no HTML para leitor de tela */
  gap: 0;
}
.sidebar__nav a:hover { background: var(--surface-2); color: var(--text-2); }
.sidebar__nav a.is-active { background: var(--primary-lt); color: var(--primary); }
.sidebar__nav a.is-active svg { stroke: var(--primary); }
.sidebar__nav svg { width: 19px; height: 19px; }

/* O contador vira um ponto no canto do ícone — o número inteiro não cabe. */
.nav-n {
  position: absolute;
  top: 7px;
  right: 7px;
  margin: 0;
  min-width: 6px;
  width: 6px;
  height: 6px;
  padding: 0;
  font-size: 0;
  background: var(--primary);
  border: 2px solid var(--surface);
  box-sizing: content-box;
}
.nav-n--hot { background: var(--red); }
.sidebar__nav a.is-active .nav-n { background: var(--primary); }

/* Avatar e "sair" empilhados: lado a lado não cabem em 74px, e esconder o
   "sair" deixaria a pessoa sem como sair do sistema no computador. */
.sidebar__foot {
  border-top: 1px solid var(--border);
  padding: var(--e3) 0;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  gap: var(--e2);
}
.sidebar__user { display: none; }            /* o nome não cabe em 74px */
.sidebar__foot .icon-btn {
  width: 34px; height: 34px;
  border-radius: 9px;
  color: var(--text-3);
  background: transparent;
  border: 0;
}
.sidebar__foot .icon-btn:hover { background: var(--surface-2); color: var(--red); }
.sidebar__foot .icon-btn svg { width: 17px; height: 17px; }
.avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }

/* ------------------------------------------------------------- cabeçalho */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--e5) var(--e6);
  gap: var(--e4);
}
.topbar h2 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.15;
}
.topbar p {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 3px;
}

.view {
  padding: var(--e6);
  gap: var(--e5);
  background: var(--bg);
}

/* ---------------------------------------------------------------- cartões */

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;   /* separação por borda e espaço, não por sombra */
  background: var(--surface);
}
.card__head {
  padding: var(--e5) var(--e5) 0;
  border-bottom: 0;   /* linha dentro do cartão só picota a leitura */
}
.card__head h3,
.card__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.012em;
}
.card__head p { font-size: 12.5px; color: var(--text-3); }
.card__body { padding: var(--e5); }

/* ------------------------------------------------------------ indicadores */

/* O número manda; rótulo e variação são apoio. Sem ícone colorido em
   quadradinho: quatro deles lado a lado viram enfeite competindo. */
.stat {
  box-shadow: none;
  border-radius: var(--radius);
  padding: var(--e5);
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.stat__icon { display: none; }
.stat__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  order: -1;          /* rótulo em cima, número embaixo */
}
.stat__value {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- tabelas */

.table { font-size: 13px; }
.table th {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.table td {
  padding: 13px 14px;   /* linha alta: a tabela respira */
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
}
.table td:first-child { color: var(--text); font-weight: 500; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }

/* ------------------------------------------------------------------ chips */

.chip {
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid transparent;
}

/* ----------------------------------------------------------------- botões */

.btn {
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 13px;
  box-shadow: none;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
}
.btn:hover { background: var(--surface-2); }
.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn--primary:hover { background: var(--primary-dk); border-color: var(--primary-dk); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--surface-2); }

/* ------------------------------------------------------------------ campos */

input, select, textarea {
  border-radius: var(--radius-sm);
  border-color: var(--border-2);
  font-size: 13.5px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-lt);
  outline: none;
}

/* -------------------------------------------------------------------- abas */

/* Aba não é botão grande: é texto com fundo discreto quando ativa. */
.tab {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  color: var(--text-3);
}
.tab:hover { background: var(--surface-2); color: var(--text-2); }
.tab.is-active {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}

/* ------------------------------------------------------------------- funil */

.column {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.column__title strong { font-size: 13px; font-weight: 600; }
.column__count {
  font-size: 11.5px;
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: 5px;
  padding: 1px 6px;
}
.dcard {
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: none;
  padding: 12px;
}
.dcard:hover { border-color: var(--border-2); box-shadow: var(--shadow); }

/* ----------------------------------------------------------------- modais */

.modal { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.modal__head { padding: var(--e5); border-bottom: 1px solid var(--border); }
.modal__head h3 { font-size: 16px; font-weight: 600; letter-spacing: -.014em; }
.modal__body { padding: var(--e5); }
.modal__foot { padding: var(--e4) var(--e5); border-top: 1px solid var(--border); }

/* ------------------------------------------------------------------ vazio */

.empty { border-radius: var(--radius); }

/* ------------------------------------------------------- telas menores */

/* A faixa de 74px continua servindo no notebook; só abaixo de 900px ela
   vira gaveta, e aí quem manda é o celular.css. */
@media (max-width: 900px) {
  .sidebar__brand .marca-e { display: none; }
  .sidebar__brand .marca-img--branco { display: block; }   /* gaveta navy */
  .sidebar { background: var(--navy); border-right: 0; align-items: stretch; }
  .sidebar__nav a { width: auto; height: auto; font-size: 15px; gap: 10px; justify-content: flex-start; color: #9cb0d1; }
  .sidebar__nav a.is-active { background: var(--primary); color: #fff; }
  .sidebar__nav a.is-active svg { stroke: #fff; }
  .sidebar__brand, .sidebar__nav, .sidebar__foot { width: auto; }
  .sidebar__foot { border-top-color: var(--navy-3); flex-direction: row; gap: 9px; }
  .sidebar__foot .icon-btn { color: #9cb0d1; }
  .sidebar__user { display: flex; }
  .sidebar__foot .icon-btn { display: grid; }
  .nav-n {
    position: static;
    width: auto; height: auto; min-width: 18px;
    font-size: 10.5px;
    padding: 1px 7px;
    border: 0;
    margin-left: auto;
    background: var(--primary-lt);
    color: var(--primary);
  }
}

/* ================================================================ calendário

   Grade de 7 colunas de largura igual. As células têm altura mínima fixa em
   vez de altura livre: sem isso, uma terça cheia esticaria a semana inteira e
   o mês ficaria com linhas de tamanhos diferentes — o olho perde a referência.
   O que não couber vira "+N", e o dia clicado mostra tudo.
   ============================================================================ */

.cal__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
}
.cal__nav { display: flex; align-items: center; gap: var(--e2); }
.cal__nav select {
  min-height: 34px;
  padding: 5px 9px;
  font-size: 13px;
  font-weight: 500;
}
.cal__nav select:disabled { opacity: .45; cursor: not-allowed; }
.cal__nav .icon-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
}
.cal__nav .icon-btn:hover { background: var(--surface-2); }
.cal__nav .icon-btn svg { width: 15px; height: 15px; }
.cal__modos { display: flex; gap: 2px; }

.cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal__dow {
  padding: 10px 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.cal__dia {
  min-height: 108px;
  padding: 7px 8px 8px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  min-width: 0;               /* sem isto o conteúdo alarga a coluna */
  transition: background .12s;
}
.cal__dia:nth-child(7n) { border-right: 0; }        /* sábado não precisa */
.cal__dia:hover { background: var(--surface-2); }
.cal__dia:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Dias das semanas de borda (do mês vizinho) ficam apagados, mas continuam
   clicáveis: quem vê "1º de setembro" na última linha de agosto espera poder
   clicar nele. */
.cal__dia.is-fora { background: var(--surface-2); }
.cal__dia.is-fora .cal__num { color: var(--text-3); opacity: .6; }
.cal__dia.is-fora .cal__ev { opacity: .55; }

.cal__num {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 5px;
}
.cal__dia.is-hoje .cal__num > span {
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 600;
}
.cal__alerta {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex: 0 0 auto;
}

.cal__eventos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.cal__ev {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 11.5px;
  line-height: 1.45;
  background: var(--surface-2);
  color: var(--text-2);
  border-left: 2px solid var(--text-3);
  min-width: 0;
}
.cal__hora { font-size: 10.5px; color: var(--text-3); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.cal__ev.is-done { opacity: .5; text-decoration: line-through; }

/* Cada tipo com sua cor na barra da esquerda: dá para ler o mês de longe e
   perceber "semana cheia de apresentação" sem abrir nada. */
.cal__ev--contato      { border-left-color: var(--primary); }
.cal__ev--apresentacao { border-left-color: var(--violet); }
.cal__ev--proposta     { border-left-color: var(--amber); }
.cal__ev--visit        { border-left-color: var(--green); }
.cal__ev--meeting      { border-left-color: var(--violet); }
.cal__ev--call         { border-left-color: var(--primary); }
.cal__ev--whatsapp     { border-left-color: var(--green); }
.cal__ev--email        { border-left-color: var(--text-3); }
.cal__ev--task         { border-left-color: var(--text-3); }

.cal__mais { font-size: 10.5px; color: var(--text-3); padding-left: 6px; }

/* No celular a grade de 7 colunas fica com 50px por dia: o texto do evento não
   cabe de jeito nenhum. As células encolhem e cada evento vira um tracinho
   colorido — dá para ver em que dias há compromisso, e o toque abre o dia. */
@media (max-width: 900px) {
  .cal__dia { min-height: 62px; padding: 5px 4px; }
  .cal__num { font-size: 11.5px; justify-content: center; margin-bottom: 3px; }
  .cal__ev { padding: 0; height: 3px; border-radius: 2px; border-left: 0; }
  .cal__ev > * { display: none; }
  .cal__ev--contato      { background: var(--primary); }
  .cal__ev--apresentacao { background: var(--violet); }
  .cal__ev--proposta     { background: var(--amber); }
  .cal__ev--visit        { background: var(--green); }
  .cal__ev--meeting      { background: var(--violet); }
  .cal__ev--call         { background: var(--primary); }
  .cal__ev--whatsapp     { background: var(--green); }
  .cal__ev--email        { background: var(--text-3); }
  .cal__ev--task         { background: var(--text-3); }
  .cal__barra { gap: var(--e2); }
  .cal__nav { flex: 1 1 auto; min-width: 0; }
  .cal__nav select { flex: 1 1 auto; min-width: 0; }
}

/* ============================================================ participantes

   Quem está no atendimento. Cada pessoa é uma pastilha com inicial, primeiro
   nome e um "x" — nome inteiro não cabe quando são quatro, e primeiro nome é
   como as pessoas se chamam entre si de qualquer forma.
   ========================================================================== */

.pessoas { display: flex; flex-wrap: wrap; gap: var(--e2); }

.pessoa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 5px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  font-size: 12.5px;
  max-width: 190px;
  min-width: 0;
}
.pessoa--dono { border-color: var(--primary-2); background: var(--primary-lt); }

.pessoa__ini {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--text-3);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  flex: 0 0 auto;
}
.pessoa--dono .pessoa__ini { background: var(--primary); }

.pessoa__nome { font-weight: 500; color: var(--text-2); min-width: 0; }
.pessoa--dono .pessoa__nome { color: var(--primary-dk); }

.pessoa__tag {
  font-size: 10px;
  color: var(--primary);
  padding-right: 6px;
  flex: 0 0 auto;
}

/* O "x" fica discreto: tirar alguém do atendimento não é ação de todo dia, e
   um botão vermelho fixo ao lado de cada nome deixaria a faixa agressiva. */
.pessoa__x {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  flex: 0 0 auto;
}
.pessoa__x:hover { background: var(--red); color: #fff; }
.pessoa__x svg { width: 12px; height: 12px; stroke-width: 2.4; }

/* ---------------------------------------------------- escolher uma pessoa */

.escolha { display: flex; flex-direction: column; gap: 4px; }
.escolha__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  min-width: 0;
}
.escolha__item:hover { background: var(--surface-2); border-color: var(--border); }
.escolha__item:disabled { opacity: .5; }
.escolha__item strong { font-size: 13.5px; font-weight: 500; display: block; }

/* ============================================================ menu expandido

   A faixa de 74px é ótima para quem já sabe o que cada ícone faz — e ruim
   para quem está aprendendo, ou para o Gabriel entrando agora. Este botão
   abre os nomes sem tirar a faixa do lugar: o conteúdo acompanha, nada
   flutua por cima.

   A escolha fica guardada no navegador, então quem prefere expandido não
   precisa clicar toda vez que abre o sistema.
   ============================================================================ */

.expandir {
  position: absolute;
  top: 22px;
  right: -11px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-3);
  padding: 0;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(13, 17, 23, .10);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.sidebar { position: relative; }    /* âncora do botão */

/* Sempre visível. A primeira versão só aparecia ao passar o mouse: mais
   discreto, e inútil — botão que ninguém vê é botão que ninguém descobre.
   A discrição fica no tamanho (22px) e na cor, não em esconder. */
.expandir:hover {
  background: var(--primary-lt);
  color: var(--primary);
  border-color: var(--primary-2);
}
.expandir:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.expandir svg { width: 12px; height: 12px; stroke-width: 2.4; }

/* fechado: a seta aponta para fora (abrir). aberto: aponta para dentro */
.app.is-expandida .expandir svg { transform: rotate(180deg); }

/* ---------------------------------------------------------- estado aberto */

.app.is-expandida { grid-template-columns: 208px 1fr; }

.app.is-expandida .sidebar { align-items: stretch; }
.app.is-expandida .sidebar__brand { justify-content: flex-start; padding-left: 16px; }
.app.is-expandida .sidebar__brand .marca-e { display: none; }
.app.is-expandida .sidebar__brand .marca-img--escuro {
  display: block;
  width: auto;
  max-width: 132px;
  height: auto;
}

.app.is-expandida .sidebar__nav { align-items: stretch; padding: var(--e2) 12px; }
.app.is-expandida .sidebar__nav a {
  width: auto;
  height: auto;
  padding: 9px 11px;
  justify-content: flex-start;
  gap: 11px;
  font-size: 13.5px;
  font-weight: 500;
}
.app.is-expandida .sidebar__nav a svg { flex: 0 0 auto; }

/* o contador volta a ser número, que é o que faz o vendedor clicar */
.app.is-expandida .nav-n {
  position: static;
  width: auto;
  height: auto;
  min-width: 20px;
  padding: 1px 7px;
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  border: 0;
  background: var(--primary-lt);
  color: var(--primary);
}
.app.is-expandida .nav-n--hot { background: var(--red); color: #fff; }

.app.is-expandida .sidebar__foot {
  flex-direction: row;
  padding: var(--e3) 16px;
  gap: 9px;
}
.app.is-expandida .sidebar__user { display: flex; }
.app.is-expandida .sidebar__user strong { color: var(--text); }
.app.is-expandida .sidebar__user span { color: var(--text-3); }

/* No celular quem manda é o celular.css: lá a barra já é gaveta com nomes,
   e um botão de expandir não teria sentido. */
@media (max-width: 900px) {
  .expandir { display: none; }
  .app.is-expandida { grid-template-columns: 1fr; }

  /* A gaveta do celular é navy, então a marca escura sumiria nela. E como
     `.app.is-expandida` fica guardado no navegador, ele continua valendo aqui
     mesmo sem sentido — por isso a regra é explícita.

     Precisa estar NO FIM do arquivo: a regra que mostra a marca escura tem a
     mesma especificidade, e entre iguais vence a última. Escrever isto lá em
     cima, junto das outras regras de celular, não teria efeito nenhum. */
  .app.is-expandida .sidebar__brand .marca-img--escuro { display: none; }
  .app.is-expandida .sidebar__brand .marca-img--branco { display: block; }
}