/* ==========================================================================
   Alpha Vistorias: design system da aplicação (portal, módulos, administração e site).
   Tokens e visual trazidos da Alpha Vistorias (DOC2/responsividade.md e frontend/globals.css):
   navy #0B2347, azul #1565C8, dourado #FFCC00, fonte Inter, cartões arredondados, mobile first.
   Os nomes de classe antigos (menu-lateral, cartao, indicador, selo...) foram mantidos para
   não quebrar as telas; só a aparência mudou.
   ========================================================================== */

/* ----- Tokens (tema claro) ----- */
:root {
  --fundo: #F0F4FF;
  --superficie: #FFFFFF;
  --superficie-2: #F8FAFF;
  --texto: #0F172A;
  --texto-suave: #475569;
  --texto-fraco: #94A3B8;
  --borda: #DDE3F0;
  --borda-forte: #BBC5DE;

  --primaria: #1565C8;
  --primaria-hover: #1251A8;
  --primaria-ativa: #0D3E8A;
  --dourado: #FFCC00;
  --dourado-hover: #E6B800;
  --navy: #0B2347;
  --navy-medio: #0F2D5A;

  --perigo: #DC2626;
  --perigo-fundo: #FEF2F2;
  --sucesso: #059669;
  --sucesso-fundo: #ECFDF5;
  --alerta: #D97706;
  --alerta-fundo: #FFFBEB;
  --info: #0284C7;
  --info-fundo: #EFF6FF;

  --raio-sm: .375rem;
  --raio: .625rem;
  --raio-md: .875rem;
  --raio-lg: 1.125rem;
  --raio-xl: 1.375rem;

  --sombra-xs: 0 1px 2px rgba(15,23,42,.06);
  --sombra-cartao: 0 1px 3px rgba(15,23,42,.07), 0 2px 8px rgba(15,23,42,.05);
  --sombra-md: 0 4px 16px rgba(15,23,42,.10), 0 1px 4px rgba(15,23,42,.06);
  --sombra-lg: 0 8px 32px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.06);
  --sombra-hover: 0 6px 20px rgba(15,23,42,.12);
  --sombra-primaria: 0 2px 10px rgba(21,101,200,.35);

  --largura-menu: 236px;
  --altura-topo: 56px;
  --altura-barra-inferior: 64px;
  --alvo-toque: 44px;

  /* Compatibilidade com os nomes antigos usados em telas e no editor */
  --cor-destaque: var(--primaria);
  --cor-fundo: var(--fundo);
  --cor-texto: var(--texto);
  --cor-borda: var(--borda);

  /* Bootstrap 5.3 lê estas variáveis: a paleta do Bootstrap passa a ser a da marca */
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: var(--texto);
  --bs-body-bg: var(--fundo);
  --bs-primary: #1565C8;
  --bs-primary-rgb: 21, 101, 200;
  --bs-link-color: #1565C8;
  --bs-link-color-rgb: 21, 101, 200;
  --bs-link-hover-color: #1251A8;
  --bs-border-color: var(--borda);
  --bs-border-radius: var(--raio);
  --bs-secondary-color: var(--texto-suave);
  --bs-tertiary-bg: var(--superficie-2);
  --bs-emphasis-color: var(--texto);
}

/* ----- Tema escuro (alternado pelo botão da lua; guardado no navegador) ----- */
[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #080E1C;
  --superficie: #0F172A;
  --superficie-2: #0D1526;
  --texto: #F1F5F9;
  --texto-suave: #94A3B8;
  --texto-fraco: #64748B;
  --borda: #1E3A5F;
  --borda-forte: #2D4F82;
  --perigo-fundo: rgba(220,38,38,.15);
  --sucesso-fundo: rgba(5,150,105,.15);
  --alerta-fundo: rgba(217,119,6,.15);
  --info-fundo: rgba(2,132,199,.15);
  --sombra-cartao: 0 1px 3px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --sombra-hover: 0 6px 20px rgba(0,0,0,.5);
  --bs-body-color: var(--texto);
  --bs-body-bg: var(--fundo);
  --bs-border-color: var(--borda);
  --bs-secondary-color: var(--texto-suave);
  --bs-tertiary-bg: var(--superficie-2);
  --bs-emphasis-color: var(--texto);
  --bs-secondary-bg: var(--superficie-2);
  --bs-table-color: var(--texto);
}
[data-tema="escuro"] .table { --bs-table-bg: transparent; --bs-table-color: var(--texto); --bs-table-hover-bg: rgba(255,255,255,.03); }
[data-tema="escuro"] .form-control, [data-tema="escuro"] .form-select { background-color: var(--superficie-2); color: var(--texto); border-color: var(--borda); }
[data-tema="escuro"] .dropdown-menu { background: var(--superficie); border-color: var(--borda); }
[data-tema="escuro"] .dropdown-item { color: var(--texto); }
[data-tema="escuro"] .dropdown-item:hover { background: var(--superficie-2); }
[data-tema="escuro"] .modal-content, [data-tema="escuro"] .card, [data-tema="escuro"] .list-group-item { background: var(--superficie); color: var(--texto); border-color: var(--borda); }
[data-tema="escuro"] .text-muted { color: var(--texto-suave) !important; }
[data-tema="escuro"] .bg-light, [data-tema="escuro"] .bg-white { background-color: var(--superficie-2) !important; color: var(--texto); }

