/* ============================================================
   HOME "VITRINE" (#page-inicio): cara de "produto", não de
   painel. Só usa cores que já estão nos temas.
   ============================================================ */

#topbar{background:var(--cor-topbar);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;transition:background .3s;border-bottom:1px solid color-mix(in srgb,var(--cor-acento) 38%,transparent);box-shadow:none}
#topbar h5{margin:0;font-size:1.05rem;color:var(--cor-topbar-texto);font-weight:600;letter-spacing:-.01em}
#topbar .btn{color:var(--cor-topbar-texto)!important}

#topbar .btn-sino,#topbar .btn-ghost,#topbar .btn-secondary{border-color:rgba(255,255,255,.15)!important;background:rgba(255,255,255,.06)!important}
#topbar .btn-sino:hover,#topbar .btn-ghost:hover,#topbar .btn-secondary:hover{background:rgba(255,255,255,.13)!important}
#topbar .badge{background:var(--cor-acento)!important;color:var(--cor-acento-texto)!important}

#topbar #topbar-usuario{color:rgba(255,255,255,.55)!important}

/* CARDS */
.stat-card{position:relative;overflow:hidden;background:var(--cor-card);border-radius:var(--radius-lg);
  padding:var(--esp-5);box-shadow:var(--sombra-card);border:1px solid var(--cor-border);
  transition-property:transform,box-shadow,border-color;transition-duration:200ms;
  transition-timing-function:cubic-bezier(.22,.61,.36,1)}
/* O acento entra pela esquerda no hover: aparece quando o mouse tá em
   cima e some quando sai. */
.stat-card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--cor-acento);transform:scaleY(0);transform-origin:top;
  transition:transform 260ms cubic-bezier(.22,.61,.36,1)}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--sombra-card-hover);
  border-color:color-mix(in srgb,var(--cor-acento) 26%,var(--cor-border))}
.stat-card:hover::after{transform:scaleY(1)}
.stat-card .d-flex{align-items:center}

.stat-card .valor{font-size:2rem;font-weight:var(--peso-max);color:var(--cor-primaria);
  font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:-.03em;margin:8px 0 4px}
.stat-card .label{color:var(--cor-texto-muted);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.16em;font-weight:var(--peso-forte)}

.stat-card i{font-size:1.15rem;width:42px;height:42px;flex-shrink:0;display:inline-flex;
  align-items:center;justify-content:center;border-radius:var(--radius-md);
  background:color-mix(in srgb,currentColor 12%,transparent);
  border:1px solid color-mix(in srgb,currentColor 16%,transparent);opacity:1;
  transition:transform 220ms cubic-bezier(.22,.61,.36,1)}
.stat-card:hover i{transform:scale(1.06)}

.table thead tr{background:var(--cor-table-header)}
.table thead th{background:transparent;color:var(--cor-texto-muted);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.14em;font-weight:var(--peso-forte);white-space:nowrap;
  padding:14px 18px;border-top:none!important;border-left:none!important;border-right:none!important;
  border-bottom:1px solid var(--cor-border)!important}
.table tbody tr{color:var(--cor-texto);transition:background .12s}
.table tbody tr:hover{background:color-mix(in srgb, var(--cor-primaria) 4%, var(--cor-card))}
.table tbody td{padding:15px 16px;border-color:var(--cor-border)!important;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none!important}
.table th{vertical-align:middle}
.table td{font-variant-numeric:tabular-nums}

