/* ===================================================================
   ESTILO.CSS — Missiva Travel Backoffice
   Paleta extraída da logo (coral/salmão + terracota profundo)
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* cor */
  --coral:        #FF8B6E;
  --coral-deep:   #E15F3F;
  --coral-soft:   #FFD9CC;
  --brand-dark:         #7A3524;  /* terracota profundo, mesma família da logo */
  --brand-dark-soft:    #96442C;
  --paper:        #FFFFFF;
  --sand:         #F7F1EA;
  --line:         #E8DED3;
  --ink:          #23262B;
  --ink-mute:     #6B6660;

  /* tipografia */
  --f-display: 'Fraunces', Georgia, serif;
  --f-body:    'Inter', -apple-system, Segoe UI, sans-serif;
  --f-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* layout */
  --radius: 10px;
  --shadow: 0 8px 24px rgba(27, 36, 48, 0.08);
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.5;
}

a{ color:inherit; text-decoration:none; }

/* ---------- Barra superior / topo.php ---------- */
.mv-topbar{
  background:var(--brand-dark);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 28px;
  position:sticky;
  top:0;
  z-index:100;
}
.mv-brand{ display:flex; align-items:center; gap:10px; }
.mv-brand img{ height:34px; display:block; filter:brightness(0) invert(1); opacity:.95;}
.mv-brand span{
  font-family:var(--f-display);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--coral-soft);
  border-left:1px solid rgba(255,255,255,.25);
  padding-left:10px;
}

/* perfuração estilo bilhete/boarding pass, sob a topbar */
.mv-perforation{
  height:0;
  border-top:2px dashed var(--coral);
  background:var(--brand-dark);
  position:relative;
}
.mv-perforation::before,
.mv-perforation::after{
  content:"";
  position:absolute; top:-7px;
  width:14px; height:14px;
  background:var(--sand);
  border-radius:50%;
}
.mv-perforation::before{ left:-7px; }
.mv-perforation::after{ right:-7px; }

/* ---------- Menu principal ---------- */
.mv-nav{
  background:var(--brand-dark-soft);
  display:flex;
  flex-wrap:wrap;
  padding:0 18px;
}
.mv-nav > li{ list-style:none; position:relative; display:flex; align-items:stretch; }
.mv-nav > li > details{ display:flex; align-items:stretch; }

/* .mv-nav > li > summary não existe no DOM (summary é filho de <details>, não de <li>),
   por isso os itens com submenu ficavam sem o mesmo padding/altura dos links simples. */
.mv-nav > li > a,
.mv-nav > li > details > summary{
  display:flex;
  align-items:center;
  padding:12px 16px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.03em;
  color:#EFE7DE;
  cursor:pointer;
  list-style:none;
  border-bottom:2px solid transparent;
  transition:border-color .15s, background .15s;
  white-space:nowrap;
}
.mv-nav > li > a:hover,
.mv-nav > li > details > summary:hover{
  border-bottom-color:var(--coral);
  background:rgba(255,255,255,.04);
}
.mv-nav > li > details > summary::-webkit-details-marker{ display:none; }
.mv-nav > li > details > summary{ list-style:none; }
.mv-nav > li > details > summary::marker{ content:""; }
.mv-nav > li > details > summary::after{
  content:"▾";
  margin-left:6px;
  font-size:10px;
  color:var(--coral-soft);
}
.mv-nav > li > details[open] > summary{ border-bottom-color:var(--coral); }

.mv-sub{
  list-style:none;
  margin:0; padding:6px;
  position:absolute;
  left:0; top:100%;
  min-width:190px;
  background:var(--paper);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow);
  z-index:50;
}
.mv-sub li a{
  display:block;
  padding:9px 12px;
  font-size:13px;
  color:var(--ink);
  border-radius:6px;
}
.mv-sub li a:hover{ background:var(--sand); color:var(--coral-deep); }

/* ---------- Contêiner de página ---------- */
.mv-page{ width:96%; max-width:1900px; margin:0 auto; padding:28px 0 10px; }

