/* CMKT — plataforma. Direção B (verde-garrafa, Tomorrow). Tokens vêm do DESIGN.md da v8; sem emoji, só ícones SVG. */
:root { --fonte: "Tomorrow", "Verdana", system-ui, sans-serif; --fundo: #ffffff; --fundo-2: #f6f7f8; --fundo-3: #eceef0; --tx: #16191c; --tx-2: #4a5056; --tx-3: #6b7178;
  --fio: #e3e6e8; --fio-2: #cfd4d8; --zebra: #fafbfb; --grade: #eef0f2; --sobe: #177245; --desce: #b3261e; --aviso: #f3f6f9; --aviso-borda: #dfe5ea;
  --cor: #1d5c4a; --cor-2: #164a3b; --cor-tx: #ffffff; --cor-leve: #e6f0ec; --link: #1a6b54; --escuro: #1f3a32; --cor-graf: #1d6b54; --cor-graf-a: rgba(29,107,84,.28); --cor-graf-b: rgba(29,107,84,.02);
  --serie-2: #8a6d1d; --serie-3: #4a5b8c; --serie-4: #8c4a63; --pe: #10261f; --pe-tx: #e4ece8; --pe-tx-2: #9fb5ab; --sombra: 0 1px 3px rgba(0,0,0,.06); color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo: #131619; --fundo-2: #1a1e22; --fundo-3: #252a2f; --tx: #e9ecee; --tx-2: #b5bbc1; --tx-3: #8c939a;
  --fio: #262b30; --fio-2: #363c42; --zebra: #161a1d; --grade: #20252a; --sobe: #4cc287; --desce: #f2877f; --aviso: #1a1f24; --aviso-borda: #2b3238;
  --cor: #6fc0a0; --cor-2: #86cdb0; --cor-tx: #0b1611; --cor-leve: #17302a; --link: #7fcfae; --escuro: #2a453c; --cor-graf: #6fc0a0; --cor-graf-a: rgba(111,192,160,.30); --cor-graf-b: rgba(111,192,160,.02);
  --serie-2: #d6b85a; --serie-3: #8fa6e0; --serie-4: #e08fab; --pe: #0a1713; --pe-tx: #e4ece8; --pe-tx-2: #8fa69c; --sombra: none; color-scheme: dark; } }
:root[data-tema="escuro"] { --fundo: #131619; --fundo-2: #1a1e22; --fundo-3: #252a2f; --tx: #e9ecee; --tx-2: #b5bbc1; --tx-3: #8c939a;
  --fio: #262b30; --fio-2: #363c42; --zebra: #161a1d; --grade: #20252a; --sobe: #4cc287; --desce: #f2877f; --aviso: #1a1f24; --aviso-borda: #2b3238;
  --cor: #6fc0a0; --cor-2: #86cdb0; --cor-tx: #0b1611; --cor-leve: #17302a; --link: #7fcfae; --escuro: #2a453c; --cor-graf: #6fc0a0; --cor-graf-a: rgba(111,192,160,.30); --cor-graf-b: rgba(111,192,160,.02);
  --serie-2: #d6b85a; --serie-3: #8fa6e0; --serie-4: #e08fab; --pe: #0a1713; --pe-tx: #e4ece8; --pe-tx-2: #8fa69c; --sombra: none; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--tx); font: 400 14.5px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
svg.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; border-radius: 3px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { letter-spacing: -.015em; margin: 0; }
.mut { color: var(--tx-2); } .mut3 { color: var(--tx-3); }
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--sobe); } .neg { color: var(--desce); }

