/* ============================================================
   ValutaMed — Telas do fluxo (Calendário, Cadastro, Upload,
   Pagamento, Confirmação). Reaproveita os tokens de style.css.
   ============================================================ */

.fluxo-main {
  padding: 40px 24px 80px;
  max-width: 720px;
}

.passos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
}
.passo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--ink-soft);
}
.passo.atual {
  background: var(--gradient-tech);
  color: #fff;
  border-color: transparent;
}
a.passo {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--logo-purple, #6D28D9) 45%, transparent);
  text-underline-offset: 2px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
a.passo:hover {
  border-color: var(--logo-purple, #6D28D9);
  background: var(--purple-soft, #F1EBFC);
  color: var(--ink);
}

.fluxo-card {
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 28px 26px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--border) border-box;
  box-shadow: 0 30px 60px -20px rgba(109, 40, 217, 0.38), 0 14px 28px -10px rgba(109, 40, 217, 0.2), 0 4px 10px rgba(15, 23, 42, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
}
.fluxo-card:hover {
  transform: translateY(-4px);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient-tech) border-box;
  box-shadow: 0 40px 70px -18px rgba(109, 40, 217, 0.46), 0 18px 32px -8px rgba(109, 40, 217, 0.26), 0 6px 14px rgba(15, 23, 42, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .fluxo-card { transition: none; }
  .fluxo-card:hover { transform: none; }
}
/* Mesmo tratamento do .fluxo-card, em classe própria — pra usar dentro de um
   .fluxo-card (grade de artigos) sem o hover de um filho "vazar" pro pai,
   já que :hover também é verdadeiro no ancestral quando o mouse está sobre
   um descendente. */
.mini-card {
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--border) border-box;
  box-shadow: 0 10px 20px -12px rgba(109, 40, 217, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
}
.mini-card:hover {
  transform: translateY(-2px);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient-tech) border-box;
  box-shadow: 0 14px 26px -10px rgba(109, 40, 217, 0.24);
}
@media (prefers-reduced-motion: reduce) {
  .mini-card { transition: none; }
  .mini-card:hover { transform: none; }
}
.fluxo-card h1 {
  font-size: 24px;
  margin: 0 0 6px;
}
.fluxo-card .sub {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

.campo { margin-bottom: 16px; }
.campo label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
}
.campo textarea { min-height: 90px; resize: vertical; }
.campo .ajuda { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; }
.campo .erro { font-size: 12px; color: #DC2626; margin-top: 4px; }

.campo-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-soft); }
/* .campo input é width:100%+padding pra inputs de texto — aplicado sem querer no
   checkbox também (mesma classe .campo), o que colapsava sua largura pra 0 dentro
   do flex. Checkbox precisa do próprio tamanho fixo, não herdar o estilo de texto. */
.campo-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  padding: 0;
  margin-top: 2px;
  accent-color: var(--primary-blue, #1E3A8A);
}

.divisor {
  margin: 24px 0;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.divisor-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--logo-cyan);
  margin-bottom: 14px;
}

