/* ===================================================================
   base.css — o sistema de design da plataforma.

   Carregado ANTES dos css de cada tela. Define os tokens (cores,
   espaçamento, tipografia, elevação) e os componentes que se repetem.

   As cores da marca saíram do próprio logo: os pixels do assets/logo-v.png
   se concentram em ciano #00a8d0, verde-água #38b098 e grafite #303030.
   Usar as cores reais do "V" faz a interface parecer da mesma casa.
   =================================================================== */

:root {
  /* ---------- Marca ---------- */
  --marca-ciano:      #00a8d8;
  --marca-ciano-viva: #22c1e8;
  --marca-verde:      #3cb493;
  --marca-grafite:    #303030;

  /* O gradiente do logo, para assinaturas visuais */
  --marca-gradiente: linear-gradient(135deg, var(--marca-ciano) 0%, var(--marca-verde) 100%);

  /* ---------- Superfícies ----------
     Escala de profundidade: quanto mais alto o número, mais "perto" do
     usuário o elemento está. Nunca inventar um tom fora desta escala. */
  --sup-0: #0a0e13;   /* fundo da página        */
  --sup-1: #10151c;   /* painéis, barras        */
  --sup-2: #161d26;   /* cards, campos          */
  --sup-3: #1d2530;   /* hover, elementos ativos*/
  --sup-4: #252e3b;   /* menus, popovers        */

  /* ---------- Traços ---------- */
  --linha:       #212a35;
  --linha-forte: #2e3947;
  --linha-clara: rgba(255, 255, 255, .06);

  /* ---------- Texto ---------- */
  --txt:   #e9eff6;   /* principal   */
  --txt-2: #93a3b5;   /* secundário  */
  --txt-3: #63728a;   /* terciário   */

  /* ---------- Semânticas ---------- */
  --ok:      #34c98a;
  --alerta:  #f0b232;
  --erro:    #f26d78;
  --info:    var(--marca-ciano-viva);

  --ok-fundo:     rgba(52, 201, 138, .12);
  --alerta-fundo: rgba(240, 178, 50, .12);
  --erro-fundo:   rgba(242, 109, 120, .12);
  --info-fundo:   rgba(34, 193, 232, .12);

  /* ---------- Espaçamento (escala de 4) ---------- */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 20px;  --e6: 24px;  --e8: 32px;  --e10: 40px;
  --e12: 48px; --e16: 64px;

  /* ---------- Raios ---------- */
  --r1: 6px;   --r2: 9px;   --r3: 12px;  --r4: 16px;
  --r-pilula: 999px;

  /* ---------- Elevação ----------
     Sombra sempre com duas camadas: uma difusa larga para a profundidade,
     outra curta e escura para o contato com a superfície. Uma camada só
     deixa o elemento parecendo colado ou flutuando demais. */
  --sombra-1: 0 1px 2px rgba(0,0,0,.28);
  --sombra-2: 0 2px 4px rgba(0,0,0,.24), 0 6px 16px rgba(0,0,0,.22);
  --sombra-3: 0 4px 8px rgba(0,0,0,.28), 0 16px 40px rgba(0,0,0,.34);
  --brilho-foco: 0 0 0 3px rgba(0, 168, 216, .22);

  /* ---------- Movimento ---------- */
  --t-rapida: 120ms cubic-bezier(.4, 0, .2, 1);
  --t-media:  200ms cubic-bezier(.4, 0, .2, 1);

  /* ---------- Tipografia ---------- */
  --fonte: "Inter", "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-num: "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
}

/* =========================== RESET =========================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--sup-0);
  color: var(--txt);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

a { color: var(--marca-ciano-viva); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(0, 168, 216, .3); }

.hidden { display: none !important; }

/* Barra de rolagem discreta, no tom da interface */
* { scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--linha-forte);
  border-radius: var(--r-pilula);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #3d4a5c; background-clip: content-box; }

/* =========================== MARCA =========================== */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  color: inherit;
  text-decoration: none;
}
.marca:hover { text-decoration: none; }

.marca-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  /* O PNG tem fundo claro; o brilho suave assenta ele no tema escuro */
  filter: drop-shadow(0 0 10px rgba(0, 168, 216, .18));
}
.marca-logo.g { width: 46px; height: 46px; }

