/* ══════════════════════════════════════════════════════════════════════════
   Escriba · tema
   Identidade João Laurentino: basalto 45% · calcário 45% · magma 10%.
   Regra que não se quebra: MAGMA NUNCA É FUNDO. Só veio de lava na rocha —
   botão, número, palavra-chave. O único fundo magma permitido é --magma-tint.

   Cor nova entra como token aqui, nunca como hex solto no componente.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --basalto-100: #84939B;
  --basalto-200: #58626B;
  --basalto-300: #3B4752;
  --basalto:     #27333D;
  --basalto-600: #172029;
  --basalto-700: #0A0F14;

  --calcario-50:  #FAFAFA;
  --calcario-100: #F4F5F0;
  --calcario:     #E9EBE1;
  --calcario-300: #DADBCE;
  --calcario-400: #BFC2AF;
  --calcario-500: #A6A898;

  --magma:      #FC2D02;
  --magma-200:  #FEA16D;
  --magma-400:  #F66635;
  --magma-600:  #A0190E;
  --magma-tint: rgba(252, 45, 2, .08);

  /* A identidade não tem "verde de sucesso": nasce aqui, dessaturado pra
     conviver com o basalto sem virar cor de bootstrap. */
  --sucesso: #4f7d5e;
  --sucesso-suave: #eaf1ec;
  --perigo: var(--magma-600);
  --perigo-suave: #fbeae7;

  --fundo: var(--calcario-100);
  --papel: #fff;
  --tinta: var(--basalto);
  --tinta-fraca: var(--basalto-200);
  --linha: var(--calcario-300);

  --r-p: 4px;
  --r-m: 8px;
  --r-g: 12px;
  --pilula: 999px;

  --titulo: "Bebas Neue", Impact, sans-serif;
  --texto: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fundo);
  /* Grão: a identidade pede fundo com textura, nunca chapado. */
  background-image: radial-gradient(rgba(39, 51, 61, .025) 1px, transparent 1px);
  background-size: 3px 3px;
}

h1, h2, h3 { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }

.titulo-marca {
  font-family: var(--titulo);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
}

/* Nas peças dele o dado é sempre gigante. */
.numero { font-family: var(--titulo); font-size: 30px; line-height: 1; letter-spacing: .02em; }
.fio { height: 1px; background: var(--linha); border: 0; margin: 16px 0; }

/* ── Estrutura ─────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.lateral {
  background: var(--basalto);
  color: var(--calcario);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marca { display: flex; align-items: baseline; gap: 8px; }
.marca .nome { font-family: var(--titulo); font-size: 30px; color: var(--calcario-50); }
/* O único ponto de magma da lateral: o pingo de lava na rocha. */
.marca .pingo { width: 7px; height: 7px; border-radius: 50%; background: var(--magma); }
.marca .sub { font-size: 11px; color: var(--basalto-100); letter-spacing: .02em; }

.principal { padding: 26px 30px 60px; max-width: 1080px; width: 100%; min-width: 0; }

/* ── Cartão ────────────────────────────────────────────────────────────── */
.card {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
  padding: 18px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.card h2 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.card .legenda { color: var(--tinta-fraca); font-size: 13px; }

/* ── Botões ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--pilula);
  border: 1px solid var(--linha); background: var(--papel);
  cursor: pointer; font-weight: 600; font-size: 14px;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--calcario-100); border-color: var(--calcario-400); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-magma { background: var(--magma); border-color: var(--magma); color: #fff; }
.btn-magma:hover { background: var(--magma-400); border-color: var(--magma-400); }

.btn-basalto { background: var(--basalto); border-color: var(--basalto); color: var(--calcario-50); }
.btn-basalto:hover { background: var(--basalto-300); border-color: var(--basalto-300); }

.btn-fantasma { background: transparent; border-color: transparent; color: var(--tinta-fraca); }
.btn-fantasma:hover { background: var(--calcario); color: var(--tinta); }

.btn-p { padding: 6px 11px; font-size: 13px; }

/* ── Campos ────────────────────────────────────────────────────────────── */
.campo {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--linha); border-radius: var(--r-m);
  background: var(--papel); outline: none;
}
.campo:focus { border-color: var(--basalto-100); box-shadow: 0 0 0 3px rgba(39, 51, 61, .07); }
textarea.campo { resize: vertical; min-height: 110px; line-height: 1.6; }
label.rotulo { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--tinta-fraca); }

