/* ==================================================================
   Pele Dra. Mayara Justo (23/09/2026).
   O painel é o mesmo do Instituto Diamond; aqui só muda a identidade:
   fundo branco, vinho + dourado da central dela (mayara.mybimed.com.br),
   Bricolage Grotesque nos títulos e Sora no texto. Nada de modo escuro,
   nada de bege nem amarelo de fundo. Entra DEPOIS do estilo.css.
   ================================================================== */

:root {
  --navy-950: #FFFFFF; --navy-900: #FBF4F6; --navy-800: #FFFFFF;
  --navy-700: #3A161D; --navy-600: #4E1E27;
  --vinho: #6B2A36; --vinho-2: #8A3645; --vinho-esc: #3A161D; --vinho-fundo: #250E12;
  --ouro: #D9A96F; --ouro-esc: #8D6C44; --ouro-brilho: #F0CF9E;
  --gold: #6B2A36; --gold-2: #8D6C44; --gold-3: #D9A96F;
  --gold-bg: rgba(107, 42, 54, .07); --gold-line: rgba(107, 42, 54, .22);
  --ink: #1F1316; --ink-soft: #4A3A3E; --ink-faint: #76636A;
  --surface: #FFFFFF; --surface-2: #FBF4F6;
  --line: #EADCE1; --line-strong: #DCC6CD;
  --good: #2F8A5B; --good-bg: #E3F3EA;
  --warn: #8D6C44;
  --bad: #B4383F; --bad-bg: #FBE9EA;
  --brand: #6B2A36;
  --shadow: 0 2px 6px rgba(37, 14, 18, .06), 0 28px 60px -30px rgba(37, 14, 18, .40);
  --shadow-2: 0 1px 2px rgba(37, 14, 18, .06), 0 10px 24px -14px rgba(37, 14, 18, .26);
  --ring: inset 0 0 0 1px rgba(255, 255, 255, .9);
  --corpo: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titulo: "Bricolage Grotesque", "Sora", system-ui, sans-serif;
  --bloco-vinho:
    radial-gradient(120% 90% at 100% 0%, rgba(217, 169, 111, .22), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(107, 42, 54, .9), transparent 60%),
    linear-gradient(160deg, #3A161D, #250E12 55%, #1B0A0D);
  color-scheme: light;
}

body { background: #FFFFFF; color: var(--ink); font-family: var(--corpo); }
body::before {
  background:
    radial-gradient(900px 480px at 100% 0%, rgba(217, 169, 111, .10), transparent 60%),
    radial-gradient(900px 600px at 0% 30%, rgba(107, 42, 54, .05), transparent 65%),
    #FFFFFF;
}
body::after { display: none; }

/* ---------------- barra de cima: bloco vinho, como a central ---------------- */
.topo {
  background: var(--bloco-vinho); border-bottom: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 18px 40px -24px rgba(37, 14, 18, .6);
}
.topo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #D9A96F 22%, #F0CF9E 50%, #D9A96F 78%, transparent);
}
.marca .logo-mybimed { filter: none; }
.marca .risco { background: rgba(255, 255, 255, .25); }
.marca .logo-cliente { height: 30px; width: auto; display: block; flex: none; }
.marca .nome-painel small { color: rgba(255, 255, 255, .72); margin: 0; }
.quem { color: rgba(255, 255, 255, .72); }
.quem b { color: #F0CF9E; }

/* ---------------- abas ---------------- */
.abas {
  top: 58px; background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.abas button { color: var(--ink-faint); font-family: var(--corpo); font-weight: 600; }
.abas button:hover { color: var(--vinho); }
.abas button.ativa { color: var(--vinho); border-bottom-color: var(--vinho); font-weight: 800; }

/* ---------------- títulos ---------------- */
h2.titulo, .entrar-tit, .nome-pessoa, .ficha .missao {
  font-family: var(--titulo);
}
h2.titulo {
  background: linear-gradient(120deg, #3A161D 0%, #6B2A36 55%, #8D6C44 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h3.secao { color: var(--vinho); }
h3.secao::after { background: linear-gradient(90deg, rgba(107, 42, 54, .25), transparent); }
.selo {
  color: #3A161D;
  background: linear-gradient(135deg, #D9A96F 0%, #F0CF9E 55%, #D9A96F 100%);
  box-shadow: 0 6px 16px rgba(141, 108, 68, .22), inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* ---------------- caixas brancas com o tom vinho ---------------- */
:is(.cartao, .num, .etapa, .alerta-dia, .criativo, .regra-ouro, .como-preencher) {
  --ink: #1F1316;
  --ink-soft: #4A3A3E;
  --ink-faint: #76636A;
  --line: #EADCE1;
  --line-strong: #DCC6CD;
  --surface: #FBF4F6;
  --surface-2: #F5E9ED;
  --ring: inset 0 0 0 1px rgba(255, 255, 255, .9);
  --good: #2F8A5B;
  --good-bg: #E3F3EA;
  --bad: #B4383F;
  --bad-bg: #FBE9EA;
  --warn: #8D6C44;
  --gold: #6B2A36;
  --gold-bg: rgba(107, 42, 54, .07);
  --gold-line: rgba(107, 42, 54, .22);
  --shadow-2: 0 1px 2px rgba(37, 14, 18, .06), 0 10px 24px -14px rgba(37, 14, 18, .26);
  background: #FFFFFF;
  border-color: var(--line);
}
.cartao:hover, .num:hover { border-color: var(--line-strong); }
.como-preencher { border: 1px solid var(--line); }
.como-preencher summary::marker { color: var(--vinho); }
.regra-ouro, .pergunta-fixa { border: 1px solid var(--line); border-left: 4px solid var(--ouro); }

/* campos de resposta */
.cartao :is(.contador input, textarea, input[type=text], input[type=date], select) {
  background: #FBF7F8; color: var(--ink); border-color: #E3D2D8;
}
.cartao :is(textarea, input)::placeholder { color: #A08F95; }
.contador input:focus, textarea:focus, input[type=text]:focus, input[type=date]:focus, select:focus,
.cartao :is(.contador input, textarea, input[type=text], input[type=date], select):focus {
  outline: 0; border-color: var(--vinho); box-shadow: 0 0 0 3px rgba(107, 42, 54, .14);
}
.cartao .contador button {
  background: linear-gradient(160deg, #FFFFFF, #F7EEF1); color: var(--vinho); border-color: #E3D2D8;
}
.cartao .contador button:hover { color: #FFFFFF; background: var(--vinho); border-color: var(--vinho); }
.cartao .simnao button { background: #FBF4F6; color: var(--ink-soft); }

/* o que está marcado fica vinho com letra branca */
.cartao .simnao button.marcado, .simnao button.marcado, .escolha button.marcado,
.pilula.ativa, .mini.forte, .cartao .mini.forte, .etapa.aberta .etapa-n, button.ajuda.aberta {
  color: #FFFFFF; border-color: var(--vinho);
  background: linear-gradient(135deg, #8A3645 0%, #6B2A36 55%, #4E1E27 100%);
  box-shadow: 0 6px 18px rgba(107, 42, 54, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.mini.forte:hover { color: #FFFFFF; }
.escolha button { background: #FBF4F6; border-color: #E3D2D8; }
.pilula.ativa .ponto.sim { background: #9BE3BD; }
.pilula.ativa .ponto.nao { background: #F4A3A8; }
.pilula .ponto.sim { box-shadow: none; }
.pilula .ponto.nao { box-shadow: none; }

/* o total que o app soma sozinho e os botões principais */
.total, .acao {
  color: #FFFFFF;
  background: linear-gradient(135deg, #8A3645 0%, #6B2A36 55%, #4E1E27 100%);
  box-shadow: 0 12px 28px -8px rgba(107, 42, 54, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.acao:hover { box-shadow: 0 18px 36px -10px rgba(107, 42, 54, .5), inset 0 1px 0 rgba(255, 255, 255, .18); }
.acao.secundaria { background: #FFFFFF; color: var(--vinho); border: 1px solid #E3D2D8; }
.acao.secundaria:hover { color: var(--vinho); border-color: var(--vinho); }
.atencao-tag, .passo-ritual span {
  color: #3A161D; background: linear-gradient(135deg, #D9A96F, #F0CF9E);
}

.mini, .pilula, input[type=date] { background: #FFFFFF; color: var(--ink-soft); }
.cartao .mini { background: #FBF4F6; }
.mini:hover, .cartao .mini:hover { color: var(--vinho); border-color: var(--vinho); }

/* números */
.num { background: #FFFFFF; }
.num .val { color: var(--ink); }
.num.bom { border-color: rgba(47, 138, 91, .35); }
.num.ruim { border-color: rgba(180, 56, 63, .35); }
.num.atencao { border-color: rgba(141, 108, 68, .45); }
.leitura.e-total .leitura-val { color: var(--vinho); }

/* tabelas e grades */
.cartao table.grade th { background: #FBF4F6; }
.cartao table.grade tr:hover { background: #FDF8F9; }
.cartao .rolagem { scrollbar-color: #DCC6CD transparent; }
.cartao .rolagem::-webkit-scrollbar-track { background: #FBF4F6; }
.cartao .rolagem::-webkit-scrollbar-thumb { background: #DCC6CD; }
table.grade.origens .total-linha-tabela td { color: var(--vinho); }
.cartao .quadro { background: #FBF4F6; }
.cartao .quadro.sim { background: rgba(107, 42, 54, .09); color: var(--vinho); border-color: rgba(107, 42, 54, .3); }
.cartao .etiqueta { color: var(--vinho); }
.cartao .recarga { background: #FDF8F9; }
.cartao .passo-tag, .criativo .cr-stats span { background: #FBF4F6; }
.nota-area { background: #FBF4F6; }
.cr-midia { background: #F5E9ED; }
.etapa.aberta { background: #FBF4F6; border-color: var(--vinho); }

/* ajuda (i) */
button.ajuda { border-color: rgba(107, 42, 54, .3); background: rgba(107, 42, 54, .06); color: var(--vinho); }
.ajuda-texto { background: #FBF4F6; border-color: #EADCE1; color: var(--ink-soft); }

/* aviso que sobe no rodapé */
.aviso { background: #3A161D; color: #FFFFFF; border-color: rgba(217, 169, 111, .5); }

/* rodapé */
.rodape { border-top: 1px solid var(--line); color: var(--ink-faint); }
.rodape img { filter: none; }

/* entrar com senha: a logo é branca, então ganha uma faixa vinho */
.entrar-logo {
  width: 100%; max-width: 260px; box-sizing: border-box; padding: 18px 26px; border-radius: 16px;
  background: var(--bloco-vinho); margin: 0 auto 10px;
}
.entrar-caixa input[type=password], .entrar-caixa input[type=text] { border-color: #E3D2D8; background: #FBF7F8; }
.entrar-caixa input:focus { border-color: var(--vinho); box-shadow: 0 0 0 3px rgba(107, 42, 54, .14); }

/* links e acessos */
.pessoa .acesso a { color: var(--vinho); }

.salvo-auto { color: var(--good); }

@media (max-width: 620px) {
  .marca .logo-cliente { height: 22px; }
  .abas { top: 50px; }
}
@media (max-width: 440px) {
  .marca .nome-painel { display: none; }
  .marca { gap: 7px; }
  .marca .logo-mybimed { height: 11px; }
  .marca .risco { height: 18px; }
  .marca .logo-cliente { height: 18px; }
  .quem { min-width: 0; flex: 1 1 auto; }
  .quem b { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}