/* =====================================================================
   Motionlangelo · design system
   Paleta Monster Mango Loco: base escura puxada pro turquesa da lata,
   manga nas ações, rosa e sol da caveira como apoio (com parcimônia).
   Assinatura visual: a agulha da linha do tempo (playhead) marca o que
   está ativo, no lugar de pílula ou fundo colorido.
   ===================================================================== */

:root {
  /* superfícies, do mais fundo pro mais alto (preto Apple) */
  --pv-cena:      #000000;   /* fundo da tela */
  --pv-fundo:     #0A0A0B;   /* palco */
  --pv-surface:   #141416;   /* menu, cartões */
  --pv-surface-2: #1C1C1E;   /* campos, itens elevados */
  --pv-surface-3: #2C2C2E;   /* hover forte */

  /* linhas */
  --pv-borda:       rgba(255, 255, 255, .08);
  --pv-borda-forte: rgba(255, 255, 255, .14);

  /* texto */
  --pv-texto:       #F5F5F7;
  --pv-texto-suave: #A1A1A6;
  --pv-texto-fraco: #6E6E73;

  /* marca */
  --pv-mar:       #0E6577;   /* turquesa profundo da lata: fundos de destaque */
  --pv-ciano:     #2CCBDB;   /* turquesa vivo: detalhes técnicos, linhas ativas */
  --pv-manga:     #FF8A1F;   /* ação principal */
  --pv-manga-2:   #FFA54D;   /* hover / foco */
  --pv-rosa:      #FF4F8E;   /* acento raro */
  --pv-sol:       #FFCB45;   /* tinta de destaque sobre fundo escuro */
  --pv-tinta-acao: #1A0F04;  /* texto sobre manga (contraste) */
  --pv-veu:         rgba(255, 255, 255, .07);
  --pv-veu-2:       rgba(255, 255, 255, .12);
  --pv-luz: 255, 255, 255;   /* tinta clara dos detalhes translúcidos (linhas, trilhas); inverte no modo claro */
  --pv-fundo-pop: rgba(30, 30, 32, .96);

  /* estados */
  --pv-ok:    #3FBF8A;
  --pv-erro:  #F0596B;
  --pv-aviso: #E8B04A;

  /* tipografia */
  /* tipografia de página de produto Apple: SF no Apple, Inter Tight no resto */
  --pv-fonte:        -apple-system, 'SF Pro Text', 'Inter Tight', system-ui, sans-serif;
  --pv-fonte-titulo: -apple-system, 'SF Pro Display', 'Inter Tight', system-ui, sans-serif;
  --pv-fonte-doc:    -apple-system, 'SF Pro Text', 'Inter Tight', system-ui, sans-serif;

  /* escala tipográfica (1.2) */
  --pv-t-xs: 12px;
  --pv-t-sm: 13.5px;
  --pv-t-md: 15px;
  --pv-t-lg: 18px;
  --pv-t-xl: 22px;
  --pv-t-2xl: 28px;

  /* raios por hierarquia: quanto maior a peça, maior o raio */
  --pv-r-sm: 6px;    /* chips, portas */
  --pv-r-md: 10px;   /* botões, campos */
  --pv-r-lg: 14px;   /* cartões, blocos */
  --pv-r-xl: 20px;   /* painéis, barra mobile */

  --pv-sombra: 0 18px 48px rgba(2, 8, 10, .6);
  --pv-lat: 248px;        /* menu lateral fixo */
  --pv-lat-solto: 72px;   /* menu lateral recolhido */

  /* Quasar */
  --q-primary: var(--pv-ciano);
  --q-secondary: var(--pv-ciano);
  --q-accent: var(--pv-sol);
  --q-dark: var(--pv-surface);
  --q-dark-page: var(--pv-cena);
  --q-positive: var(--pv-ok);
  --q-negative: var(--pv-erro);
  --q-warning: var(--pv-aviso);
}

html, body {
  margin: 0;
  background: var(--pv-cena);
  color: var(--pv-texto);
  font-family: var(--pv-fonte);
  font-size: var(--pv-t-md);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}
html[data-tema="claro"], html[data-tema="claro"] body { color-scheme: light; }
body, .q-btn, .q-field, .q-menu, .q-item, .q-tooltip, .q-notification { font-family: var(--pv-fonte) !important; }
*, *::before, *::after { box-sizing: border-box; }
::selection { background: var(--pv-manga); color: var(--pv-tinta-acao); }

:focus-visible { outline: 2px solid var(--pv-ciano); outline-offset: 2px; }

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