/* ----- Base ----- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--bs-body-font-family);
  font-size: .9rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: rgba(21,101,200,.2); }
:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; color: var(--texto); }
a { color: var(--primaria); }
.text-primary { color: var(--primaria) !important; }
.bg-primary { background-color: var(--primaria) !important; }
.text-navy { color: var(--navy) !important; }
.bg-navy { background: var(--navy) !important; color: #fff; }
.text-dourado { color: var(--dourado) !important; }

/* Altura dinâmica real no celular (barras do navegador): nunca usar 100vh puro em tela cheia */
.altura-tela { min-height: 100vh; }
@supports (height: 100dvh) { .altura-tela { min-height: 100dvh; } }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ----- Estrutura: menu lateral navy + área principal ----- */
.menu-lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--largura-menu); z-index: 1045;
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, #0F2D5A 0%, #0B2347 50%, #071530 100%);
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}
.menu-lateral::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12rem; pointer-events: none; opacity: .25;
  background: radial-gradient(ellipse at 50% -10%, rgba(21,101,200,.5), transparent 65%);
}
.menu-lateral .marca {
  position: relative; display: flex; align-items: center; gap: .75rem; padding: 1.15rem 1.15rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; text-decoration: none;
}
.menu-lateral .marca img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.menu-lateral .marca .marca-nome { color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.1; letter-spacing: -.01em; }
.menu-lateral .marca .marca-sub { color: rgba(255,255,255,.42); font-size: .6875rem; margin-top: 3px; }
.menu-lateral .marca .marca-texto { color: #fff; font-weight: 700; }
.menu-lateral nav, .menu-lateral .navegacao { position: relative; flex: 1; overflow-y: auto; padding: .75rem .75rem 1rem; scrollbar-width: none; }
.menu-lateral nav::-webkit-scrollbar, .menu-lateral .navegacao::-webkit-scrollbar { display: none; }
.menu-lateral .rotulo-secao { font-size: .625rem; font-weight: 600; color: rgba(255,255,255,.28); text-transform: uppercase; letter-spacing: .12em; padding: .25rem .75rem .5rem; }
.menu-lateral a.item {
  display: flex; align-items: center; gap: .65rem; min-height: var(--alvo-toque); padding: .55rem .75rem; margin: .1rem 0;
  color: rgba(255,255,255,.55); text-decoration: none; border-radius: .75rem; font-weight: 500; font-size: .8125rem;
  transition: background .15s, color .15s;
}
.menu-lateral a.item i { width: 1.1rem; text-align: center; color: inherit; opacity: .7; font-size: .95rem; }
.menu-lateral a.item:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.menu-lateral a.item.ativo { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.menu-lateral a.item.ativo i { color: var(--dourado); opacity: 1; }
.menu-lateral a.subitem {
  display: flex; align-items: center; min-height: 38px; padding: .35rem .75rem .35rem 2.6rem; margin: .05rem 0;
  color: rgba(255,255,255,.45); text-decoration: none; font-size: .78rem; border-radius: .6rem;
}
.menu-lateral a.subitem:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.05); }
.menu-lateral a.subitem.ativo { color: #fff; font-weight: 600; }
.menu-lateral .selo-novo { background: var(--dourado); color: var(--navy); border-radius: 1rem; padding: 0 .45rem; font-size: .58rem; font-weight: 800; margin-left: auto; }
.menu-lateral .rodape-menu { position: relative; border-top: 1px solid rgba(255,255,255,.08); padding: .75rem; flex-shrink: 0; }
.menu-lateral .rodape-menu button, .menu-lateral .rodape-menu a {
  width: 100%; display: flex; align-items: center; gap: .65rem; min-height: var(--alvo-toque); padding: .55rem .75rem;
  border: 0; background: transparent; color: rgba(255,255,255,.5); border-radius: .75rem; font-size: .8125rem; font-weight: 500; text-decoration: none;
}
.menu-lateral .rodape-menu button:hover { color: #fca5a5; background: rgba(239,68,68,.1); }
.cartao-plano { margin: 1rem 0 0; padding: .8rem; border-radius: .9rem; background: rgba(255,255,255,.06); color: rgba(255,255,255,.75); font-size: .75rem; border: 1px solid rgba(255,255,255,.08); }
.cartao-plano .text-muted { color: rgba(255,255,255,.45) !important; }
.cartao-plano .progress { height: 6px; background: rgba(255,255,255,.12); }
.cartao-plano .progress-bar { background: var(--dourado); }

.fundo-menu { position: fixed; inset: 0; z-index: 1044; background: rgba(0,0,0,.4); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .18s; }
.fundo-menu.visivel { opacity: 1; pointer-events: auto; }

.area-principal { margin-left: var(--largura-menu); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; overflow-x: clip; }
@supports (height: 100dvh) { .area-principal { min-height: 100dvh; } }

/* Cabeçalho branco com título, sino, tema e usuário */
.topo {
  position: sticky; top: 0; z-index: 1030; height: var(--altura-topo); flex-shrink: 0;
  display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem;
  background: var(--superficie); border-bottom: 1px solid var(--borda); color: var(--texto);
}
.topo .titulo-topo { flex: 1; min-width: 0; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.topo .acoes { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.topo a, .topo .botao-topo { color: var(--texto-suave); text-decoration: none; font-weight: 500; }
.botao-topo {
  position: relative; width: var(--alvo-toque); height: var(--alvo-toque); display: inline-grid; place-items: center;
  border: 0; background: transparent; border-radius: .75rem; color: var(--texto-suave); transition: background .15s, color .15s;
}
.botao-topo:hover { background: var(--fundo); color: var(--texto); }
.botao-topo .contador {
  position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: #EF4444; color: #fff; font-size: .625rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--superficie);
}
.topo .separador { width: 1px; height: 20px; background: var(--borda); margin: 0 .25rem; }
.usuario-topo { display: flex; align-items: center; gap: .5rem; padding: .3rem .55rem .3rem .3rem; border-radius: .75rem; min-height: var(--alvo-toque); }
.usuario-topo:hover { background: var(--fundo); }
.usuario-topo .nome { font-size: .8125rem; font-weight: 600; color: var(--texto); line-height: 1; }
.usuario-topo .perfil { font-size: .6875rem; color: var(--texto-fraco); line-height: 1; margin-top: 3px; }
.selo-personificando { background: var(--dourado); color: var(--navy); font-weight: 700; border-radius: 1rem; padding: .2rem .6rem; font-size: .7rem; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, #1565C8, #0B2347); color: #fff; font-weight: 700; font-size: .72rem; box-shadow: 0 0 0 2px rgba(255,255,255,.6);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.grande { width: 72px; height: 72px; font-size: 1.4rem; }

/* Faixa de título: limpa, sobre o fundo claro (sem a faixa colorida antiga) */
.faixa-titulo { padding: 1.25rem 1.5rem 0; color: var(--texto); background: transparent; }
.faixa-titulo h1 { font-size: 1.3rem; font-weight: 700; margin: 0; letter-spacing: -.02em; display: flex; align-items: center; gap: .5rem; }
.faixa-titulo h1 i { color: var(--primaria); font-size: 1.05rem; }
.faixa-titulo .migalhas { font-size: .78rem; color: var(--texto-fraco); margin-top: .25rem; }
.faixa-titulo .migalhas a { color: var(--texto-suave); text-decoration: none; }
.conteudo { flex: 1; padding: 1rem 1.5rem 2rem; min-width: 0; }

/* ----- Cartões ----- */
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg);
  box-shadow: var(--sombra-cartao); padding: 1.25rem; color: var(--texto);
}
.cartao + .cartao { margin-top: 1rem; }
.cartao h2, .cartao h5 { font-weight: 700; }
.cartao-clicavel { transition: box-shadow .2s, transform .2s; }
.cartao-clicavel:hover { box-shadow: var(--sombra-hover); transform: translateY(-1px); }
.card { border-color: var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-cartao); background: var(--superficie); }

/* Faixa de boas-vindas navy com filete dourado (dashboard) */
.boas-vindas {
  position: relative; overflow: hidden; border-radius: var(--raio-lg); padding: 1.4rem 1.5rem; color: #fff;
  background: linear-gradient(135deg, #0F2D5A 0%, #0B2347 60%, #071530 100%); box-shadow: var(--sombra-md);
}
.boas-vindas::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--dourado); }
.boas-vindas::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(21,101,200,.45), transparent 70%); }
.boas-vindas h2 { color: #fff; font-size: 1.25rem; font-weight: 700; margin: 0; position: relative; }
.boas-vindas p { color: rgba(255,255,255,.65); margin: .25rem 0 0; position: relative; font-size: .85rem; }
.boas-vindas .btn { position: relative; }

/* ----- Indicadores (KPIs) ----- */
/* Marcação existente: <div class="indicador"><small>rótulo</small><strong>valor</strong><span class="icone">...</span></div> */
.indicador {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: 1rem 1.1rem;
  box-shadow: var(--sombra-cartao); position: relative; min-height: 84px; height: 100%;
  display: grid; grid-template-columns: 1fr; align-content: center; column-gap: .85rem; row-gap: .15rem;
  transition: box-shadow .2s, transform .2s;
}
.indicador:hover { box-shadow: var(--sombra-hover); transform: translateY(-1px); }
.indicador:has(.icone) { grid-template-columns: auto 1fr; }
.indicador small { grid-column: -2; grid-row: 1; color: var(--texto-suave); font-weight: 600; font-size: .75rem; line-height: 1.2; }
.indicador strong { grid-column: -2; grid-row: 2; font-size: 1.4rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--texto); word-break: break-word; }
.indicador .icone {
  position: static; grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 2.75rem; height: 2.75rem; border-radius: .85rem;
  color: #fff; display: grid; place-items: center; font-size: 1.05rem;
  background: linear-gradient(135deg, #1A78E8, #1565C8) !important; box-shadow: var(--sombra-primaria);
}
/* As cores alternam azul, navy, dourado e azul claro, como os cartões da Alpha */
[class*="col"]:nth-child(4n+2) > .indicador .icone { background: linear-gradient(135deg, #0F2D5A, #0B2347) !important; box-shadow: 0 2px 10px rgba(11,35,71,.35); }
[class*="col"]:nth-child(4n+3) > .indicador .icone { background: linear-gradient(135deg, #FFD633, #FFCC00) !important; color: var(--navy); box-shadow: 0 2px 10px rgba(255,204,0,.35); }
[class*="col"]:nth-child(4n+4) > .indicador .icone { background: linear-gradient(135deg, #38BDF8, #0284C7) !important; box-shadow: 0 2px 10px rgba(2,132,199,.3); }

/* ----- Tabelas e listas ----- */
.table { --bs-table-bg: transparent; color: var(--texto); }
.tabela-pleno { margin-bottom: 0; }
.tabela-pleno th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); font-weight: 600; border-bottom: 1px solid var(--borda); white-space: nowrap; padding-top: .7rem; padding-bottom: .7rem; }
.tabela-pleno td { vertical-align: middle; font-size: .84rem; border-color: var(--borda); padding-top: .7rem; padding-bottom: .7rem; }
.tabela-pleno tbody tr:hover { background: var(--superficie-2); }
.bolinha-estado { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
.list-group-item { border-color: var(--borda); }

/* ----- Selos de situação (pílulas suaves, como os badges da Alpha) ----- */
.selo { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 1rem; font-size: .72rem; font-weight: 600; white-space: nowrap; background: #F1F5F9; color: #475569; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.selo-liberada, .selo-paga, .selo-concluida, .selo-finalizada, .selo-ativa, .selo-enviada, .selo-entregue, .selo-aprovada { background: #D1FAE5; color: #047857; }
.selo-criada, .selo-solicitada, .selo-aguardando, .selo-apontada, .selo-aguardando_envio, .selo-em_teste, .selo-agendada { background: #DBEAFE; color: #1D4ED8; }
.selo-em_analise, .selo-designada, .selo-em_andamento, .selo-pendente { background: #FEF3C7; color: #B45309; }
.selo-cancelada, .selo-vencida, .selo-falhou, .selo-suspensa, .selo-inadimplente, .selo-bloqueado { background: #FEE2E2; color: #B91C1C; }
.selo-pago, .selo-fechada, .selo-ganho, .selo-aceita, .selo-ativo { background: #D1FAE5; color: #047857; }
.selo-aberto, .selo-aberta, .selo-novo, .selo-contato, .selo-rascunho { background: #DBEAFE; color: #1D4ED8; }
.selo-visita, .selo-proposta, .selo-negociacao, .selo-contraproposta { background: #FEF3C7; color: #B45309; }
.selo-vencido, .selo-perdido, .selo-cancelado, .selo-recusada, .selo-expirada, .selo-encerrado, .selo-inativo { background: #FEE2E2; color: #B91C1C; }
[data-tema="escuro"] .selo { filter: saturate(.9) brightness(.95); }

.badge.bg-primary { background: var(--primaria) !important; }
.badge.bg-warning { background: var(--dourado) !important; color: var(--navy) !important; }

/* ----- Kanban ----- */
.quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: .8rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
.coluna { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: .65rem; min-height: 320px; scroll-snap-align: start; }
.coluna h6 { font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); display: flex; justify-content: space-between; }
.cartao-kanban { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-md); padding: .75rem; margin-bottom: .55rem; box-shadow: var(--sombra-xs); cursor: grab; font-size: .82rem; }
.cartao-kanban .codigo { font-weight: 700; color: var(--primaria); }

/* ----- Editor de vistoria ----- */
.nav-abas { overflow-x: auto; flex-wrap: nowrap; background: var(--superficie-2); border-radius: var(--raio-md) var(--raio-md) 0 0; scrollbar-width: none; }
.nav-abas::-webkit-scrollbar { display: none; }
.nav-abas .nav-link { white-space: nowrap; color: var(--texto-suave); font-weight: 600; border-radius: 0; min-height: var(--alvo-toque); display: flex; align-items: center; }
.nav-abas .nav-link.active { background: var(--superficie); color: var(--primaria); border-bottom: 3px solid var(--dourado); }
.no-arvore { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-md); margin-bottom: .6rem; box-shadow: var(--sombra-xs); }
.no-arvore > .cabeca { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; min-height: var(--alvo-toque); cursor: pointer; font-weight: 600; }
.no-arvore .alca { cursor: grab; color: var(--texto-fraco); }
.no-arvore .corpo { padding: .4rem 1rem 1rem; border-top: 1px solid var(--borda); }
.no-arvore .no-arvore { margin-left: 0; background: var(--superficie-2); }
.detalhe-linha { display: flex; align-items: center; gap: .6rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: .5rem .7rem; margin-bottom: .5rem; }
.detalhe-linha .rotulo { font-size: .68rem; color: var(--primaria); font-weight: 700; display: block; }
.miniatura { width: 160px; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--superficie); }
.miniatura img { width: 100%; height: 120px; object-fit: cover; display: block; }
.miniatura .carimbo { position: absolute; top: .3rem; left: .3rem; background: #fff; font-size: .62rem; padding: 0 .3rem; border-radius: .2rem; }
.zona-upload { border: 2px dashed var(--borda-forte); border-radius: var(--raio-md); padding: 1.8rem; text-align: center; color: var(--texto-suave); cursor: pointer; }
.zona-upload.sobre { background: var(--info-fundo); border-color: var(--primaria); }

/* ----- Botões (alvo de toque de 44 px, como na Alpha) ----- */
.btn { font-weight: 600; border-radius: .75rem; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; transition: all .15s; }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 34px; border-radius: .6rem; }
.btn-lg { min-height: 48px; }
.btn-link { min-height: 0; }
.btn-primary, .btn-pleno {
  background: var(--primaria); border-color: var(--primaria); color: #fff; box-shadow: var(--sombra-primaria);
}
.btn-primary:hover, .btn-pleno:hover, .btn-primary:focus { background: var(--primaria-hover); border-color: var(--primaria-hover); color: #fff; box-shadow: 0 4px 16px rgba(21,101,200,.45); }
.btn-primary:active, .btn-pleno:active { background: var(--primaria-ativa) !important; border-color: var(--primaria-ativa) !important; }
.btn-outline-primary, .btn-contorno { border: 1.5px solid var(--primaria); color: var(--primaria); background: transparent; }
.btn-outline-primary:hover, .btn-contorno:hover { background: var(--primaria); color: #fff; border-color: var(--primaria); }
.btn-dourado, .btn-warning { background: var(--dourado); border-color: var(--dourado); color: var(--navy); box-shadow: 0 2px 10px rgba(255,204,0,.35); }
.btn-dourado:hover, .btn-warning:hover { background: var(--dourado-hover); border-color: var(--dourado-hover); color: var(--navy); }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-medio); color: #fff; }
.btn-light, .btn-secondary-suave { background: var(--superficie); border: 1px solid var(--borda); color: var(--texto); }
.btn-light:hover { background: var(--superficie-2); border-color: var(--borda-forte); }
.btn-outline-secondary { border-color: var(--borda-forte); color: var(--texto-suave); }

/* ----- Formulários (44 px, cantos de 12 px, foco azul) ----- */
.form-control, .form-select {
  border-radius: .75rem; border-color: var(--borda); min-height: var(--alvo-toque); font-size: .9rem;
  background-color: var(--superficie); color: var(--texto); transition: border-color .15s, box-shadow .15s;
}
.form-control-sm, .form-select-sm { min-height: 34px; border-radius: .6rem; font-size: .8rem; }
textarea.form-control { min-height: 88px; }
.form-control:focus, .form-select:focus { border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(21,101,200,.15); }
.form-control::placeholder { color: var(--texto-fraco); }
.form-label { font-weight: 600; font-size: .72rem; color: var(--texto-suave); margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .05em; }
.form-check-input:checked { background-color: var(--primaria); border-color: var(--primaria); }
.form-check-input { width: 1.15em; height: 1.15em; }
.input-group-text { border-color: var(--borda); background: var(--superficie-2); border-radius: .75rem; }

/* Alertas suaves com borda */
.alert { border-radius: var(--raio-md); font-size: .875rem; border-width: 1px; }
.alert-success { background: var(--sucesso-fundo); border-color: #6EE7B7; color: #047857; }
.alert-danger { background: var(--perigo-fundo); border-color: #FECACA; color: #B91C1C; }
.alert-warning { background: var(--alerta-fundo); border-color: #FCD34D; color: #B45309; }
.alert-info { background: var(--info-fundo); border-color: #BAE6FD; color: #0369A1; }

.dropdown-menu { border-radius: var(--raio-md); border-color: var(--borda); box-shadow: 0 8px 24px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06); padding: .4rem; font-size: .84rem; }
.dropdown-item { border-radius: .5rem; padding: .5rem .75rem; }
.modal-content { border-radius: var(--raio-xl); border: 0; box-shadow: 0 32px 80px rgba(15,23,42,.28); }
.modal-header, .modal-footer { border-color: var(--borda); }
.nav-tabs .nav-link.active { color: var(--primaria); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--primaria); }
.pagination { --bs-pagination-active-bg: var(--primaria); --bs-pagination-active-border-color: var(--primaria); --bs-pagination-color: var(--primaria); --bs-pagination-border-radius: .6rem; }
.progress-bar { background-color: var(--primaria); }

/* ----- Botão flutuante (desktop) ----- */
.botao-flutuante {
  position: fixed; right: 1.6rem; bottom: 1.6rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; z-index: 1040; border: 0;
  background: linear-gradient(135deg, #1A78E8, #0B2347); color: var(--dourado); display: grid; place-items: center; font-size: 1.35rem;
  box-shadow: 0 4px 16px rgba(21,101,200,.5); text-decoration: none;
}
.botao-flutuante:hover { color: var(--dourado); filter: brightness(1.08); }

/* ----- Barra inferior (somente celular e tablet), como app nativo ----- */
.barra-inferior { display: none; }
.gaveta-mais { display: none; }

/* ----- Notificações (sino e página) ----- */
.lista-notificacoes { max-height: 60vh; overflow-y: auto; }
.notificacao { display: flex; gap: .55rem; padding: .7rem .75rem; border-radius: .6rem; text-decoration: none; color: var(--texto); }
.notificacao:hover { background: var(--superficie-2); color: var(--texto); }
.notificacao.nao-lida { background: rgba(21,101,200,.05); }
.notificacao .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--primaria); margin-top: .4rem; flex-shrink: 0; }
.notificacao .titulo { font-weight: 600; font-size: .8125rem; }
.notificacao .mensagem { font-size: .75rem; color: var(--texto-suave); }
.notificacao .quando { font-size: .6875rem; color: var(--texto-fraco); margin-top: .15rem; }

/* ----- Telas de autenticação (faixa navy + cartão branco) ----- */
.tela-acesso { display: flex; flex-direction: column; min-height: 100vh; background: var(--superficie); }
@supports (height: 100dvh) { .tela-acesso { min-height: 100dvh; } }
.tela-acesso .heroi {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 250px; flex-shrink: 0; background: linear-gradient(135deg, #1E3A5F, #1a3356 50%, #0f1f38);
  padding-top: env(safe-area-inset-top, 0px);
}
.tela-acesso .heroi::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(37,99,235,.35), transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(245,158,11,.12), transparent 50%); }
.tela-acesso .heroi::after { content: ""; position: absolute; inset: 0; opacity: .07; background-image: radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1px); background-size: 32px 32px; }
.tela-acesso .heroi > * { position: relative; z-index: 1; }
.tela-acesso .heroi img { width: 84px; height: 84px; object-fit: contain; }
.tela-acesso .heroi .nome-marca { margin-top: .75rem; color: #fff; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .95rem; }
.tela-acesso .heroi .slogan { margin-top: .4rem; color: rgba(255,255,255,.55); font-size: .8125rem; text-align: center; padding: 0 2rem; }
.tela-acesso .painel {
  flex: 1; position: relative; z-index: 2; margin-top: -1.5rem; background: var(--superficie);
  border-radius: 2rem 2rem 0 0; box-shadow: 0 -8px 32px rgba(15,23,42,.1);
  display: flex; flex-direction: column; align-items: center; padding: 2rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
}
.tela-acesso .painel .miolo { width: 100%; max-width: 360px; animation: subirSuave .4s cubic-bezier(.22,1,.36,1) both; }
.tela-acesso h2 { font-size: 1.5rem; font-weight: 700; color: #1E3A5F; text-align: center; margin: 0; }
.tela-acesso .subtitulo { color: #64748B; font-size: .875rem; text-align: center; margin-top: .4rem; margin-bottom: 1.75rem; }
.tela-acesso .form-control { background: #F8FAFC; border-color: #E2E8F0; }
.tela-acesso .form-control:focus { background: #fff; }
.tela-acesso .rodape-acesso { margin-top: 1.5rem; text-align: center; font-size: .6875rem; color: #CBD5E1; }
.tela-acesso .divisor { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: #94A3B8; font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; }
.tela-acesso .divisor::before, .tela-acesso .divisor::after { content: ""; flex: 1; height: 1px; background: #E2E8F0; }
.caixa-captcha { padding: 1rem; border-radius: .75rem; background: #F8FAFC; border: 1px solid #E2E8F0; }
.caixa-captcha .codigo { display: flex; justify-content: center; padding: .75rem; border-radius: .5rem; background: #E2E8F0; font-family: ui-monospace, Consolas, monospace; font-size: 1.5rem; font-weight: 700; letter-spacing: .4em; color: #1E3A5F; user-select: none; }
.campo-codigo { font-family: ui-monospace, Consolas, monospace; letter-spacing: .5em; text-align: center; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; }
[data-tema="escuro"] .tela-acesso, [data-tema="escuro"] .tela-acesso .painel { background: var(--superficie); }
[data-tema="escuro"] .tela-acesso h2 { color: var(--texto); }
[data-tema="escuro"] .tela-acesso .form-control { background: var(--superficie-2); border-color: var(--borda); }

/* Botão com borda de luz girando (botão "Entrar" da Alpha) */
@property --angulo { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes girarBorda { to { --angulo: 360deg; } }
.btn-borda-luz {
  position: relative; overflow: hidden; width: 100%; min-height: var(--alvo-toque); border: 0; border-radius: .75rem;
  background: #fff; color: #1E3A5F; font-weight: 600; font-size: .875rem; box-shadow: inset 0 0 0 1px #E2E8F0;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.btn-borda-luz::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--angulo), transparent, transparent 78%, rgba(21,101,200,.3) 84%, #1565C8 90%, rgba(21,101,200,.3) 96%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: girarBorda 7s linear infinite;
}
.btn-borda-luz > * { position: relative; z-index: 1; }
.btn-borda-luz:disabled { opacity: .5; }
.btn-passkey { width: 100%; min-height: var(--alvo-toque); border-radius: .75rem; border: 1px solid #E2E8F0; background: #F8FAFC; color: #1E3A5F; font-weight: 600; font-size: .875rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-passkey:hover { background: #F0F4FF; }

/* ----- Site público ----- */
.site-topo { background: var(--superficie); border-bottom: 1px solid var(--borda); }
.site-topo .navbar-brand img { height: 36px; }
.site-hero { background: linear-gradient(135deg, #0F2D5A 0%, #0B2347 60%, #071530 100%); color: #fff; padding: 5rem 0; position: relative; overflow: hidden; }
.site-hero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(21,101,200,.45), transparent 70%); }
.site-hero > * { position: relative; z-index: 1; }
.site-hero h1 { font-weight: 800; font-size: 2.6rem; letter-spacing: -.03em; color: #fff; }
@media (max-width: 991.98px) {
  .site-hero { padding: 3rem 0; }
  .site-hero h1 { font-size: 2rem; }
  .site-hero .lead { font-size: 1.05rem; }
  .site-hero img { max-width: 140px !important; }
}
.site-rodape { background: linear-gradient(180deg, #0B2347, #071530); color: rgba(255,255,255,.6); border-top: 3px solid var(--dourado); }
.site-rodape a { color: rgba(255,255,255,.7); text-decoration: none; }
.site-rodape a:hover { color: #fff; }
.site-topo .nav-link { font-weight: 500; color: var(--texto-suave); }
.site-topo .nav-link:hover { color: var(--primaria); }
.cartao-produto { border-radius: var(--raio-lg); border: 1px solid var(--borda); padding: 1.6rem; background: var(--superficie); height: 100%; box-shadow: var(--sombra-cartao); }
.cartao-plano-site { border-radius: var(--raio-lg); border: 2px solid var(--borda); padding: 1.5rem; background: var(--superficie); height: 100%; text-align: center; }
.cartao-plano-site.destaque { border-color: var(--primaria); box-shadow: 0 8px 24px rgba(21,101,200,.2); }
.cartao-plano-site .preco { font-size: 2.1rem; font-weight: 800; color: var(--navy); }
.contador-site { font-size: 2.2rem; font-weight: 800; color: var(--navy); }

/* ----- Laudo (tela e impressão) com a paleta oficial ----- */
.laudo { max-width: 900px; margin: 1.5rem auto; background: #fff; color: #0F172A; padding: 2rem; border-radius: var(--raio-lg); box-shadow: var(--sombra-md); }
.laudo h2.titulo { background: linear-gradient(135deg, #0F2D5A, #0B2347); text-align: center; padding: 1.1rem; font-weight: 800; color: #fff; border-top: 4px solid var(--dourado); border-radius: .5rem; letter-spacing: .04em; }
.laudo .secao-titulo { color: var(--navy); font-weight: 800; border-bottom: 2px solid var(--primaria); padding-bottom: .15rem; margin-top: 1.4rem; }
.laudo .grade-midias { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 1rem; }
.laudo .grade-midias figure { width: 150px; margin: 0; font-size: .62rem; text-align: center; }
.laudo .grade-midias img { width: 150px; height: 110px; object-fit: cover; border-radius: .3rem; }

/* ----- Animações leves ----- */
@keyframes subirSuave { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.animar-entrada { animation: subirSuave .35s ease both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media print {
  .no-print, .menu-lateral, .topo, .barra-inferior, .fundo-menu { display: none !important; }
  .area-principal { margin: 0; }
  .laudo { box-shadow: none; margin: 0; max-width: none; }
  body { background: #fff; }
}

/* ==========================================================================
   Responsivo: celular e tablet (até 991 px) com menu em gaveta e barra inferior
   ========================================================================== */
@media (max-width: 991.98px) {
  .menu-lateral { transform: translateX(-100%); box-shadow: none; }
  .menu-lateral.aberto { transform: none; box-shadow: 8px 0 32px rgba(0,0,0,.25); }
  .area-principal { margin-left: 0; }
  .topo { padding: 0 .5rem 0 .25rem; padding-top: env(safe-area-inset-top, 0px); height: calc(var(--altura-topo) + env(safe-area-inset-top, 0px)); }
  .faixa-titulo { padding: 1rem 1rem 0; }
  .faixa-titulo h1 { font-size: 1.15rem; }
  .conteudo { padding: .85rem 1rem calc(var(--altura-barra-inferior) + 2rem + env(safe-area-inset-bottom, 0px)); }
  .cartao { padding: 1rem; border-radius: var(--raio-md); }
  /* O botão de criar da própria tela fica acima da barra inferior (nunca escondido atrás dela) */
  .botao-flutuante { right: 1rem; bottom: calc(var(--altura-barra-inferior) + 1rem + env(safe-area-inset-bottom, 0px)); width: 3.25rem; height: 3.25rem; }

  .barra-inferior {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
    background: var(--superficie); border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .barra-inferior .faixa { display: flex; align-items: center; justify-content: space-around; height: var(--altura-barra-inferior); padding: 0 .4rem; }
  .barra-inferior a, .barra-inferior button {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    min-width: 52px; min-height: var(--alvo-toque); border: 0; background: transparent; text-decoration: none; color: var(--texto-suave);
    font-size: .625rem; font-weight: 500;
  }
  .barra-inferior a i, .barra-inferior button i { font-size: 1.2rem; }
  .barra-inferior .ativo { color: var(--primaria); }
  .barra-inferior .ativo::before { content: ""; position: absolute; top: -9px; width: 32px; height: 2px; border-radius: 2px; background: var(--primaria); }
  .barra-inferior .botao-central {
    flex: 0 0 auto; width: 56px; height: 56px; min-width: 56px; margin-top: -22px; border-radius: 50%; color: var(--dourado) !important;
    background: linear-gradient(135deg, #1A78E8, #0B2347); box-shadow: 0 4px 16px rgba(21,101,200,.5);
  }
  .barra-inferior .botao-central i { font-size: 1.45rem; }
  .barra-inferior .botao-central:active { transform: scale(.95); }

  .gaveta-mais {
    display: block; position: fixed; left: .75rem; right: .75rem; z-index: 1036;
    bottom: calc(var(--altura-barra-inferior) + .25rem + env(safe-area-inset-bottom, 0px));
    background: var(--superficie); border-radius: var(--raio-lg); box-shadow: 0 -4px 24px rgba(0,0,0,.18);
    transform: translateY(calc(100% + 6rem)); transition: transform .25s cubic-bezier(.22,1,.36,1); max-height: 70vh; overflow-y: auto;
  }
  .gaveta-mais.aberta { transform: none; }
  .gaveta-mais .cabeca-gaveta { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--borda); }
  .gaveta-mais .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; padding: .5rem; }
  .gaveta-mais .grade a { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .8rem .3rem; border-radius: .75rem; color: var(--texto-suave); text-decoration: none; font-size: .6875rem; font-weight: 500; text-align: center; }
  .gaveta-mais .grade a i { font-size: 1.2rem; }
  .gaveta-mais .grade a.ativo { background: var(--info-fundo); color: var(--primaria); }
  .gaveta-mais .sair { margin: 0 .75rem .75rem; }
  .gaveta-mais .sair button { width: 100%; min-height: var(--alvo-toque); border: 0; border-radius: .75rem; background: #FEF2F2; color: #DC2626; font-weight: 600; font-size: .875rem; }

  /* Tabelas no celular: rolagem horizontal suave dentro do cartão */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .quadro { grid-auto-columns: 85%; }
}

@media (min-width: 992px) {
  .tela-acesso { flex-direction: row; }
  .tela-acesso .heroi { width: 52%; height: auto; }
  .tela-acesso .heroi img { width: 150px; height: 150px; }
  .tela-acesso .heroi .nome-marca { font-size: 1.15rem; margin-top: 1rem; }
  .tela-acesso .heroi .slogan { font-size: 1rem; margin-top: 1.1rem; }
  .tela-acesso .painel { margin-top: 0; border-radius: 0; box-shadow: none; justify-content: center; padding: 3rem; }
}

/* Telas muito largas: conteúdo não estica além do legível */
@media (min-width: 2200px) {
  .conteudo { max-width: 1900px; }
}

/* Utilitário: permite truncar texto dentro de flex */
.min-w-0 { min-width: 0; }