/* =====================================================================
   cvdcloud · tema minimalista (preto e branco)
   Camada visual por cima do estilo base (index.html). Só aparência.
   ===================================================================== */
:root{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f4f4f5; --linha:#e4e4e7; --texto:#09090b; --sub:#52525b; --fraco:#8a8a93;
  --acento:#09090b; --acento-tinta:#09090b; --acento-fundo:#f0f0f2;
  --alerta-fundo:#f4f4f5; --alerta:#52525b;
  --raio:14px;
}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#0b0b0c; --surface-2:#151517; --linha:#222225; --texto:#fafafa; --sub:#a1a1aa; --fraco:#71717a;
  --acento:#fafafa; --acento-tinta:#fafafa; --acento-fundo:#18181b;
  --alerta-fundo:#151517; --alerta:#a1a1aa;
}
html{background:var(--bg)}
body{background:var(--bg);letter-spacing:-.005em}
:focus-visible{outline:2px solid var(--texto);outline-offset:2px}

/* barra superior */
.bar{background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
.bar.compacta{border-bottom-color:var(--linha)}
.bar .logo{height:20px;margin-left:8px}
.ibtn:active{background:var(--surface-2)}

/* títulos */
.largo h1{font-size:32px;font-weight:800;letter-spacing:-.035em}
.sec{margin-top:34px}
.sec h2{color:var(--texto);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.sec span{color:var(--fraco)}

/* tela inicial */
.hero{margin:14px 0 6px;padding:8px 0 4px}
.hero-logo{height:42px;width:auto;display:block;margin-bottom:26px}
:root[data-theme="dark"] .hero-logo,:root[data-theme="dark"] .logo-g{filter:brightness(0) invert(1)}
.hero h1{margin:0;font-size:34px;line-height:1.06;font-weight:800;letter-spacing:-.04em}
.hero h1 em{font-style:normal}
.hero p{margin:14px 0 0;color:var(--sub);font-size:15px;line-height:1.55;max-width:30em}
.hero-chips{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.hero-chips span{display:flex;flex-direction:column;gap:2px;font-size:12px;font-weight:600;color:var(--fraco);background:none;border:0;padding:0}
.hero-chips b{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--texto);font-variant-numeric:tabular-nums}

/* busca */
.busca-fake{background:transparent;border:1px solid var(--linha);color:var(--sub);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.busca-fake:hover{border-color:var(--texto)}

/* cartões */
.tile,.cartao-c,.nota,.kpi{background:var(--surface);border:1px solid var(--linha);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nota{color:var(--texto)}
.tile{transition:transform .18s var(--ease),border-color .2s}
.tile:hover{border-color:var(--texto)}
.tile>svg,.link-row>svg:first-child,.lead{color:var(--texto)}
.tile.destaque{background:var(--texto);color:var(--bg);border-color:var(--texto)}
.tile.destaque>svg{color:var(--bg)}
.tile.destaque small{color:color-mix(in srgb,var(--bg) 62%,transparent)}
.pc .img{background:var(--surface-2);border:1px solid var(--linha)}
.pc:hover .img{border-color:var(--texto)}
.lead{background:var(--surface-2)}
.lead.thumb{background:#000}.lead.doc{background:#fff}
.kpi b{color:var(--texto)}
.rank{background:var(--surface);border:1px solid var(--linha);border-radius:14px;padding:4px 14px}

/* botões: preto no claro, branco no escuro */
.btn.prim,.instalar .ir,.cartao-c .acoes-c button.ok{background:var(--texto);color:var(--bg)}
.btn.sec{background:var(--surface-2);border:1px solid var(--linha);color:var(--texto)}
.acoes a.ibtn,.acoes .ibtn.comp{background:var(--surface-2);color:var(--texto)}
.pilula{border:1px solid var(--linha)}
.seg{background:var(--surface-2)}
.seg button.on{background:var(--texto);color:var(--bg);box-shadow:none}
.link-b{color:var(--texto);text-decoration:underline;text-underline-offset:3px}

/* abas */
.abas{background:var(--bg);box-shadow:none;border-bottom:1px solid var(--linha)}
.abas a{background:transparent;border:1px solid var(--linha);color:var(--sub);-webkit-backdrop-filter:none;backdrop-filter:none}
.abas a small{background:var(--surface-2);color:var(--fraco)}
.abas a.on{background:var(--texto);border-color:var(--texto);color:var(--bg);box-shadow:none}
.abas a.on small{background:color-mix(in srgb,var(--bg) 22%,transparent);color:var(--bg)}
.chips-f button.on{background:var(--texto);color:var(--bg)}
.chips-t button{background:transparent;border:1px solid var(--linha);-webkit-backdrop-filter:none;backdrop-filter:none}
.chips-t button:hover{border-color:var(--texto);color:var(--texto)}
.topicos-ir{background:var(--surface);border:1px solid var(--linha);-webkit-backdrop-filter:none;backdrop-filter:none}
.barras span{background:var(--surface-2)}
.barras span.hj{background:var(--texto)}

/* barra de navegação inferior */
nav.base{left:0;right:0;bottom:0;border:0;border-top:1px solid var(--linha);border-radius:0;box-shadow:none;
  background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;padding-bottom:env(safe-area-inset-bottom)}
nav.base div{max-width:560px;padding:6px 8px 4px}
nav.base a{border-radius:14px;color:var(--fraco)}
nav.base a.on{background:var(--surface-2);color:var(--texto);box-shadow:none}
nav.base a.on::after{display:none}
body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px)}
.toast{bottom:calc(var(--nav-h) + 22px + env(safe-area-inset-bottom));background:var(--texto);color:var(--bg)}

/* painel inferior e busca */
.veu{background:rgba(0,0,0,.6);-webkit-backdrop-filter:none;backdrop-filter:none}
.painel{background:var(--surface);border:1px solid var(--linha);border-bottom:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.busca-ov{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
.busca-ov .campo{background:var(--surface-2);border:1px solid var(--linha)}
.busca-ov .cancelar{color:var(--texto)}

/* entrada / login */
.gate{background:var(--bg)}
.gate-in{margin-top:6vh;padding:30px 22px 34px;border:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}
.gate-in .logo-g{height:40px;margin-bottom:30px;animation:none}
.gate-in h1{font-size:27px;letter-spacing:-.035em}
.form input,.form select,.form textarea{background:var(--surface-2);border:1px solid var(--linha)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--texto);box-shadow:none}

/* carregando: só a logo e uma linha de progresso */
.gate-in:has(.loader-linha){min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:0}
.gate-in:has(.loader-linha) .logo-g{height:46px;margin-bottom:34px}
.loader-linha{position:relative;width:120px;height:2px;overflow:hidden;border-radius:2px;background:var(--linha)}
.loader-linha::after{content:"";position:absolute;inset:0;width:40%;background:var(--texto);border-radius:2px;animation:carrega 1.1s ease-in-out infinite}
@keyframes carrega{from{transform:translateX(-100%)}to{transform:translateX(300%)}}

/* carrossel com margem lateral */
.rolagem{scroll-padding-left:18px}
@media (prefers-reduced-motion: reduce){ *{animation:none!important} }

/* tela inicial: áreas de pontas e procedimentos */
.rolagem{gap:14px}
.pc{flex-basis:164px}
.pc .img{height:150px}
.area{margin-top:34px;padding:22px 18px 18px;border:1px solid var(--linha);border-radius:22px;background:var(--surface)}
.area-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.area-topo h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.03em}
.area-topo p{margin:6px 0 0;color:var(--sub);font-size:13.5px;line-height:1.45;max-width:24em}
.area-ver{flex:none;display:inline-flex;align-items:center;gap:4px;padding:9px 14px;border-radius:999px;border:1px solid var(--linha);font-weight:700;font-size:13px;color:var(--texto);white-space:nowrap}
.area-ver svg{width:16px;height:16px}
.area-ver:active{background:var(--surface-2)}
.area-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.area-card{display:flex;flex-direction:column;gap:3px;min-width:0}
.area-card .img{height:112px;border-radius:14px;background:var(--surface-2);display:grid;place-items:center;overflow:hidden;border:1px solid var(--linha)}
.area-card .img img{max-width:86%;max-height:86%;object-fit:contain}
.area-card b{margin-top:8px;font-size:13.5px;font-weight:700;line-height:1.2}
.area-card small{color:var(--fraco);font-size:12px;font-weight:600}
.area-card:active .img{background:var(--linha)}
.area-esp{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.area-esp a{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;border:1px solid var(--linha);font-size:14.5px;font-weight:700}
.area-esp a small{font-size:12px;font-weight:800;color:var(--fraco)}
.area-esp a:active{background:var(--surface-2)}

/* novidades: escondido até tocar */
.novidades{margin-top:34px;border:1px solid var(--linha);border-radius:18px;background:var(--surface)}
.novidades summary{list-style:none;display:flex;align-items:center;gap:10px;padding:16px 18px;cursor:pointer;font-weight:800;font-size:15px}
.novidades summary::-webkit-details-marker{display:none}
.novidades summary small{margin-left:auto;font-size:12px;font-weight:800;color:var(--fraco)}
.novidades summary svg{width:18px;height:18px;transition:transform .25s var(--ease);color:var(--fraco)}
.novidades[open] summary svg{transform:rotate(90deg)}
.novidades .lista{margin:0;padding:0 14px 6px;border:0;border-top:1px solid var(--linha);border-radius:0;background:none}

/* fotos de produto escuro sobre fundo transparente: placa clara */
.pc .img.claro{background:#eeeff1;border-color:#e4e4e7}
.pc .img.claro img{max-width:90%;max-height:80%}

/* produto preto sem fundo sobre o cartão escuro: contorno claro discreto para destacar */
.pc .img.escuro img{max-width:88%;max-height:78%;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.55)) drop-shadow(0 0 10px rgba(255,255,255,.12))}
:root:not([data-theme="dark"]) .pc .img.escuro img{filter:none}