.marca-nome {
  font-weight: 640;
  font-size: 15px;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.marca-sub {
  font-size: 12px;
  color: var(--txt-3);
  letter-spacing: .02em;
}

/* =========================== BOTÕES =========================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 9px var(--e4);
  background: var(--sup-2);
  color: var(--txt);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--sombra-1);
  transition: background var(--t-rapida), border-color var(--t-rapida),
              transform var(--t-rapida), box-shadow var(--t-rapida);
}
.btn:hover:not(:disabled) {
  background: var(--sup-3);
  border-color: var(--linha-forte);
  text-decoration: none;
}
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: var(--brilho-foco); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn-principal {
  background: var(--marca-gradiente);
  border-color: transparent;
  color: #04222b;
  font-weight: 650;
}
.btn-principal:hover:not(:disabled) {
  background: var(--marca-gradiente);
  filter: brightness(1.08);
  border-color: transparent;
}

.btn-perigo { color: var(--erro); }
.btn-perigo:hover:not(:disabled) {
  border-color: rgba(242,109,120,.45);
  background: var(--erro-fundo);
}

.btn-fantasma { background: transparent; box-shadow: none; }
.btn-fantasma:hover:not(:disabled) { background: var(--sup-2); }

/* =========================== CAMPOS =========================== */
.entrada,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="date"], input[type="search"],
select, textarea {
  width: 100%;
  padding: 10px var(--e3);
  background: var(--sup-2);
  color: var(--txt);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  font-size: 14px;
  transition: border-color var(--t-rapida), background var(--t-rapida),
              box-shadow var(--t-rapida);
}

input::placeholder, textarea::placeholder { color: var(--txt-3); }

input:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--linha-forte); }

input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--sup-3);
  border-color: var(--marca-ciano);
  box-shadow: var(--brilho-foco);
}

input:disabled, select:disabled, textarea:disabled {
  opacity: .6;
  cursor: default;
  background: var(--sup-1);
}

input.invalido, select.invalido {
  border-color: var(--erro);
  background: var(--erro-fundo);
}
input.invalido:focus, select.invalido:focus {
  box-shadow: 0 0 0 3px rgba(242,109,120,.2);
}

/* A seta do select, desenhada em vez de deixar a do sistema */
select {
  appearance: none;
  padding-right: var(--e8);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2393a3b5' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e3) center;
}

label, .rotulo {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 580;
  color: var(--txt-2);
  letter-spacing: .01em;
}

.obrigatorio { color: var(--marca-ciano-viva); font-weight: 700; }

.ajuda {
  margin: 0 0 var(--e2);
  font-size: 12.5px;
  color: var(--txt-3);
  line-height: 1.5;
}

.erro-campo, .erro {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--erro);
  display: flex;
  align-items: center;
  gap: 5px;
}
.erro-campo:empty, .erro:empty { display: none; }
.erro-campo::before, .erro::before { content: "⚠"; font-size: 11px; }

/* =========================== ETIQUETAS =========================== */
.etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r1);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .01em;
  background: var(--sup-3);
  color: var(--txt-2);
  white-space: nowrap;
}

/* =========================== AVISOS =========================== */
.aviso {
  margin: var(--e4) 0 0;
  padding: 11px var(--e4);
  border-radius: var(--r2);
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.aviso:empty { display: none; }
.aviso.ruim { background: var(--erro-fundo); color: var(--erro); border-color: rgba(242,109,120,.25); }
.aviso.bom  { background: var(--ok-fundo);   color: var(--ok);   border-color: rgba(52,201,138,.25); }

/* =========================== ESTADOS =========================== */
.carregando, .vazio {
  padding: var(--e12) var(--e5);
  text-align: center;
  color: var(--txt-3);
  font-size: 13.5px;
}

.carregando::before {
  content: "";
  display: block;
  width: 22px; height: 22px;
  margin: 0 auto var(--e3);
  border: 2px solid var(--linha-forte);
  border-top-color: var(--marca-ciano);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* =========================== ACESSIBILIDADE =========================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}