/* =====================================================================
   Cores da marca Acurai (tiradas do logo): ciano, azul e laranja.
   Carregado DEPOIS do estilo.css, só troca cores e acrescenta os
   detalhes da marca. Para voltar ao visual anterior, basta remover a
   linha <link ... marca.css> do index.html e do painel.html.
   ===================================================================== */
:root {
  --marca-ciano: #5ed8f2;
  --marca-azul-claro: #36a9e0;
  --marca-azul: #1a78c8;
  --marca-azul-escuro: #0b4fa8;
  --marca-laranja: #f07a32;
  --marca-vermelho: #e85a2c;
  --marca-faixa: linear-gradient(90deg, var(--marca-ciano) 0%, var(--marca-azul-claro) 30%,
                 var(--marca-azul) 52%, var(--marca-laranja) 78%, var(--marca-vermelho) 100%);

  --fundo: #f3f7fb;
  --superficie: #ffffff;
  --borda: #d9e3ee;
  --texto: #102033;
  --texto-suave: #536579;
  --primaria: #1668c4;
  --primaria-escura: #0b4fa8;
  --sobre-primaria: #ffffff;
  --linha: #1668c4;
  --grade: #e8f0f8;
  --acento: #e86a2c;            /* barras e detalhes */
  --acento-texto: #c4501c;      /* laranja legível sobre branco */
  --etiqueta-fundo: #e4f5fc;
  --etiqueta-texto: #145a9c;
  --botao-fundo: linear-gradient(135deg, #2287d6 0%, #1668c4 55%, #0b4fa8 100%);
  --brilho-1: rgba(94, 216, 242, .22);
  --brilho-2: rgba(240, 122, 50, .14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0a1420;
    --superficie: #122033;
    --borda: #24374d;
    --texto: #e7eef6;
    --texto-suave: #9db0c4;
    --primaria: #5ccdf5;
    --primaria-escura: #38b6e8;
    --sobre-primaria: #07203a;
    --linha: #5ccdf5;
    --grade: #1a2d42;
    --acento: #f28a45;
    --acento-texto: #f5a062;
    --etiqueta-fundo: #1a2d42;
    --etiqueta-texto: #9fdcf5;
    --botao-fundo: linear-gradient(135deg, #7ee0f7 0%, #5ccdf5 50%, #36a9e0 100%);
    --brilho-1: rgba(54, 169, 224, .16);
    --brilho-2: rgba(240, 122, 50, .10);
  }
}

/* Botões principais: azul do logo */
button { background: var(--botao-fundo); color: var(--sobre-primaria); }
button:hover { background: var(--primaria-escura); }
.botao-secundario { background: transparent; color: var(--texto); }
.botao-secundario:hover { background: var(--grade); }

input:focus, select:focus { outline-color: var(--primaria); }

/* ---------- Login ---------- */
.pagina-login {
  background:
    radial-gradient(900px 520px at 8% -10%, var(--brilho-1), transparent 70%),
    radial-gradient(760px 520px at 105% 110%, var(--brilho-2), transparent 70%),
    var(--fundo);
}
.cartao-login {
  position: relative; overflow: hidden;
  box-shadow: 0 18px 50px -24px rgba(11, 79, 168, .35);
}
.cartao-login::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--marca-faixa);
}
.marca-login span { color: var(--primaria); letter-spacing: .6px; }

/* ---------- Topo do painel ---------- */
.topo {
  border-bottom: 0;
  background-color: var(--superficie);
  background-image: var(--marca-faixa);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: left bottom;
}

/* Abas: texto azul, sublinhado laranja na aba ativa */
.abas [role=tab] { background: transparent; color: var(--texto-suave); }
.abas [role=tab]:hover { background: var(--grade); color: var(--texto); }
.abas [role=tab][aria-selected=true] { color: var(--primaria); border-bottom-color: var(--acento); }

/* Seletor PT | EN */
.seletor-idioma button { background: transparent; color: var(--texto-suave); }
.seletor-idioma button:hover { background: var(--grade); color: var(--texto); }
.seletor-idioma button[aria-pressed=true] { background: var(--primaria); color: var(--sobre-primaria); }

.etiqueta { background: var(--etiqueta-fundo); color: var(--etiqueta-texto); font-weight: 600; }

/* ---------- Cartões dos laboratórios e gêmeos ---------- */
.cabecalho-secao h1 { color: var(--texto); }
.cartao { position: relative; overflow: hidden; }
.cartao::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--marca-faixa); opacity: 0; transition: opacity .15s;
}
.cartao:hover { border-color: var(--primaria); box-shadow: 0 12px 30px -20px rgba(11, 79, 168, .45); }
.cartao:hover::before, .cartao:focus-visible::before { opacity: 1; }
.cartao .abrir { color: var(--acento-texto); }

.admin th { color: var(--texto-suave); }

@media (prefers-reduced-motion: reduce) {
  .cartao, .cartao::before { transition: none; }
}