/*
 * Tema CSC — identidade do logo aplicada à plataforma.
 *
 * O CSS do AutoSign vem pré-compilado na imagem, então não dá para rebuildar o
 * Tailwind. Não é preciso: todo o tema do DaisyUI vive num bloco :root de
 * variáveis HSL, e este arquivo entra depois do bundle sobrescrevendo-as. Trocar
 * os valores aqui re-tematiza a plataforma inteira.
 *
 * As cores saem do próprio logo:
 *   #0a0660 → #1B0DAE   anel esquerdo (azul profundo)
 *   #1B0DAE → #3D2FD4   anel central  (azul royal)
 *   #00D2FF → #3A7BD5   anel direito  (ciano)
 *
 * Formato do DaisyUI: "matiz saturação% luminosidade%", sem vírgulas.
 */

:root {
  /* ── Primária: o azul da marca ── */
  --p:  245 86% 37%;   /* #1B0DAE */
  --pf: 245 87% 29%;   /* #140A8C — estado pressionado/hover */
  --pc: 245 100% 97%;  /* texto sobre a primária */

  /* ── Secundária: o azul royal do anel central ── */
  --s:  245 66% 51%;   /* #3D2FD4 */
  --sf: 245 66% 42%;
  --sc: 245 100% 97%;

  /* ── Acento: o ciano do terceiro anel ── */
  --a:  191 100% 50%;  /* #00D2FF */
  --af: 191 100% 40%;
  --ac: 215 80% 12%;   /* texto escuro: ciano claro não sustenta texto branco */

  /* ── Neutro: o azul mais profundo do logo ── */
  --n:  243 88% 20%;   /* #0a0660 */
  --nf: 243 88% 14%;
  --nc: 245 100% 97%;

  /* ── Superfícies: papel quente do design system ── */
  --b1: 0 0% 100%;     /* #FFFFFF — superfície principal */
  --b2: 51 26% 95%;    /* #F5F4EE — papel */
  --b3: 46 22% 85%;    /* #E1DDD0 — hairlines e bordas */
  --bc: 43 16% 8%;     /* #191712 — texto */

  /* ── Semânticas dessaturadas, nunca cores vivas de sistema ── */
  --in: 215 65% 53%;   /* #3A7BD5 */
  --inc: 215 100% 97%;
  --su: 114 30% 32%;   /* #3F6B3A */
  --suc: 114 100% 97%;
  --wa: 35 73% 35%;    /* #9A6318 */
  --wac: 35 100% 97%;
  --er: 11 66% 40%;    /* #A93B22 */
  --erc: 11 100% 97%;

  /* ── Geometria do design system ── */
  --rounded-box: 14px;    /* cartões e modais */
  --rounded-btn: 10px;    /* botões e campos — eram pílulas de 1.9rem */
  --rounded-badge: 999px; /* pílulas de status */
  --tab-radius: 9px;
  --btn-text-case: none;  /* era uppercase; o sistema usa caixa de sentença */
  --border-btn: 1px;
}

/* ── Tipografia ─────────────────────────────────────────────────────────────
   Montserrat no corpo alcança a interface inteira. Fraunces fica só nos
   tamanhos de display, que é onde o sistema pede serifa — aplicar em tudo
   pegaria números e tabelas, onde ela atrapalha a leitura.                   */
body,
.btn,
.base-input,
.base-select,
.base-button,
input,
select,
textarea,
button {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.text-4xl,
.text-3xl {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ── Assinatura: o gradiente do logo ────────────────────────────────────────
   O elemento mais característico da marca são os três anéis em gradiente. Ele
   aparece num lugar só — a ação primária —, para não virar ruído.

   A classe do botão principal desta aplicação é .base-button, não .btn-primary:
   mirar só no nome do DaisyUI deixava o botão no neutro escuro, quase preto. */
.base-button,
.btn-primary:not(.btn-outline):not(.btn-ghost):not(:disabled) {
  background-image: linear-gradient(135deg, #1B0DAE 0%, #3D2FD4 100%);
  background-color: #1B0DAE;
  border-color: #1B0DAE;
  color: #fff;
}

.base-button:hover,
.btn-primary:not(.btn-outline):not(.btn-ghost):not(:disabled):hover {
  background-image: linear-gradient(135deg, #140A8C 0%, #2D20B8 100%);
  background-color: #140A8C;
  border-color: #140A8C;
}

.base-button:disabled,
.base-button[disabled] {
  background-image: none;
  background-color: #CBC6B6;
  border-color: #CBC6B6;
}

/* ── Iniciais do usuário na barra ──────────────────────────────────────────
   Mesmo gradiente da ação primária: o avatar é a marca da pessoa dentro da
   marca da plataforma.                                                      */
.avatar-usuario {
  background-image: linear-gradient(135deg, #1B0DAE 0%, #3D2FD4 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(16,22,40,.14);
  transition: box-shadow .15s, filter .15s;
}

.avatar-usuario:hover { filter: brightness(1.08); }

.avatar-usuario:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #D7D2EF;
}

/* Foco visível com o anel do design system, em vez do outline padrão. */
.btn:focus-visible,
.base-input:focus-visible,
.base-select:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #D7D2EF;
}

/* ── Tela de entrada ────────────────────────────────────────────────────────
   Cartão centralizado no padrão do design system. O mascote é o único momento
   de personalidade; o texto ao redor faz o trabalho de confiança.            */
.tela-entrada {
  width: 100%;
  max-width: 470px;
  margin: 34px auto 0;
  background: #FFFFFF;
  border: 1px solid #E1DDD0;
  border-radius: 20px;
  box-shadow: 0 16px 40px -8px rgba(16,22,40,.12), 0 6px 14px -6px rgba(16,22,40,.07);
  padding: 34px 30px 28px;
}

.tela-entrada-marca {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}

.mascote {
  width: 210px;
  height: auto;
  display: block;
}

/* Espaço entre os campos e a ação principal. */
.tela-entrada .form-control + .form-control { margin-top: 14px; }
.tela-entrada form > .form-control:last-child { margin-top: 22px; }
.tela-entrada .base-button { width: 100%; }

/* Link de recuperação centralizado, em vez de solto à esquerda. */
.tela-entrada .flex.justify-between { justify-content: center; margin-top: 18px; }
.tela-entrada .flex.justify-between .link { font-size: 13px; font-weight: 600; }

.tela-entrada h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  color: #12100B;
  margin-bottom: 6px;
}

.tela-entrada-sub {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #6E6A5E;
  margin: 0 auto 24px;
  max-width: 34ch;
  line-height: 1.5;
}

.tela-entrada-rodape {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #E9E7DC;
  text-align: center;
  font-size: 12px;
  color: #9C978A;
}

/* ── Animação do mascote: um momento só, no carregamento ── */
/* O dasharray precisa ser MAIOR que o comprimento do traço. Se for menor, o
   padrão se repete e a assinatura fica tracejada para sempre em vez de
   completar — foi o que aconteceu ao engrossar o traço mantendo 120. */
.mascote-assinatura {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: mascote-assinar 1.4s ease-out .4s forwards;
}

.mascote-braco {
  transform-box: fill-box;
  transform-origin: 84% 8%;
  animation: mascote-escrever 1.5s ease-out .5s both;
}

.mascote-olhos {
  transform-box: fill-box;
  transform-origin: center;
  animation: mascote-piscar 6s ease-in-out 2.4s infinite;
}

.mascote-antena { animation: mascote-pulsar 2.6s ease-in-out infinite; }

@keyframes mascote-assinar { to { stroke-dashoffset: 0; } }

@keyframes mascote-escrever {
  0%   { transform: rotate(-16deg); }
  100% { transform: rotate(9deg); }
}

@keyframes mascote-piscar {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.15); }
}

