/* EV charging district, concelho and operator pages (2026-10-29): the fuel panel pages' shell (combustiveis.css +
   novo.css + moldura.css, body .cshell--carga) and tokens.css — nothing here invents a colour. Only what the fuel
   pages have no component for: what the price includes, the choropleth, the tables, the brand tiles in the rows. */

/* What the number includes — on every page, next to the number. */
.inclui { font-size: var(--t-sm); color: var(--ink-60); background: var(--cream); border-radius: 16px;
  padding: var(--s-4) var(--s-5); margin: var(--s-5) 0 0; max-width: 62ch; }
.inclui b { color: var(--ink); font-weight: 500; }
.tag-confirmar { font-family: var(--font-doc); font-size: var(--t-xs); color: var(--peach-ink); white-space: nowrap; }

/* ─── Choropleth ─────────────────────────────────────────────────────── */
.cmapa { margin: 0; position: relative; --ch-0: var(--map-land);
  --ch-1: var(--band-barato); --ch-2: color-mix(in srgb, var(--band-barato) 50%, var(--band-normal));
  --ch-3: var(--band-normal); --ch-4: color-mix(in srgb, var(--band-normal) 50%, var(--band-caro)); --ch-5: var(--band-caro); }
.cmapa__tabs { margin-bottom: var(--s-4); }
.cmapa__frames { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--s-4); align-items: start; }
.cmapa__frames:has(.cmapa__svg--zoom) { grid-template-columns: 1fr; }
.cmapa__ilhas { display: grid; gap: var(--s-4); }
.cmapa__svg { width: 100%; height: auto; display: block; background: var(--cream); border-radius: 20px; }
.cmapa__svg--cont { max-height: 78vh; }
.cmapa__svg--zoom { max-height: 70vh; }
.cm { fill: var(--ch-0); stroke: var(--paper); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; }
.cm--fora { fill: var(--paper); stroke: var(--hairline); cursor: default; }
.cm:hover, .cm.cm--on { stroke: var(--ink-deep); stroke-width: 2; }
.cmapa[data-corrente="AC"] .cm[data-ac="1"], .cmapa[data-corrente="DC"] .cm[data-dc="1"] { fill: var(--ch-1); }
.cmapa[data-corrente="AC"] .cm[data-ac="2"], .cmapa[data-corrente="DC"] .cm[data-dc="2"] { fill: var(--ch-2); }
.cmapa[data-corrente="AC"] .cm[data-ac="3"], .cmapa[data-corrente="DC"] .cm[data-dc="3"] { fill: var(--ch-3); }
.cmapa[data-corrente="AC"] .cm[data-ac="4"], .cmapa[data-corrente="DC"] .cm[data-dc="4"] { fill: var(--ch-4); }
.cmapa[data-corrente="AC"] .cm[data-ac="5"], .cmapa[data-corrente="DC"] .cm[data-dc="5"] { fill: var(--ch-5); }
.cmapa__leg { display: grid; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--t-xs); color: var(--ink-60); }
.cmapa__leg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.cmapa__leg li, .cmapa__leg p { display: flex; align-items: center; gap: 6px; margin: 0; font-variant-numeric: tabular-nums; }
.cmapa[data-corrente="AC"] .cmapa__leg-dc, .cmapa[data-corrente="DC"] .cmapa__leg-ac { display: none; }
.cmapa__sw { width: 14px; height: 14px; border-radius: 4px; flex: none; background: var(--ch-0); }
.cmapa__sw--1 { background: var(--ch-1); } .cmapa__sw--2 { background: var(--ch-2); } .cmapa__sw--3 { background: var(--ch-3); }
.cmapa__sw--4 { background: var(--ch-4); } .cmapa__sw--5 { background: var(--ch-5); }
.cmapa__unit { color: var(--ink-50); }
.cmapa__tip { position: absolute; z-index: 2; top: 56px; right: 0; width: min(320px, 100%); background: var(--ink-deep); color: var(--paper);
  border-radius: 16px; padding: var(--s-4); font-size: var(--t-sm); box-shadow: 0 6px 24px rgba(41,18,16,.18); }
