/* ===========================================================================
   Lumo SEO — design system + shell do app (menu lateral)
   Fase 1: front. Paridade visual com o padrão observado no AutoSEO.
   =========================================================================== */
:root{
  --bg:#f7f8fb; --card:#fff; --border:#e5e7eb; --border-soft:#f1f2f5;
  --text:#111827; --text-2:#374151; --muted:#6b7280; --muted-2:#9ca3af;
  /* Paleta oficial da marca (board de identidade). O tom primário do app é o
     verde do camaleão, não mais o índigo genérico #4f46e5 — é ele que carrega
     a identidade. O navy faz o texto forte e o lilás os fundos suaves. */
  --marca-verde:#159A78;        /* verde principal — o camaleão      */
  --marca-menta:#B7E4C7;        /* verde claro — fundos e realces    */
  --marca-navy:#0A1F44;         /* azul-marinho — contorno e títulos */
  --marca-lilas:#E6E0FF;        /* lilás — fundos de apoio           */

  /* nomes antigos mantidos: meia dúzia de telas ainda usa --indigo/--purple */
  --indigo:#159A78; --purple:#0A1F44; --indigo-bg:#E6E0FF;
  --green:#16a34a; --green-bg:#f0fdf4; --green-bd:#bbf7d0; --green-dark:#14532d;
  --amber:#d97706; --amber-bg:#fffbeb; --amber-bd:#fde68a;
  --red:#dc2626; --red-bg:#fef2f2; --red-bd:#fecaca;
  --blue:#2563eb; --blue-bg:#eff6ff;
  /* Medidos no app do AutoSEO (Chrome, agosto/2026): card 12px sem borda com
     sombra grande, sidebar de 255px, conteúdo até 1280px. O visual "escasso"
     do nosso vinha de card com borda fina e sombra quase invisível. */
  --r:8px; --r-md:10px; --r-lg:12px;
  --sh:0 1px 3px rgba(0,0,0,.08);
  --sh-md:0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --sh-lg:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --nav-w:255px;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* O atributo hidden vale display:none por padrão do navegador, mas qualquer
   classe com display explícito (.upsell é flex) ganha dele por especificidade.
   Sem isto, dois avisos apareciam empilhados no calendário. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);line-height:1.55;
  /* Inter é a fonte do app deles; Instrument Sans fica só na landing */
  font-family:Inter,"Instrument Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;}
a{color:inherit;}

/* ---------- menu lateral ---------- */
.nav{position:fixed;inset:0 auto 0 0;width:var(--nav-w);background:#fff;
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  padding:16px 0;z-index:30;overflow-y:auto;}
.nav .marca{display:flex;align-items:center;gap:9px;padding:0 18px 16px;text-decoration:none;}
/* O ícone era um ⚡ dentro de um quadrado com gradiente. Agora é o hexágono da
   marca — o mesmo que o camaleão usa no peito. Fica no <img> para o arquivo ser
   único: trocar marca.svg troca em todas as telas de uma vez. */
.nav .marca .ico{height:30px;width:auto;flex-shrink:0;display:block;}
.nav .marca .nome{font-size:1.12rem;font-weight:800;letter-spacing:-.02em;
  /* --marca-indigo nunca existiu (só --marca-verde/menta/navy/lilás estão
     definidas) — o gradiente falhava inteiro e o texto "Lumo SEO" ficava
     invisível (transparente sobre um background que não renderizava). */
  background:linear-gradient(90deg,var(--marca-verde),var(--marca-navy));
  -webkit-background-clip:text;background-clip:text;color:transparent;}

.site-sel{margin:0 14px 18px;position:relative;}
.site-sel .btn-sel{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);
  background:#fff;cursor:pointer;font:inherit;font-size:.85rem;color:var(--text-2);}
.site-sel .btn-sel:hover{border-color:var(--indigo);}
.site-sel .btn-sel .dom{display:flex;align-items:center;gap:7px;overflow:hidden;white-space:nowrap;}
.site-sel .lista{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:#fff;border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--sh-lg);overflow:hidden;}
.site-sel.aberto .lista{display:block;}
.site-sel .lista a{display:flex;align-items:center;gap:7px;padding:10px 12px;
  font-size:.85rem;text-decoration:none;}
.site-sel .lista a:hover{background:var(--bg);}
.site-sel .lista a.ativo{background:var(--indigo-bg);color:var(--indigo);font-weight:600;}
.site-sel .lista a.add{color:var(--indigo);font-weight:600;border-top:1px solid var(--border-soft);}

.nav .grupo{padding:14px 18px 6px;font-size:.7rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted-2);}
/* Medido no app deles: 16px, peso normal, item ativo é uma pílula azul-clara
   arredondada com respiro lateral — não uma barra colada na borda. */
