/* =====================================================================
   ESTILOS: "No que a Gabi está trabalhando?"
   Você não precisa editar este arquivo no dia a dia.
   Para trocar cores rapidamente, altere as variáveis abaixo.
   ===================================================================== */

:root {
  /* Cores base */
  --papel: #F7F6F2;        /* fundo da página */
  --superficie: #FFFFFF;   /* fundo dos cards */
  --tinta: #211F1A;        /* texto principal */
  --apagado: #6F6A5E;      /* texto secundário */
  --linha: #E6E2D8;        /* bordas sutis */
  --acento: #2743C7;       /* azul ultramar, cor de destaque */

  /* Cores de prioridade */
  --cor-urgente: #CE4A3F;
  --cor-alta: #D9A32E;
  --cor-normal: #4E9E6C;
  --cor-aguardando: #B9B4A8;

  /* Cores de carga de trabalho */
  --carga-tranquila: #4E9E6C;
  --carga-moderada: #D9A32E;
  --carga-alta: #DD7A2F;
  --carga-lotada: #CE4A3F;

  /* Tipografia */
  --fonte-titulo: "Gabarito", "Archivo", system-ui, sans-serif;
  --fonte-texto: "Archivo", system-ui, sans-serif;
  --fonte-mono: "Fragment Mono", ui-monospace, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--fonte-texto);
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: 0 20px;
  transition: background 0.6s ease, color 0.6s ease;
}

/* =============================== MODO NOITE =============================== */
/* Ativado automaticamente entre 22h e 7h no horário da Gabi (São Paulo).
   Só troca as cores base; todo o resto herda via variáveis. */

body.modo-noite {
  --papel: #10131F;
  --superficie: #191E30;
  --tinta: #ECEDF4;
  --apagado: #9AA0B5;
  --linha: #2A3048;
  --acento: #7288F2;
}

/* =============================== TOPO =============================== */

.topo {
  max-width: 1000px;
  margin: 0 auto;
  padding: 72px 0 40px;
  animation: surgir 0.6s ease both;
}

.eyebrow {
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 28px;
}

.titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}

.subtitulo {
  font-size: 1.05rem;
  color: var(--apagado);
  max-width: 34em;
  margin-bottom: 40px;
}

.topo-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* Indicador de carga de trabalho */
.carga {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 24px 14px 14px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 16px;
}

/* "z z z" flutuando perto da foto, só no modo noite */
.zzz {
  display: none;
  position: absolute;
  top: 4px;
  left: 128px;
  font-family: var(--fonte-mono);
  color: var(--apagado);
  pointer-events: none;
}

body.modo-noite .zzz { display: block; }

.zzz span {
  position: absolute;
  opacity: 0;
  animation: flutuar-z 3s ease-in-out infinite;
}

.zzz span:nth-child(1) { font-size: 0.7rem;  animation-delay: 0s; }
.zzz span:nth-child(2) { font-size: 0.9rem;  left: 10px; animation-delay: 1s; }
.zzz span:nth-child(3) { font-size: 1.1rem;  left: 22px; animation-delay: 2s; }

@keyframes flutuar-z {
  0%   { opacity: 0; transform: translateY(8px); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* Foto da Gabi que muda conforme a carga */
.carga-foto {
  width: 144px;
  height: 144px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--superficie);
  box-shadow: 0 0 0 1px var(--linha), 0 4px 14px rgba(33, 31, 26, 0.10);
  flex-shrink: 0;
}

.carga-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.carga-rotulo {
  font-family: var(--fonte-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apagado);
}

.carga-valor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.25rem;
}

.carga-ponto { width: 12px; height: 12px; }

/* Bolinha piscando quando a carga está lotada */
.carga-ponto.piscando {
  animation: piscar-lotada 1.1s ease-in-out infinite;
}

@keyframes piscar-lotada {
  0%, 100% { box-shadow: 0 0 0 0 rgba(206, 74, 63, 0.45); opacity: 1; }
  50%      { box-shadow: 0 0 0 9px rgba(206, 74, 63, 0); opacity: 0.55; }
}

/* Plaquinha de humor sob a carga ("Estou: precisando de café") */
.carga-estou {
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-top: 4px;
}

.carga-ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cor-aguardando);
  flex-shrink: 0;
}

/* Botão principal */
.botao-pedir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--acento);
  border: none;
  border-radius: 12px;
  padding: 16px 28px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Ícones de traço (família Lucide, embutidos como SVG) */
.icone {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.secao-titulo .icone { color: var(--apagado); }

.botao-pedir:hover {
  background: #1F37A8;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(39, 67, 199, 0.25);
}

.botao-pedir:active { transform: translateY(0); }

/* =============================== PAINEL =============================== */

.painel {
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.secao {
  padding: 36px 0;
  border-top: 1px solid var(--linha);
  animation: surgir 0.6s ease both;
}

.secao:nth-of-type(2) { animation-delay: 0.08s; }
.secao:nth-of-type(3) { animation-delay: 0.16s; }
.secao:nth-of-type(4) { animation-delay: 0.24s; }

.secao-cabecalho {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}

.secao-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.secao-contagem {
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  color: var(--apagado);
}

/* Ponto pulsante "AGORA" da seção Em andamento */
.agora-ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--acento);
  animation: pulsar 2s ease-in-out infinite;
}

@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(39, 67, 199, 0.35); }
  50%      { box-shadow: 0 0 0 7px rgba(39, 67, 199, 0); }
}