/* ── As portas de entrada ──────────────────────────────────────────────── */
.portas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.porta {
  padding: 8px 15px; border-radius: var(--pilula);
  border: 1px solid var(--linha); background: var(--papel);
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--tinta-fraca);
}
.porta:hover { border-color: var(--basalto-100); color: var(--tinta); }
.porta.ativa { background: var(--basalto); border-color: var(--basalto); color: var(--calcario-50); }

.solta {
  border: 2px dashed var(--calcario-400); border-radius: var(--r-g);
  padding: 34px 20px; text-align: center; color: var(--tinta-fraca);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.solta:hover, .solta.sobre { border-color: var(--magma); background: var(--magma-tint); color: var(--tinta); }

/* ── Lista ─────────────────────────────────────────────────────────────── */
/* minmax(0, 1fr) e não `1fr`: grid sem coluna declarada dimensiona por
   max-content, o filho passa a mandar na largura do pai e o ellipsis nunca
   age — foi o que já estourou uma lista em 8.348px dentro de um card de 302. */
.lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }

.item {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-m);
  padding: 13px 15px; cursor: pointer; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
}
.item:hover { border-color: var(--basalto-100); }
.item h3 { font-size: 15px; font-weight: 700; margin-bottom: 3px;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .sub { font-size: 12.5px; color: var(--tinta-fraca);
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.selo {
  display: inline-block; padding: 2px 9px; border-radius: var(--pilula);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: var(--calcario); color: var(--basalto-200);
}
.selo-ok { background: var(--sucesso-suave); color: var(--sucesso); }
.selo-erro { background: var(--perigo-suave); color: var(--perigo); }
.selo-andando { background: var(--magma-tint); color: var(--magma-600); }

.barra { height: 4px; background: var(--calcario); border-radius: var(--pilula); overflow: hidden; margin-top: 7px; }
.barra > i { display: block; height: 100%; background: var(--magma); transition: width .4s ease; }

/* ── Ficha ─────────────────────────────────────────────────────────────── */
.fala { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; margin-bottom: 11px; }
.fala .t {
  font-size: 12px; color: var(--calcario-500); font-variant-numeric: tabular-nums;
  background: none; border: 0; padding: 2px 0; text-align: left; cursor: pointer;
}
.fala .t:hover { color: var(--magma); }
.fala .quem { font-weight: 700; margin-right: 5px; }
.fala.aceso { background: var(--magma-tint); border-radius: var(--r-p); }

.resumo-box { background: var(--calcario-100); border-left: 3px solid var(--magma);
              border-radius: 0 var(--r-m) var(--r-m) 0; padding: 14px 16px; }

/* ── Janela ────────────────────────────────────────────────────────────── */
.veu { position: fixed; inset: 0; background: rgba(10, 15, 20, .55);
       display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.janela { background: var(--papel); border-radius: var(--r-g); padding: 24px;
          max-width: 620px; width: 100%; max-height: 86vh; overflow-y: auto; }

/* ── Avisos ────────────────────────────────────────────────────────────── */
.aviso { padding: 11px 14px; border-radius: var(--r-m); font-size: 13.5px; margin-bottom: 12px; }
.aviso-erro { background: var(--perigo-suave); color: var(--perigo); }
.aviso-ok { background: var(--sucesso-suave); color: var(--sucesso); }
.aviso-atencao { background: var(--magma-tint); color: var(--magma-600); }

.vazio { text-align: center; padding: 46px 20px; color: var(--calcario-500); }

/* ── Lateral: navegação ────────────────────────────────────────────────── */
.nav-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-m); cursor: pointer;
  color: var(--calcario-400); font-size: 14px; min-width: 0;
}
.nav-item:hover { background: var(--basalto-600); color: var(--calcario); }
.nav-item.ativo { background: var(--basalto-600); color: var(--calcario-50); font-weight: 600; }
.nav-item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
              color: var(--basalto-100); margin: 4px 0 6px; }

.busca-lateral {
  width: 100%; padding: 9px 12px; border-radius: var(--pilula);
  border: 1px solid var(--basalto-300); background: var(--basalto-600);
  color: var(--calcario); outline: none; font-size: 14px;
}
.busca-lateral::placeholder { color: var(--basalto-100); }
.busca-lateral:focus { border-color: var(--basalto-100); }

/* ── Gravando ──────────────────────────────────────────────────────────── */
.gravando { display: flex; align-items: center; gap: 10px; }
.ponto-vivo { width: 11px; height: 11px; border-radius: 50%; background: var(--magma);
              animation: pulsar 1.4s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ── Telefone ──────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; }
  .principal { padding: 18px 16px 50px; }
  .fala { grid-template-columns: 52px minmax(0, 1fr); }
}