.nav a.item{display:flex;align-items:center;gap:11px;margin:1px 12px;padding:9px 14px;
  font-size:.95rem;border-radius:var(--r);color:var(--text-2);text-decoration:none;}
.nav a.item svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0;}
.nav a.item:hover{background:var(--bg);color:var(--text);}
.nav a.item.ativo{background:var(--blue-bg);color:var(--text-2);font-weight:500;}
.nav a.sub{padding-left:30px;font-size:.9rem;}
.nav .rodape{margin-top:auto;padding:16px 18px 0;font-size:.76rem;color:var(--muted);}
.nav .rodape a{color:var(--muted);text-decoration:none;}
.nav .rodape .idioma{margin-top:10px;}

/* ---------- área principal ---------- */
.main{margin-left:var(--nav-w);min-height:100vh;padding:36px 40px 80px;}
.container{max-width:1280px;margin:0 auto;}
/* especificidade dupla: .btn é declarado depois e venceria um .abrir-menu simples */
.btn.abrir-menu{display:none;}
@media (max-width:900px){
  .nav{transform:translateX(-100%);transition:transform .25s;}
  .nav.aberto{transform:none;}
  .main{margin-left:0;padding:20px 16px 60px;}
  .btn.abrir-menu{display:inline-flex;margin-bottom:14px;}
}
.topo{display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.topo h1{font-size:1.875rem;font-weight:700;letter-spacing:-.01em;}
.topo p.sub{color:var(--muted);font-size:.9rem;margin-top:2px;}

/* ---------- componentes ---------- */
.card{background:var(--card);border:none;border-radius:var(--r-lg);box-shadow:var(--sh-lg);}
.card-pad{padding:24px;}
.card h2{font-size:1.25rem;font-weight:600;margin-bottom:4px;letter-spacing:-.01em;}
.card p.desc{font-size:.9rem;color:var(--muted);margin-bottom:18px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;
  border-radius:var(--r);border:1px solid var(--border);background:#fff;color:var(--text);
  font:inherit;font-size:.87rem;font-weight:600;cursor:pointer;text-decoration:none;
  transition:transform .15s,box-shadow .15s,background .15s;}
.btn:hover{background:var(--bg);}
.btn.pri{background:linear-gradient(90deg,var(--indigo),var(--purple));color:#fff;border:none;
  box-shadow:0 4px 12px -4px rgba(79,70,229,.5);}
.btn.pri:hover{transform:translateY(-1px);box-shadow:0 8px 18px -6px rgba(79,70,229,.6);}
.btn.verde{background:var(--green);color:#fff;border:none;}
.btn.verde:hover{background:#15803d;}
.btn.sm{padding:6px 11px;font-size:.78rem;}
.btn.block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-ico{background:none;border:none;cursor:pointer;color:var(--muted-2);padding:2px;line-height:0;}
.btn-ico:hover{color:var(--text-2);}
.btn-ico.del:hover{color:var(--red);}
.btn-ico svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}

.selo.voce{background:var(--blue);color:#fff;}

.switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .sl{position:absolute;inset:0;background:#d1d5db;border-radius:99px;cursor:pointer;transition:.2s;}
.switch .sl::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.2s;}
.switch input:checked + .sl{background:var(--indigo);}
.switch input:checked + .sl::before{transform:translateX(18px);}

.linha-opt{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--border-soft);}
.linha-opt:last-child{border-bottom:none;}
.linha-opt .txt b{display:block;font-size:.91rem;font-weight:600;}
.linha-opt .txt span{font-size:.83rem;color:var(--muted);}
.linha-opt .txt small{display:block;font-size:.76rem;color:var(--muted-2);margin-top:3px;}

.abas{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px;}
.abas button{padding:8px 16px;border-radius:var(--r);border:1px solid var(--border);
  background:#fff;color:var(--text-2);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;}
.abas button:hover{border-color:var(--indigo);}
.abas button.ativa{background:var(--indigo);color:#fff;border-color:var(--indigo);}
.painel{display:none;} .painel.ativo{display:block;}

/* tabela, stats e avisos: versões suaves no fim do arquivo */
table.tb td.num{text-align:right;font-variant-numeric:tabular-nums;}
table.tb tr.eu{background:var(--blue-bg);font-weight:600;}
.stat .val{font-variant-numeric:tabular-nums;}
.stat.destaque{background:var(--indigo-bg);}
.stat.destaque .val{color:var(--indigo);}
.aviso.ok{background:var(--green-bg);border:1px solid var(--green-bd);color:var(--green-dark);}

.upsell{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(90deg,var(--indigo-bg),#f5f3ff);border:1px solid #ddd6fe;
  border-radius:var(--r-lg);padding:14px 20px;margin-bottom:20px;}
.upsell b{font-size:.94rem;} .upsell span{font-size:.83rem;color:var(--muted);display:block;}

.campo{margin-bottom:15px;}
.campo label{display:block;font-size:.82rem;font-weight:600;margin-bottom:5px;}
.campo .ajuda{font-size:.78rem;color:var(--muted);font-weight:400;}
.campo input,.campo select,.campo textarea{width:100%;padding:10px 13px;border:1px solid var(--border);
  /* 16px é o piso: abaixo disso o iOS Safari dá zoom automático na página
     inteira ao focar o campo, e o zoom fica preso — sensação de "app quebrado"
     no celular. */
  border-radius:var(--r);font:inherit;font-size:1rem;color:var(--text);background:#fff;outline:none;}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(79,70,229,.1);}
.campo textarea{resize:vertical;min-height:80px;}
.campo .contador{text-align:right;font-size:.74rem;color:var(--muted-2);margin-top:3px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:640px){.grid-2{grid-template-columns:1fr;}}

.vazio{text-align:center;padding:40px 20px;color:var(--muted);font-size:.88rem;}

.rc{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border:1px solid var(--border);
  border-radius:var(--r-md);cursor:pointer;margin-bottom:9px;background:#fff;}
.rc:hover{border-color:var(--indigo);}
.rc input{margin-top:3px;accent-color:var(--indigo);}
.rc b{display:block;font-size:.89rem;font-weight:600;}
.rc span{font-size:.8rem;color:var(--muted);}
.rc.sel{border-color:var(--indigo);background:var(--indigo-bg);}

.secao-tit{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:26px 0 12px;}

/* aviso flutuante, compartilhado pelas telas do app */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);opacity:0;
  background:#111827;color:#fff;padding:11px 18px;border-radius:10px;font-size:.83rem;
  font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.22);pointer-events:none;z-index:99;
  transition:opacity .2s,transform .2s;max-width:min(90vw,420px);}
#toast.on{opacity:1;transform:translate(-50%,0);}
#toast.ruim{background:#b91c1c;}

/* suavização global ------------------------------------------------------
   O que dava aspecto "serrilhado" não era uma tela específica: era a falta
   de transição em estado de foco/hover, borda dura em toda tabela e ausência
   de anel de foco. Estas regras valem para o app inteiro. */
button, a.btn, .btn, input, select, textarea, .card, .art, .selo, .stat{
  transition:background-color .16s ease, border-color .16s ease,
             box-shadow .16s ease, color .16s ease, transform .16s ease;}

/* anel de foco visível e suave, em vez do contorno padrão do navegador */
:where(button, a, input, select, textarea, [tabindex]):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(99,102,241,.28);
  border-radius:var(--r);}

/* botão primário com leve elevação ao passar o mouse */
.btn.pri:hover{filter:brightness(1.06);box-shadow:0 4px 12px rgba(79,70,229,.28);}
.btn:not(.pri):hover{border-color:var(--border-2,#d1d5db);background:var(--bg);}

/* tabelas: linha divisória fina em vez de grade fechada */
.tb{border-collapse:separate;border-spacing:0;width:100%;}
.tb th{font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;padding:10px 12px;border-bottom:1px solid var(--border);}
.tb td{padding:11px 12px;font-size:.88rem;border-bottom:1px solid var(--border-soft);}
.tb tr:last-child td{border-bottom:none;}
.tb tbody tr{transition:background-color .14s ease;}
.tb tbody tr:hover{background:var(--bg);}

/* cartões de estatística: mesmo respiro dos deles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin-bottom:18px;}
.stat{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:18px 20px;}
.stat .rot{font-size:.8rem;color:var(--muted);margin-bottom:5px;}
.stat .val{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;}

/* selos arredondados e legíveis */
.selo{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;
  padding:3px 10px;border-radius:99px;line-height:1.5;}
.selo.ok{background:var(--green-bg);color:var(--green-dark);}
.selo.warn{background:var(--amber-bg);color:#92400e;}
.selo.info{background:var(--blue-bg);color:#1e40af;}
.selo.bad,.selo.erro{background:var(--red-bg);color:#991b1b;}

/* faixa de aviso: tom suave, sem borda dura */
.aviso{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;
  border-radius:var(--r-lg);font-size:.87rem;line-height:1.5;margin-bottom:16px;}
.aviso.warn{background:var(--amber-bg);color:#92400e;border:1px solid var(--amber-bd);}
.aviso.info{background:var(--blue-bg);color:#1e40af;border:1px solid #bfdbfe;}
.aviso a{font-weight:600;text-decoration:underline;}

/* rolagem sem serrilha nas áreas com overflow */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.scroll-x::-webkit-scrollbar{height:8px;}
.scroll-x::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}
.scroll-x::-webkit-scrollbar-track{background:transparent;}

/* respeita quem pediu menos animação no sistema */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}