/* FORMULÁRIO MODAL: dark support */
.modal-content{background:var(--cor-card);color:var(--cor-texto);border-radius:var(--radius-lg);border:none;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.modal-header{background:var(--cor-card);color:var(--cor-texto);padding:20px 24px;
  border-bottom:1px solid var(--cor-border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;position:relative}
.modal-header::after{content:'';position:absolute;left:24px;bottom:-1px;width:32px;height:1px;background:var(--cor-acento)}
/* O X do Bootstrap é escuro, então só inverte nos temas de fundo escuro. */
body.tema-alt-noite .modal-header .btn-close,body.tema-alt-laranja-noite .modal-header .btn-close,
body.tema-midnight .modal-header .btn-close,body.tema-neon .modal-header .btn-close{filter:invert(1)}
.modal-body .form-label{color:var(--cor-texto);font-weight:600;font-size:.85rem}
.form-control,.form-select{background:var(--cor-input-bg)!important;color:var(--cor-input-texto)!important;border-color:var(--cor-border)!important;border-radius:var(--radius-sm)}
.form-control::placeholder{color:var(--cor-texto-muted)!important}
.form-control,.form-select{transition:border-color .2s ease,box-shadow .2s ease}
.form-control:focus,.form-select:focus{border-color:var(--cor-acento)!important;box-shadow:0 0 0 3px color-mix(in srgb, var(--cor-acento) 20%, transparent)!important}

/* ============================================================
   AVA: botão flutuante (canto inferior direito) + chat flutuante
   O PNG já vem recortado em círculo, com os cantos transparentes,
   então o botão não precisa de fundo atrás da imagem.
   ============================================================ */

/* No celular o painel ocupa a tela quase toda */

/* Respeita quem pediu menos animação no sistema operacional */

/* FORMULÁRIO DE OCORRÊNCIA, seções agrupadas */
.form-secao{background:var(--cor-card);border:1px solid var(--cor-border);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:14px}
.form-secao-titulo{display:flex;align-items:center;gap:7px;font-weight:800;font-size:.74rem;color:var(--cor-primaria);text-transform:uppercase;letter-spacing:.5px;margin-bottom:13px}
.form-secao-titulo i{font-size:.95rem;color:var(--cor-acento)}

/* ── TABELAS DO MÓDULO FISCAL NO CELULAR ──
   Visitas, Pendências e Relatórios têm 8 e 9 colunas. Num aparelho de 390px
   isso vira uma tabela de 700px dentro de um container rolável: pra ler uma
   linha só, tem que arrastar pro lado e voltar, e a coluna que identifica a
   linha (o cliente) some da tela no caminho. Como o módulo é usado quase
   todo no celular, cada linha vira um cartão empilhado.

   O rótulo de cada campo vem do atributo data-r do <td>, escrito onde a linha
   é montada. Sem ele o valor ia aparecer solto, sem dizer o que é. */

/* PRINT: Ficha DP */
@media print {
  #tela-login,#app>#sidebar,#topbar,.btn,button,.modal{ display:none!important; }
  
  body,html { background:#fff!important; }
  
}

/* LOADING */
#loading{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9999;align-items:center;justify-content:center}
#loading.show{display:flex}

/* MOBILE NAV */
#mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--cor-primaria);z-index:98;padding:6px 0 8px;box-shadow:0 -2px 12px rgba(0,0,0,.2)}
#mobile-nav .mn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:rgba(255,255,255,.65);font-size:.62rem;cursor:pointer;padding:4px 2px;transition:.2s;text-align:center}
#mobile-nav .mn-item.active,#mobile-nav .mn-item:active{color:#fff}
#mobile-nav .mn-item i{font-size:1.3rem}
/* RESPONSIVO */
@media(max-width:768px){
  #conteudo{padding-bottom:70px}
  #mobile-nav{display:flex}
  
  .stat-card .valor{font-size:1.4rem}
  #topbar{padding:8px 14px}
  #topbar h5{font-size:.9rem}
  
  .modal-dialog{margin:8px}
  .modal-dialog.modal-lg{max-width:calc(100vw - 16px)}
}

/* BRILHO: ocorrências importadas via RDO */
/* NOTIF OCORRÊNCIAS */
#notif-ocorr-popup{position:fixed;top:58px;right:16px;width:340px;max-height:calc(100vh - 90px);background:var(--cor-card);color:var(--cor-texto);border:1px solid var(--cor-border);border-radius:var(--radius-lg);box-shadow:var(--sombra-card);z-index:1055;display:none;flex-direction:column;overflow:hidden}
#notif-ocorr-popup.show{display:flex}
#notif-ocorr-popup .notif-header{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:var(--cor-table-header);border-bottom:1px solid var(--cor-border);flex-shrink:0}
#notif-ocorr-popup .notif-header span{font-weight:700;font-size:.92rem;color:var(--cor-texto)}
#notif-ocorr-popup .notif-header button{color:var(--cor-texto-muted)!important}
#notif-ocorr-popup .notif-header button:hover{color:var(--cor-texto)!important}
#notif-ocorr-popup .notif-body-scroll{overflow-y:auto;flex:1;min-height:0}
#notif-ocorr-popup .notif-lista{max-height:280px;overflow-y:auto}

#notif-ocorr-popup .notif-sec-footer{padding:7px 14px;border-bottom:1px solid var(--cor-border)}
#notif-ocorr-popup .notif-sec-footer button{font-size:.75rem;font-weight:600;background:none;border:none;cursor:pointer;padding:0}

#notif-ocorr-popup .notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;cursor:pointer;transition:background .15s}
#notif-ocorr-popup .notif-item:hover{background:color-mix(in srgb,var(--cor-primaria) 8%,transparent)}

.btn-sino{position:relative;color:var(--cor-primaria);border:none!important;background:none!important;padding:4px!important}
#topbar .btn-sino{color:var(--cor-topbar-texto)!important}

/* ============================================================
   MOBILE: adaptação completa para telas ≤ 768 px
   ============================================================ */
@media(max-width:768px){

  /* ── Layout base ── */
  #conteudo{padding-bottom:72px}
  #mobile-nav{display:flex}
  

  /* ── Topbar ── */
  #topbar{padding:8px 10px;gap:6px}
  #topbar h5{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
  #topbar .d-flex.align-items-center.gap-3{gap:8px!important}

  

  /* ── Stat cards ── */
  .stat-card{padding:14px}
  .stat-card .valor{font-size:1.5rem}
  .stat-card i{width:38px;height:38px;font-size:1.1rem}
  

  
  
  

  

  

  
  .table{font-size:.78rem}
  .table td,.table th{padding:.4rem .5rem;white-space:nowrap}

  
  
  

  
  
  

  

  
  
  
  
  

  
  

  
  
  
  
  

  
  

  
  
  

  
  
  

  
  
  

  
  
  

  /* ── Modais: quase fullscreen ── */
  .modal-dialog{margin:6px!important;max-width:calc(100vw - 12px)!important}
  .modal-dialog.modal-lg{max-width:calc(100vw - 12px)!important}
  .modal-content{border-radius:12px!important}
  .modal-body{padding:12px!important}
  .modal-header{padding:12px 14px!important}
  .modal-footer{padding:10px 12px!important;flex-wrap:wrap;gap:6px}
  .modal-footer .btn{flex:1 1 auto;font-size:.82rem}

  
  .modal-body .col-md-6,.modal-body .col-md-4,.modal-body .col-md-3,
  .modal-body .col-md-8{width:100%!important}

  /* ── Form sections ── */
  .form-secao .row.g-2 > [class*="col-"]{width:100%!important}

  
  

  
  
  
  

  /* ── Notif popup ── */
  #notif-ocorr-popup{width:calc(100vw - 20px);right:10px;top:56px}

  
  

  
  
  

  
  
  

  
  
  

  

  

  
  

  

  
  
  

  /* ── Input group ── */
  .input-group{flex-wrap:nowrap}

  

  

  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  

  /* ── Jornadas/Funções checkboxes ── */
  .form-check-inline{margin-right:.4rem}
  .form-check-label{font-size:.78rem!important}

  

  
  
  
  
  
  
  
  
  
  
  

  /* ── Espaçamentos gerais reduzidos ── */
  .mb-3{margin-bottom:.75rem!important}
  .mb-4{margin-bottom:1rem!important}
  .p-3{padding:.75rem!important}
  .p-4{padding:1rem!important}
  .gap-3{gap:.5rem!important}
}

/* ── Extra small (≤ 480 px) ── */
@media(max-width:480px){
  #topbar h5{max-width:110px}
  
  .stat-card .valor{font-size:1.3rem}
  .table{font-size:.72rem}
  .table td,.table th{padding:.3rem .4rem}
  .btn-sm{font-size:.74rem;padding:4px 7px}
  .modal-body{padding:10px!important}
  
  
  
  
  
  
}

/* ============================================================
   CHAT: layout e mecânica estilo WhatsApp (duas colunas, bolhas,
   grupos), mas com a paleta do tema da empresa em vez da paleta
   fixa do WhatsApp, então muda de cara junto com o tema escolhido.
   ============================================================ */

/* ============================================================
   SETOR DE TI: solicitação de demandas, kanban e painel
   ============================================================ */

/* ============================================================
   SISTEMA DE VISTORIA VEICULAR (ADM)
   ============================================================ */

/* Telas estreitas: a grade vira faixa rolável, com a coluna larga o
   bastante pro card continuar legível. */