.cmapa__tip b { color: var(--peach); font-weight: 500; }
.cmapa__tip ol { margin: var(--s-2) 0 0; padding-left: 1.2em; display: grid; gap: 2px; }
.cmapa__tip small { color: rgba(255,255,255,.72); }
.cmapa__tip a { color: var(--peach); }
@media (max-width: 720px) {
  .cmapa__frames { grid-template-columns: 1fr; }
  .cmapa__tip { position: static; width: auto; margin-top: var(--s-3); }
}

/* ─── Tables: operators, sockets, per-100 km ─────────────────────────── */
.ctabela { overflow-x: auto; margin: 0 0 var(--s-4); -webkit-overflow-scrolling: touch; }
.ctabela table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.ctabela th, .ctabela td { text-align: right; padding: var(--s-3); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.ctabela th:first-child, .ctabela td:first-child { text-align: left; white-space: normal; min-width: 9rem; }
.ctabela th { font-weight: 500; background: var(--cream); font-size: var(--t-xs); }
.ctabela th button { all: unset; cursor: pointer; }
.ctabela th button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ctabela th[aria-sort] button::after { content: ' ↕'; color: var(--ink-50); }
.ctabela th[aria-sort="ascending"] button::after { content: ' ↑'; color: var(--ink); }
.ctabela th[aria-sort="descending"] button::after { content: ' ↓'; color: var(--ink); }
.ctabela td small { display: block; color: var(--ink-50); font-size: var(--t-xs); }
.ctabela tr.poucos td { color: var(--ink-50); }
.ctabela .sobe { color: var(--band-caro); } .ctabela .desce { color: var(--band-barato); }

/* The worked example: one real socket, part by part. */
.exemplo { display: grid; gap: 2px; margin: var(--s-4) 0; }
.exemplo__l { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); background: var(--cream); padding: var(--s-3) var(--s-5);
  font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.exemplo__l:first-child { border-radius: 16px 16px 4px 4px; }
.exemplo__l:last-child { border-radius: 4px 4px 16px 16px; }
.exemplo__l--total { background: var(--ink-deep); color: var(--paper); }
.exemplo__l--fora { color: var(--ink-50); }

/* ─── The panel ─────────────────────────────────────────────────────────── */
/* The switch above the map (Lento / Rápido) shows one current at a time in the answer card, as the fuel switch does. */
.cpage[data-fuel] .f-ac, .cpage[data-fuel] .f-dc { display: none; }
.cpage[data-fuel="ac"] .f-ac, .cpage[data-fuel="dc"] .f-dc { display: grid; gap: 2px; }
/* The choropleth in «Concelhos» follows that switch (carregamento.js), so its own tabs step aside. */
.cshell--carga .cmapa__tabs { display: none; }
.cshell--carga .cmapa__svg--zoom { max-height: 380px; }
.cshell--carga .cmapa__tip { position: static; width: auto; margin-top: 12px; }
.cshell--carga .inclui { max-width: none; margin-top: 16px; padding: 14px 16px; }
.cshell--carga .inclui p { margin: 0; } .cshell--carga .inclui p + p { margin-top: 8px; }
.cshell--carga .chero__cta { margin: 20px 0 16px; }
.cshell--carga .cpanel__body .csec h3 { margin: 20px 0 10px; font: 700 17px/1.25 var(--disp); color: var(--ink-deep); }
.cshell--carga .cpanel__body .csec h2 + .csec__note, .cshell--carga .csec__note { margin: 0 0 12px; }
.cshell--carga .cpanel__body .csec h2:not(:first-child) { margin-top: 28px; }
.cshell--carga .csource + .csource { margin-top: 12px; }

/* The ranked rows (novo.css .ofl, .ofl.rk): a brand tile beside the name, a link name, the price over its unit. */
.cshell--carga .ofl { margin: 0 0 8px; }
.cshell--carga .ofl li { padding: 12px 14px; gap: 10px; min-height: 44px; box-sizing: border-box; }
.cshell--carga .ofl .o b { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.cshell--carga .ofl .o a { display: block; line-height: 1.25; }
.cshell--carga .ofl .o small { font-size: 12.5px; line-height: 1.35; }
.cshell--carga .ofl .o a { color: inherit; text-decoration: none; }
.cshell--carga .ofl .o a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cshell--carga .ofl .o a:focus-visible { outline: 2px solid var(--ink-deep); outline-offset: 2px; border-radius: 6px; }
.cshell--carga .ofl .o:has(> .mk) { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.cshell--carga .ofl .o > .mk { grid-row: span 2; }
.cshell--carga .ofl .p { font-size: 17px; text-align: right; }
.cshell--carga .ofl .p small { display: block; margin-top: 3px; font: 400 11.5px/1 var(--font-ui); color: var(--ink-50); }
.cshell--carga .ofl.rk li, .cshell--carga .rk__h { grid-template-columns: 22px minmax(0, 1fr) 54px 54px; gap: 10px; }
.cshell--carga .rk__h { padding: 0 14px 8px; font-size: 11px; }
.cshell--carga .rk__h--1 { grid-template-columns: 22px minmax(0, 1fr) auto; }
.cshell--carga .rk__h--1 span:last-child { text-align: right; }
.cshell--carga .ofl.rk .c, .cshell--carga .ofl.rk .p { font: 700 16px/1 var(--disp); color: var(--ink-deep); } /* AC beside DC: same weight, the list says which one orders it */
.cshell--carga .ofl--neutra li:first-child { background: transparent; }
.cshell--carga .ofl li.poucos, .cshell--carga .ofl li.poucos .p { color: var(--ink-50); }
.cshell--carga .ofl li:first-child.poucos { background: transparent; }

/* The brand tile (site/combustiveis/mapa-core.js tile(): the operator's logo, else its initials) — in the rows, the
   answer card and the operator page's hero. The hubs style it in combustiveis/hub.css; these pages do not load it. */
.cshell--carga .mk { display: inline-grid; place-items: center; vertical-align: middle; overflow: hidden; flex: none;
  width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--hairline);
  font: 600 12px/1 var(--font-ui); color: var(--ink); letter-spacing: .02em; }
.cshell--carga .mk--t { border: 0; }
.cshell--carga .mk--l img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.cshell--carga .pcard__best .mk { width: 40px; height: 40px; }
.cshell--carga .ctabela td .mk { width: 28px; height: 28px; margin-right: 8px; border-radius: 8px; font-size: 11px; }
.cpanel__marca { position: relative; z-index: 1; margin: 20px 0 -12px; }
.cpanel__marca .mk { width: 48px; height: 48px; border-radius: 14px; font-size: 15px; }

/* Tables in the panel: white cards; a wide one (all the operators) scrolls inside its card, never the page. */
.cshell--carga .ctabela { background: #fff; border: 1px solid var(--tint-10); border-radius: 16px; }
.cshell--carga .ctabela th { background: var(--cream); font: 500 12px/1.3 var(--font-doc); letter-spacing: .04em; color: var(--ink-60); }
.cshell--carga .ctabela th, .cshell--carga .ctabela td { padding: 10px 12px; }
.cshell--carga .ctabela th:first-child, .cshell--carga .ctabela td:first-child { min-width: 7rem; }
.cshell--carga .ctabela tr:last-child td { border-bottom: 0; }

/* QA 2026-10-29 · tap targets ≥ 40 px on phones: sortable headers */
@media (max-width: 760px) {
  .ctabela th button { display: inline-flex; align-items: center; min-height: 40px; }
}
/* the wide table (all the operators): the operator's name stays in view while the columns scroll */
.cshell--carga #tabela .ctabela th:first-child, .cshell--carga #tabela .ctabela td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--hairline); }
.cshell--carga #tabela .ctabela th:first-child { background: var(--cream); }
/* the choropleth in the panel takes the hub map's legend colours (novo.css --m0–--m5), as the district grid's chips */
.cshell--carga .cmapa { --ch-0: var(--m0); --ch-1: var(--m1); --ch-2: var(--m2); --ch-3: var(--m3); --ch-4: var(--m4); --ch-5: var(--m5); }