/* ---------- marca ---------- */
.pv-marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--pv-texto); text-decoration: none;
}
.pv-marca-simbolo { width: 30px; height: 30px; flex: none; }
.pv-marca-nome { font: 600 15px var(--pv-fonte); white-space: nowrap; }   /* provisório: o logo oficial vem depois */
/* título de cartela: serifa fina, sem caixa-alta */
.pv-titulo { font-family: var(--pv-fonte-titulo); font-weight: 600; letter-spacing: -.03em; }
.pv-doc { font-family: var(--pv-fonte-doc); font-weight: 400; letter-spacing: .12em; font-variant-numeric: tabular-nums; }



/* ---------- botões ---------- */
.pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border: 0; border-radius: 12px;
  font: 500 var(--pv-t-md) var(--pv-fonte); cursor: pointer;
  background: var(--pv-texto); color: var(--pv-cena);
  transition: background .15s ease, transform .1s ease;
}
.pv-btn:hover { background: var(--pv-texto); filter: brightness(1.15); transform: scale(1.01); }
.pv-btn:active { transform: translateY(1px); }
.pv-btn[disabled] { opacity: .55; cursor: default; }
.pv-btn-fantasma { background: transparent; color: var(--pv-texto-suave); border: 1px solid var(--pv-borda-forte); }
.pv-btn-fantasma:hover { background: var(--pv-surface-2); color: var(--pv-texto); }

/* ---------- campos ---------- */
.pv-campo { display: flex; flex-direction: column; gap: 7px; }
.pv-campo label { font-size: var(--pv-t-sm); font-weight: 500; color: var(--pv-texto-suave); }
.pv-input {
  width: 100%; min-height: 46px; padding: 0 14px;
  background: var(--pv-surface-2); color: var(--pv-texto);
  border: 1px solid var(--pv-borda); border-radius: var(--pv-r-md);
  font: 400 var(--pv-t-md) var(--pv-fonte);
  transition: border-color .15s ease, background .15s ease;
}
.pv-input::placeholder { color: var(--pv-texto-fraco); }
.pv-input:focus { outline: none; border-color: var(--pv-ciano); background: var(--pv-surface-3); }
.pv-senha { position: relative; }
.pv-senha .pv-input { padding-right: 48px; }
.pv-senha button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: var(--pv-r-sm);
  background: transparent; color: var(--pv-texto-fraco); cursor: pointer;
}
.pv-senha button:hover { color: var(--pv-texto); }

.pv-erro {
  font-size: var(--pv-t-sm); color: var(--pv-erro);
  background: color-mix(in srgb, var(--pv-erro) 10%, transparent);
  border-radius: var(--pv-r-md); padding: 10px 12px;
}

/* ---------- linha do tempo (assinatura) ---------- */
.pv-regua {
  position: relative; height: 28px;
  background-image:
    linear-gradient(var(--pv-borda-forte), var(--pv-borda-forte)),
    repeating-linear-gradient(90deg, var(--pv-borda-forte) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--pv-borda) 0 1px, transparent 1px 12px);
  background-size: 100% 1px, 100% 12px, 100% 6px;
  background-position: 0 100%, 0 100%, 0 100%;
  background-repeat: no-repeat, repeat-x, repeat-x;
}
.pv-agulha {
  position: absolute; top: 0; bottom: -400px; width: 2px; margin-left: -1px;
  background: var(--pv-ciano);
  box-shadow: 0 0 18px color-mix(in srgb, var(--pv-ciano) 60%, transparent);
}
.pv-agulha::before {
  content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; background: var(--pv-ciano);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}

/* ---------- modo claro ----------
   Mesmos tokens, outra luz: o resto do app só usa variáveis, então trocar aqui vale pra tudo.
   As cores da marca escurecem um pouco pra manter contraste sobre fundo branco. */
html[data-tema="claro"] {
  --pv-cena:      #F5F5F7;
  --pv-fundo:     #FFFFFF;
  --pv-surface:   #FFFFFF;
  --pv-surface-2: #F2F2F4;
  --pv-surface-3: #E5E5EA;
  --pv-borda:       rgba(0, 0, 0, .09);
  --pv-borda-forte: rgba(0, 0, 0, .16);
  --pv-texto:       #1D1D1F;
  --pv-texto-suave: #55555B;
  --pv-texto-fraco: #86868B;
  --pv-ciano:  #0A93A3;
  --pv-sol:    #B07A00;
  --pv-manga-2: #F07A10;
  --pv-veu:    rgba(0, 0, 0, .05);
  --pv-veu-2:  rgba(0, 0, 0, .09);
  --pv-luz: 0, 0, 0;
  --pv-fundo-pop: rgba(255, 255, 255, .97);
  --pv-sombra: 0 18px 48px rgba(0, 0, 0, .12);
  --pv-sombra-gav: .1;
}