/* ---------------------------------------------------------------- topo */
.topo { position: sticky; top: 0; z-index: 30; background: var(--fundo); border-bottom: 1px solid var(--fio); box-shadow: var(--sombra); }
.topo-in { display: flex; align-items: center; gap: 18px; height: 56px; padding: 0 20px; }
.marca { display: flex; align-items: center; gap: 8px; color: var(--tx); font-weight: 800; font-size: 21px; letter-spacing: -.03em; width: 176px; flex: none; }
.marca:hover { text-decoration: none; }
.selo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--cor); color: var(--cor-tx); font-size: 18px; line-height: 1; padding-bottom: 2px; font-weight: 800; }
.busca { position: relative; flex: 0 1 560px; }
.busca-campo { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 12px; border: 1px solid var(--fio-2); border-radius: 19px; background: var(--fundo-2); color: var(--tx-3); }
.busca-campo:focus-within { border-color: var(--cor); background: var(--fundo); }
.busca-campo input { flex: 1; border: 0; background: none; outline: 0; min-width: 0; color: var(--tx); }
.busca-campo kbd { font: inherit; font-size: 12px; border: 1px solid var(--fio-2); border-radius: 4px; padding: 0 6px; background: var(--fundo); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.bt { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border: 1px solid var(--fio-2); border-radius: 5px; background: var(--fundo); font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; color: var(--tx); text-decoration: none; }
.bt:hover { background: var(--fundo-2); text-decoration: none; }
.bt svg { width: 15px; height: 15px; }
.bt-cor { background: var(--cor); color: var(--cor-tx); border-color: var(--cor); }
.bt-cor:hover { background: var(--cor-2); }
.bt-esc { background: var(--escuro); color: #fff; border-color: var(--escuro); height: 32px; font-size: 13px; padding: 0 11px; }
.bt-esc:hover { filter: brightness(1.15); background: var(--escuro); }
.bt-esc.on { background: var(--cor); color: var(--cor-tx); border-color: var(--cor); }
.bt-pq { height: 30px; padding: 0 10px; font-size: 13px; }
.bt-ic { width: 36px; padding: 0; justify-content: center; border-color: transparent; background: none; }
.so-cel { display: none !important; }
.pop { position: absolute; left: 0; right: 0; top: 44px; background: var(--fundo); border: 1px solid var(--fio-2); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.16); max-height: min(70vh, 560px); overflow: auto; z-index: 40; }
.pop-grupo { padding: 8px 0 4px; }
.pop-grupo + .pop-grupo { border-top: 1px solid var(--fio); }
.pop-tit { padding: 2px 14px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.pop-item { display: flex; flex-direction: column; padding: 7px 14px; color: var(--tx); cursor: pointer; text-decoration: none; }
.pop-item:hover, .pop-item.on { background: var(--cor-leve); text-decoration: none; }
.pop-item b { font-weight: 600; font-size: 14px; }
.pop-item span { color: var(--tx-2); font-size: 12.5px; }
.pop-vazio { padding: 16px 14px; color: var(--tx-2); }
.pop-rod { padding: 8px 14px; border-top: 1px solid var(--fio); font-size: 12.5px; color: var(--tx-3); }

/* ---------------------------------------------------------------- casca */
.casca { display: grid; grid-template-columns: 224px minmax(0, 1fr); flex: 1; }
.trilho { border-right: 1px solid var(--fio); padding: 12px 10px; display: flex; flex-direction: column; gap: 1px; font-size: 14px; font-weight: 500; position: sticky; top: 57px; align-self: start; height: calc(100vh - 57px); overflow: auto; }
.trilho a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 5px; color: var(--tx); }
.trilho a:hover { background: var(--fundo-2); text-decoration: none; }
.trilho a.on { background: var(--cor-leve); font-weight: 650; }
.trilho a svg { color: var(--tx-3); }
.trilho a.on svg { color: var(--cor); }
.trilho .sep { height: 1px; background: var(--fio); margin: 8px 6px; }
.trilho .rot { padding: 8px 10px 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.pag { padding: 24px 32px 48px; max-width: 1280px; min-width: 0; width: 100%; }
.cortina { display: none; }

/* ---------------------------------------------------------------- cabeçalho de ficha */
.mig { font-size: 13px; color: var(--tx-2); margin: 0 0 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mig a { color: var(--tx-2); }
.ficha-tit { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.ficha-tit h1 { font-size: 26px; line-height: 1.22; font-weight: 650; overflow-wrap: anywhere; }
.sub { margin: 5px 0 0; font-size: 13px; color: var(--tx-2); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.sub .sep { color: var(--fio-2); }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.etq { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 3px; background: var(--fundo-3); color: var(--tx); font-weight: 600; font-size: 12px; line-height: 20px; }
.etq-cor { background: var(--cor); color: var(--cor-tx); }
.etq-linha { background: none; border: 1px solid var(--fio-2); }
a.etq:hover { text-decoration: none; filter: brightness(.95); }
.papeis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.papeis a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--fio-2); border-radius: 14px; font-size: 12.5px; font-weight: 600; color: var(--tx); }
.papeis a:hover { background: var(--cor-leve); border-color: var(--cor); text-decoration: none; }

.kpis { display: flex; flex-wrap: wrap; margin: 16px 0 6px; border: 1px solid var(--fio); border-radius: 8px; background: var(--fundo); }
.kpi { padding: 12px 22px 12px 18px; flex: 1 1 170px; min-width: 150px; border-right: 1px solid var(--fio); }
.kpi:last-child { border-right: 0; }
.kpi-r { font-size: 12.5px; color: var(--tx-2); font-weight: 600; }
.kpi-v { white-space: nowrap; font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-v.peq { font-size: 17px; white-space: normal; }
.kpi-n { font-size: 12px; color: var(--tx-3); margin-top: 2px; }

.abas { position: sticky; top: 57px; z-index: 12; display: flex; gap: 2px; overflow-x: auto; background: var(--fundo); border-bottom: 2px solid var(--cor); margin: 18px 0 0; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas a { padding: 9px 15px; font-weight: 600; font-size: 14px; color: var(--link); white-space: nowrap; border-radius: 4px 4px 0 0; }
.abas a:hover { text-decoration: none; background: var(--fundo-2); }
.abas a.on { background: var(--fundo-3); color: var(--tx); }
.sec { padding-top: 26px; scroll-margin-top: 112px; }
.sec-tit { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.sec-tit h2 { font-size: 20px; font-weight: 650; }
.sec-tit h2 .ref { font-weight: 500; font-family: var(--fonte); }
.sec-tit .ref { font-size: 12.5px; color: var(--tx-3); }
.sec-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sub-tit { font-size: 15px; font-weight: 700; margin: 16px 0 6px; }

/* ---------------------------------------------------------------- tabelas */
.kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); column-gap: 28px; }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 7px 2px; border-bottom: 1px solid var(--fio); font-size: 14px; }
.kv dt { color: var(--tx-2); margin: 0; }
.kv dd { margin: 0; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv dt[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.rol { overflow-x: auto; border: 1px solid var(--fio); border-radius: 8px;
  background: linear-gradient(to right, var(--fundo, #fff) 30%, transparent) left center / 24px 100% no-repeat local, linear-gradient(to left, var(--fundo, #fff) 30%, transparent) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .22), transparent) left center / 10px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .22), transparent) right center / 10px 100% no-repeat scroll; }
.rol.sem-borda { border: 0; border-radius: 0; }
table.tb { width: 100%; border-collapse: collapse; font-size: 14px; }
.tb th { text-align: left; font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--fio-2); white-space: nowrap; background: var(--fundo); position: sticky; top: 0; }
.tb td { padding: 9px 12px; border-bottom: 1px solid var(--fio); vertical-align: top; }
.tb tbody tr:nth-child(even) { background: var(--zebra); }
.tb tbody tr:hover { background: var(--cor-leve); }
.tb .d { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb th.d { text-align: right; }
.tb th a.ord { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.tb th a.ord:hover { text-decoration: none; color: var(--link); }
.tb th a.ord svg { width: 12px; height: 12px; color: var(--tx-3); }
.tb th.on a.ord svg { color: var(--cor); }
.tb td.nome { min-width: 220px; max-width: 320px; }
.tb.cmp { table-layout: fixed; min-width: 640px; }
.tb.cmp th, .tb.cmp td { white-space: normal; overflow-wrap: anywhere; }
.tb.cmp td.d { text-align: left; }
.tb td .sec2 { display: block; color: var(--tx-3); font-size: 12.5px; }
.rod-tb { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; flex-wrap: wrap; font-size: 13px; color: var(--tx-2); }
.pg { display: flex; gap: 4px; align-items: center; }
.pg button { min-width: 34px; height: 32px; border: 1px solid var(--fio-2); background: var(--fundo); border-radius: 5px; cursor: pointer; font-weight: 600; }
.pg button:hover:not(:disabled) { background: var(--fundo-2); }
.pg button:disabled { opacity: .4; cursor: default; }
.pg button.on { background: var(--cor); color: var(--cor-tx); border-color: var(--cor); }

/* ---------------------------------------------------------------- blocos */
.aviso { background: var(--aviso); border: 1px solid var(--aviso-borda); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--tx-2); margin: 10px 0; display: flex; gap: 10px; align-items: flex-start; }
.aviso svg { margin-top: 2px; color: var(--tx-3); }
.vazio { padding: 22px 18px; border: 1px dashed var(--fio-2); border-radius: 8px; color: var(--tx-2); background: var(--fundo-2); }
.vazio b { color: var(--tx); display: block; margin-bottom: 2px; }
.erro { padding: 22px 18px; border: 1px solid var(--desce); border-radius: 8px; }
.erro b { color: var(--desce); }
.fonte { font-size: 12px; color: var(--tx-3); margin: 8px 0 0; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.grade-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.cartao { border: 1px solid var(--fio); border-radius: 8px; padding: 14px 16px; background: var(--fundo); }
.cartao h3 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.cartao .grande { font-size: 22px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--fio); font-size: 14px; }
.lista li:last-child { border-bottom: 0; }
.lista .v { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra { height: 8px; background: var(--fundo-3); border-radius: 4px; overflow: hidden; display: flex; }
.barra i { display: block; height: 100%; }
.barra-l { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 4px 0; }
.barra-l .rot { flex: 0 0 38%; min-width: 0; overflow-wrap: anywhere; }
.barra-l .fio { flex: 1; height: 8px; background: var(--fundo-3); border-radius: 4px; overflow: hidden; }
.barra-l .fio i { display: block; height: 100%; background: var(--cor-graf); border-radius: 4px; }
.barra-l .v { flex: 0 0 auto; font-weight: 650; font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--tx-2); margin: 6px 0; }
.leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.texto-longo { white-space: pre-line; font-size: 14px; color: var(--tx-2); max-width: 78ch; }
details.mais { margin-top: 8px; }
details.mais summary { cursor: pointer; font-weight: 600; color: var(--link); padding: 4px 0; }

/* ---------------------------------------------------------------- gráfico */
.graf { position: relative; border: 1px solid var(--fio); border-radius: 8px; padding: 10px 12px 8px; background: var(--fundo); }
.graf-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.graf-tit { font-size: 14px; font-weight: 700; }
.graf-ctl { display: flex; gap: 2px; }
.graf-ctl button { border: 0; background: none; padding: 3px 9px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--tx-2); border-radius: 4px; }
.graf-ctl button.on { background: var(--fundo-3); color: var(--tx); }
.graf svg.g { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.graf .eixo text { fill: var(--tx-3); font-size: 11.5px; font-family: var(--fonte); }
.graf .grade { stroke: var(--grade); stroke-width: 1; }
.graf .tip { position: absolute; pointer-events: none; background: var(--escuro); color: #fff; font-size: 12.5px; padding: 6px 9px; border-radius: 5px; white-space: nowrap; z-index: 3; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.graf .tip b { display: block; font-weight: 700; margin-bottom: 1px; }
.graf-dados { margin-top: 6px; font-size: 12.5px; }
.graf-dados button { border: 0; background: none; color: var(--link); cursor: pointer; font-weight: 600; padding: 2px 0; }

/* ---------------------------------------------------------------- mapa de relações */
.mapa { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(160px, 220px) minmax(0,1fr); gap: 56px; align-items: center; padding: 18px; border: 1px solid var(--fio); border-radius: 8px; background: var(--fundo-2); }
.mapa-col { display: flex; flex-direction: column; gap: 8px; }
.mapa-col h4 { margin: 0 0 2px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.mapa-col.dir h4 { text-align: left; }
.no { display: block; padding: 8px 11px; border: 1px solid var(--fio-2); background: var(--fundo); border-radius: 6px; color: var(--tx); position: relative; z-index: 1; }
.no:hover { border-color: var(--cor); text-decoration: none; background: var(--cor-leve); }
.no b { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.no span { display: block; font-size: 12px; color: var(--tx-2); }
.no-mais { font-size: 12.5px; color: var(--tx-3); padding: 2px 4px; }
.no-centro { padding: 14px 12px; border: 2px solid var(--cor); background: var(--cor-leve); border-radius: 8px; text-align: center; position: relative; z-index: 1; }
.no-centro b { display: block; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.no-centro span { font-size: 12px; color: var(--tx-2); }
.mapa svg.lig { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.mapa svg.lig path { fill: none; stroke: var(--fio-2); stroke-width: 1.4; }

/* ---------------------------------------------------------------- home / screener */
.heroi { padding: 26px 0 8px; }
.heroi h1 { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; max-width: 22ch; }
.heroi p { font-size: 16px; color: var(--tx-2); max-width: 62ch; margin: 10px 0 0; }
.heroi .busca-grande { margin-top: 18px; max-width: 640px; }
.heroi .busca-grande .busca-campo { height: 50px; border-radius: 25px; padding: 0 12px 0 18px; font-size: 16px; background: var(--fundo); border-color: var(--fio-2); box-shadow: var(--sombra); }
.sugestoes { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; align-items: center; color: var(--tx-2); }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 24px 0 8px; }
.numero { border: 1px solid var(--fio); border-radius: 8px; padding: 13px 16px; color: var(--tx); background: var(--fundo); display: block; }
.numero:hover { border-color: var(--cor); text-decoration: none; background: var(--cor-leve); }
.numero b { display: block; font-size: 26px; letter-spacing: -.03em; font-weight: 600; font-variant-numeric: tabular-nums; }
.numero span { font-size: 13px; color: var(--tx-2); font-weight: 600; }
.numero small { display: block; font-size: 12px; color: var(--tx-3); margin-top: 2px; }
.tabs { display: flex; gap: 2px; margin: 0 0 10px; flex-wrap: wrap; }
.tabs button { border: 0; background: none; padding: 6px 13px; font-weight: 650; cursor: pointer; border-radius: 5px; color: var(--link); }
.tabs button.on { background: var(--fundo-3); color: var(--tx); }
.painel-filtros { border: 1px solid var(--fio); border-radius: 8px; background: var(--fundo); margin: 14px 0; }
.painel-filtros > summary { list-style: none; cursor: pointer; padding: 11px 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.painel-filtros > summary::-webkit-details-marker { display: none; }
.painel-filtros .grade-f { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; padding: 4px 14px 14px; border-top: 1px solid var(--fio); padding-top: 14px; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--tx-2); }
.campo input, .campo select { height: 36px; border: 1px solid var(--fio-2); border-radius: 5px; background: var(--fundo); padding: 0 10px; font-weight: 500; color: var(--tx); min-width: 0; }
.campo input:focus, .campo select:focus { border-color: var(--cor); outline: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--fio-2); background: var(--fundo); padding: 3px 6px 3px 10px; border-radius: 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.chip svg { width: 13px; height: 13px; }
.chip:hover { border-color: var(--desce); }
.tit-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.tit-linha h1 { font-size: 26px; font-weight: 650; }

.tray { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--escuro); color: #fff; border-radius: 10px; padding: 10px 14px; display: flex; gap: 12px; align-items: center; z-index: 35; box-shadow: 0 8px 28px rgba(0,0,0,.3); max-width: calc(100vw - 24px); flex-wrap: wrap; }
.tray a.bt { background: var(--cor); color: var(--cor-tx); border-color: var(--cor); height: 32px; }
.tray button.lp { background: none; border: 0; color: #fff; cursor: pointer; text-decoration: underline; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--escuro); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 60; font-size: 13.5px; box-shadow: 0 8px 28px rgba(0,0,0,.3); }

.rodape { margin-top: auto; background: var(--pe); color: var(--pe-tx); padding: 22px 32px; font-size: 13px; }
.rodape a { color: var(--pe-tx); text-decoration: underline; }
.rodape .in { max-width: 1280px; display: flex; gap: 8px 28px; flex-wrap: wrap; justify-content: space-between; margin-left: 224px; }
.rodape small { color: var(--pe-tx-2); display: block; max-width: 70ch; }

/* skeleton */
.skel { background: linear-gradient(90deg, var(--fundo-3), var(--fundo-2), var(--fundo-3)); background-size: 200% 100%; animation: sk 1.3s linear infinite; border-radius: 6px; }
@keyframes sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------- celular */
@media (max-width: 960px) {
  .casca { grid-template-columns: minmax(0, 1fr); }
  .trilho { position: fixed; z-index: 50; top: 0; left: 0; bottom: 0; width: 264px; height: 100vh; background: var(--fundo); transform: translateX(-100%); transition: transform .2s; padding-top: 16px; box-shadow: 0 0 30px rgba(0,0,0,.25); }
  body.menu-aberto .trilho { transform: none; }
  body.menu-aberto .cortina { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 45; }
  .so-cel { display: inline-flex !important; }
  .so-desk { display: none !important; }
  .pag { padding: 18px 16px 40px; }
  .topo-in { padding: 0 12px; gap: 8px; }
  .marca { width: auto; }
  .marca .nome { display: none; }
  .grade-2 { grid-template-columns: minmax(0, 1fr); }
  .kvs { grid-template-columns: minmax(0, 1fr); }
  .mapa { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px; }
  .mapa svg.lig { display: none; }
  .rodape .in { margin-left: 0; }
  .rodape { padding: 20px 16px; }
  .heroi h1 { font-size: 27px; }
  .ficha-tit h1 { font-size: 22px; }
  .kpi { flex: 1 1 46%; border-bottom: 1px solid var(--fio); }
  .kpi-v { font-size: 19px; overflow-wrap: normal; word-break: normal; }
  .abas { top: 57px; }
  .acoes .bt-esc span { display: none; }
}
@media print { .topo, .trilho, .abas, .acoes, .rodape, .tray { display: none !important; } .casca { display: block; } .pag { padding: 0; } }

.pag:focus { outline: none; }
@media (max-width: 960px) {
  .painel-filtros .grade-f { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .painel-filtros .grade-f .campo { grid-column: auto !important; }
  .painel-filtros .grade-f .campo:first-child { grid-column: 1 / -1 !important; }
  .tb td.nome { min-width: 180px; }
}

.tb td:not(.d):not(.nome) { min-width: 120px; }
.tb td a { display: inline-block; padding: 2px 0; }
.sub .sep { color: var(--tx-3); }
.abas { box-shadow: 0 6px 8px -8px rgba(0,0,0,.25); }
@media (max-width: 960px) {
  .bt-ic { min-width: 44px; height: 44px; }
  .topo .marca .selo { width: 32px; height: 32px; }
  .tb td.nome, .tb th:first-child { position: sticky; left: 0; background: var(--fundo); z-index: 1; box-shadow: 1px 0 0 var(--fio); }
  .tb tbody tr:nth-child(even) td.nome { background: var(--zebra); }
  .tb td a { padding: 8px 0; }
  .tb th a.ord { padding: 8px 0; }
  .chip, .tabs button, .graf-ctl button { min-height: 40px; }
  .graf-dados button { min-height: 40px; }
  body:not(.menu-aberto) .trilho { box-shadow: none; }
  .acoes .bt-esc { min-width: 44px; justify-content: center; }
}
@media (max-width: 960px) {
  .busca { flex: 1 1 0; min-width: 0; }
  .topo-in { gap: 4px; padding: 0 8px; }
  .topo-acoes { margin-left: 0; }
  .busca-campo input { text-overflow: ellipsis; }
}
.rol { position: relative; }

/* screener no celular: cada linha vira um cartão com todos os campos (a tabela larga escondia taxa, valor e vencimento) */
@media (max-width: 640px) {
  .tb.tb-cartoes thead { display: none; }
  .tb.tb-cartoes, .tb.tb-cartoes tbody { display: block; }
  .tb.tb-cartoes tbody tr:has(td:nth-child(9)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; padding: 10px 12px; }
  .tb.tb-cartoes tbody tr:has(td:nth-child(9)) td { font-size: 13px; }
  .tb.tb-cartoes tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 12px; border-bottom: 1px solid var(--fio); }
  .tb.tb-cartoes td { display: block; border: 0; padding: 0; min-width: 0 !important; max-width: none; position: static !important; box-shadow: none !important; background: transparent !important; text-align: left !important; overflow-wrap: anywhere; }
  .tb.tb-cartoes td::before { content: attr(data-r); display: block; font-size: 11.5px; color: var(--tx-3); }
  .tb.tb-cartoes td[data-r=""]::before, .tb.tb-cartoes td:empty::before { content: none; }
  .tb.tb-cartoes td.nome { grid-column: 1 / -1; font-weight: 600; font-size: 15px; }
  .tb.tb-cartoes td:last-child:not([data-r]) , .tb.tb-cartoes td[style*="width:92px"] { grid-column: 1 / -1; justify-self: end; width: auto !important; }
  .tb.tb-cartoes .rol, .rol:has(.tb-cartoes) { border: 0; }
}

.busca-campo:focus-within { outline: 2px solid var(--cor); outline-offset: 1px; border-radius: 8px; }

/* r6: ordenacao no celular, comparar em cartoes, preco digitado */
.ordem-cel { display: none; }
.cmp-cartoes { display: none; }
.aviso-longo > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.preco-cota { margin: 0 0 14px; }
@media (max-width: 640px) {
  .ordem-cel { display: flex; gap: 8px; align-items: flex-end; margin: 4px 0 10px; }
  .ordem-cel .campo { flex: 1; min-width: 0; }
  .cmp-cartoes { display: grid; gap: 12px; margin: 10px 0; }
  .cmp-cartao h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
  .cmp-cartao .kv { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--fio); }
  .cmp-cartao .kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
  .cmp-tabela { display: none; }
}

.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }
.painel-precos textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--fio); border-radius: 8px; background: var(--fundo); color: var(--tx); }