@keyframes mascote-pulsar {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  /* Sem movimento, a assinatura já nasce pronta em vez de ficar invisível. */
  .mascote-assinatura { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .mascote-braco { transform: rotate(9deg); animation: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Painel gerencial
 *
 * O bundle do Tailwind vem purgado: md:grid-cols-4, table-sm, progress-primary
 * e alert-success/warning simplesmente não existem nele. Em vez de escrever
 * marcação que depende de qual utilitário sobreviveu ao purge, o painel usa as
 * classes abaixo, que são minhas e não dependem de rebuild.
 * ────────────────────────────────────────────────────────────────────────── */

.painel-numeros {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .painel-numeros            { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .painel-numeros--tres      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.painel-numero-valor {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
}

/* Semânticas dessaturadas do design system: sinalizam sem gritar. */
.painel-ok      { color: #3F6B3A; }
.painel-atencao { color: #9A6318; }
.painel-erro    { color: #A93B22; }
.painel-neutro  { color: hsl(var(--bc) / .4); }

.painel-aviso {
  border-radius: 10px;
  padding: .875rem 1.125rem;
  border: 1px solid;
}

.painel-aviso--ok       { background: #EEF4ED; border-color: #C6D9C3; color: #2F5129; }
.painel-aviso--atencao  { background: #FBF2E4; border-color: #E7D2AC; color: #7A4E13; }

/* Equivalente ao table-sm ausente. */
.painel-tabela th,
.painel-tabela td {
  padding: .5rem .75rem;
  font-size: .875rem;
}

.painel-tabela th {
  font-weight: 600;
  color: hsl(var(--bc) / .6);
  text-align: left;
}

.painel-tabela tbody tr + tr { border-top: 1px solid hsl(var(--bc) / .1); }

.painel-barra {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: .5rem;
  border: none;
  border-radius: 999px;
  background: hsl(var(--bc) / .1);
  overflow: hidden;
}

.painel-barra::-webkit-progress-bar   { background: hsl(var(--bc) / .1); border-radius: 999px; }
.painel-barra::-webkit-progress-value { background: hsl(var(--p)); border-radius: 999px; }
.painel-barra::-moz-progress-bar      { background: hsl(var(--p)); border-radius: 999px; }

.painel-endereco {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .75rem;
  color: hsl(var(--bc) / .55);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Telas de assinatura
 *
 * Elas usam outro layout e outro pacote de CSS, e por isso ficavam de fora do
 * tema. Agora carregam este arquivo; falta so alinhar a acao principal, que no
 * pacote 'form' vem como btn-neutral (azul-marinho) enquanto na plataforma a
 * acao principal e o azul da marca com gradiente.
 *
 * O escopo .tela-assinatura existe para nao repintar btn-neutral no resto da
 * plataforma, onde ele e usado como botao secundario.
 * ────────────────────────────────────────────────────────────────────────── */

.tela-assinatura .btn-neutral:not(.btn-outline):not(.btn-ghost):not(:disabled) {
  background-image: linear-gradient(135deg, #1B0DAE 0%, #3D2FD4 100%);
  background-color: #1B0DAE;
  border-color: #1B0DAE;
  color: #fff;
}

.tela-assinatura .btn-neutral:not(.btn-outline):not(.btn-ghost):not(:disabled):hover {
  background-image: linear-gradient(135deg, #140A8C 0%, #2E22B0 100%);
  background-color: #140A8C;
  border-color: #140A8C;
}

/* Dois numeros lado a lado com respiro. gap-8 e items-baseline nao existem no
 * bundle purgado — usar os do Tailwind fazia os rotulos colarem um no outro. */
.painel-par {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2.5rem;
}