/* =============================== CARDS =============================== */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* Na fila: lista vertical numerada (a ordem é a posição na fila) */
.cards-fila { grid-template-columns: 1fr; }

.card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 20px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(33, 31, 26, 0.06);
}

/* Cards em andamento ganham a borda-assinatura em azul */
.secao-andamento .card {
  border-left: 3px solid var(--acento);
}

/* Número da posição na fila */
.card-numero {
  font-family: var(--fonte-mono);
  font-size: 0.8rem;
  color: var(--apagado);
  padding-top: 2px;
  min-width: 22px;
}

.card-corpo { flex: 1; min-width: 0; }

.card-nome {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 6px;
}

.card-meta {
  font-family: var(--fonte-mono);
  font-size: 0.74rem;
  color: var(--apagado);
  display: flex;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 2px;
  margin-bottom: 12px;
}

.card-rodape {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Etiqueta de status */
.status {
  font-family: var(--fonte-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--papel);
  border: 1px solid var(--linha);
  color: var(--tinta);
}

.status-em-andamento,
.status-em-ajustes {
  background: rgba(39, 67, 199, 0.08);
  border-color: rgba(39, 67, 199, 0.25);
  color: var(--acento);
}

.status-concluido {
  color: var(--apagado);
}

/* Indicador de prioridade */
.prioridade {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fonte-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apagado);
}

.prioridade-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.prioridade-urgente .prioridade-ponto    { background: var(--cor-urgente); }
.prioridade-alta .prioridade-ponto       { background: var(--cor-alta); }
.prioridade-normal .prioridade-ponto     { background: var(--cor-normal); }
.prioridade-aguardando .prioridade-ponto { background: var(--cor-aguardando); }

/* Concluídos: aparência apagada e compacta */
.secao-concluidos .card {
  background: transparent;
  padding: 14px 20px;
}

.secao-concluidos .card:hover {
  transform: none;
  box-shadow: none;
}

.secao-concluidos .card-nome {
  font-size: 0.95rem;
  color: var(--apagado);
  margin-bottom: 2px;
}

.secao-concluidos .card-meta { margin-bottom: 0; }
.secao-concluidos .card-rodape { display: none; }

.card-check {
  color: var(--cor-normal);
  font-size: 0.9rem;
  padding-top: 2px;
}

/* Estado vazio de uma seção */
.vazio {
  font-size: 0.92rem;
  color: var(--apagado);
  padding: 8px 0;
}

/* =============================== RODAPÉ =============================== */

.rodape {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 0 48px;
  border-top: 1px solid var(--linha);
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--apagado);
}

/* =============================== MODAL =============================== */

.modal {
  border: none;
  border-radius: 20px;
  padding: 0;
  width: min(480px, calc(100vw - 32px));
  margin: auto;
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 24px 64px rgba(33, 31, 26, 0.18);
}

.modal::backdrop {
  background: rgba(33, 31, 26, 0.45);
  backdrop-filter: blur(3px);
}

.modal[open] { animation: surgir 0.25s ease both; }

.modal-conteudo { padding: 32px; }

.modal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.modal-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.modal-fechar {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--apagado);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}

.modal-fechar:hover { color: var(--tinta); background: var(--papel); }

/* Aviso noturno do formulário (22h às 7h) */
.modal-noite {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.noite-foto {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.noite-texto {
  font-size: 0.85rem;
  color: var(--apagado);
  line-height: 1.45;
}

/* Campos do formulário */
.campo { margin-bottom: 18px; }

.campo label {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 7px;
}

.opcional { color: var(--apagado); text-transform: none; letter-spacing: 0.04em; }

.campo input,
.campo textarea {
  width: 100%;
  font-family: var(--fonte-texto);
  font-size: 0.95rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo textarea { resize: vertical; }

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(39, 67, 199, 0.12);
}

.campo-nota {
  font-size: 0.78rem;
  color: var(--apagado);
  margin-top: 7px;
  line-height: 1.45;
}

.link-whatsapp {
  color: var(--acento);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-whatsapp:hover { color: #1F37A8; }

/* Honeypot anti-spam: fica fora da tela */
.honeypot { position: absolute; left: -9999px; }

.formulario-erro {
  font-size: 0.85rem;
  color: var(--cor-urgente);
  margin-bottom: 14px;
}

.botao-enviar {
  width: 100%;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background: var(--acento);
  border: none;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.botao-enviar:hover { background: #1F37A8; }
.botao-enviar:disabled { opacity: 0.6; cursor: wait; }

/* Mensagem de sucesso */
.modal-sucesso { text-align: center; padding: 16px 0 8px; }

.sucesso-icone {
  margin-bottom: 16px;
  color: var(--acento);
}

.sucesso-icone svg {
  width: 48px;
  height: 48px;
}

.sucesso-texto {
  font-size: 1rem;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* =============================== ANIMAÇÕES =============================== */

@keyframes surgir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Foco visível ao navegar por teclado */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* =============================== CELULAR =============================== */

@media (max-width: 560px) {
  .topo { padding-top: 48px; }

  .topo-acoes {
    align-items: stretch;
    flex-direction: column;
  }

  .botao-pedir { width: 100%; padding: 18px; }

  .carga { justify-content: flex-start; }
  .carga-foto { width: 112px; height: 112px; }

  .modal-conteudo { padding: 24px 20px; }
}