/* /energia/potencia-contratada/ on the new design (G3 guide template): only what the page adds to /design/novo.css and
   /energia/bihorario.css (the G3 tool's inputs, alert, source line). The appliance list and «já disparou» inside the
   tool card, the answer's notes, the table of steps drawn to scale, and the method card. Rendered by
   src/energia/ferramentas/potencia-pagina.ts. */

/* ── 1 · the tool card ── */
.gpot .g2hi { align-items: start; } .gpot .g2t { padding-top: clamp(0px, 3vw, 40px); }
.ptool { align-self: start; }
.gpot .verd b { font-size: 19px; line-height: 1.3; }
.verd__n { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-60); } .verd__n:empty { display: none; }
.pq { margin: 14px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--tint-10); min-width: 0; display: grid; gap: 10px; }
.pq legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-size: 16px; color: var(--ink-deep); }
/* appliances: two columns of check tiles; the watts under the name */
.apl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.apl__i, .dsp__i { position: relative; display: block; cursor: pointer; }
.apl__i input, .dsp__i input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.apl__i span { display: grid; gap: 2px; min-height: 44px; box-sizing: border-box; padding: 10px 12px 10px 36px; border-radius: 14px; background: var(--cream); border: 1.5px solid transparent; font-size: 14.5px; line-height: 1.3; color: var(--ink-deep); position: relative; }
.apl__i span::before { content: ""; position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--ink-50); background: #fff; box-sizing: border-box; }
.apl__i small { font: 500 12px/1.2 var(--font-doc); color: var(--ink-50); }
.apl__i input:checked + span { background: var(--azul); border-color: var(--azul-ink); }
.apl__i input:checked + span::before { background: var(--azul-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center; border-color: var(--azul-ink); }
/* «já disparou»: three pills */
.dsp { display: flex; flex-wrap: wrap; gap: 8px; }
.dsp__i span { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid var(--tint-20); font-size: 15px; color: var(--ink-deep); }
.dsp__i input:checked + span { background: var(--ink-deep); border-color: var(--ink-deep); color: #fff; font-weight: 600; }
.apl__i input:focus-visible + span, .dsp__i input:focus-visible + span { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.pdica { margin-top: 10px; line-height: 1.5; } .pdica b { color: var(--ink-60); font-weight: 600; } .pdica a { color: var(--ink); }
.crumbs a, .pcomo a, .pdica a, .hfonte a { text-underline-offset: 2px; }
.crumbs a:focus-visible, .pcomo a:focus-visible, .pdica a:focus-visible, .door:focus-visible, .f1q summary:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 2px; border-radius: 4px; }

/* ── 2 · the cheapest offer at each power, drawn to scale ── */
.b2 .two > div:first-child { gap: 24px; }
.ptab { width: 100%; border-collapse: collapse; font-size: 16px; }
.ptab thead th { padding: 0 0 10px; font: 500 12px/1 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-50); text-align: left; }
.ptab thead th:last-child { text-align: right; }
.ptab tbody th, .ptab td { padding: 12px 0; border-top: 1px solid var(--tint-10); vertical-align: middle; }
.ptab tbody th { width: 7.5em; text-align: left; font-weight: 600; color: var(--ink-deep); white-space: nowrap; }
.ptab tbody th small { margin-left: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--peach-pale); font: 500 12px/1.4 var(--font-doc); color: var(--peach-ink); }
.ptab__b { width: 100%; padding-right: 16px !important; } .ptab__b i { display: block; height: 14px; border-radius: 7px; background: var(--tint-20); }
.ptab tr.hoje .ptab__b i { background: var(--ink-deep); }
.ptab__p { width: 6.5em; text-align: right; font: 700 18px/1.2 var(--disp); color: var(--ink-deep); white-space: nowrap; }
.pcomo { background: var(--cream); border-radius: 22px; padding: 26px; display: grid; gap: 10px; align-content: start; }
.pcomo h3 { margin: 0 0 4px; font: 700 24px/1.2 var(--disp); color: var(--ink-deep); }
.pcomo p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-60); max-width: 65ch; } .pcomo .tk { margin-top: 8px; }
.pcomo ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 15.5px; line-height: 1.45; } .pcomo a { color: var(--ink); }

/* ── 3 · the steps' text and the offer card keep the reading width ── */
.b3 .steps span { max-width: 60ch; }
.door { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 640px) {
  .apl__i span { padding: 10px 8px 10px 32px; font-size: 14px; } .apl__i span::before { left: 9px; }
  .ptab tbody th { width: auto; } .ptab__p { font-size: 16px; width: auto; padding-left: 8px !important; }
  .pcomo { padding: 22px; }
  /* text links: a 40 px+ tap area without moving the line (inline padding does not change the layout) */
  .gpot .crumbs a, .gpot .pdica a, .gpot .pcomo a, .gpot .hfonte a { padding-block: 12px; }
}