/* ---------- Linha de status no topo: relógio + usuário + sair ---------- */
.mv-topline{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.mv-clock{
  font-family:var(--f-mono);
  font-size:14px;
  letter-spacing:.02em;
  color:var(--coral-soft);
  white-space:nowrap;
}
.mv-topline .mv-divider{
  width:1px; height:16px;
  background:rgba(255,255,255,.25);
}
.mv-user{ display:flex; align-items:center; gap:10px; }
.mv-user span{ font-size:12.5px; color:#FBEAE2; white-space:nowrap; }
.mv-user strong{ color:#fff; font-weight:600; }

.mv-btn{
  display:inline-block;
  font-family:var(--f-body);
  font-size:13px;
  font-weight:600;
  padding:9px 16px;
  border-radius:7px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .12s, background .15s, border-color .15s;
}
.mv-btn:active{ transform:translateY(1px); }
.mv-btn-primary{ background:var(--coral, #FF8B6E); color:#fff; }
.mv-btn-primary:hover{ background:var(--coral-deep, #E15F3F); }
.mv-btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.mv-btn-ghost:hover{ border-color:var(--coral); color:var(--coral-soft); }
.mv-btn-outline{ background:var(--paper); color:var(--brand-dark); border-color:var(--line); }
.mv-btn-outline:hover{ border-color:var(--coral); color:var(--coral-deep); }

/* ---------- Bloco clima e tempo (widget rico, ver clima.php) ---------- */
.mv-clima{
  margin-top:20px;
  padding:24px 28px;
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.mv-clima .mv-eyebrow{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--coral-deep);
  font-weight:600;
}
.mv-clima-indisponivel{
  text-align:center;
  padding:10px;
  color:var(--ink-mute);
  font-size:13.5px;
  font-style:italic;
  margin-top:10px;
}
.mv-clima-aviso{
  font-size:12.5px;
  color:var(--coral-deep);
  margin:10px 0 0;
}

/* Busca de cidade */
.mv-clima-busca{ display:flex; gap:8px; align-items:center; }
.mv-clima-busca input[type=text]{
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  font-family:var(--f-body);
  font-size:12.5px;
  background:var(--sand);
  min-width:180px;
}
.mv-clima-busca input[type=text]:focus{
  outline:2px solid var(--coral);
  outline-offset:1px;
  background:var(--paper);
}
.mv-clima-busca .mv-btn{ padding:7px 14px; font-size:12px; }

/* Condição atual */
.mv-clima-atual{
  display:flex;
  align-items:center;
  gap:18px;
  background:linear-gradient(135deg, var(--brand-dark), var(--brand-dark-soft));
  border-radius:var(--radius);
  padding:20px 24px;
  margin:18px 0 22px;
}
.mv-clima-atual-icone{ width:52px; height:52px; flex-shrink:0; }
.mv-clima-atual-icone svg{ width:100%; height:100%; }
.mv-clima-atual-texto{ display:flex; flex-direction:column; gap:3px; }
.mv-clima-atual-label{ color:#fff; font-family:var(--f-display); font-size:19px; }
.mv-clima-atual-cidade{ color:var(--coral-soft); font-size:12.5px; font-weight:600; }
.mv-clima-atual-hora{ color:#DDD0C8; font-size:11.5px; }

/* Abas de dias */
.mv-clima-abas{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.mv-clima-aba-btn{
  font-family:var(--f-body); font-weight:700; font-size:12.5px;
  padding:7px 16px; border-radius:20px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink-mute); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.mv-clima-aba-btn.ativa, .mv-clima-aba-btn:hover{ background:var(--brand-dark); color:#fff; border-color:var(--brand-dark); }

/* Tabela horária por dia */
.mv-clima-tabela-dia{ display:none; overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
.mv-clima-tabela-dia.ativa{ display:block; }
.mv-clima-tabela-dia table{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:520px; }
.mv-clima-tabela-dia th{
  text-align:left; padding:9px 12px; background:var(--sand);
  color:var(--ink-mute); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
}
.mv-clima-tabela-dia td{ padding:8px 12px; border-top:1px solid var(--line); color:var(--ink); }
.mv-clima-icone-mini svg{ width:20px; height:20px; display:block; }
.mv-clima-vento{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.mv-clima-vento-seta{ transform-origin:50% 50%; }

@media (max-width:640px){
  .mv-clima-atual{ flex-direction:column; text-align:center; }
  .mv-clima-busca{ width:100%; }
  .mv-clima-busca input[type=text]{ flex:1; min-width:0; }
}

/* ---------- Badges de status ---------- */
.mv-badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:99px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.03em;
}
.mv-badge-ativo{ background:#E4F3E7; color:#1B7A3D; }
.mv-badge-inativo{ background:#F3E4E4; color:#A6362C; }

/* ---------- Filtro de status (segmentado, ex.: acessos externos) ---------- */
.mv-filtro-segmento{ display:inline-flex; gap:4px; background:var(--sand); border:1px solid var(--line); border-radius:99px; padding:3px; }
.mv-filtro-segmento a{
  padding:6px 14px;
  border-radius:99px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-mute);
  transition:background .15s, color .15s;
}
.mv-filtro-segmento a:hover{ color:var(--brand-dark); }
.mv-filtro-segmento a.ativa{ background:var(--paper); color:var(--brand-dark); box-shadow:0 1px 4px rgba(0,0,0,.10); }

/* ---------- Ficha de detalhe / edição ---------- */
.mv-ficha{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.mv-ficha h2{
  font-family:var(--f-display);
  font-size:18px;
  color:var(--brand-dark);
  margin:0 0 14px;
}
.mv-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
.mv-grid .mv-campo-full{ grid-column:1 / -1; }
.mv-campo label{
  display:block;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:5px;
}
.mv-campo input[type=text],
.mv-campo input[type=email],
.mv-campo input[type=password],
.mv-campo select{
  box-sizing:border-box;
  display:block;
  width:100%;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  font-family:var(--f-body);
  font-size:14px;
  color:var(--ink);
  background:var(--sand);
}
.mv-campo select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  padding-right:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%236B6660'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.mv-campo input:focus,
.mv-campo select:focus{
  outline:2px solid var(--coral);
  outline-offset:1px;
  background:var(--paper);
}
.mv-campo input[readonly]{ background:var(--line); color:var(--ink-mute); }
.mv-campo small{ display:block; margin-top:4px; font-size:11.5px; color:var(--ink-mute); }
.mv-ficha-acoes{ margin-top:18px; display:flex; gap:10px; }

/* ---------- Acessos externos vinculados ao usuário ---------- */
.mv-acessos{ margin-top:26px; }
.mv-acessos h3{
  font-family:var(--f-display);
  font-size:15px;
  color:var(--brand-dark);
  margin:0 0 4px;
}
.mv-senha-mascarada{ font-family:var(--f-mono); letter-spacing:.15em; }
.mv-mostrar-senha{
  background:none; border:none; cursor:pointer;
  color:var(--coral-deep); font-size:11px; font-weight:600;
  padding:2px 6px; text-decoration:underline;
}
.mv-card{
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px 24px;
  margin-top:18px;
}
.mv-card h1{
  font-family:var(--f-display);
  font-size:22px;
  margin:0 0 4px;
  color:var(--brand-dark);
}
.mv-card .mv-eyebrow{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--coral-deep);
  font-weight:600;
}

/* ---------- Formulário de pesquisa ---------- */
.mv-search{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.mv-search input[type=text]{
  flex:1;
  min-width:220px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:7px;
  font-family:var(--f-body);
  font-size:14px;
  background:var(--sand);
}
.mv-search input[type=text]:focus{
  outline:2px solid var(--coral);
  outline-offset:1px;
  background:var(--paper);
}

/* ---------- Tabela de resultados ---------- */
.mv-table{ width:100%; border-collapse:collapse; margin-top:16px; font-size:13.5px; }
.mv-table th{
  text-align:left;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-mute);
  border-bottom:2px solid var(--line);
  padding:8px 10px;
}
.mv-table td{ padding:10px; border-bottom:1px solid var(--line); }
.mv-table tr:hover td{ background:var(--sand); }
.mv-empty{ text-align:center; color:var(--ink-mute); padding:26px; font-style:italic; }

/* ---------- Variante com listras (striped rows), ex.: lista de usuários ---------- */
.mv-table-listras tbody tr:nth-child(even) td{ background:var(--sand); }
.mv-table-listras tbody tr:nth-child(odd) td{ background:var(--paper); }
.mv-table-listras tbody tr:hover td{ background:var(--coral-soft); }
.mv-table-listras tbody tr.mv-row-ativa td{
  background:var(--coral-soft);
  border-top:1px solid var(--coral);
  border-bottom:1px solid var(--coral);
}
.mv-table-listras tbody tr.mv-linha-clicavel{ cursor:pointer; }

/* ---------- Comparativo de cotações (inicial + concorrências) ---------- */
.mv-comparativo{ width:100%; border-collapse:collapse; margin-top:14px; font-size:13px; }
.mv-comparativo th{
  text-align:left; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-mute); border-bottom:2px solid var(--line); padding:8px 10px;
  white-space:nowrap;
}
.mv-comparativo td{ padding:9px 10px; border-bottom:1px solid var(--line); }
.mv-comparativo tr.mv-linha-inicial td{
  background:var(--brand-dark);
  color:#fff;
  font-weight:600;
}
.mv-comparativo tr.mv-linha-inicial td:first-child{ border-radius:8px 0 0 8px; }
.mv-comparativo tr.mv-proposta-a td{ background:var(--paper); }
.mv-comparativo tr.mv-proposta-b td{ background:var(--sand); }
.mv-comparativo tr.mv-proposta-a:hover td,
.mv-comparativo tr.mv-proposta-b:hover td{ background:var(--coral-soft); }
.mv-comparativo .mv-tag-inicial{
  display:inline-block; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--coral); color:#fff; padding:2px 8px; border-radius:99px; margin-right:6px;
}

.mv-toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 6px; }

/* ---------- Ficha somente leitura (Loc, Dt_Criacao...) ---------- */
.mv-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--sand); border:1px solid var(--line); border-radius:99px;
  padding:5px 12px; font-size:12.5px; color:var(--ink); margin-right:8px;
}
.mv-chip strong{ font-family:var(--f-mono); color:var(--brand-dark); }

/* ---------- Área de arrastar e soltar (upload de imagem) ---------- */
.mv-dropzone{
  border:2px dashed var(--line);
  border-radius:var(--radius);
  background:var(--sand);
  padding:22px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.mv-dropzone:hover{ border-color:var(--coral); }
.mv-dropzone.ativa{ border-color:var(--coral); background:var(--coral-soft); }
.mv-dropzone-conteudo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:var(--ink-mute);
  font-size:13px;
}
.mv-dropzone-icone{ font-size:28px; }
.mv-dropzone img{ display:block; margin:0 auto; }
.mv-dropzone-remover{
  display:inline-block;
  margin-top:10px;
  font-size:12px;
  color:var(--coral-deep);
  background:none;
  border:none;
  cursor:pointer;
  text-decoration:underline;
}

/* Miniatura de imagem na tabela de roteiro */
.mv-thumb{
  width:42px; height:42px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid var(--line);
  display:block;
}

/* Botões pequenos de ação em linha de tabela (ex.: editar/excluir item) */
.mv-btn-icone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink-mute);
  font-size:12px;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s, border-color .15s, color .15s;
  padding:0;
}
.mv-btn-icone:hover{ border-color:var(--coral); color:var(--coral-deep); background:var(--coral-soft); }
.mv-btn-icone-excluir:hover{ border-color:#F1C7C2; color:#A6362C; background:#FBEAEA; }

/* Selo "Best Price" (tabela de concorrências) */
.mv-bp{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 9px;
  border-radius:99px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.mv-bp-best1{ background:#E4F3E7; color:#1B7A3D; }
.mv-bp-best2{ background:#EAF2E9; color:#3F8A55; }
.mv-bp-best3{ background:#EFF6EE; color:#5C9C6C; }
.mv-bp-negativo{ background:#F3E4E4; color:#A6362C; }
.mv-bp-negociar{ background:#FDF0DD; color:#B4670C; }

/* Alerta extra: margem/comissão abaixo do mínimo negocial da Missiva,
   mesmo em registros classificados como Best Price */
.mv-bp-alerta-minimo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  border-radius:50%;
  background:#F3E4E4;
  color:#A6362C;
  font-size:11px;
  font-weight:800;
  margin-left:4px;
  cursor:help;
}

/* ---------- Seletor visual de cor (paleta rápida + amostra) ---------- */
.mv-color-paleta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.mv-color-paleta button{
  width:30px;
  height:30px;
  border-radius:8px;
  border:2px solid var(--uf-line, #E8DED3);
  cursor:pointer;
  padding:0;
  transition:transform .12s, border-color .15s, box-shadow .15s;
}
.mv-color-paleta button:hover{ transform:scale(1.12); }
.mv-color-paleta button.mv-color-selecionada{
  border-color:var(--uf-coral-deep, #E15F3F);
  box-shadow:0 0 0 2px rgba(225,95,63,.18);
}
.mv-color-swatch{
  display:inline-block;
  width:22px;
  height:22px;
  border-radius:6px;
  border:1px solid var(--uf-line, #E8DED3);
  flex-shrink:0;
}

/* ---------- Rodapé ---------- */
.mv-footer{
  margin-top:40px;
  padding:22px 20px 30px;
  text-align:center;
  color:var(--ink-mute);
  font-size:13px;
}
.mv-footer .mv-tel{
  font-family:var(--f-mono);
  color:var(--brand-dark);
  font-size:14px;
  display:block;
  margin-bottom:10px;
}

@media (max-width:640px){
  .mv-topbar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .mv-topline{ width:100%; justify-content:space-between; }
  .mv-nav{ padding:0 6px; }
  .mv-grid{ grid-template-columns:1fr; }
  .mv-table{ font-size:12.5px; }
  .mv-page{ width:auto; padding-left:14px; padding-right:14px; }
}