.btn-primario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient-tech);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -10px rgba(30, 58, 138, 0.5), 0 8px 16px -6px rgba(109, 40, 217, 0.3);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn-primario:hover {
  transform: translateY(-7px);
  background: var(--primary-blue);
  box-shadow: 0 26px 44px -10px rgba(30, 58, 138, 0.55), 0 12px 22px -6px rgba(109, 40, 217, 0.4);
}
.btn-primario:active { background: var(--logo-purple); transform: translateY(-1px); }
.btn-secundario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 24px;
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-secundario:hover {
  transform: translateY(-3px);
  color: var(--primary-blue);
  border-color: var(--primary-blue);
  box-shadow: 0 14px 24px -8px rgba(109, 40, 217, 0.28);
}
.btn-secundario:active { color: var(--logo-purple); border-color: var(--logo-purple); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .btn-primario:hover, .btn-primario:active,
  .btn-secundario:hover, .btn-secundario:active { transform: none; }
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cal-nav .mes-atual { font-weight: 700; font-size: 15px; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 20px;
}
.cal-cabecalho {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
  text-align: center;
  padding-bottom: 4px;
}
.cal-dia {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  font-size: 12px;
  border: 1px solid transparent;
}
.cal-vazio { visibility: hidden; }
.cal-sem-dado { color: var(--ink-soft); opacity: 0.4; }
.cal-com-dado {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}
.cal-com-dado:hover { border-color: var(--logo-cyan); }
.cal-hoje { border-color: var(--logo-purple); }
.cal-selecionado { background: var(--gradient-tech); color: #fff; }
.cal-selecionado .cal-rotulo { color: rgba(255,255,255,0.85); }
.cal-numero { font-weight: 700; }
.cal-rotulo { font-size: 9px; color: var(--logo-cyan); margin-top: 1px; }

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 4px 0 8px;
}
.slot {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
  font-size: 12.5px;
  cursor: pointer;
  background: var(--bg);
}
.slot:hover { border-color: var(--logo-cyan); }
.slot .dia { font-weight: 700; display: block; }
.slot .hora { color: var(--ink-soft); display: block; margin-top: 2px; }

.aviso-sem-horario {
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
}
.aviso-sem-horario a { color: var(--logo-purple); font-weight: 600; }

.resumo-lista { display: flex; flex-direction: column; gap: 10px; }
.resumo-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.resumo-item .k { color: var(--ink-soft); }
.resumo-item .v { font-weight: 600; text-align: right; }

.badge-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  color: #fff;
}
.badge-status.vermelho { background: #EF4444; }
.badge-status.laranja { background: #F97316; }
.badge-status.verde { background: #22C55E; }
.badge-status.azul { background: #3B82F6; }
.badge-status.cinza { background: #94A3B8; }
.badge-status.roxo { background: var(--logo-purple, #6D28D9); }
.badge-status.ciano { background: var(--logo-cyan, #0E7490); }

.upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 30px 20px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13.5px;
  margin-bottom: 16px;
}
.upload-area input[type="file"] { margin-top: 12px; }
.arquivos-lista { list-style: none; padding: 0; margin: 0 0 16px; }
.arquivos-lista li {
  font-size: 13px;
  padding: 8px 12px;
  background: var(--bg-alt);
  border-radius: 8px;
  margin-bottom: 6px;
}
.documentos-lista { list-style: none; padding: 0; margin: 0 0 16px; }
.documentos-lista li.documento-item {
  font-size: 13px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border-radius: 8px;
  margin-bottom: 8px;
}

.alerta {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 18px;
}
.alerta.sucesso { background: #DCFCE7; color: #166534; }
.alerta.erro { background: #FEE2E2; color: #991B1B; }

/* Busca com microfone — admin, médico e ADV Parceiro. O 🎤 fica DENTRO do
   campo, à esquerda (não é mais um botão separado do lado de fora, que
   quebrava linha em telas estreitas e sobrepunha o menu). */
.busca-com-voz { position: relative; display: block; }
.busca-com-voz input[type="search"] {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.botao-voz {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s;
}
.botao-voz:hover { background: var(--bg-alt); color: var(--logo-purple); }
.botao-voz.ouvindo {
  color: #DC2626;
  animation: pulso-voz 1s ease-in-out infinite;
}
@keyframes pulso-voz {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.tema-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 5px 8px;
  color: inherit;
  flex-shrink: 0;
}
.tema-toggle:hover { background: var(--bg-alt); }

/* ============================================================
   Menu hambúrguer das telas internas (admin/dashboard/parceiro) —
   mesmo mecanismo do site público (nav.main-nav / .nav-toggle em
   style.css), mas com breakpoint bem maior: o site público só tem
   5 links e cabe até 760px, o admin tem ~15 e não cabe nem em
   tablet (768px) sem quebrar — por isso uma classe própria
   (.main-nav-interno / .nav-toggle-interno) com seu próprio
   @media, em vez de mexer no breakpoint do site público.
   ============================================================ */
@media (max-width: 1024px) {
  .nav-toggle-interno { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
  nav.main-nav-interno {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 24px 18px;
    display: none;
    z-index: 50;
  }
  nav.main-nav-interno.open { display: flex; }
  nav.main-nav-interno a { padding: 8px 0; width: 100%; }
}

/* ============================================================
   Modo de impressão — telas financeiras (Agenda, Despesas,
   Ranking, Médicos, Advogados). Ctrl+P (ou o botão "Imprimir")
   precisa sair em papel branco, sem menu/botões, não com o tema
   escuro da tela — daqui pra baixo força as variáveis de cor pro
   claro independente do tema ativo, e esconde tudo que só faz
   sentido on-screen (nav, forms de filtro, botões de ação).
   ============================================================ */
.print-cabecalho { display: none; }

@media print {
  /* Especificidade tem que empatar ou vencer a de style.css's
     :root:not([data-theme="light"]) (usada tanto no tema escuro fixo
     quanto no prefers-color-scheme:dark) — senão o navio escuro imprime
     com as cores da tela, já que uma regra de maior especificidade
     ganha da cascata independente de qual @media aparece por último. */
  :root,
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    --bg: #FFFFFF;
    --bg-alt: #F4F4F4;
    --surface: #FFFFFF;
    --border: #CCCCCC;
    --ink: #000000;
    --ink-soft: #444444;
  }
  * { box-shadow: none !important; text-shadow: none !important; }
  body { background: #fff !important; color: #000 !important; }

  .site-header, .site-footer, .no-print, form, select,
  a.btn-primario, a.btn-secundario, button.btn-primario, button.btn-secundario {
    display: none !important;
  }

  .print-cabecalho {
    display: block !important;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #000;
    font-size: 12px;
    color: #000;
  }
  .print-cabecalho strong { font-size: 15px; }

  .fluxo-main { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .fluxo-card { box-shadow: none !important; border: none !important; padding: 0 !important; background: #fff !important; }

  table { width: 100% !important; border-collapse: collapse !important; }
  th, td { border: 1px solid #ccc !important; color: #000 !important; }

  .badge-status { background: none !important; color: #000 !important; border: 1px solid #999 !important; }

  a[href] { color: #000 !important; text-decoration: none !important; }

  @page { margin: 1.5cm; }
}