/* Converter pontos de outros programas em FlyPoints. Reaproveita tr-* e tp-* do transferir.css. */
/* O seletor Comprar, Transferir, Converter já nomeia a tela: o título fica só para leitor de tela e o conversor sobe */
.cv-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cv{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:stretch}
.cv-box{padding:20px}
.cv-lado{border:1px solid var(--line);border-radius:16px;background:#fff;padding:12px 16px;display:flex;flex-direction:column;gap:6px}
.cv-linha{display:flex;align-items:center;gap:12px}
.cv-num{flex:1;min-width:0;border:0;outline:0;background:none;padding:0;font:inherit;font-size:32px;font-weight:650;letter-spacing:-.8px;color:var(--ink);font-variant-numeric:tabular-nums}
.cv-num::placeholder{color:var(--ter)}
.cv-num.err{color:#B3261E}
.cv-num:disabled{color:var(--ter)}
.cv-lado:focus-within{border-color:var(--ink)}
.cv-sel{position:relative;flex:none}
.cv-prog{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border:0;border-radius:999px;background:var(--panel);font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}
.cv-prog:hover{background:var(--line)}
.cv-prog:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cv-pmk{width:34px;height:24px;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center}
.cv-menu{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-width:calc(100vw - 32px);margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(20,24,31,.14);z-index:30}
.cv-menu li{display:flex;align-items:center;gap:12px;padding:10px;color:var(--ink);border-radius:10px;cursor:pointer;outline:0}
.cv-menu li:hover,.cv-menu li:focus{background:var(--panel)}
.cv-menu li .cv-mk{width:52px;height:34px}
.cv-menu li.trava .cv-mk,.cv-menu li.trava .cv-otx{opacity:.45}
.cv-otx{font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;flex:none}
.cv-meio{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px}
.cv-taxa{font-size:14px;font-weight:600;color:var(--ink)}
.cv-rec{background:var(--panel);border-color:transparent}
.cv-fp{display:flex;align-items:center;gap:8px;flex:none;font-size:14.5px;font-weight:600;color:var(--ink);padding:7px 12px 7px 8px;border-radius:999px;background:#fff}
.cv-fp i{width:22px;height:22px;border-radius:50%;background:var(--b500)}
.cv-trava{padding:16px;border-radius:16px;background:var(--panel)}
.cv-trava .pill{align-self:flex-start}
.cv-depois{padding-top:2px}

.cv-limites{padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.cv-plano{display:flex;flex-direction:column;gap:4px}
.cv-link{border:0;background:none;padding:0;font:inherit;color:var(--b700);font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cv-lista{display:flex;flex-direction:column;margin:0 -10px}
.cv-row{display:flex;align-items:center;gap:12px;padding:8px 10px;width:100%;border:0;border-radius:12px;background:none;font:inherit;text-align:left;color:var(--ink);cursor:pointer;transition:background .15s}
.cv-row:hover{background:var(--panel)}
.cv-row.on{background:var(--panel)}
.cv-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cv-mk{width:48px;height:32px;flex:none;border-radius:9px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.cv-nome{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.cv-nome b{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap;row-gap:2px}
.cv-nome b .pill{font-size:11px;padding:2px 7px}
.cv-nome .small{font-size:12.5px}
.cv-tx{flex:none;text-align:right}
.cv-tx b{font-size:15px;font-weight:650;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.cv-row.trava .cv-mk,.cv-row.trava .cv-tx b{opacity:.45}
.cv-como{padding:12px 22px;flex-direction:row;align-items:center;gap:28px}
.cv-como .lab{flex:none}
.cv-como .tp-steps{flex:1}
.cv-como .tp-steps li>div{font-size:14px}
.cv-como .tp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cv-como .tp-steps li::before{display:none}

@container m (max-width:900px){
  .cv{grid-template-columns:minmax(0,1fr)}
}
@container m (max-width:900px){
  .cv-como{flex-direction:column;align-items:flex-start;gap:12px}
  .cv-como .tp-steps{grid-template-columns:minmax(0,1fr);gap:14px}
}
@container m (max-width:640px){
  .cv-box{padding:18px}
  .cv-num{font-size:26px}
  .cv-box [data-cv="form"],.cv-box [data-sub="ok"]{gap:10px!important}
  .cv-prog,.cv-fp{padding-top:5px;padding-bottom:5px}
  .cv-menu{width:300px}
  .cv-prog,.cv-fp{font-size:13.5px}
  .cv-meio{flex-direction:column;align-items:flex-start;gap:2px}
  .cv-limites{padding:14px 16px;gap:6px}
  /* No celular o cartão de limites já mostra o uso do programa escolhido: sai o que repete e os limites cabem sem rolar. */
  .cv{gap:14px}
  .cv-renova{display:none}
  .cv-plano .small:empty,.cv-nome b .pill{display:none}
  .cv-box{padding:14px}
  .cv-lado{padding:10px 14px;gap:2px}
  .cv-meio{padding:0 4px}
  .cv-row{padding:5px 8px}
  .cv-mk{width:44px;height:28px}
  .cv-lista{margin:0 -8px}
}