/* ============================================================
   A Voz Dela — folha de estilo
   Princípios: alvos grandes, alto contraste, nada piscando,
   posição fixa para controles vitais, anel de progresso do dwell
   como assinatura visual do app.
   ============================================================ */

:root {
  /* paleta */
  --papel:        #FBF8F3;   /* fundo quente, não branco puro (menos fadiga) */
  --tinta:        #2A2140;   /* texto: ameixa profunda, contraste AAA no papel */
  --framboesa:    #B4356A;   /* assinatura: anel de dwell + marca */
  --emergencia:   #B3261E;
  --emergencia-2: #8C1D17;

  /* tintas de categoria (fundo suave + borda forte) */
  --vermelho-bg: #FBE4E1; --vermelho-bd: #C0564A;
  --azul-bg:     #E1EBF7; --azul-bd:     #3D6DA6;
  --verde-bg:    #E2F1E4; --verde-bd:    #3F7D4E;
  --roxo-bg:     #ECE4F5; --roxo-bd:     #6D4FA1;
  --laranja-bg:  #FBEBD9; --laranja-bd:  #B06A2A;
  --teal-bg:     #DDF0EE; --teal-bd:     #2E7A74;

  --raio: 22px;
  --sombra: 0 3px 10px rgba(42, 33, 64, 0.10);

  /* dwell — atualizado via JS */
  --dwell-progresso: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  background: var(--papel);
  color: var(--tinta);
  display: flex;
  flex-direction: column;
  user-select: none;         /* evita seleção acidental de texto pelo cursor */
  -webkit-user-select: none;
}

/* ------------------------------------------------------------- topo */

.btn-config, .btn-favoritos {
  position: fixed;
  right: 24px;
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  background: var(--papel);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  color: var(--tinta);
}
.btn-config:hover, .btn-config:focus-visible,
.btn-favoritos:hover, .btn-favoritos:focus-visible { border-color: var(--tinta); }

.btn-config    { top: 14px; }
.btn-favoritos { top: 70px; }

/* ------------------------------------------------------- favoritos */

.favoritos-vazio {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--tinta);
  padding: 40px 24px;
}

/* ------------------------------------------------------------- grid */

.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  padding: 20px 24px;
  align-content: start;
  overflow-y: auto;
}

.btn {
  font-family: inherit;
  font-weight: 700;
  color: var(--tinta);
  border-radius: var(--raio);
  cursor: pointer;
  position: relative;
  box-shadow: var(--sombra);
  transition: transform 120ms ease;
}
.btn:focus-visible { outline: 5px solid var(--framboesa); outline-offset: 3px; }

.btn-celula {
  min-height: 150px;
  font-size: 1.6rem;
  line-height: 1.25;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  border-width: 4px;
  border-style: solid;
  background: #fff;
  border-color: var(--tinta);
}
.btn-celula .icone { font-size: 2.6rem; }
.btn-celula:hover { transform: scale(1.02); }

.celula-frase { position: relative; }

.btn-favorito {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--tinta);
  cursor: pointer;
}
.btn-favorito.ativo { background: var(--framboesa); border-color: var(--framboesa); color: #fff; }

/* cores por categoria */
.cor-vermelho { background: var(--vermelho-bg); border-color: var(--vermelho-bd); }
.cor-azul     { background: var(--azul-bg);     border-color: var(--azul-bd); }
.cor-verde    { background: var(--verde-bg);    border-color: var(--verde-bd); }
.cor-roxo     { background: var(--roxo-bg);     border-color: var(--roxo-bd); }
.cor-laranja  { background: var(--laranja-bg);  border-color: var(--laranja-bd); }
.cor-teal     { background: var(--teal-bg);     border-color: var(--teal-bd); }

/* ------------------------------------------- anel de progresso (dwell)
   Assinatura do app: um anel de framboesa que envolve o botão
   enquanto o cursor permanece sobre ele. Implementado como um
   pseudo-elemento com conic-gradient, dirigido por --dwell-progresso. */

.btn.dwell-ativo::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  padding: 5px;
  background: conic-gradient(
    var(--framboesa) calc(var(--dwell-progresso) * 1turn),
    transparent 0
  );
  -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, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* feedback de disparo */
.btn.disparado { animation: pulso 300ms ease; }
@keyframes pulso {
  50% { transform: scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-celula:hover { transition: none; transform: none; }
  .btn.disparado { animation: none; }
}

/* ------------------------------------------------------- barra fixa */

.barra {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  gap: 14px;
  padding: 14px 24px 18px;
  border-top: 3px solid var(--tinta);
  background: var(--papel);
}

.barra .btn {
  min-height: 88px;
  font-size: 1.7rem;
  border: 4px solid var(--tinta);
}

.barra-sim    { background: var(--verde-bg); border-color: var(--verde-bd) !important; }
.barra-nao    { background: var(--vermelho-bg); border-color: var(--vermelho-bd) !important; }
.barra-voltar { background: #fff; }

.barra-emergencia {
  background: var(--emergencia);
  border-color: var(--emergencia-2) !important;
  color: #fff;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------- configurações */

.config {
  border: 4px solid var(--tinta);
  border-radius: var(--raio);
  padding: 28px;
  max-width: 520px;
  width: 90vw;
  font-family: inherit;
  color: var(--tinta);
  background: var(--papel);
}
.config::backdrop { background: rgba(42, 33, 64, 0.5); }
.config h2 { margin-bottom: 20px; font-size: 1.5rem; }

.config-linha {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 22px;
}
.config-linha input[type="range"] { width: 100%; accent-color: var(--framboesa); }
.config-linha input[type="checkbox"] { width: 28px; height: 28px; accent-color: var(--framboesa); }

.config-cadastro {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--framboesa);
  margin-bottom: 20px;
}

.config-fechar {
  min-height: 64px;
  width: 100%;
  font-size: 1.3rem;
  background: var(--tinta);
  color: var(--papel);
  border: none;
}

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

@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .btn-celula { min-height: 120px; font-size: 1.3rem; }
  .barra { grid-template-columns: 1fr 1fr; }
}