@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   Viagem 5 Estrelas - painel de gestao
   Sem acento nos comentarios: encoding mal declarado no servidor
   quebra o parser e derruba metade da folha.
   ═══════════════════════════════════════════════════════════ */

/* Fonte oficial da marca. Fica nos titulos e na navegacao; o corpo e as
   tabelas seguem em Inter, que tem numero tabular e le melhor em dado denso. */
@font-face{ font-family:"Glacial"; src:url("../fontes/GlacialIndifference-Regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Glacial"; src:url("../fontes/GlacialIndifference-Bold.otf")    format("opentype"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Glacial"; src:url("../fontes/GlacialIndifference-Italic.otf")  format("opentype"); font-weight:400; font-style:italic; font-display:swap; }

:root{
  /* marca */
  --ouro:#BA9F68;
  --ouro-esc:#9c8352;
  --ouro-claro:#E8DCC4;
  --marca:"Glacial","Century Gothic","Avenir Next",system-ui,sans-serif;

  /* superficies
     A barra usava azul-marinho generico, que nao existe na marca. Agora sai do
     verde profundo #030604 do guia, com o oliva #3D5313 como estado de hover. */
  --fundo:#F7F5F1;
  --carta:#FFFFFF;
  --barra:#080D07;
  --barra-item:#1A2413;

  /* texto */
  --tx:#1A1D1A;
  --tx2:#6B6F6A;
  --tx3:#9CA09A;
  --linha:#E6E2DA;

  /* estados */
  --ok:#10B981;
  --alerta:#F59E0B;
  --erro:#EF4444;
  --info:#3B82F6;
  --roxo:#8B5CF6;

  /* Cantos mais generosos: o padrao anterior deixava tudo com cara quadrada */
  --r:14px;
  --r-g:20px;
  --sombra:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
  --sombra-g:0 4px 12px rgba(16,24,40,.08), 0 12px 32px rgba(16,24,40,.06);
  --menu-w:246px;
  --topo-h:60px;
}

:root[data-tema="escuro"]{
  --fundo:#0A0F09;
  --carta:#141B12;
  --barra:#050805;
  --barra-item:#1A2413;
  --tx:#F2F1EC;
  --tx2:#9DA398;
  --tx3:#6B7067;
  --linha:#232C1F;
  --sombra:0 1px 3px rgba(0,0,0,.4);
  --sombra-g:0 8px 28px rgba(0,0,0,.5);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--fundo); color:var(--tx);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
a{ color:inherit; text-decoration:none; }
[hidden]{ display:none !important; }

/* ─────────────── Menu lateral ─────────────── */
.menu{
  position:fixed; inset:0 auto 0 0; width:var(--menu-w);
  background:var(--barra); color:#CFCBBE;
  display:flex; flex-direction:column; z-index:40;
  transition:width .2s ease;
}
.menu__marca{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:1.7rem 1.15rem 1.3rem; border-bottom:1px solid rgba(255,255,255,.07);
}
/* logo branca da marca sobre o menu escuro */
.menu__logo{ height:76px; width:auto; }
.menu__sub{
  font-size:.66rem; color:#8C9182; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600;
}

.menu__rolagem{ flex:1; overflow-y:auto; padding:.7rem .6rem 1rem; }
.menu__rolagem::-webkit-scrollbar{ width:5px; }
.menu__rolagem::-webkit-scrollbar-thumb{ background:#2B3524; border-radius:3px; }

.menu__grupo{ margin-top:1.1rem; }
.menu__titulo{
  display:flex; align-items:center; width:100%;
  padding:.35rem .65rem; color:#7C8274;
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.menu__titulo .seta{ margin-left:auto; transition:transform .2s; font-size:.7rem; }
.menu__grupo[data-fechado] .seta{ transform:rotate(-90deg); }
.menu__grupo[data-fechado] .menu__itens{ display:none; }

.menu__itens{ display:flex; flex-direction:column; gap:2px; }
.menu__item{
  display:flex; align-items:center; gap:.7rem;
  padding:.55rem .65rem; border-radius:11px;
  color:#CFCBBE; font-size:.875rem; width:100%; text-align:left;
  transition:background .15s, color .15s;
}
.menu__item:hover{ background:var(--barra-item); color:#fff; }
.menu__item--ativo{ background:var(--ouro); color:#1A1D1A; font-weight:700; }
.menu__item--ativo:hover{ background:var(--ouro); color:#1A1D1A; }
.menu__item svg{ width:17px; height:17px; flex:none; }
.menu__badge{
  margin-left:auto; background:var(--erro); color:#fff;
  font-size:.66rem; font-weight:700; padding:.05rem .38rem; border-radius:99px;
}
.menu__tag{
  margin-left:auto; background:var(--ok); color:#fff;
  font-size:.6rem; font-weight:700; padding:.08rem .38rem; border-radius:4px;
  letter-spacing:.04em;
}

.menu__pe{
  padding:.75rem 1rem; border-top:1px solid rgba(255,255,255,.07);
  font-size:.72rem; color:#7C8274;
}

/* ─────────────── Topo ─────────────── */
.topo{
  position:fixed; top:0; right:0; left:var(--menu-w); height:var(--topo-h);
  background:var(--carta); border-bottom:1px solid var(--linha);
  display:flex; align-items:center; gap:1rem; padding:0 1.4rem; z-index:30;
}
.topo__titulo{ font-family:var(--marca); font-size:1.08rem; font-weight:700; letter-spacing:.01em; }
.topo__acoes{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.icone-btn{
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  color:var(--tx2); transition:background .15s;
}
.icone-btn:hover{ background:var(--fundo); color:var(--tx); }
.icone-btn svg{ width:18px; height:18px; }

.usuario{
  display:flex; align-items:center; gap:.55rem; padding:.3rem .5rem .3rem .3rem;
  border-radius:99px; transition:background .15s;
}
.usuario:hover{ background:var(--fundo); }
.avatar{
  width:30px; height:30px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--ouro),var(--ouro-esc));
  display:grid; place-items:center; color:#fff; font-size:.72rem; font-weight:700;
}
.usuario span{ font-size:.85rem; font-weight:500; }

/* ─────────────── Area de conteudo ─────────────── */
.conteudo{
  margin:var(--topo-h) 0 0 var(--menu-w);
  padding:1.8rem 2rem 2.5rem; min-height:calc(100vh - var(--topo-h));
}

.pagina__cabecalho{ margin-bottom:1.6rem; }
.pagina__cabecalho h1{ font-family:var(--marca); font-size:1.75rem; font-weight:700; letter-spacing:-.015em; }
.pagina__cabecalho p{ color:var(--tx2); font-size:.9rem; margin-top:.3rem; }
.cabecalho-linha{ display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.cabecalho-linha .acoes{ margin-left:auto; display:flex; gap:.5rem; }

/* ─────────────── Avisos ─────────────── */
.aviso{
  display:flex; align-items:center; gap:.8rem;
  padding:.85rem 1.1rem; border-radius:var(--r); margin-bottom:.9rem;
  font-size:.88rem; border:1px solid;
}
.aviso svg{ width:18px; height:18px; flex:none; }
.aviso .btn{ margin-left:auto; flex:none; }
.aviso--alerta{ background:#FFFBEB; border-color:#FDE68A; color:#92400E; }
.aviso--info{ background:#EFF6FF; border-color:#BFDBFE; color:#1E40AF; }
:root[data-tema="escuro"] .aviso--alerta{ background:#2A2210; border-color:#4D3D14; color:#FCD34D; }
:root[data-tema="escuro"] .aviso--info{ background:#132039; border-color:#1E3A63; color:#93C5FD; }

/* ─────────────── Botoes ─────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.55rem 1rem; border-radius:12px; font-size:.86rem; font-weight:600;
  background:var(--ouro); color:#fff; white-space:nowrap;
  transition:background .15s, transform .1s, box-shadow .15s;
}
.btn:hover{ background:var(--ouro-esc); }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:16px; height:16px; }
.btn--claro{ background:var(--carta); color:var(--tx); border:1px solid var(--linha); }
.btn--claro:hover{ background:var(--fundo); }
.btn--fantasma{ background:transparent; color:var(--tx2); }
.btn--fantasma:hover{ background:var(--fundo); color:var(--tx); }
.btn--erro{ background:var(--erro); }
.btn--erro:hover{ background:#DC2626; }
.btn--p{ padding:.35rem .7rem; font-size:.8rem; }
.btn--bloco{ width:100%; }

/* ─────────────── Cartoes de metrica ─────────────── */
.metricas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:.9rem; margin-bottom:1rem;
}
/* Quatro gradientes saturados lado a lado tiravam o ar premium e competiam
   pela atencao. Agora a superficie e clara e a cor fica no icone e num fio
   lateral: o dado continua legivel e o painel para de gritar. */
.metrica{
  background:var(--carta); border:1px solid var(--linha);
  border-radius:var(--r-g); padding:1.1rem 1.15rem 1.15rem 1.3rem;
  position:relative; overflow:hidden; box-shadow:var(--sombra);
  transition:box-shadow .18s, transform .18s;
}
.metrica:hover{ box-shadow:var(--sombra-g); transform:translateY(-1px); }
.metrica::before{
  content:\; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--acento);
}
.metrica__ico{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--acento) 14%, transparent);
  color:var(--acento); margin-bottom:.9rem;
}
.metrica__ico svg{ width:17px; height:17px; }
.metrica b{
  display:block; font-family:var(--marca); font-size:1.85rem; font-weight:700;
  letter-spacing:-.02em; line-height:1.1; color:var(--tx);
}
.metrica span{ font-size:.82rem; color:var(--tx2); }
.metrica--ouro{   --acento:#BA9F68; }
.metrica--ok{     --acento:#2F8F5B; }
.metrica--info{   --acento:#3D6B99; }
.metrica--roxo{   --acento:#6E5A8F; }
.metrica--alerta{ --acento:#B4762A; }
.metrica--erro{   --acento:#C0453A; }

.mini-metricas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:.9rem; margin-bottom:1.3rem;
}
.mini{
  background:var(--carta); border:1px solid var(--linha);
  border-radius:var(--r-g); padding:1rem; box-shadow:var(--sombra);
}
.mini__ico{
  width:30px; height:30px; border-radius:11px; display:grid; place-items:center;
  margin-bottom:.7rem;
  background:color-mix(in srgb, var(--acento,var(--ouro)) 14%, transparent);
  color:var(--acento,var(--ouro));
}
.mini__ico--ok{     --acento:#2F8F5B; }
.mini__ico--info{   --acento:#3D6B99; }
.mini__ico--roxo{   --acento:#6E5A8F; }
.mini__ico--alerta{ --acento:#B4762A; }
.mini__ico--ouro{   --acento:#BA9F68; }
.mini__ico svg{ width:15px; height:15px; }
.mini b{ display:block; font-family:var(--marca); font-size:1.35rem; font-weight:700; letter-spacing:-.02em; }
.mini span{ font-size:.79rem; color:var(--tx2); }

/* ─────────────── Cartao generico ─────────────── */
.cartao{
  background:var(--carta); border:1px solid var(--linha);
  border-radius:var(--r-g); box-shadow:var(--sombra);
}
.cartao__topo{
  padding:1.05rem 1.2rem; border-bottom:1px solid var(--linha);
  display:flex; align-items:center; gap:.7rem;
}
.cartao__topo h2{ font-family:var(--marca); font-size:1.05rem; font-weight:700; letter-spacing:.005em; }
.cartao__topo p{ font-size:.8rem; color:var(--tx2); margin-top:.1rem; }
.cartao__topo .acoes{ margin-left:auto; display:flex; gap:.4rem; }
.cartao__corpo{ padding:1.2rem; }
.cartao__corpo--limpo{ padding:0; }

/* ─────────────── Formularios ─────────────── */
.secao-form{ margin-bottom:1rem; }
.secao-form__titulo{
  display:flex; align-items:center; gap:.6rem;
  font-size:.95rem; font-weight:600; margin-bottom:1rem;
}
.secao-form__titulo svg{ width:17px; height:17px; color:var(--ouro); }

.grade{ display:grid; gap:.9rem; }
.grade--2{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.grade--3{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }

.campo label{
  display:block; font-size:.8rem; font-weight:500;
  color:var(--tx2); margin-bottom:.32rem;
}
.campo label .obr{ color:var(--erro); }
.campo input, .campo select, .campo textarea{
  width:100%; background:var(--carta); color:var(--tx);
  border:1px solid var(--linha); border-radius:12px;
  padding:.55rem .7rem; font-size:.88rem;
  transition:border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:0; border-color:var(--ouro);
  box-shadow:0 0 0 3px rgba(186,159,104,.16);
}
.campo textarea{ resize:vertical; min-height:78px; }
.campo__dica{ font-size:.74rem; color:var(--tx3); margin-top:.28rem; }

.escolhas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.7rem; }
.escolha{
  display:flex; align-items:flex-start; gap:.6rem;
  border:1.5px solid var(--linha); border-radius:var(--r);
  padding:.8rem .9rem; transition:border-color .15s, background .15s;
}
.escolha:hover{ border-color:var(--ouro-claro); }
.escolha--ativa{ border-color:var(--ouro); background:rgba(186,159,104,.07); }
.escolha input{ margin-top:.15rem; accent-color:var(--ouro); }
.escolha b{ display:block; font-size:.87rem; font-weight:600; }
.escolha small{ color:var(--tx2); font-size:.78rem; }

.chave{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--fundo); border:1px solid var(--linha);
  border-radius:12px; padding:.5rem .8rem;
}
.chave input{ width:0; height:0; opacity:0; position:absolute; }
.chave__bola{
  width:38px; height:21px; border-radius:99px; background:#CBD5E1;
  position:relative; transition:background .2s;
}
.chave__bola::after{
  content:""; position:absolute; top:2px; left:2px;
  width:17px; height:17px; border-radius:50%; background:#fff;
  transition:transform .2s;
}
.chave input:checked + .chave__bola{ background:var(--ok); }
.chave input:checked + .chave__bola::after{ transform:translateX(17px); }

.rodape-form{
  position:sticky; bottom:0; background:var(--carta);
  border-top:1px solid var(--linha); padding:.9rem 1.2rem;
  display:flex; justify-content:flex-end; gap:.6rem; border-radius:0 0 var(--r-g) var(--r-g);
}

/* ─────────────── Tabela ─────────────── */
.tabela{ width:100%; border-collapse:collapse; font-size:.87rem; }
.tabela th{
  text-align:left; padding:.7rem 1.2rem; font-size:.74rem; font-weight:600;
  color:var(--tx2); text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--linha); background:var(--fundo);
}
.tabela td{ padding:.8rem 1.2rem; border-bottom:1px solid var(--linha); }
.tabela tbody tr:hover{ background:var(--fundo); }
.tabela tbody tr:last-child td{ border-bottom:0; }

.selo{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.73rem; font-weight:600; padding:.18rem .55rem; border-radius:99px;
}
.selo--ok{ background:#D1FAE5; color:#065F46; }
.selo--alerta{ background:#FEF3C7; color:#92400E; }
.selo--erro{ background:#FEE2E2; color:#991B1B; }
.selo--info{ background:#DBEAFE; color:#1E40AF; }
.selo--neutro{ background:var(--fundo); color:var(--tx2); border:1px solid var(--linha); }

.vazio{ padding:3rem 1.5rem; text-align:center; color:var(--tx2); }
.vazio svg{ width:44px; height:44px; color:var(--tx3); margin-bottom:.8rem; }
.vazio b{ display:block; font-size:.95rem; color:var(--tx); margin-bottom:.25rem; }
.vazio p{ font-size:.85rem; max-width:38ch; margin:0 auto 1rem; }

@media (max-width:900px){
  :root{ --menu-w:0px; }
  .menu{ transform:translateX(-100%); transition:transform .25s; width:246px; }
  .menu--aberto{ transform:none; }
  .topo{ left:0; }
  .conteudo{ margin-left:0; padding:1rem; }
}

/* Aviso de estado bom: conexao ativa, tarefa concluida */
.aviso--ok{ background:#ECFDF5; border-color:#A7F3D0; color:#065F46; }
:root[data-tema="escuro"] .aviso--ok{ background:#0E2019; border-color:#14432F; color:#6EE7B7; }

/* Fechar aviso dispensavel */
.aviso__x{
  margin-left:.35rem; width:26px; height:26px; flex:none; border-radius:8px;
  font-size:1.15rem; line-height:1; color:inherit; opacity:.5;
  display:grid; place-items:center; transition:opacity .15s, background .15s;
}
.aviso__x:hover{ opacity:1; background:rgba(0,0,0,.07); }