/* BR Rádios — tema do painel (verde e amarelo da marca sobre fundo escuro) */

:root {
    /* Fundo cinza-escuro neutro; verde (e amarelo) da marca nos detalhes */
    --fundo: #111316;
    --superficie: #181b1f;
    --superficie-2: #20242a;
    --borda: #2a2f36;
    --texto: #eceef1;
    --texto-suave: #9ba1aa;
    --primaria: #1db954;
    --primaria-forte: #17a34a;
    --primaria-suave: rgba(29, 185, 84, 0.13);
    --texto-na-primaria: #03170b;
    --amarelo: #fcc934;
    --amarelo-suave: rgba(252, 201, 52, 0.14);
    --gradiente-marca: linear-gradient(135deg, #0e8a3e 0%, #8dbb3c 55%, #fcc934 100%);
    --verde: #22c55e;
    --vermelho: #ef4444;
    --vermelho-suave: rgba(239, 68, 68, 0.12);
    --raio: 12px;
    --sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
    --fonte: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; line-height: 1.2; }

/* ---------- Logo ---------- */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--texto);
    text-decoration: none;
    white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo-marca { display: block; width: 44px; height: 44px; flex-shrink: 0; }
.logo-texto { font-size: 22px; letter-spacing: 0.01em; line-height: 1; }
.logo-texto b { font-weight: 900; }
.logo-texto span { font-weight: 300; text-transform: uppercase; }

/* ---------- Topo ---------- */
.topo::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--gradiente-marca);
}
.topo {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(17, 19, 22, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--borda);
}
.topo-interno {
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 32px;
    height: 80px;
    display: flex;
    align-items: center;
    gap: 40px;
}
.menu {
    display: flex;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
    position: relative;
    padding: 28px 16px;
    color: var(--texto-suave);
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}
.menu a:hover { color: var(--texto); }
.menu a.ativo { color: var(--primaria); }
.menu a.ativo::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -1px;
    height: 3px;
    background: var(--primaria);
    border-radius: 2px;
}
.menu a.em-breve { opacity: 0.55; cursor: default; }

.usuario {
    display: flex;
    align-items: center;
    gap: 12px;
}
.avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    font-weight: 700;
    font-size: 13px;
}
.usuario-nome { font-size: 14px; line-height: 1.2; }
.usuario-nome small { display: block; color: var(--texto-suave); font-size: 12px; }

/* ---------- Conteúdo ---------- */
.conteudo {
    max-width: 1520px;
    margin: 0 auto;
    padding: 40px 32px 64px;
}
.cabecalho-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.cabecalho-pagina h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.cabecalho-pagina p { margin: 6px 0 0; color: var(--texto-suave); }

.grade {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 22px;
}

.modulo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--texto);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
a.modulo:hover { border-color: var(--primaria); transform: translateY(-2px); text-decoration: none; }
.modulo-icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--primaria-suave);
    color: var(--primaria);
}
.modulo-icone svg { width: 22px; height: 22px; }
.modulo h3 { font-size: 17px; }
.modulo p { margin: 0; color: var(--texto-suave); font-size: 14px; }

.selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--superficie-2);
    color: var(--texto-suave);
    border: 1px solid var(--borda);
}
.selo-ok { background: rgba(34, 197, 94, 0.12); color: var(--verde); border-color: transparent; }

.info-lista { margin: 0; display: grid; gap: 10px; }
.info-lista div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.info-lista dt { color: var(--texto-suave); }
.info-lista dd { margin: 0; font-weight: 600; text-align: right; }

.secao-titulo { font-size: 18px; font-weight: 700; margin: 36px 0 16px; }

/* ---------- Botões e formulários ---------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--primaria);
    color: var(--texto-na-primaria);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.botao:hover { background: var(--primaria-forte); text-decoration: none; }
.botao:focus-visible, .campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.botao:disabled { opacity: 0.5; cursor: not-allowed; }
.botao-largo { width: 100%; }
.botao-discreto {
    background: transparent;
    color: var(--texto-suave);
    border-color: var(--borda);
    font-weight: 600;
    padding: 8px 12px;
}
.botao-discreto:hover { background: var(--superficie-2); color: var(--texto); }

.campo { display: grid; gap: 6px; margin-bottom: 16px; align-content: start; }
.campo label { font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: var(--fundo);
    color: var(--texto);
    font: inherit;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--primaria); outline: none; }
.campo textarea { resize: vertical; min-height: 80px; }
.campo select { appearance: auto; }
.campo .erro-campo { color: var(--vermelho); font-size: 13px; }
.campo small { color: var(--texto-suave); font-size: 12px; }
.campos-lado { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }

.alerta {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 14px;
}
.alerta-erro { background: var(--vermelho-suave); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
.alerta-ok { background: rgba(34, 197, 94, 0.12); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
.alerta-amarelo { background: var(--amarelo-suave); color: var(--amarelo); border: 1px solid rgba(234, 179, 8, 0.3); }

/* ---------- Páginas simples (login, instalador, erros) ---------- */
.pagina-simples {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background:
        radial-gradient(900px 600px at 100% 0%, rgba(29, 185, 84, 0.12), transparent 65%),
        var(--fundo);
}
.caixa {
    width: 100%;
    max-width: 420px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--sombra);
}
.caixa-larga { max-width: 640px; }
.caixa .logo { margin-bottom: 24px; }
.caixa h1 { font-size: 22px; margin-bottom: 6px; }
.caixa > p { color: var(--texto-suave); margin: 0 0 24px; }
.caixa fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.caixa legend { font-weight: 700; margin-bottom: 14px; font-size: 15px; }

.requisitos { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.requisitos li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.requisitos .ok { color: var(--verde); font-weight: 600; }
.requisitos .falta { color: var(--vermelho); font-weight: 600; }

.rodape-simples { margin-top: 20px; text-align: center; color: var(--texto-suave); font-size: 12px; }

.erro-codigo {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -0.04em;
    background: var(--gradiente-marca);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* ---------- Utilitários ---------- */
.suave { color: var(--texto-suave); }
.bloco { display: block; }
.numero { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pre-linha { white-space: pre-line; margin: 0; }
.visualmente-oculto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.voltar { display: inline-block; margin-bottom: 8px; color: var(--texto-suave); font-size: 14px; }
.cartao h2 { font-size: 16px; margin-bottom: 16px; }
.cartao > p.suave { margin: -8px 0 16px; font-size: 14px; }
.grade-2 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.selo-alerta { background: var(--amarelo-suave); color: var(--amarelo); border-color: transparent; }

/* ---------- Indicadores ---------- */
.indicadores {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.indicador { display: grid; gap: 6px; }
.indicador span { color: var(--texto-suave); font-size: 14px; }
.indicador strong { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }

/* ---------- Filtros e busca ---------- */
.barra-busca { display: flex; gap: 10px; margin-bottom: 16px; }
.barra-busca input {
    flex: 1;
    padding: 10px 13px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
}
.barra-busca input:focus { border-color: var(--primaria); outline: none; }
.filtros-abas {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.filtros-abas a {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.filtros-abas a:hover { color: var(--texto); background: var(--superficie-2); }
.filtros-abas a.ativo { color: var(--primaria); border-color: var(--primaria); background: var(--primaria-suave); }
.filtros-abas small { opacity: 0.75; margin-left: 4px; }

/* ---------- Tabelas ---------- */
.tabela-cartao { padding: 0; overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
    text-align: left;
    padding: 12px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--texto-suave);
    background: var(--superficie-2);
    white-space: nowrap;
}
.tabela td { padding: 14px 18px; border-top: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.tabela .acoes { text-align: right; white-space: nowrap; }
.link-forte { color: var(--texto); font-weight: 600; }
.vazio { text-align: center; padding: 40px 22px; }
.vazio p { color: var(--texto-suave); margin: 0 0 16px; }

.paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    color: var(--texto-suave);
    font-size: 14px;
}

/* ---------- Formulários de cadastro ---------- */
.formulario { display: grid; gap: 18px; }
.grade-campos {
    display: grid;
    gap: 0 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grade-campos .largura-2 { grid-column: span 2; }
.grade-campos .largura-total { grid-column: 1 / -1; }
.interruptor { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--primaria); }
.barra-acoes { display: flex; justify-content: flex-end; gap: 10px; }
[hidden] { display: none !important; }

@media (max-width: 960px) {
    .grade-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .grade-campos { grid-template-columns: 1fr; }
    .grade-campos .largura-2 { grid-column: auto; }
    .grade-2 { grid-template-columns: 1fr; }
    .barra-busca { flex-direction: column; }
}

/* ---------- Menu do usuário ---------- */
.menu-usuario { position: relative; }
.menu-usuario summary {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 10px;
}
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary:hover { background: var(--superficie-2); }
.menu-usuario .seta { width: 16px; height: 16px; color: var(--texto-suave); }
.menu-usuario .avatar { position: relative; }
.ponto-aviso {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--amarelo);
    border: 2px solid var(--fundo);
}
.menu-usuario-lista {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    padding: 8px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 12px;
    box-shadow: var(--sombra);
    z-index: 20;
}
.menu-usuario-lista a,
.menu-usuario-lista button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--texto);
    font: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.menu-usuario-lista a:hover,
.menu-usuario-lista button:hover { background: var(--superficie-2); text-decoration: none; }
.menu-usuario-lista a.destaque { color: var(--amarelo); }
.menu-usuario-lista svg { width: 18px; height: 18px; flex-shrink: 0; }
.menu-usuario-lista .selo { margin-left: auto; }
.menu-usuario-lista hr { border: 0; border-top: 1px solid var(--borda); margin: 6px 0; }

/* ---------- Atualizar sistema ---------- */
.destaque { border-color: rgba(29, 185, 84, 0.45); }
.passos { margin: 0 0 20px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.linha-formulario { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.linha-formulario .campo { flex: 1; min-width: 240px; margin-bottom: 0; }
.notas-versao {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 14px;
    margin: 12px 0 16px;
    font-size: 14px;
    max-height: 260px;
    overflow: auto;
}
.andamento ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
details.cartao summary { cursor: pointer; font-weight: 600; }
.formulario + section, section.cartao + section.cartao, section.cartao + details.cartao { margin-top: 18px; }
code { background: var(--superficie-2); padding: 1px 6px; border-radius: 6px; font-size: 0.9em; }

/* ---------- Rádio (painel de streaming e área do cliente) ---------- */
.painel-radio { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 18px; }
.cartao-status { display: grid; gap: 18px; align-content: start; }
.status-linha { display: flex; align-items: center; gap: 14px; }
.status-linha strong { font-size: 18px; }
.indicador-ar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--texto-suave);
    flex-shrink: 0;
}
.indicador-ar.no-ar { background: var(--primaria); box-shadow: 0 0 0 0 rgba(29, 185, 84, 0.6); animation: pulso 1.8s infinite; }
@keyframes pulso {
    0% { box-shadow: 0 0 0 0 rgba(29, 185, 84, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(29, 185, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(29, 185, 84, 0); }
}
@media (prefers-reduced-motion: reduce) { .indicador-ar.no-ar { animation: none; } }
.numeros-radio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.numeros-radio div { background: var(--superficie-2); border-radius: 10px; padding: 12px; display: grid; gap: 4px; }
.numeros-radio span { color: var(--texto-suave); font-size: 12px; }
.numeros-radio strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.player { width: 100%; }
.acoes-radio { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.botao-icone {
    border: 1px solid var(--borda);
    background: transparent;
    color: var(--texto-suave);
    border-radius: 7px;
    padding: 3px 9px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px;
}
.botao-icone:hover { color: var(--texto); background: var(--superficie-2); }
.perigo { color: #fca5a5 !important; }
.botao.perigo:hover, .botao-icone.perigo:hover { background: var(--vermelho-suave); }
.quebra { word-break: break-all; }
.info-lista dd { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px; }
.senha { font-family: ui-monospace, Consolas, monospace; }
.ajuda { margin-top: 16px; font-size: 14px; }
.ajuda summary { cursor: pointer; color: var(--primaria); font-weight: 600; }
.ajuda p { color: var(--texto-suave); margin: 10px 0 0; }
.titulo-secao-cartao { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.titulo-secao-cartao h2 { margin-bottom: 8px; }
.titulo-secao-cartao small { font-weight: 400; font-size: 13px; margin-left: 6px; }
.barra-uso { height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; margin-bottom: 18px; }
.barra-uso span { display: block; height: 100%; background: var(--primaria); border-radius: 99px; }
.barra-uso span.cheio { background: var(--amarelo); }
.envio-musicas { display: grid; gap: 12px; margin-bottom: 18px; }
.area-soltar {
    position: relative;
    display: grid;
    gap: 4px;
    place-items: center;
    text-align: center;
    padding: 28px 16px;
    border: 2px dashed var(--borda);
    border-radius: 12px;
    cursor: pointer;
}
.area-soltar:hover, .area-soltar:focus-within { border-color: var(--primaria); background: var(--primaria-suave); }
.area-soltar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lista-musicas { display: grid; border-top: 1px solid var(--borda); max-height: 420px; overflow: auto; }
.linha-musica { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--borda); font-size: 14px; }
.nome-musica { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
section.cartao + section.cartao { margin-top: 18px; }

@media (max-width: 960px) {
    .painel-radio { grid-template-columns: 1fr; }
    .numeros-radio { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Financeiro e serviços ---------- */
.selo-perigo { background: var(--vermelho-suave); color: #fca5a5; border-color: transparent; }
.contador {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--amarelo);
    color: #1a1400;
    font-size: 12px;
    font-weight: 800;
}
.aviso-fatura {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-color: rgba(252, 201, 52, 0.4);
    margin-bottom: 12px;
}
.aviso-fatura.vencida { border-color: rgba(239, 68, 68, 0.5); }
.valor-fatura { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 18px; }
.linha-item { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--borda); font-size: 14px; }
.linha-item:last-child { border-bottom: 0; }
.opcoes-radio { display: grid; gap: 10px; }
.opcao {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    cursor: pointer;
}
.opcao:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); }
.opcao input { margin-top: 4px; accent-color: var(--primaria); }
.titulo-com-acao { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.titulo-com-acao .secao-titulo { margin-bottom: 16px; }
.cancelar-servico summary { list-style: none; }
.cancelar-servico summary::-webkit-details-marker { display: none; }
.cancelar-servico[open] { flex-basis: 100%; padding: 14px; border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 10px; }
.linha-copiar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
details > summary.botao { list-style: none; }
details > summary.botao::-webkit-details-marker { display: none; }

/* ---------- Contratação online ---------- */
.conteudo-estreito { max-width: 1080px; }
.centralizado { justify-content: center; text-align: center; }
.grade-planos { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.plano { display: flex; flex-direction: column; gap: 14px; }
.plano h3 { font-size: 20px; }
.preco-plano { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--primaria); }
.preco-plano small { font-size: 15px; font-weight: 500; color: var(--texto-suave); margin-left: 2px; }
.itens-plano { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; flex: 1; }
.itens-plano li::before { content: "✓"; color: var(--primaria); font-weight: 800; margin-right: 8px; }
.campo-oculto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 1100px) {
    .topo-interno { gap: 20px; padding: 0 20px; }
    .conteudo { padding: 32px 20px 56px; }
    .menu a { padding: 28px 10px; font-size: 15px; }
    .menu a.ativo::after { left: 10px; right: 10px; }
}

@media (max-width: 760px) {
    .topo-interno { gap: 12px; height: 68px; }
    .logo-texto { display: none; }
    .usuario-nome { display: none; }
    .cabecalho-pagina h1 { font-size: 24px; }
    .caixa { padding: 24px; }
    .campos-lado { grid-template-columns: 1fr; }
}

/* =====================================================================
   Layout com menu lateral (painel de streaming)
   Menu minimalista sobre o fundo; o conteúdo fica num painel arredondado.
   ===================================================================== */
.app-lateral { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; gap: 8px; padding: 12px 16px 12px 12px; }
.lateral { position: sticky; top: 12px; align-self: start; display: flex; flex-direction: column; height: calc(100vh - 24px); padding: 10px 6px 6px; }
.lateral .logo { padding: 4px 12px 22px; }
.lateral .logo-marca { width: 36px; height: 36px; }
.lateral .logo-texto { font-size: 19px; }
.lateral-menu { display: flex; flex-direction: column; gap: 2px; }
.lateral-item {
    display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 10px;
    color: var(--texto); font-weight: 600; font-size: 15px; text-decoration: none;
}
.lateral-item:hover { background: rgba(255, 255, 255, 0.04); text-decoration: none; }
.lateral-item:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.lateral-item svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.lateral-item .rotulo { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-item .contador { background: none; padding: 0; min-width: 0; height: auto; border-radius: 0; color: var(--texto-suave); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.lateral-item.ativo { background: var(--primaria-suave); color: var(--primaria); }
.lateral-item.ativo .contador { color: var(--primaria); }
.lateral-item .marca-aviso { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--amarelo); color: #2a2000; }
.lateral-separador { height: 1px; background: var(--borda); margin: 12px 14px; }
.lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; }
.lateral-conta { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; min-width: 0; }
.lateral-conta .avatar { width: 34px; height: 34px; font-size: 13px; }
.lateral-conta strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-conta small { display: block; color: var(--texto-suave); font-size: 12px; }
.lateral-rodape form { margin: 0; }
.lateral-rodape button.lateral-item { width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; color: var(--texto-suave); }
.lateral-rodape button.lateral-item:hover { color: var(--texto); background: rgba(255, 255, 255, 0.04); }

.corpo { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 34px 40px 48px; min-width: 0; }
.corpo .cabecalho-pagina { margin-bottom: 26px; }
.corpo .cabecalho-pagina h1 { font-size: 26px; letter-spacing: -0.01em; }
.corpo .cartao { background: var(--superficie-2); border-color: transparent; box-shadow: none; }
.corpo .tabela th { text-transform: none; letter-spacing: 0; font-size: 13px; }
.corpo .tabela-cartao { background: transparent; border: 1px solid var(--borda); }
.corpo .selo { font-weight: 600; }

/* Aberto dentro do painel do cliente: o menu do gerenciador fica em cima */
.embutido, .embutido body { background: transparent; }
.embutido .app-lateral { min-height: 0; padding: 0; gap: 16px; grid-template-columns: 252px minmax(0, 1fr); }
.embutido .lateral { position: static; height: auto; padding: 0; }
.embutido .lateral .logo, .embutido .lateral-rodape { display: none; }
@media (max-width: 900px) { .embutido .app-lateral { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* Página do cliente (gerenciador) com o painel da rádio embutido */
.moldura-radio { display: block; width: 100%; height: 900px; border: 0; background: transparent; }
.moldura-rodape { display: flex; justify-content: flex-end; gap: 16px; margin-top: 10px; font-size: 13px; }
.moldura-rodape form { margin: 0; }
.moldura-rodape button { background: none; border: 0; padding: 0; color: var(--texto-suave); font: inherit; cursor: pointer; }
.moldura-rodape button:hover, .moldura-rodape a:hover { color: var(--primaria); }
.moldura-rodape a { color: var(--texto-suave); }

/* ---------- Tocando agora (o elemento de destaque) ---------- */
.agora {
    display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 22px;
    padding: 16px 22px 16px 16px; border-radius: 14px; background: var(--superficie-2);
}
.agora-capa { width: 112px; height: 112px; border-radius: 10px; background: #0c0e10 center / cover no-repeat; display: grid; place-items: center; overflow: hidden; }
.agora-capa svg { width: 44px; height: 44px; stroke: var(--texto-suave); fill: none; stroke-width: 1.5; opacity: 0.6; }
.agora-capa.com-capa svg { display: none; }
.agora-texto { min-width: 0; }
.agora-situacao { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); margin-bottom: 6px; }
.agora-titulo { font-size: 26px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agora-artista { color: var(--texto-suave); font-size: 15px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agora-lado { display: flex; align-items: center; gap: 22px; }
.agora-ouvintes { text-align: right; line-height: 1.1; }
.agora-ouvintes strong { display: block; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.agora-ouvintes span { color: var(--texto-suave); font-size: 13px; }
.botao-tocar {
    width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
    background: var(--primaria); color: var(--texto-na-primaria);
}
.botao-tocar:hover { background: var(--primaria-forte); }
.botao-tocar:focus-visible { outline: 3px solid rgba(29, 185, 84, 0.45); outline-offset: 3px; }
.botao-tocar svg { width: 22px; height: 22px; fill: currentColor; }
.botao-tocar .icone-pausa { display: none; }
.agora.tocando .botao-tocar .icone-tocar, .agora.conectando .botao-tocar .icone-tocar { display: none; }
.agora.conectando .botao-tocar::after { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(0,0,0,.25); border-top-color: var(--texto-na-primaria); animation: girar 0.8s linear infinite; }
.agora.tocando .botao-tocar .icone-pausa { display: block; }
.botao-tocar:disabled { background: var(--borda); color: var(--texto-suave); cursor: not-allowed; }

.equalizador { display: flex; align-items: flex-end; gap: 4px; height: 46px; }
.equalizador i { display: block; width: 5px; height: 18%; border-radius: 3px; background: var(--gradiente-marca); background-size: 100% 46px; background-position: bottom; opacity: 0.35; }
.agora.no-ar .equalizador i { opacity: 1; animation: barra 1.1s ease-in-out infinite alternate; }
.equalizador i:nth-child(2n) { animation-duration: 0.8s !important; }
.equalizador i:nth-child(3n) { animation-duration: 1.4s !important; }
.equalizador i:nth-child(4n+1) { animation-delay: -0.3s; }
.equalizador i:nth-child(5n) { animation-delay: -0.7s; }
@keyframes barra { from { height: 14%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .agora.no-ar .equalizador i { animation: none; height: 60%; } }

/* ---------- Painel da rádio ---------- */
.grade-radio { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; margin-top: 16px; align-items: start; }
.coluna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.servicos-radio { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bloco-radio { background: var(--superficie-2); border-radius: 14px; padding: 20px 22px; }
.bloco-radio h2 { font-size: 16px; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bloco-radio > p { color: var(--texto-suave); font-size: 14px; margin: 0 0 16px; }
.estado { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5b616b; }
.estado.ligado { color: var(--verde); }
.estado.ligado::before { background: var(--verde); box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15); }
.estado.alerta { color: var(--amarelo); }
.estado.alerta::before { background: var(--amarelo); }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.acoes-linha form { margin: 0; }
.botao-pequeno { padding: 8px 14px; font-size: 14px; }

.dados-lista { margin: 0; display: flex; flex-direction: column; }
.dados-lista div { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--borda); }
.dados-lista div:first-child { border-top: 0; padding-top: 2px; }
.dados-lista dt { color: var(--texto-suave); font-size: 13px; }
.dados-lista dd { margin: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copiar-icone { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--borda); background: transparent; color: var(--texto-suave); cursor: pointer; padding: 0; }
.copiar-icone:hover { color: var(--primaria); border-color: var(--primaria); }
.copiar-icone svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copiar-icone.copiado { color: var(--verde); border-color: var(--verde); }

.uso-numeros { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 10px; }
.uso-numeros strong { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.uso-numeros span { color: var(--texto-suave); font-size: 13px; }
.mini-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-numeros div span { display: block; color: var(--texto-suave); font-size: 13px; }
.mini-numeros div strong { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.link-discreto { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; }

.dados-lista dt, .dados-lista dd { line-height: 1.4; }
.grade-painel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.grade-painel .largura-2 { grid-column: span 2; }
.grade-painel + .bloco-radio, .grade-painel ~ .bloco-radio { margin-top: 16px; }
.bloco-radio .barra-uso { background: #30353d; margin: 0; height: 8px; }
.bloco-radio .titulo-secao-cartao { margin-bottom: 10px; }

/* Lista de rádios */
.uso-celula { min-width: 150px; }
.uso-celula .barra-uso { margin: 0 0 4px; height: 5px; }
.uso-celula small { color: var(--texto-suave); font-size: 12px; }
.acoes-icones { display: inline-flex; gap: 6px; justify-content: flex-end; }
.acoes-icones form { margin: 0; }
.acao-icone { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--borda); background: transparent; color: var(--texto-suave); cursor: pointer; padding: 0; }
.acao-icone:hover { color: var(--texto); border-color: #3a414a; text-decoration: none; }
.acao-icone.ligar:hover { color: var(--verde); border-color: var(--verde); }
.acao-icone.desligar:hover { color: var(--vermelho); border-color: var(--vermelho); }
.acao-icone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Envio de músicas no estilo "arraste aqui" */
.soltar-grande { position: relative; display: grid; place-items: center; text-align: center; min-height: 220px; border: 2px dashed #4a515b; border-radius: 14px; padding: 28px; cursor: pointer; }
.soltar-grande:hover, .soltar-grande.arrastando { border-color: var(--primaria); background: var(--primaria-suave); }
.soltar-grande input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.soltar-grande .chamada { font-size: 18px; }
.soltar-grande .chamada u { color: var(--primaria); text-underline-offset: 4px; font-weight: 600; }
.soltar-grande small { display: block; margin-top: 10px; color: var(--texto-suave); }

.codigo-copiar { width: 100%; min-height: 96px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #0d0f12; color: var(--texto); border: 1px solid var(--borda); border-radius: 10px; padding: 12px; resize: vertical; }
.passos-numerados { margin: 0; padding-left: 20px; color: var(--texto-suave); }
.passos-numerados li { margin-bottom: 8px; }
.passos-numerados strong { color: var(--texto); }

@media (max-width: 1180px) {
    .grade-radio { grid-template-columns: 1fr; }
    .grade-painel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .app-lateral { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
    .lateral { position: static; height: auto; padding: 12px 16px 8px; min-width: 0; }
    .lateral-rodape .lateral-conta small { display: none; }
    .lateral .logo { padding: 0 0 10px; }
    .lateral-menu { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
    .lateral-item { min-height: 40px; white-space: nowrap; padding: 0 12px; }
    .lateral-rodape { flex-direction: row; align-items: center; margin-top: 6px; padding-top: 0; }
    .lateral-conta { padding: 0 8px 0 0; flex: 1; }
    .lateral-separador { display: none; }
    .corpo { border-radius: 16px 16px 0 0; padding: 22px 16px 40px; border-left: 0; border-right: 0; }
    .agora { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 12px; }
    .agora-capa { width: 72px; height: 72px; }
    .agora-titulo { font-size: 19px; }
    .agora-lado { grid-column: 1 / -1; justify-content: space-between; }
    .servicos-radio, .grade-painel { grid-template-columns: 1fr; }
    .grade-painel .largura-2 { grid-column: auto; }
    .tabela-cartao { overflow-x: auto; }
}

/* =====================================================================
   Modo claro (painel de streaming). O escuro continua sendo o padrão.
   ===================================================================== */
:root { --superficie-3: #30353d; --borda-forte: #4a515b; --sobreposicao: rgba(255, 255, 255, 0.04); --fundo-capa: #0c0e10; }
:root[data-tema="claro"] {
    --fundo: #eef1ef;
    --superficie: #ffffff;
    --superficie-2: #f4f6f5;
    --superficie-3: #dfe4e1;
    --borda: #e2e6e4;
    --borda-forte: #b9c1bd;
    --texto: #15191c;
    --texto-suave: #5b646d;
    --primaria: #149142;
    --primaria-forte: #0f7a37;
    --primaria-suave: rgba(20, 145, 66, 0.11);
    --texto-na-primaria: #ffffff;
    --amarelo: #a8700a;
    --amarelo-suave: rgba(214, 152, 22, 0.14);
    --verde: #138a40;
    --vermelho: #d92d2d;
    --vermelho-suave: rgba(217, 45, 45, 0.1);
    --sombra: 0 8px 24px rgba(20, 30, 25, 0.08);
    --sobreposicao: rgba(0, 0, 0, 0.04);
    --fundo-capa: #e6ebe8;
    color-scheme: light;
}
:root[data-tema="claro"] .alerta-ok { color: #0f6b30; }
:root[data-tema="claro"] .alerta-erro, :root[data-tema="claro"] .selo-perigo { color: #a51f1f; }
:root[data-tema="claro"] .codigo-copiar { background: #f4f6f5; }
:root[data-tema="claro"] .marca-aviso { color: #2a2000; background: #fcc934; }
.lateral-item:hover, .lateral-rodape button.lateral-item:hover { background: var(--sobreposicao); }
.agora-capa { background-color: var(--fundo-capa); }
.bloco-radio .barra-uso { background: var(--superficie-3); }
.soltar-grande { border-color: var(--borda-forte); }
.estado::before { background: var(--borda-forte); }
.codigo-copiar { background: var(--fundo); }

/* Botão de tema no rodapé do menu */
.alternar-tema .icone-sol { display: none; }
:root[data-tema="claro"] .alternar-tema .icone-sol { display: block; }
:root[data-tema="claro"] .alternar-tema .icone-lua { display: none; }

/* ---------- Menu lateral em grupos ---------- */
.lateral-grupo > summary { list-style: none; cursor: pointer; }
.lateral-grupo > summary::-webkit-details-marker { display: none; }
.lateral-grupo > summary .seta-grupo { width: 16px; height: 16px; margin-left: auto; transition: transform 0.2s ease; opacity: 0.6; }
.lateral-grupo[open] > summary .seta-grupo { transform: rotate(180deg); }
.lateral-grupo.contem-ativo > summary { color: var(--primaria); }
.lateral-filhos { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 23px; padding-left: 12px; border-left: 1px solid var(--borda); }
.lateral-filhos .lateral-item { min-height: 38px; font-size: 14px; font-weight: 500; padding: 0 12px; color: var(--texto-suave); }
.lateral-filhos .lateral-item:hover { color: var(--texto); }
.lateral-filhos .lateral-item.ativo { color: var(--primaria); background: var(--primaria-suave); font-weight: 600; }
.etiqueta-breve { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: var(--superficie-3); color: var(--texto-suave); white-space: nowrap; }

/* ---------- Controles Streaming / AutoDJ ---------- */
.controle { background: var(--superficie-2); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.controle-topo { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--borda); font-weight: 700; font-size: 14px; }
.controle-topo .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--borda-forte); position: relative; flex-shrink: 0; }
.controle.ligado .controle-topo .ponto { background: var(--verde); }
.controle.ligado .controle-topo .ponto::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--verde); opacity: 0; animation: onda-ponto 1.8s ease-out infinite; }
.controle-topo .situacao { margin-left: auto; font-weight: 600; font-size: 13px; color: var(--texto-suave); }
.controle.ligado .controle-topo .situacao { color: var(--verde); }
.controle-corpo { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 22px 18px 24px; flex-wrap: wrap; }
.controle-corpo form { margin: 0; }
.controle-dica { padding: 0 18px 16px; margin: -8px 0 0; color: var(--texto-suave); font-size: 13px; text-align: center; }

.botao-acao {
    display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 12px; border-radius: 999px;
    border: 1px solid transparent; background: transparent; color: var(--texto); cursor: pointer;
    font: inherit; font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
    transition: background-color 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}
.botao-acao .bolinha { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; position: relative; transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1); }
.botao-acao .bolinha svg { width: 16px; height: 16px; fill: #fff; position: relative; z-index: 1; }
.botao-acao.ligar .bolinha { background: #1fbf6a; box-shadow: 0 4px 14px rgba(31, 191, 106, 0.35); }
.botao-acao.desligar .bolinha { background: #f0405a; box-shadow: 0 4px 14px rgba(240, 64, 90, 0.35); }
.botao-acao.reiniciar .bolinha { background: #3b82f6; box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35); }
.botao-acao:hover:not(:disabled) { background: var(--sobreposicao); border-color: var(--borda); }
.botao-acao:hover:not(:disabled) .bolinha { transform: scale(1.12); }
.botao-acao.reiniciar:hover:not(:disabled) .bolinha svg { animation: girar 0.7s ease; }
.botao-acao:active:not(:disabled) { transform: scale(0.96); }
.botao-acao:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.botao-acao:disabled { cursor: default; color: var(--texto-suave); }
.botao-acao:disabled .bolinha { filter: grayscale(0.55); opacity: 0.45; box-shadow: none; }
/* O estado atual "respira": o botão Ligar de quem já está no ar fica com uma onda em volta */
.botao-acao.atual .bolinha { opacity: 1; filter: none; }
.botao-acao.atual .bolinha::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: onda-botao 2s ease-out infinite; }
.botao-acao.carregando .bolinha svg { display: none; }
.botao-acao.carregando .bolinha::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; animation: girar 0.7s linear infinite; }

@keyframes onda-ponto { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes onda-botao { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .controle.ligado .controle-topo .ponto::after, .botao-acao.atual .bolinha::before { animation: none; display: none; }
    .botao-acao, .botao-acao .bolinha { transition: none; }
}

/* Página "em breve" */
.em-breve-pagina { max-width: 620px; padding: 40px 0 20px; }
.em-breve-pagina .etiqueta-breve { font-size: 12px; padding: 4px 9px; }
.em-breve-pagina h1 { font-size: 26px; margin: 14px 0 10px; }
.em-breve-pagina p { color: var(--texto-suave); margin: 0 0 12px; line-height: 1.6; }
.em-breve-pagina ul { color: var(--texto-suave); padding-left: 20px; line-height: 1.8; margin: 0; }

.controle-topo form { margin: 0; }
.controle-topo .reiniciar-icone { width: 28px; height: 28px; margin-left: 8px; }
.controle-topo .reiniciar-icone:hover:not(:disabled) svg { animation: girar 0.7s ease; }

/* =====================================================================
   Músicas em pastas, playlists e editor de playlist
   ===================================================================== */
.uso-compacto { min-width: 220px; text-align: right; font-size: 13px; color: var(--texto-suave); }
.uso-compacto .barra-uso { margin: 6px 0 0; height: 6px; background: var(--superficie-3); }
.grade-musicas { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.lista-pastas { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 14px; max-height: 60vh; overflow-y: auto; }
.item-pasta { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--texto); font-weight: 500; font-size: 14px; text-decoration: none; background: none; border: 0; width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.item-pasta:hover { background: var(--sobreposicao); text-decoration: none; }
.item-pasta svg { width: 18px; height: 18px; fill: rgba(252, 201, 52, 0.18); stroke: var(--amarelo); stroke-width: 1.6; flex-shrink: 0; }
.item-pasta .rotulo { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-pasta .contador { background: var(--superficie-3); color: var(--texto-suave); font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 99px; min-width: 0; height: auto; margin: 0; }
.item-pasta.ativa { background: var(--primaria-suave); color: var(--primaria); font-weight: 600; }
.item-pasta.sem-pasta .rotulo { font-style: italic; color: var(--texto-suave); }
.criar-pasta { display: flex; gap: 8px; }
.criar-pasta input, .form-flutuante input, .form-flutuante select, .busca {
    flex: 1; min-width: 0; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); font: inherit; font-size: 14px;
}
.criar-pasta input:focus, .form-flutuante input:focus, .busca:focus { outline: 2px solid var(--primaria); outline-offset: 0; border-color: transparent; }
.topo-musicas { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.topo-musicas h2 small { font-weight: 500; font-size: 13px; margin-left: 6px; }
.menu-acao { position: relative; }
.menu-acao > summary { list-style: none; cursor: pointer; }
.menu-acao > summary::-webkit-details-marker { display: none; }
.form-flutuante { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: flex; gap: 8px; padding: 10px; width: 300px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra); }
.form-direita { left: auto; right: 0; }
.aviso-sem-pasta { background: var(--amarelo-suave); color: var(--amarelo); padding: 10px 14px; border-radius: 10px; font-size: 14px; margin: 0 0 12px; }
.soltar-compacto { min-height: 110px; padding: 18px; }
.soltar-compacto .chamada { font-size: 16px; }
.envio-musicas { display: flex; flex-direction: column; gap: 10px; }

.lista-faixas { display: flex; flex-direction: column; margin-top: 14px; max-height: 62vh; overflow-y: auto; border-top: 1px solid var(--borda); }
.faixa { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--borda); font-size: 14px; }
.faixa form { margin: 0; }
.faixa input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primaria); flex-shrink: 0; }
.faixa .tempo { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; color: var(--texto-suave); background: var(--superficie-3); padding: 2px 7px; border-radius: 6px; flex-shrink: 0; }
.faixa .posicao { width: 28px; text-align: right; color: var(--texto-suave); font-size: 12px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.faixa .nome-faixa { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa .nome-faixa small { display: block; font-size: 11px; color: var(--texto-suave); line-height: 1.2; }
.faixa .acao-icone { width: 30px; height: 30px; font-size: 18px; font-weight: 600; flex-shrink: 0; }
.tocar-faixa { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--primaria-suave); color: var(--primaria); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; padding: 0; }
.tocar-faixa svg { width: 13px; height: 13px; fill: currentColor; }
.tocar-faixa:hover { background: var(--primaria); color: var(--texto-na-primaria); }
.tocar-faixa.tocando { background: var(--primaria); color: var(--texto-na-primaria); animation: onda-ponto 1.4s ease-out infinite; }
.faixa[draggable=true] { cursor: grab; }
.faixa.arrastando { opacity: 0.4; }
.faixa.alvo { box-shadow: inset 0 2px 0 var(--primaria); }

.faixa-no-ar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--superficie-2); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.faixa-no-ar form { margin: 0 0 0 auto; }
.selo-no-ar { display: inline-flex; align-items: center; gap: 6px; background: #e5384f; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; margin-left: 8px; vertical-align: middle; }
.selo-no-ar::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: onda-ponto 1.6s ease-out infinite; }
.faixa-no-ar .selo-no-ar { margin-left: 0; }
.acoes-playlist { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.acoes-playlist form { margin: 0; }
.botao-mini { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; border: 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: #fff; text-decoration: none; white-space: nowrap; }
.botao-mini:hover { filter: brightness(1.1); text-decoration: none; }
.botao-mini.verde { background: #1a9f52; }
.botao-mini.azul { background: #3d6fd6; }
.botao-mini.laranja { background: #c9661f; }
.botao-mini.roxo { background: #6b58c9; }
.botao-mini.vermelho { background: #d9435a; }

.editor-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; }
.editor-topo form { margin: 0; }
.editor-numeros { display: flex; gap: 10px; flex-wrap: wrap; }
.editor-numeros div { display: grid; grid-template-columns: 38px auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 18px 8px 10px; border-right: 1px solid var(--borda); }
.editor-numeros div:last-child { border-right: 0; }
.editor-numeros svg { grid-row: span 2; width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: var(--primaria-suave); stroke: var(--primaria); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.editor-numeros strong { font-size: 19px; font-weight: 800; line-height: 1.1; }
.editor-numeros span { font-size: 12px; color: var(--texto-suave); }
.pendente { color: var(--amarelo); margin-left: 4px; }
.editor-titulo { font-size: 22px; margin: 0 0 14px; }
.editor-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.editor-coluna { background: var(--superficie-2); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.editor-coluna h2 { font-size: 15px; margin: 0; }
.editor-coluna h2 small { font-weight: 500; font-size: 12px; }
.editor-coluna .lista-pastas { margin: 0; max-height: 64vh; }
.coluna-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.lista-editor { margin-top: 0; max-height: 58vh; min-height: 200px; }
.dica-arrastar { font-size: 12px; margin: 0; }

@media (max-width: 900px) {
    .grade-musicas, .editor-colunas { grid-template-columns: 1fr; }
    .tabela-playlists .acoes-playlist { justify-content: flex-start; }
}

/* Mover música: o seletor abre dentro da linha (sem sair da lista nem criar rolagem lateral) */
.lista-faixas { overflow-x: hidden; }
.faixa .menu-acao { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.faixa .menu-acao[open] > summary { color: var(--primaria); border-color: var(--primaria); }
.faixa .menu-acao .form-flutuante { position: static; width: auto; padding: 0; border: 0; background: none; box-shadow: none; gap: 6px; }
.faixa .menu-acao .form-flutuante select { flex: none; width: 150px; padding: 5px 8px; }
.faixa .menu-acao .form-flutuante .botao-pequeno { padding: 5px 12px; }

/* Janela (Ligar AutoDJ) */
.janela { border: 1px solid var(--borda); border-radius: 16px; background: var(--superficie); color: var(--texto); padding: 0; width: min(460px, calc(100vw - 32px)); box-shadow: var(--sombra); }
.janela::backdrop { background: rgba(0, 0, 0, 0.55); }
.janela form { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; }
.janela-topo { display: flex; justify-content: space-between; align-items: center; }
.janela-topo h2 { font-size: 18px; }
.janela-fechar { background: none; border: 0; color: var(--texto-suave); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.janela-fechar:hover { background: var(--sobreposicao); color: var(--texto); }
.janela-aviso { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--primaria-suave); color: var(--primaria); font-size: 13px; text-align: center; }
.janela .campo select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); font: inherit; }

/* Editor: músicas da pasta e da playlist num bloco só, separadas por uma linha */
.editor-colunas .editor-coluna:nth-child(1) { border-radius: 14px 0 0 14px; }
.editor-colunas .editor-coluna:nth-child(2) { border-radius: 0 14px 14px 0; margin-left: -14px; border-left: 1px solid var(--borda); }
.editor-colunas { align-items: stretch; }
.lista-editor.recebendo { outline: 2px dashed var(--primaria); outline-offset: -2px; border-radius: 8px; }
.lista-faixas label.faixa[draggable=true] { cursor: grab; }
@media (max-width: 900px) {
    .editor-colunas .editor-coluna:nth-child(1), .editor-colunas .editor-coluna:nth-child(2) { border-radius: 14px; margin-left: 0; border-left: 0; }
}
.editor-coluna .busca { flex: none; }
.aviso-melhoria { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.aviso-melhoria span { flex: 1; min-width: 240px; }
.aviso-melhoria form { margin: 0; }

/* Pastas no topo: abas fixas (pastinhas coloridas) e as pastas da aba escolhida */
.painel-categorias { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.abas-categorias { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--borda); padding-bottom: 10px; }
.aba-categoria { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; padding: 8px 12px 6px; border-radius: 10px; border: 0; background: none; color: var(--texto-suave); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; position: relative; }
.aba-categoria:hover { background: var(--sobreposicao); color: var(--texto); text-decoration: none; }
.aba-categoria .pastinha { width: 34px; height: 34px; fill: var(--cor); }
.aba-categoria.ativa { background: var(--sobreposicao); color: var(--texto); }
.aba-categoria.ativa::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -11px; height: 3px; border-radius: 3px; background: var(--cor); }
.linha-pastas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-pasta { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; background: var(--superficie-3); border: 1px solid transparent; color: var(--texto); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; max-width: 280px; }
.chip-pasta:hover { border-color: var(--borda); text-decoration: none; }
.chip-pasta .pastinha { width: 17px; height: 17px; fill: var(--amarelo); flex-shrink: 0; }
.chip-pasta .rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-pasta .contador { background: var(--superficie-2); color: var(--texto-suave); font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 99px; }
.chip-pasta.ativa { background: var(--primaria-suave); color: var(--primaria); border-color: var(--primaria); font-weight: 600; }
.chip-pasta.sem-pasta .rotulo { font-style: italic; }
.linha-pastas .criar-pasta { margin-left: auto; }
.linha-pastas .criar-pasta input { width: 220px; }
.faixa .nome-faixa small.pasta-da-faixa { display: flex; align-items: center; gap: 4px; }
.pasta-da-faixa .pastinha { width: 12px; height: 12px; fill: #e5484d; flex-shrink: 0; }
@media (max-width: 700px) {
    .aba-categoria { min-width: 0; flex: 1 1 30%; }
    .linha-pastas .criar-pasta { margin-left: 0; width: 100%; }
    .linha-pastas .criar-pasta input { flex: 1; width: auto; }
}

/* Menu da rádio na parte de cima (área do cliente): a tela usa a largura toda */
.app-topo { min-height: 100vh; padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.menu-topo { display: flex; align-items: center; gap: 18px; padding: 4px 4px 0; min-width: 0; }
.menu-topo .logo { flex-shrink: 0; }
.menu-topo .logo-marca { width: 32px; height: 32px; }
.menu-topo .logo-texto { font-size: 18px; }
.menu-topo-itens { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.topo-item { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; border: 0; background: none; color: var(--texto); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; list-style: none; }
.topo-item::-webkit-details-marker { display: none; }
.topo-item:hover { background: var(--sobreposicao); text-decoration: none; }
.topo-item.ativo { background: var(--primaria-suave); color: var(--primaria); }
.topo-item svg, .topo-subitem svg { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topo-item .etiqueta-breve { margin-left: 2px; }
.topo-grupo { position: relative; }
.topo-grupo > summary .seta-grupo { width: 15px; height: 15px; opacity: 0.6; transition: transform 0.2s ease; }
.topo-grupo[open] > summary .seta-grupo { transform: rotate(180deg); }
.topo-suspenso { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 240px; padding: 6px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 2px; }
.topo-subitem { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--texto); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.topo-subitem:hover { background: var(--sobreposicao); text-decoration: none; }
.topo-subitem.ativo { background: var(--primaria-suave); color: var(--primaria); }
.topo-subitem .rotulo { flex: 1; }
.topo-subitem .contador { color: var(--texto-suave); font-size: 13px; font-weight: 600; background: none; padding: 0; }
.menu-topo-direita { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.menu-topo-direita form { margin: 0; }
.topo-conta { display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; max-width: 200px; }
.topo-conta .avatar { width: 30px; height: 30px; font-size: 12px; flex-shrink: 0; }
.topo-conta strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-topo-direita .alternar-tema { display: inline-flex; align-items: center; width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; border-radius: 10px; background: none; color: var(--texto); cursor: pointer; }
.menu-topo-direita .alternar-tema:hover { background: var(--sobreposicao); }
.menu-topo-direita .alternar-tema svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-topo-direita .alternar-tema .rotulo { display: none; }
.embutido .app-topo { min-height: 0; padding: 0; }
.embutido .menu-topo { padding: 0; }
@media (max-width: 1100px) {
    .topo-conta strong { display: none; }
    .menu-topo-direita .topo-item .rotulo { display: none; }
}
@media (max-width: 900px) {
    .app-topo { padding: 8px 0 0; gap: 8px; }
    .menu-topo { flex-wrap: wrap; gap: 6px 10px; padding: 0 12px; }
    .menu-topo-direita { margin-left: auto; }
    .menu-topo-itens { order: 3; flex-basis: 100%; overflow-x: auto; padding-bottom: 4px; }
    .topo-item .etiqueta-breve { display: none; }
    .topo-suspenso { position: fixed; top: auto; left: 12px; right: 12px; margin-top: 6px; }
}

/* Pastas da aba escolhida numa coluna à esquerda (com rolagem e busca: pode haver milhares) */
.editor-colunas.com-pastas { grid-template-columns: 270px minmax(0, 1fr) minmax(0, 1fr); }
.editor-colunas.com-pastas .coluna-pastas { border-radius: 14px; margin-right: 0; align-self: start; position: sticky; top: 12px; }
.editor-colunas.com-pastas .editor-coluna:nth-child(2) { border-radius: 14px 0 0 14px; margin-left: 0; border-left: 0; }
.editor-colunas.com-pastas .editor-coluna:nth-child(3) { border-radius: 0 14px 14px 0; margin-left: -14px; border-left: 1px solid var(--borda); }
.coluna-pastas .lista-pastas, .painel-pastas .lista-pastas { max-height: 62vh; overflow-y: auto; margin: 0; }
.item-pasta .pastinha { width: 18px; height: 18px; fill: var(--amarelo); stroke: none; flex-shrink: 0; }
.item-pasta[hidden] { display: none; }
.painel-categorias .abas-categorias { border-bottom: 0; padding-bottom: 0; }
.painel-categorias .aba-categoria.ativa::after { bottom: -6px; }
.painel-pastas { display: flex; flex-direction: column; gap: 10px; }
.painel-pastas h2 small { font-weight: 500; font-size: 12px; }
.painel-pastas .criar-pasta input { flex: 1; min-width: 0; }
@media (max-width: 1180px) {
    .editor-colunas.com-pastas { grid-template-columns: 1fr 1fr; }
    .editor-colunas.com-pastas .coluna-pastas { grid-column: 1 / -1; position: static; }
    .editor-colunas.com-pastas .coluna-pastas .lista-pastas { max-height: 220px; }
}
@media (max-width: 900px) {
    .editor-colunas.com-pastas { grid-template-columns: 1fr; }
    .editor-colunas.com-pastas .editor-coluna:nth-child(2), .editor-colunas.com-pastas .editor-coluna:nth-child(3) { border-radius: 14px; margin-left: 0; border-left: 0; }
}

/* Playlists: mostrar em lista ou em colunas */
.alternar-visao { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--superficie-2); margin: 0 0 12px auto; float: right; }
.alternar-visao button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 8px; background: none; color: var(--texto-suave); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.alternar-visao button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alternar-visao button:hover { color: var(--texto); }
.alternar-visao button.ativo { background: var(--superficie-3); color: var(--texto); }
.visoes-playlists { clear: both; }
.visoes-playlists[data-visoes="lista"] .visao-colunas, .visoes-playlists[data-visoes="colunas"] .visao-lista { display: none; }
.grade-playlists { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cartao-playlist { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background: var(--superficie-2); border: 1px solid transparent; }
.cartao-playlist.no-ar { border-color: rgba(229, 72, 77, 0.45); }
.cartao-playlist-topo { display: flex; align-items: center; gap: 12px; }
.cartao-playlist-topo .link-forte { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-playlist-topo small { color: var(--texto-suave); font-size: 13px; }
.cartao-playlist-topo .selo-no-ar { margin-left: auto; flex-shrink: 0; }
.icone-playlist { width: 42px; height: 42px; border-radius: 11px; background: var(--primaria-suave); color: var(--primaria); display: grid; place-items: center; flex-shrink: 0; }
.icone-playlist svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cartao-playlist .acoes-playlist { justify-content: flex-start; flex-wrap: wrap; }

/* Painel da rádio: botão de ouvir ao lado da capa */
.agora { grid-template-columns: 112px auto minmax(0, 1fr) auto; }
@media (max-width: 900px) {
    .agora { grid-template-columns: 72px auto minmax(0, 1fr); }
}

/* Conteúdos da equipe (admin) */
.barra-busca { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.barra-busca .busca { flex: 1; min-width: 220px; }
.tabela-conteudos td { vertical-align: middle; }
.celula-conteudo { display: flex; align-items: center; gap: 12px; min-width: 200px; max-width: 340px; }
.celula-conteudo img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.celula-conteudo strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-dropbox { color: var(--azul, #6aa6dc); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.tabela-conteudos .acoes-playlist { align-items: center; flex-wrap: nowrap; justify-content: flex-end; }
.tabela-conteudos td.acoes { white-space: nowrap; width: 1%; }
.paginacao-simples { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.rotulo-campo { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.opcoes-linha { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.opcao { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
.chave-dia { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.chave-dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chave-dia .trilho { width: 34px; height: 20px; border-radius: 99px; background: var(--superficie-3); position: relative; transition: background 0.2s; }
.chave-dia .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.chave-dia input:checked + .trilho { background: var(--primaria); }
.chave-dia input:checked + .trilho::after { transform: translateX(14px); }
.chave-dia input:focus-visible + .trilho { outline: 2px solid var(--primaria); outline-offset: 2px; }
.previa-imagem { display: block; margin-top: 8px; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.tabela-conteudos { min-width: 0; }
.cartao.tabela-cartao:has(.tabela-conteudos) { overflow-x: auto; }
.tabela-conteudos td small.suave { max-width: 180px; }

/* Gerenciador: item do menu que abre uma lista (Serviços → Contratados, Streaming, Sites, Aplicativos) */
.menu { overflow: visible; }
.menu-grupo { position: relative; }
.menu-grupo > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 28px 16px; color: var(--texto-suave); font-size: 16px; font-weight: 500; cursor: pointer; white-space: nowrap; position: relative; }
.menu-grupo > summary::-webkit-details-marker { display: none; }
.menu-grupo > summary:hover, .menu-grupo[open] > summary { color: var(--texto); }
.menu-grupo > summary svg { width: 15px; height: 15px; opacity: 0.7; transition: transform 0.2s; }
.menu-grupo[open] > summary svg { transform: rotate(180deg); }
.menu-grupo > summary.ativo { color: var(--primaria); }
.menu-grupo > summary.ativo::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; background: var(--primaria); border-radius: 2px; }
.menu-suspenso { position: absolute; top: calc(100% - 8px); left: 0; z-index: 60; min-width: 260px; padding: 6px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 2px; }
.menu .menu-suspenso a, .menu-suspenso .em-breve { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; font-size: 15px; color: var(--texto); text-decoration: none; }
.menu .menu-suspenso a::after { display: none; }
.menu-suspenso a:hover { background: var(--sobreposicao); }
.menu-suspenso small { color: var(--texto-suave); font-size: 12.5px; font-weight: 400; }
.menu-suspenso .em-breve { opacity: 0.55; cursor: default; }
@media (max-width: 900px) {
    .menu { overflow-x: auto; }
    .menu-grupo > summary { padding: 28px 10px; font-size: 15px; }
    .menu-suspenso { position: fixed; top: 76px; left: 12px; right: 12px; }
}
.cartao-acesso { border: 1px solid var(--primaria); background: var(--primaria-suave); }
.dados-acesso { display: grid; gap: 8px; margin: 10px 0 0; }
.dados-acesso div { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dados-acesso dt { width: 70px; color: var(--texto-suave); }
.dados-acesso dd { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Conteúdos: dias um embaixo do outro; ao ligar, abre o link do dia */
.dias-links { display: flex; flex-direction: column; gap: 8px; }
.dia-link { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 14px; border-radius: 10px; background: var(--superficie-2); border: 1px solid transparent; }
.dia-link.ligado { border-color: var(--primaria); background: var(--primaria-suave); }
.dia-link .nome-dia { font-weight: 600; }
.dia-link .campo-link-dia input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); font: inherit; font-size: 14px; }
.dia-link .campo-link-dia input:focus { border-color: var(--primaria); outline: none; }
.dia-link .campo-link-dia .erro-campo { color: var(--vermelho); font-size: 13px; display: block; margin-top: 4px; }
.dia-link .campo-link-dia[hidden] { display: none; }
@media (max-width: 700px) { .dia-link { grid-template-columns: 1fr; } }
.chips-dias { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-dia { font-size: 11.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: var(--superficie-3); color: var(--texto-suave); }
.chip-dia.pronto { background: rgba(34, 197, 94, 0.15); color: var(--verde, #22c55e); }
.chip-dia.erro { background: var(--vermelho-suave, rgba(229,72,77,.15)); color: #fca5a5; }

/* Botões de ouvir: parado mostra ▶; tocando mostra os dois risquinhos de pausa */
.tocar-faixa.tocando svg { display: none; }
.tocar-faixa.tocando::before { content: ""; width: 10px; height: 12px; box-sizing: border-box; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.selo-atualizando { background: rgba(249, 115, 22, 0.16); color: #fb923c; border-color: transparent; animation: piscar-atualizando 1.4s ease-in-out infinite; }
@keyframes piscar-atualizando { 50% { opacity: 0.55; } }
.linha-clicavel { cursor: pointer; }
tr.linha-clicavel:hover td { background: var(--sobreposicao); }
.cartao-playlist.linha-clicavel:hover { border-color: var(--borda); }

/* Capa padrão: disco de vinil com a agulha; gira enquanto a rádio está no ar */
.agora-capa svg.vinil { width: 100%; height: 100%; stroke: none; opacity: 1; fill: initial; }
.vinil-disco { transform-origin: 54px 62px; transform-box: view-box; }
.agora.no-ar .vinil-disco { animation: girar-vinil 3.2s linear infinite; }
.vinil-agulha { transform-origin: 104px 16px; transform-box: view-box; transform: rotate(-14deg); transition: transform 0.6s ease; }
.agora.no-ar .vinil-agulha { transform: rotate(0deg); }
@keyframes girar-vinil { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .agora.no-ar .vinil-disco { animation: none; } }
.trocar-playlist select { min-width: 200px; max-width: 280px; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; }
.trocar-playlist select:focus { outline: 2px solid var(--primaria); outline-offset: 0; }

/* Cartão da playlist (colunas): dados um embaixo do outro, com ícone */
.cartao-playlist { gap: 0; padding: 0; overflow: hidden; }
.cartao-playlist-topo { padding: 16px 18px; border-bottom: 1px solid var(--borda); }
.cartao-playlist-topo .link-forte { font-size: 17px; }
.cartao-playlist-dados { list-style: none; margin: 0; padding: 0; }
.cartao-playlist-dados li { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--borda); font-size: 14.5px; }
.cartao-playlist-dados li svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--primaria); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cartao-playlist-dados li span:not([class]) { color: var(--texto-suave); }
.cartao-playlist-dados li strong { font-weight: 700; }
.cartao-playlist-dados .selo-no-ar { margin-left: 0; }
.selo-fora { display: inline-flex; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: var(--superficie-3); color: var(--texto-suave); }
.cartao-playlist .acoes-playlist { padding: 14px 18px 16px; }
.cartao-playlist-topo .link-forte { flex: 1; min-width: 0; }
.por-no-ar-canto { margin: 0 0 0 auto; flex-shrink: 0; }
.cartao-playlist .acoes-playlist { flex-wrap: nowrap; gap: 6px; }
.cartao-playlist .acoes-playlist .botao-mini { padding: 5px 9px; font-size: 12px; }
.grade-playlists { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.cartao-playlist .acoes-playlist { gap: 5px; }
.cartao-playlist .acoes-playlist .botao-mini { padding: 5px 8px; font-size: 11.5px; }
.cartao-playlist-topo .link-forte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .grade-playlists { grid-template-columns: 1fr; } .cartao-playlist .acoes-playlist { flex-wrap: wrap; } }

/* Playlists em lista no celular: cada playlist vira um bloco (nome, números e botões numa linha) */
.selo-no-ar { white-space: nowrap; }
@media (max-width: 700px) {
    .tabela-playlists thead { display: none; }
    .tabela-playlists, .tabela-playlists tbody, .tabela-playlists tr, .tabela-playlists td { display: block; width: 100%; }
    .tabela-playlists tr { padding: 14px 16px; border-bottom: 1px solid var(--borda); }
    .tabela-playlists tr:last-child { border-bottom: 0; }
    .tabela-playlists td { padding: 0; border: 0; }
    .tabela-playlists td:first-child { display: flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 4px; }
    .tabela-playlists td:first-child .selo-no-ar { margin-left: 0; }
    .tabela-playlists td.numero { display: inline-block; width: auto; margin: 0 14px 10px 0; color: var(--texto-suave); font-size: 13.5px; }
    .tabela-playlists td:nth-child(2)::before { content: "Músicas: "; }
    .tabela-playlists td:nth-child(3)::before { content: "Duração: "; }
    .tabela-playlists .acoes-playlist { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
    .tabela-playlists .acoes-playlist .botao-mini { padding: 5px 9px; font-size: 12px; }
}
@media (max-width: 700px) {
    .tabela-playlists td.acoes { text-align: left; }
    .tabela-playlists td.acoes .acoes-playlist { justify-content: flex-start; gap: 5px; }
    .tabela-playlists td.acoes .acoes-playlist .botao-mini { padding: 5px 7px; font-size: 11.5px; }
}
/* No celular as playlists aparecem sempre em colunas (cards). */
@media (max-width: 700px) {
    .alternar-visao { display: none !important; }
    .visoes-playlists .visao-lista { display: none !important; }
    .visoes-playlists .visao-colunas { display: block !important; }
    .grade-playlists { grid-template-columns: 1fr; }
}

/* Intercalar (vinhetas, comerciais, campanhas, hora certa): ao lado das abas do editor */
.painel-categorias { flex-direction: row; flex-wrap: wrap; align-items: center; }
.painel-categorias .abas-categorias { flex: 0 1 auto; }
.botoes-intercalar { flex: 1 1 380px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.botao-intercalar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border: 0; border-radius: 6px; background: #ff6a00; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.botao-intercalar:hover { background: #ff7d22; }
.botao-intercalar svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1400px) { .botoes-intercalar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .botoes-intercalar { grid-template-columns: 1fr; } }
.linha-executar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.linha-executar input { width: 72px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); font: inherit; }
.linha-executar select { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); font: inherit; }
.linha-executar [hidden] { display: none; }
.dica-intercalar { font-size: 12.5px; margin: 0; }
.janela-botoes { display: flex; justify-content: flex-end; gap: 8px; }
.intercalacoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.chip-intercalar { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 999px; background: rgba(255, 106, 0, 0.14); color: var(--texto); font-size: 12px; }
.chip-intercalar strong { color: #ff7d22; font-weight: 700; }
.chip-intercalar button { border: 0; background: none; color: var(--texto-suave); font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 999px; cursor: pointer; }
.chip-intercalar button:hover { background: var(--sobreposicao); color: var(--texto); }

/* Playlist com a cor da pasta de cada item (Músicas, Programas, Programetes, Acervo, Campanhas, Comerciais, Hora Certa) */
.lista-editor .faixa.colorida { border: 1px dashed color-mix(in srgb, var(--cor-item) 55%, transparent); border-left: 5px solid var(--cor-item); background: color-mix(in srgb, var(--cor-item) 13%, transparent); border-radius: 6px; margin-bottom: 4px; }
.lista-editor .faixa.colorida:hover { background: color-mix(in srgb, var(--cor-item) 20%, transparent); }
.chip-intercalar.tipo-comerciais strong { color: #e05ea8; }
.chip-intercalar.tipo-horacerta strong { color: #ff8a3d; }
.chip-intercalar.tipo-campanhas strong { color: #9b6bd8; }
/* Listas do editor mais curtas, com barra de rolagem à vista */
.lista-editor { max-height: min(520px, 55vh); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--borda) transparent; }
.lista-editor::-webkit-scrollbar { width: 8px; }
.lista-editor::-webkit-scrollbar-thumb { background: var(--borda); border-radius: 8px; }
.lista-editor::-webkit-scrollbar-thumb:hover { background: var(--texto-suave); }
@media (max-width: 700px) { .lista-editor { max-height: 60vh; } }
/* Pastinha do item na cor do conteúdo */
.lista-editor .faixa.colorida .pasta-da-faixa .pastinha, .lista-editor .faixa.colorida .pasta-da-faixa svg { fill: var(--cor-item); color: var(--cor-item); stroke: none; }

/* Área do cliente: o menu de cima fica no lugar (não acompanha a rolagem) */
.area-cliente .topo { position: relative; }
/* Menu do painel da rádio fixo ao rolar: sozinho (sticky) ou dentro da área do cliente (desce pela mensagem da página) */
body:not(.embutido) .menu-topo { position: sticky; top: 0; z-index: 40; background: var(--fundo); }
.embutido .menu-topo { position: relative; top: 0; z-index: 40; background: var(--fundo); }
.menu-topo.menu-acompanhando { box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.6); border-bottom: 1px solid var(--borda); padding-bottom: 6px; }
/* Menu da rádio mais largo (alto), principalmente quando acompanha a rolagem */
.embutido .menu-topo, body:not(.embutido) .menu-topo { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.menu-topo.menu-acompanhando { min-height: 72px; padding: 14px 16px; border-radius: 0 0 14px 14px; }

/* Botão de modo claro/escuro na área do cliente */
.botao-tema { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--borda); border-radius: 10px; background: none; color: var(--texto); cursor: pointer; }
.botao-tema:hover { background: var(--sobreposicao); }
.botao-tema svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-tema="claro"] .topo { background: rgba(255, 255, 255, 0.94); }

/* Conteúdos: envio por SFTP (FileZilla) e disco dos servidores */
.envio-sftp { margin-bottom: 16px; }
.envio-sftp > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.envio-sftp > summary::before { content: "▸"; color: var(--texto-suave); }
.envio-sftp[open] > summary::before { content: "▾"; }
.envio-sftp p { margin: 12px 0; font-size: 13.5px; }
.acesso-envio { margin-top: 12px; }
.acesso-envio dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 0; }
.acesso-envio dt { color: var(--texto-suave); }
.acesso-envio dd { margin: 0; }
.acesso-envio code { user-select: all; font-size: 14px; }
.servidores-envio { display: grid; gap: 12px; }
.servidor-envio { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; }
.barra-disco { height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.barra-disco span { display: block; height: 100%; background: var(--primaria); }
.barra-disco.atencao span { background: #f2b84b; }
.barra-disco.cheio span { background: #e5484d; }
.diagnostico-envio { margin-top: 10px; font-size: 12.5px; }
.diagnostico-envio summary { cursor: pointer; }
.diagnostico-envio code { white-space: pre-wrap; word-break: break-word; font-size: 12px; user-select: text; }

/* Players: personalizar, prévia e código */
.players-grade { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .players-grade { grid-template-columns: 1fr; } }
.players-opcoes { display: flex; flex-direction: column; gap: 14px; }
.players-opcoes .campo input:not([type=radio]):not([type=color]), .players-opcoes select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); font: inherit; }
.escolha-modelo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcao-modelo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 2px solid var(--borda); border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 600; }
.opcao-modelo input { position: absolute; opacity: 0; pointer-events: none; }
.opcao-modelo:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); }
.miniatura { position: relative; display: block; width: 100%; height: 54px; border-radius: 8px; background: var(--superficie-2); overflow: hidden; }
.miniatura i, .miniatura b, .miniatura em { position: absolute; display: block; }
.miniatura-barra i { left: 0; right: 0; bottom: 0; height: 14px; background: #0e1013; }
.miniatura-barra b { left: 6px; bottom: 3px; width: 8px; height: 8px; border-radius: 50%; background: #1e88e5; }
.miniatura-barra em { left: 18px; bottom: 5px; width: 40%; height: 4px; border-radius: 2px; background: #6b7380; }
.miniatura-cartao i { left: 50%; top: 5px; width: 34px; height: 44px; margin-left: -17px; border-radius: 6px; background: #0e1013; }
.miniatura-cartao b { left: 50%; top: 9px; width: 24px; height: 18px; margin-left: -12px; border-radius: 3px; background: #6b7380; }
.miniatura-cartao em { left: 50%; top: 32px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #1e88e5; }
.escolha-cor { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.escolha-cor label { cursor: pointer; }
.escolha-cor input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.escolha-cor span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 3px solid transparent; box-shadow: 0 0 0 1px var(--borda); }
.escolha-cor input:checked + span { border-color: var(--fundo); box-shadow: 0 0 0 2px var(--texto); }
.cor-livre input { width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; }
.redes-player summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.redes-player input { margin-top: 8px; }
.area-previa { display: flex; justify-content: center; align-items: flex-end; min-height: 200px; padding: 18px; border-radius: 12px; background: repeating-linear-gradient(45deg, var(--superficie-2) 0 12px, var(--superficie) 12px 24px); }
.area-previa.previa-barra { padding: 120px 0 0; overflow: hidden; }
.area-previa iframe { border: 0; display: block; max-width: 100%; }

/* Agendamento */
.programa-no-ar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: var(--primaria-suave); color: var(--texto); font-size: 14px; }
.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; flex: none; }
.agenda-lista { margin-bottom: 18px; }
.linhas-agenda { display: flex; flex-direction: column; margin-top: 10px; }
.linha-agenda { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 6px; border-top: 1px solid var(--borda); }
.linha-agenda.no-ar { background: var(--primaria-suave); border-radius: 10px; }
.hora-agenda { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; background: #12a150; color: #fff; font-weight: 700; font-size: 14px; }
.hora-agenda svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.info-agenda { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-agenda strong { font-size: 14px; }
.info-agenda small { font-size: 12px; }
.dias-agenda { display: flex; flex-wrap: wrap; gap: 4px; }
span.dia-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 4px; background: #ff6a00; color: #fff; font-size: 12.5px; font-weight: 600; }
span.dia-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.acoes-agenda { display: flex; gap: 6px; }
@media (max-width: 900px) { .linha-agenda { grid-template-columns: auto 1fr; } .dias-agenda, .acoes-agenda { grid-column: 1 / -1; } }
.form-agenda { display: grid; grid-template-columns: 160px 1fr; gap: 16px 20px; align-items: start; margin-top: 12px; }
.rotulo-agenda { font-weight: 700; font-size: 14px; padding-top: 9px; }
.form-agenda select, .form-agenda input[type=time] { width: 100%; max-width: 640px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); font: inherit; }
.form-agenda input[type=time] { max-width: 200px; }
.chaves-dias { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 6px; }
.opcoes-radio { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; font-size: 14px; }
.opcoes-radio.linha { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
.proxima-playlist { margin-top: 10px; }
.barra-acoes-agenda { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 700px) { .form-agenda { grid-template-columns: 1fr; gap: 6px; } .rotulo-agenda { padding-top: 10px; } }

/* Agendamento nas playlists (atalho) */
.botao-mini.ciano { background: #0e8f8f; }
.selos-agenda { display: flex; flex-wrap: wrap; gap: 4px; }
.tabela-playlists .selos-agenda { margin-top: 5px; }
.selo-agenda { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; background: rgba(18, 161, 80, 0.16); color: #3fbf72; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.selo-agenda span { font-weight: 500; color: var(--texto-suave); }
.selo-agenda svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.selo-agenda:hover { background: rgba(18, 161, 80, 0.28); }
.cartao-playlist-dados .linha-agenda-card { flex-wrap: wrap; }
.janela-agendar { width: min(520px, calc(100vw - 32px)); }
.janela-agendar .campo input[type=time] { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); font: inherit; }
.janela-agendar .chaves-dias { gap: 8px 14px; }
.tabela-playlists .coluna-agenda .selos-agenda { margin-top: 0; }
/* Lista de playlists: situação (No ar / Pôr no ar) antes do nome */
.nome-com-situacao { display: flex; align-items: center; gap: 10px; }
.nome-com-situacao > .selo-no-ar, .nome-com-situacao > form { flex: none; min-width: 74px; display: flex; justify-content: center; }
.nome-com-situacao .botao-mini { width: 100%; }
/* Botões pequenos mais quadrados (cantos levemente arredondados) */
.botao-mini, .acoes-playlist .botao-mini, .tabela-playlists .acoes-playlist .botao-mini { border-radius: 5px; }
/* Lista: "No ar" do mesmo tamanho do "Pôr no ar" */
.nome-com-situacao > .selo-no-ar, .nome-com-situacao > form { width: 92px; min-width: 92px; }
.nome-com-situacao > .selo-no-ar { margin-left: 0; justify-content: center; padding: 6px 10px; font-size: 13px; font-weight: 600; border-radius: 5px; line-height: normal; }
.nome-com-situacao .botao-mini { justify-content: center; padding: 6px 10px; }
.relogio-agenda { margin-bottom: 14px; padding: 9px 14px; border-radius: 10px; font-size: 13px; background: rgba(242, 184, 75, 0.14); color: var(--texto); }
.relogio-agenda.ok { background: var(--superficie-2); color: var(--texto-suave); }
.erro-relogio { color: #e5484d; }
/* Editor: as três colunas da mesma altura (a das pastas acompanha a das músicas) */
@media (min-width: 1181px) {
    .editor-colunas.com-pastas { align-items: stretch; }
    .editor-colunas.com-pastas .coluna-pastas { align-self: stretch; position: static; display: flex; flex-direction: column; }
    .editor-colunas.com-pastas .coluna-pastas .lista-pastas { flex: 1 1 0; min-height: 0; max-height: none; }
    .editor-colunas.com-pastas .lista-editor { height: min(520px, 55vh); max-height: none; }
}

/* Área do cliente: barra acima do painel da rádio (abrir em tela cheia no canto superior direito) */
.moldura-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 12px; }
.abrir-tela-cheia { display: inline-flex; align-items: center; gap: 8px; }
.abrir-tela-cheia svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Downloads de conteúdos */
.dl-painel { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.dl-linha { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dl-abas { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--superficie-2); }
.dl-aba { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 9px; color: var(--texto-suave); font-weight: 700; font-size: 14px; text-decoration: none; transition: background .15s, color .15s; }
.dl-aba svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dl-aba:hover { color: var(--texto); }
.dl-aba.ativa { background: var(--primaria); color: #0b1a10; box-shadow: 0 6px 16px -8px var(--primaria); }
.dl-busca { position: relative; flex: 1 1 320px; display: flex; align-items: center; }
.dl-busca svg { position: absolute; left: 14px; width: 18px; height: 18px; fill: none; stroke: var(--texto-suave); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.dl-busca input { width: 100%; padding: 12px 70px 12px 42px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); font: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.dl-busca input:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-suave); }
.dl-contagem { position: absolute; right: 12px; padding: 2px 9px; border-radius: 99px; background: var(--superficie-2); color: var(--texto-suave); font-size: 12px; font-weight: 700; pointer-events: none; }
.dl-categorias { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-categoria { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-suave); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.dl-categoria:hover { color: var(--texto); border-color: var(--texto-suave); }
.dl-categoria.ativa { background: var(--primaria-suave); border-color: var(--primaria); color: var(--primaria); }
.dl-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.dl-cartao { display: flex; flex-direction: column; border-radius: 16px; background: var(--superficie); border: 1px solid var(--borda); overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; }
.dl-cartao:hover { transform: translateY(-2px); border-color: var(--borda-forte); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .7); }
.dl-cartao[hidden] { display: none; }
.dl-cabeca { display: flex; align-items: center; gap: 14px; padding: 16px 16px 12px; }
.dl-capa { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 18px -10px var(--c2); }
.dl-capa img { width: 100%; height: 100%; object-fit: cover; }
.dl-capa b { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.dl-titulo { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dl-titulo h2 { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-titulo small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--texto-suave); font-size: 12px; }
.dl-selo { padding: 1px 8px; border-radius: 99px; background: var(--superficie-2); color: var(--texto); font-weight: 600; }
.dl-lista { list-style: none; margin: 0; padding: 0 10px; flex: 1; }
.dl-lista li { display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 10px; transition: background .12s; }
.dl-lista li:hover, .dl-lista li.tocando { background: var(--superficie-2); }
.dl-ouvir { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texto-suave); cursor: pointer; }
.dl-ouvir svg { width: 14px; height: 14px; fill: currentColor; display: none; }
.dl-num { font-size: 12px; font-weight: 700; }
.dl-lista li:hover .dl-ouvir, .dl-ouvir.tocando { background: var(--primaria); color: #0b1a10; }
.dl-lista li:hover .dl-num, .dl-ouvir.tocando .dl-num { display: none; }
.dl-lista li:hover .dl-ouvir .i-play { display: block; margin-left: 2px; }
.dl-ouvir.tocando .i-play, .dl-lista li:hover .dl-ouvir.tocando .i-play { display: none; }
.dl-ouvir.tocando .i-pausa { display: block; }
.dl-nome { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-tempo { flex: none; font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.dl-baixar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--texto-suave); transition: background .12s, color .12s; }
.dl-baixar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dl-baixar:hover { background: var(--primaria-suave); color: var(--primaria); }
.dl-todos { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 16px 16px; padding: 10px; border-radius: 10px; border: 1px solid var(--borda); color: var(--texto); font-size: 13.5px; font-weight: 700; text-decoration: none; transition: all .15s; }
.dl-todos svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dl-todos:hover { background: var(--primaria); border-color: var(--primaria); color: #0b1a10; }
@media (max-width: 560px) { .dl-abas { width: 100%; } .dl-aba { flex: 1; justify-content: center; } }
/* Downloads: capa menor; sem capa, a logo da BR Rádios */
.dl-cabeca { gap: 12px; padding: 14px 16px 10px; }
.dl-capa { width: 44px; height: 44px; border-radius: 10px; background: var(--superficie-2); box-shadow: none; border: 1px solid var(--borda); }
.dl-capa.sem-capa { background: #111316; padding: 0; }
.dl-capa.sem-capa img { object-fit: contain; }
/* Intercalar no estilo do painel: botão neutro com o ícone na cor do item na playlist */
.botao-intercalar { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda); border-radius: 10px; font-weight: 600; padding: 10px 12px; transition: border-color .15s, background .15s; }
.botao-intercalar svg { color: var(--cor-intercalar, var(--primaria)); width: 18px; height: 18px; }
.botao-intercalar:hover { background: var(--superficie-3); border-color: var(--cor-intercalar, var(--primaria)); }
.botao-intercalar[data-intercalar="vinhetas"] { --cor-intercalar: #3fbf72; }
.botao-intercalar[data-intercalar="comerciais"] { --cor-intercalar: #e05ea8; }
.botao-intercalar[data-intercalar="campanhas"] { --cor-intercalar: #9b6bd8; }
.botao-intercalar[data-intercalar="horacerta"] { --cor-intercalar: #ff8a3d; }

/* ===== Celular: menu tipo aplicativo (ícones embaixo) ===== */
.menu-app, .folha-app, .fundo-folha { display: none; }
@media (max-width: 760px) {
    .menu-topo-itens { display: none; }
    .embutido .menu-topo { display: none; }
    body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
    .menu-app { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(64px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom); background: var(--superficie); border-top: 1px solid var(--borda); box-shadow: 0 -10px 24px -16px rgba(0, 0, 0, .6); }
    .menu-app-embutido .menu-app { position: absolute; bottom: auto; }
    .item-app { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 6px 2px; border: 0; background: none; color: var(--texto-suave); font: inherit; font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .item-app svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .item-app[data-abrir-folha="mais"] svg { fill: currentColor; stroke: none; }
    .item-app span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .item-app.ativo { color: var(--primaria); }
    .item-app.ativo svg { filter: drop-shadow(0 4px 8px var(--primaria-suave)); }
    .fundo-folha:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .5); }
    .folha-app:not([hidden]) { display: flex; flex-direction: column; gap: 2px; position: fixed; left: 10px; right: 10px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 70; padding: 8px 8px 10px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--borda); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); animation: subirFolha .18s ease-out; }
    .menu-app-embutido .folha-app:not([hidden]) { position: absolute; bottom: auto; }
    .folha-alca { width: 38px; height: 4px; margin: 2px auto 6px; border-radius: 4px; background: var(--borda-forte); }
    .folha-app h3 { margin: 0 8px 6px; font-size: 13px; color: var(--texto-suave); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
    .item-folha { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; color: var(--texto); font-size: 15px; font-weight: 600; text-decoration: none; }
    .item-folha svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--texto-suave); }
    .item-folha:active, .item-folha:hover { background: var(--superficie-2); }
    .item-folha.ativo { background: var(--primaria-suave); color: var(--primaria); }
    .item-folha.ativo svg { color: var(--primaria); }
    .item-folha .contador { margin-left: auto; }
    .item-folha .etiqueta-breve { margin-left: auto; }
    .folha-extra { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding: 8px 4px 0; border-top: 1px solid var(--borda); }
    .folha-extra .alternar-tema, .folha-extra .topo-item { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 10px; background: none; color: var(--texto); font: inherit; font-size: 13px; cursor: pointer; }
    .folha-extra .alternar-tema svg, .folha-extra .topo-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
    .folha-extra .topo-conta { flex: 1 1 100%; }
}
@keyframes subirFolha { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Área do cliente no celular: sem "abrir em tela cheia" */
@media (max-width: 760px) { .moldura-topo form { display: none; } .moldura-topo:not(:has(a)) { display: none; } }
@media (max-width: 560px) {
    .dl-abas { width: 100%; }
    .dl-aba { flex: 1 1 0; min-width: 0; justify-content: center; padding: 9px 6px; font-size: 13px; gap: 6px; }
    .dl-aba svg { width: 16px; height: 16px; }
}
@media (max-width: 380px) { .dl-aba svg { display: none; } }
@media (max-width: 760px) { .folha-extra .topo-conta { display: none; } }
/* Painel dentro da área do cliente: a página de fora é que rola (nunca rolagem dentro do painel) */
@media (min-width: 761px) { .embutido { overflow: hidden; } }

/* Área do cliente no celular: menu principal no hambúrguer */
.botao-hamburguer { display: none; }
@media (max-width: 760px) {
    .area-cliente .topo-interno { gap: 10px; padding: 0 14px; }
    .area-cliente .botao-hamburguer { display: inline-flex; align-items: center; justify-content: center; order: -1; width: 42px; height: 42px; padding: 0; border: 1px solid var(--borda); border-radius: 10px; background: none; color: var(--texto); cursor: pointer; }
    .area-cliente .botao-hamburguer svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
    .area-cliente .topo-interno > .logo, .area-cliente .topo-interno > a.logo { margin-right: auto; }
    .area-cliente .menu { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 80; flex-direction: column; gap: 0; padding: 8px 12px 14px; background: var(--superficie); border-bottom: 1px solid var(--borda); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .7); overflow: visible; }
    .area-cliente .menu.aberto { display: flex; }
    .area-cliente .menu a { padding: 13px 12px; border-radius: 10px; font-size: 16px; }
    .area-cliente .menu a.ativo { background: var(--primaria-suave); }
    .area-cliente .menu a.ativo::after { display: none; }
    .area-cliente .usuario { gap: 8px; margin-left: auto; }
    .area-cliente .usuario .avatar { display: none; }
    .area-cliente:has(.moldura-celular) .conteudo { padding-bottom: 0; padding-top: 12px; }
    .moldura-celular { display: block; width: 100%; border: 0; border-radius: 12px; }
}

/* Área do cliente: painéis Streaming, Site e Aplicativo (ícone pequeno no canto; no mouse cresce para o meio, verde) */
.paineis { display: flex; flex-wrap: wrap; gap: 28px; }
.painel-card { position: relative; flex: none; width: 220px; height: 300px; border-radius: 10px; border: 1px solid #9aa0a8; background: transparent; color: #fff; text-decoration: none; overflow: hidden; transition: border-color .35s ease, box-shadow .35s ease; }
:root[data-tema="claro"] .painel-card { color: var(--texto); border-color: var(--borda-forte); }
.painel-card, .painel-card:hover, .painel-card * { text-decoration: none; }
.painel-card-icone { position: absolute; top: 20px; left: 20px; width: 50px; height: 50px; fill: currentColor; transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.2, .9, .25, 1.15), fill .35s ease; }
.painel-card-texto { position: absolute; left: 26px; bottom: 22px; display: flex; flex-direction: column; line-height: 1.05; transition: color .35s ease; }
.painel-card-texto span { font-size: 21px; font-weight: 400; }
.painel-card-texto strong { font-size: 28px; font-weight: 800; letter-spacing: -.01em; }
.painel-card-breve { position: absolute; top: 18px; right: 16px; padding: 3px 8px; border-radius: 99px; background: var(--superficie-2); color: var(--texto-suave); font-size: 11px; font-weight: 700; }
/* Mouse em cima: o ícone sai do canto pequeno e vem grande para o meio; tudo fica verde */
.painel-card:hover, .painel-card:focus-visible { border-color: var(--primaria); box-shadow: 0 16px 36px -22px var(--primaria); outline: none; }
.painel-card:hover .painel-card-icone, .painel-card:focus-visible .painel-card-icone { transform: translate(65px, 62px) scale(2.5); fill: var(--primaria); }
.painel-card:hover .painel-card-texto, .painel-card:focus-visible .painel-card-texto { color: var(--primaria); }
.painel-card.em-breve { cursor: default; }
@media (prefers-reduced-motion: reduce) { .painel-card-icone { transition: fill .2s; } }
/* Celular: os três lado a lado ficam pequenos; viram faixas (ícone à esquerda, nome à direita) */
@media (max-width: 760px) {
    .paineis { gap: 12px; }
    .painel-card { width: 100%; height: 92px; }
    .painel-card-icone { top: 50%; left: 22px; width: 40px; height: 40px; margin-top: -20px; }
    .painel-card-texto { left: 82px; bottom: 50%; transform: translateY(50%); }
    .painel-card-texto span { font-size: 15px; }
    .painel-card-texto strong { font-size: 22px; }
    .painel-card:hover .painel-card-icone, .painel-card:focus-visible .painel-card-icone { transform: scale(1.15); }
}
/* Escala do ícone mais suave (sem "pulo" no fim), na ida e na volta */
.painel-card-icone { transition: transform .75s cubic-bezier(.22, .61, .36, 1), fill .5s ease; will-change: transform; }
.painel-card, .painel-card-texto { transition-duration: .5s; }

/* Administrador acessando a área do cliente */
.faixa-pelo-admin { background: #f59e0b; color: #1a1300; text-align: center; padding: 7px 16px; font-size: 13px; }
.faixa-pelo-admin a { color: #1a1300; font-weight: 700; text-decoration: underline; margin-left: 6px; }
.link-botao { background: none; border: 0; padding: 0; font: inherit; color: var(--primaria); cursor: pointer; margin-right: 12px; }
.link-botao:hover { text-decoration: underline; }

/* Menu da conta no canto superior direito (painéis de sites) */
.menu-conta { position: relative; margin-left: auto; }
.menu-conta > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 10px 6px 6px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie); user-select: none; }
.menu-conta > summary::-webkit-details-marker { display: none; }
.menu-conta > summary:hover { border-color: var(--primaria); }
.menu-conta .avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primaria-suave); color: var(--primaria); font-weight: 800; flex-shrink: 0; }
.menu-conta-nome { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.menu-conta-nome strong { font-size: 13.5px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.menu-conta-nome small { font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.menu-conta-seta { width: 16px; height: 16px; fill: none; stroke: var(--texto-suave); stroke-width: 2; }
.menu-conta-lista { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; z-index: 60; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 6px; box-shadow: var(--sombra); }
.menu-conta-cabeca { display: flex; flex-direction: column; padding: 10px 12px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.menu-conta-cabeca strong { font-size: 14px; color: var(--texto); }
.menu-conta-cabeca small { font-size: 12px; color: var(--texto-suave); overflow-wrap: anywhere; }
.menu-conta-lista a, .menu-conta-lista button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none; color: var(--texto); font: inherit; font-size: 14px; text-align: left; border-radius: 8px; cursor: pointer; text-decoration: none; }
.menu-conta-lista a:hover, .menu-conta-lista button:hover { background: var(--primaria-suave); color: var(--primaria); text-decoration: none; }
.menu-conta-lista svg { width: 18px; height: 18px; flex-shrink: 0; }
.menu-conta-lista form { margin: 0; }
.menu-conta-lista .icone-sol { display: none; }
[data-tema="claro"] .menu-conta-lista .icone-sol { display: inline; }
[data-tema="claro"] .menu-conta-lista .icone-lua { display: none; }
@media (max-width: 760px) { .menu-conta-nome { display: none; } .menu-conta > summary { padding: 4px; } }

/* Dentro de grades o espaço vem do gap: sem margem extra (cards lado a lado alinhados) */
.grade > .cartao { margin-top: 0 !important; }

/* Login: ícone dentro do campo (bonequinho no usuário, cadeado na senha) */
.campo-icone { position: relative; }
.campo-icone .campo-icone-svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--texto-suave); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.campo-icone input { padding-left: 42px !important; }
/* Login do painel do site: "Painel" pequeno em cima e o nome grande embaixo */
.login-cabecalho { margin-bottom: 22px; }
.login-cabecalho small { display: block; color: var(--texto-suave); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.login-cabecalho h1 { margin: 2px 0 0; font-size: 28px; }

/* ---------- Visual minimalista (área Clientes do admin) ----------
   Menos caixas e cantos: seções separadas por uma linha, cantos bem suaves (4-6px). */
.estilo-minimalista .cartao { background: transparent; border: 0; border-top: 1px solid var(--borda); border-radius: 0; box-shadow: none; padding: 22px 0 6px; }
.estilo-minimalista .cartao h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 14px; }
.estilo-minimalista .tabela-cartao, .estilo-minimalista .cartao.tabela-cartao { border: 1px solid var(--borda); border-radius: 6px; padding: 0; background: var(--superficie); }
.estilo-minimalista .campo input, .estilo-minimalista .campo select, .estilo-minimalista .campo textarea { border-radius: 5px; }
.estilo-minimalista .botao, .estilo-minimalista .acao-icone, .estilo-minimalista .copiar-icone { border-radius: 5px; }
.estilo-minimalista .selo { border-radius: 4px; }
.estilo-minimalista .alerta { border-radius: 6px; }
.estilo-minimalista .filtros-abas a { border-radius: 5px; }

/* ---------- Ficha do cliente com abas (admin › Clientes) e tickets ---------- */
.ficha-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.abas-ficha { display: flex; gap: 26px; border-bottom: 1px solid var(--borda); margin: 4px 0 24px; overflow-x: auto; scrollbar-width: none; }
.abas-ficha::-webkit-scrollbar { display: none; }
.abas-ficha a { padding: 10px 0 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--texto-suave); font-weight: 600; white-space: nowrap; text-decoration: none; }
.abas-ficha a:hover { color: var(--texto); text-decoration: none; }
.abas-ficha a.ativa { color: var(--texto); border-bottom-color: var(--primaria); }
.abas-ficha small { color: var(--texto-suave); font-weight: 600; margin-left: 2px; }
.abas-ficha.abas-sub { gap: 22px; margin: 18px 0 8px; font-size: 14px; }
.estilo-minimalista .titulo-com-acao { margin-bottom: 14px; }
.ficha-plano { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.lista-servicos { display: flex; flex-direction: column; gap: 2px; }
.lista-servicos a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 6px; color: var(--texto); text-decoration: none; border-left: 2px solid transparent; }
.lista-servicos a:hover { background: var(--sobreposicao); text-decoration: none; }
.lista-servicos a.ativo { background: var(--superficie-2); border-left-color: var(--primaria); }
.lista-servicos a small { color: var(--texto-suave); font-size: 13px; }
.lista-servicos a .selo { justify-self: start; margin-top: 4px; }
.lista-servicos a.novo { color: var(--primaria); font-weight: 600; margin-top: 6px; }
.painel-servico-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.painel-servico-topo h2 { font-size: 22px; font-weight: 800; }
.painel-servico-topo p { margin: 6px 0 0; }
.acoes-servico { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 16px; }
.painel-servico .formulario { margin-top: 16px; }
.formulario-dominio { margin-top: 18px; }
.painel-servico .campo input:disabled { background: transparent; border-style: dashed; color: var(--texto-suave); cursor: default; }
.acoes-linha { text-align: right; white-space: nowrap; }
.baixa-rapida { display: inline-block; text-align: left; }
.baixa-rapida[open] { white-space: normal; }
.baixa-rapida > form { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.baixa-rapida select { min-height: 38px; }
.email-aberto { margin-bottom: 24px; }
.email-assunto { font-size: 18px; font-weight: 700; }
.email-aberto p { margin: 6px 0 0; }
.email-corpo { display: block; width: 100%; height: 560px; margin-top: 14px; border: 1px solid var(--borda); border-radius: 6px; background: #f2f4f3; }
.tabela tr.linha-ativa td { background: var(--sobreposicao); }
.ticket-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ticket-topo h2 { font-size: 20px; font-weight: 800; }
.ticket-topo p { margin: 6px 0 0; }
.ticket-mensagens { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ticket-mensagem { border: 1px solid var(--borda); border-radius: 6px; padding: 14px 16px; background: var(--superficie); max-width: 820px; }
.ticket-mensagem.da-equipe { border-left: 3px solid var(--primaria); }
.ticket-mensagem.do-cliente { border-left: 3px solid var(--borda-forte); }
.ticket-autor { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 14px; }
.ticket-autor small { color: var(--texto-suave); font-weight: 500; }
.ticket-responder { max-width: 820px; }
.ticket-responder .barra-acoes { align-items: center; flex-wrap: wrap; }
.ticket-responder .campo-status-resposta { margin: 0; }
@media (max-width: 900px) {
    .ficha-plano { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .lista-servicos { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
    .lista-servicos a { min-width: 200px; border-left: 0; border-bottom: 2px solid transparent; }
    .lista-servicos a.ativo { border-bottom-color: var(--primaria); }
    .lista-servicos a.novo { min-width: 140px; margin-top: 0; align-content: center; }
    .email-corpo { height: 440px; }
}

/* Planos: caixinhas do que está incluído */
.itens-plano { display: flex; flex-wrap: wrap; gap: 10px; }
.item-plano { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--borda); border-radius: 6px; cursor: pointer; font-weight: 600; color: var(--texto); }
.item-plano:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); }
.item-plano input { width: 18px; height: 18px; accent-color: var(--primaria); }

/* Rádio no servidor, dentro da sub-aba Dados do serviço */
.radio-servidor { border: 1px solid var(--borda); border-radius: 6px; padding: 14px 16px; }
.separador-servico { border-top: 1px solid var(--borda); margin: 18px 0; }
.lista-dominios { display: grid; gap: 18px; }
.itens-servico { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; font-size: 14px; }
.itens-servico .item-plano { padding: 7px 12px; font-size: 13px; }
.itens-servico.salvando { opacity: .6; pointer-events: none; }
.ligar-site { margin-top: 18px; border-top: 1px solid var(--borda); padding-top: 14px; }
.ligar-site summary { cursor: pointer; font-weight: 600; }
.ligar-site form { margin-top: 12px; flex-wrap: wrap; }

/* Faturas na ficha do cliente: itens cobrados, nova fatura e edição */
.itens-cobrados { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.itens-cobrados li { display: flex; justify-content: space-between; gap: 12px; }
.nova-fatura { margin-bottom: 18px; }
.nova-fatura > summary { display: inline-flex; list-style: none; }
.nova-fatura > summary::-webkit-details-marker { display: none; }
.nova-fatura:not([open]) { background: none; border: 0; padding: 0; }
.nova-fatura h2 { margin: 16px 0 12px; font-size: 16px; }
.form-fatura .itens-fatura { display: grid; gap: 8px; margin-bottom: 10px; }
.item-fatura { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 120px auto; gap: 8px; align-items: center; }
.linha-editar-fatura .item-fatura { grid-template-columns: 1fr 120px auto; }
.item-fatura .item-valor { text-align: right; }
.rodape-itens { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.linha-editar-fatura > td { background: var(--fundo-suave, rgba(255,255,255,.02)); padding: 16px; }
@media (max-width: 720px) { .item-fatura, .linha-editar-fatura .item-fatura { grid-template-columns: 1fr 100px auto; } .item-fatura select { grid-column: 1 / -1; } }

/* ================= Área do cliente (faixa verde, estilo do painel antigo) ================= */
.area-cliente-nova .topo { border-bottom: 1px solid var(--borda); }
.faixa-cliente { background: #00a650; position: sticky; top: 0; z-index: 60; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.faixa-cliente-interna { max-width: 1180px; margin: 0 auto; display: flex; justify-content: center; gap: 6px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.faixa-cliente-interna::-webkit-scrollbar { display: none; }
.faixa-cliente a { display: inline-flex; align-items: center; gap: 8px; padding: 15px 14px 13px; color: rgba(255, 255, 255, .85); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent; }
.faixa-cliente a:hover { color: #fff; }
.faixa-cliente a.ativo { color: #fff; border-bottom-color: #fff; }
.faixa-cliente svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.faixa-cliente .contador { background: #fcc934; color: #2a2000; }
:root:not([data-tema="claro"]) .faixa-cliente { background: #0d7a3c; }

.saudacao { margin: 6px 0 24px; }
.saudacao h1 { margin: 0; font-size: clamp(26px, 4vw, 34px); font-weight: 400; color: var(--texto-suave); line-height: 1.2; }
.saudacao h1 strong { color: var(--primaria); font-weight: 800; }
.saudacao p.sub { margin: 2px 0 10px; font-size: clamp(20px, 3vw, 26px); color: var(--texto-suave); font-weight: 300; }
.saudacao p.texto { margin: 0; color: var(--texto-suave); max-width: 760px; line-height: 1.6; }

.titulo-area { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 6px 0 22px; flex-wrap: wrap; }
.titulo-area h1 { margin: 0; font-size: 30px; font-weight: 800; }
.titulo-area p { margin: 4px 0 0; color: var(--texto-suave); }
.botao-contorno { background: transparent; color: var(--primaria); border: 2px solid var(--primaria); }
.botao-contorno:hover { background: var(--primaria-suave); }

.cartoes-numero { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.cartao-numero { border-radius: 12px; padding: 18px 22px; color: #fff; min-height: 86px; }
.cartao-numero span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .95; }
.cartao-numero strong { display: block; font-size: 30px; font-weight: 800; margin-top: 2px; line-height: 1.1; }
.cn-vermelho { background: linear-gradient(135deg, #ef4444, #dc2626); }
.cn-laranja { background: linear-gradient(135deg, #f59e0b, #d97706); }
.cn-laranja-forte { background: linear-gradient(135deg, #f97316, #ea580c); }
.cn-verde { background: linear-gradient(135deg, #22c55e, #16a34a); }
.cn-escuro { background: linear-gradient(135deg, #334155, #1e293b); }
.cn-azul { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.cn-roxo { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.cn-verde-agua { background: linear-gradient(135deg, #14b8a6, #0d9488); }

/* Assinaturas */
.assinaturas { display: grid; gap: 18px; }
.assinatura { border: 1.5px solid #86efac; border-radius: 14px; background: var(--superficie); overflow: hidden; }
.assinatura.suspensa { border-color: #fca5a5; }
.assinatura-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; background: rgba(34, 197, 94, .08); border-bottom: 1px solid var(--borda); }
.assinatura.suspensa .assinatura-topo { background: rgba(239, 68, 68, .07); }
.assinatura-topo h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.assinatura-topo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.assinatura-alvo { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--borda); }
.assinatura-alvo .icone-alvo { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--primaria-suave); color: var(--primaria); flex-shrink: 0; }
.assinatura-alvo .icone-alvo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.assinatura-alvo strong { display: block; }
.assinatura-alvo small { color: var(--texto-suave); }
.assinatura-linhas { margin: 0; padding: 4px 24px 8px; }
.assinatura-linhas div { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--borda); }
.assinatura-linhas div:last-child { border-bottom: 0; }
.assinatura-linhas dt { color: var(--texto-suave); }
.assinatura-linhas dd { margin: 0; font-weight: 600; }
.assinatura-linhas dd.destaque-laranja { color: #ea580c; }
.selo-pilula { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #dcfce7; color: #15803d; }
.selo-pilula.vermelho { background: #fee2e2; color: #b91c1c; }
.selo-pilula.cinza { background: var(--superficie-2); color: var(--texto-suave); }
.selo-pilula.amarelo { background: #fef3c7; color: #a16207; }

/* Domínios */
.lista-dominios-cliente { display: grid; gap: 14px; }
.dominio-cartao { border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); overflow: hidden; }
.dominio-cabeca { display: flex; align-items: center; gap: 14px; padding: 18px 22px; flex-wrap: wrap; }
.dominio-cabeca .icone-alvo { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--primaria-suave); color: var(--primaria); }
.dominio-cabeca .icone-alvo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.dominio-cabeca strong { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; }
.dominio-cabeca small { display: block; color: var(--texto-suave); margin-top: 2px; }
.dominio-rodape { display: flex; gap: 40px; padding: 14px 22px; border-top: 1px solid var(--borda); flex-wrap: wrap; font-size: 14px; }
.dominio-rodape span { display: block; color: var(--texto-suave); font-size: 13px; }
.dominio-rodape .destaque-laranja { color: #ea580c; font-weight: 600; }
.registrar-dominio { margin-bottom: 18px; }

/* Parceiros */
.link-indicacao { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.link-indicacao input { flex: 1; min-width: 240px; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Perfil */
.perfil-grade { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.perfil-cartao { border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); overflow: hidden; text-align: center; padding-bottom: 22px; }
.perfil-capa { height: 100px; background: linear-gradient(180deg, rgba(34, 197, 94, .16), rgba(34, 197, 94, .05)); }
.perfil-avatar { width: 96px; height: 96px; margin: -52px auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); border: 4px solid var(--superficie); box-shadow: 0 0 0 1px var(--borda); color: var(--primaria); font-size: 34px; font-weight: 800; }
.perfil-cartao h2 { margin: 0; font-size: 18px; }
.perfil-cartao p { margin: 4px 0 0; color: var(--texto-suave); font-size: 14px; }
.perfil-contatos { display: grid; gap: 12px; margin-top: 16px; }
.perfil-contato { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
.perfil-contato .icone-alvo { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.perfil-contato .icone-alvo svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.perfil-contato small { display: block; color: var(--texto-suave); font-size: 12px; }
.perfil-contato strong { font-size: 14px; word-break: break-all; }
.ic-azul { background: #dbeafe; color: #2563eb; } .ic-verde { background: #dcfce7; color: #16a34a; } .ic-roxo { background: #ede9fe; color: #7c3aed; }
.perfil-secao h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.perfil-secao + .perfil-secao { margin-top: 26px; }
.perfil-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.perfil-campo { border: 1px solid var(--borda); border-radius: 12px; padding: 14px 18px; background: var(--superficie); display: grid; gap: 6px; }
.perfil-campo label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.perfil-campo input, .perfil-campo select { border: 0; background: transparent; padding: 0; font-size: 15px; color: var(--texto); min-height: 26px; box-shadow: none; }
.perfil-campo input:focus, .perfil-campo select:focus { outline: none; }
.perfil-campo:focus-within { border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-suave); }
.perfil-campo.largura-total { grid-column: 1 / -1; }
.perfil-campo .valor-fixo { font-size: 15px; }
@media (max-width: 860px) { .perfil-grade { grid-template-columns: 1fr; } }

/* Suporte e pagamentos: tabela mais limpa */
.area-cliente-nova .tabela th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.ponto-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: 8px; vertical-align: middle; }
.ponto-status.vermelho { background: #ef4444; } .ponto-status.laranja { background: #f59e0b; }
.perfil-secao h2 svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--texto-suave); }
.lista-dominios-admin { display: grid; gap: 8px; }
.linha-dominio-admin { display: grid; grid-template-columns: minmax(180px, 1.4fr) 130px 170px 150px 150px minmax(130px, 1fr) auto auto; gap: 8px; align-items: center; }
@media (max-width: 1100px) { .linha-dominio-admin { grid-template-columns: 1fr 1fr; } }
.area-cliente-nova .usuario { margin-left: auto; }
.faixa-cliente-interna { justify-content: safe center; }
.faixa-cliente { max-width: 100vw; overflow: hidden; }
.perfil-secao .barra-acoes { margin-top: 14px; }
@media (max-width: 700px) {
    .faixa-cliente-interna { justify-content: flex-start; padding: 0 6px; }
    .faixa-cliente a { padding: 13px 10px 11px; font-size: 12px; }
    .cartoes-numero { grid-template-columns: 1fr 1fr; gap: 10px; }
    .cartao-numero { padding: 14px 16px; min-height: 0; }
    .cartao-numero strong { font-size: 22px; }
    .titulo-area h1 { font-size: 24px; }
    .assinatura-topo, .assinatura-alvo { padding-left: 16px; padding-right: 16px; }
    .assinatura-linhas { padding: 4px 16px 8px; }
}
.tabela-cartao { position: relative; } /* o texto escondido para leitores de tela não estica a página no celular */
.link-indicacao input { padding: 11px 14px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie-2); color: var(--texto); font-size: 14px; }
.link-indicacao .botao-icone { padding: 11px 16px; }

/* Topo da área do cliente: fixo ao rolar, com os painéis (Streaming, Site, Aplicativo); a faixa verde fica no lugar */
.area-cliente-nova .topo { position: sticky; top: 0; z-index: 70; background: var(--superficie); backdrop-filter: none; }
.area-cliente-nova .faixa-cliente { position: static; }
.servicos-topo { display: flex; gap: 4px; margin-left: 28px; }
.servicos-topo a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; color: var(--texto-suave); text-decoration: none; font-weight: 600; font-size: 15px; }
.servicos-topo a:hover { color: var(--texto); background: var(--sobreposicao); }
.servicos-topo a.ativo { color: var(--primaria); background: var(--primaria-suave); }
.servicos-topo svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
    .servicos-topo { margin-left: 4px; gap: 0; }
    .servicos-topo a { padding: 9px 10px; }
    .servicos-topo span { display: none; }
}
:root body.area-cliente-nova header.topo { background: var(--superficie); }
/* Topo da área do cliente: logo e painéis no centro; conta à direita */
@media (min-width: 761px) {
    .area-cliente-nova .topo-interno { display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; column-gap: 0; }
    .area-cliente-nova .topo-interno > .logo, .area-cliente-nova .topo-interno > a.logo { grid-column: 2; margin: 0; }
    .area-cliente-nova .servicos-topo { grid-column: 3; }
    .area-cliente-nova .usuario { grid-column: 4; justify-self: end; margin-left: 0; }
}
/* Painel embutido abrindo: aviso no lugar e moldura escondida até ficar pronta (sem piscar) */
.moldura-radio.carregando { visibility: hidden; height: 0 !important; }
.moldura-carregando { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 320px; color: var(--texto-suave); font-size: 15px; }
.moldura-carregando .girando { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--borda); border-top-color: var(--primaria); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
/* Painel antigo (PlusCast): altura da tela, rola por dentro */
.moldura-radio.moldura-antiga { height: calc(100vh - 180px); min-height: 560px; border: 1px solid var(--borda); border-radius: 12px; background: #fff; }
/* Painel antigo (PlusCast): tela toda, sem bordas, logo abaixo do topo */
.conteudo:has(> .moldura-antiga) { max-width: none; width: 100%; padding: 0; margin: 0; }
body:has(.moldura-antiga) { overflow: hidden; }
iframe.moldura-antiga { display: block; width: 100%; height: calc(100vh - 80px); border: 0; border-radius: 0; background: #111316; }
.precos-dominio { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.precos-dominio span { padding: 6px 12px; border-radius: 999px; background: var(--primaria-suave); font-size: 13px; }
/* Campos das linhas de itens da fatura e dos domínios do cliente: mesmo visual dos outros campos */
.item-fatura input, .item-fatura select, .linha-dominio-admin input, .linha-dominio-admin select {
    width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--borda);
    background: var(--fundo); color: var(--texto); font: inherit; min-width: 0;
}
.item-fatura input:focus, .item-fatura select:focus, .linha-dominio-admin input:focus, .linha-dominio-admin select:focus { border-color: var(--primaria); outline: none; }
.estilo-minimalista .item-fatura input, .estilo-minimalista .item-fatura select, .estilo-minimalista .linha-dominio-admin input, .estilo-minimalista .linha-dominio-admin select { border-radius: 5px; }
.item-fatura .item-valor { text-align: right; }
.item-fatura .botao-pequeno { padding: 11px 14px; }
.nova-fatura h2 { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--texto); }

/* Página de pagamento da fatura (área do cliente) */
.pagina-fatura { max-width: 520px; margin: 0 auto; display: grid; gap: 16px; }
.pagina-fatura-cabeca { display: flex; justify-content: space-between; align-items: center; }
.pagina-fatura-cabeca p { margin: 0; color: var(--texto-suave); font-size: 14px; }
.cartao-fatura { border: 1px solid var(--borda); border-radius: 16px; background: var(--superficie); padding: 22px 24px; }
.cartao-fatura-topo { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--borda); }
.cartao-fatura-topo h1 { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 10px; }
.cartao-fatura-topo h1 svg { width: 22px; height: 22px; fill: none; stroke: var(--texto-suave); stroke-width: 1.8; }
.cartao-fatura-valores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.cartao-fatura-valores span, .rotulo-descricao { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 4px; }
.cartao-fatura-valores strong { font-size: 20px; }
.cartao-fatura-valores strong.valor { font-size: 28px; color: var(--primaria); font-weight: 800; }
.descricao-fatura { background: var(--superficie-2); border-radius: 12px; padding: 14px 18px; display: grid; gap: 6px; font-weight: 600; font-size: 14px; line-height: 1.5; }
.descricao-fatura div { display: flex; justify-content: space-between; gap: 12px; }
.cartao-fatura h2 { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--borda); font-size: 17px; }
.formas-pagamento { display: grid; gap: 10px; }
.formas-pagamento form { margin: 0; }
.forma-pagamento { width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1.5px solid var(--borda); border-radius: 12px; background: var(--superficie); color: var(--texto); cursor: pointer; text-align: left; font: inherit; }
.forma-pagamento:hover, .forma-pagamento.destaque { border-color: var(--primaria); background: var(--primaria-suave); }
.forma-icone { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.forma-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.forma-pix { background: #dcfce7; color: #16a34a; } .forma-boleto { background: #ffedd5; color: #ea580c; } .forma-cartao { background: #dbeafe; color: #2563eb; }
.forma-texto { flex: 1; display: grid; gap: 3px; }
.forma-texto small { color: var(--texto-suave); font-size: 13px; }
.forma-seta { width: 18px; height: 18px; fill: none; stroke: var(--texto-suave); stroke-width: 2; }
.forma-pagamento.destaque .forma-seta { stroke: var(--primaria); }

/* Página pública da fatura (link do e-mail), estilo Seleto */
body.fatura-publica { background: #f2f3f5; color: #15191c; min-height: 100vh; }
.fp-faixa { background: linear-gradient(135deg, #052e1a 0%, #0a4d2a 55%, #0f7a3c 100%); height: 220px; display: flex; justify-content: center; align-items: flex-start; padding-top: 24px; }
.fp-faixa .logo { color: #fff; }
.fp-centro { max-width: 440px; margin: -122px auto 40px; padding: 0 16px; }
.fp-cartao { background: #fff; border-radius: 16px; box-shadow: 0 12px 34px rgba(15, 26, 46, .14); padding: 26px 22px 22px; }
.fp-numero { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; }
.fp-cartao h1 { margin: 8px 0 4px; font-size: 21px; color: #111827; }
.fp-descricao { margin: 0 0 14px; color: #6b7280; font-size: 14px; line-height: 1.5; }
.fp-linhas { margin: 0 0 18px; border-top: 1px solid #e5e7eb; }
.fp-linhas div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e5e7eb; font-size: 15px; }
.fp-linhas dt { color: #374151; }
.fp-linhas dd { margin: 0; font-weight: 700; color: #111827; }
.fp-linhas .fp-item { font-size: 13px; padding: 8px 0; }
.fp-linhas .fp-item dd { font-weight: 600; color: #374151; }
.fp-linhas dd.fp-vencida { color: #dc2626; }
.fp-botoes { display: grid; gap: 10px; }
.fp-botoes form { margin: 0; }
.fp-botao { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 16px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; color: #111827; font: inherit; font-size: 15px; cursor: pointer; }
.fp-botao:hover { border-color: #9ca3af; }
.fp-botao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fp-principal { background: #149142; border-color: #149142; color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(20, 145, 66, .3); }
.fp-principal:hover { background: #0f7a37; border-color: #0f7a37; }
.fp-paga { background: #dcfce7; color: #15803d; border-radius: 10px; padding: 14px 16px; font-weight: 600; text-align: center; }
.fp-rodape { text-align: center; color: #6b7280; font-size: 13px; margin-top: 18px; }
.fp-rodape a { color: #149142; }
.fatura-publica .alerta { margin: 0 0 14px; font-size: 14px; }
.fp-pix { display: grid; justify-items: center; gap: 12px; text-align: center; }
.fp-pix img { width: 200px; height: 200px; image-rendering: pixelated; }
.fp-pix p { margin: 0; color: #4b5563; font-size: 14px; line-height: 1.5; }
.fp-pix textarea { width: 100%; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #374151; resize: none; background: #fff; word-break: break-all; }
.fp-aguardando { display: flex; align-items: center; gap: 8px; font-size: 13px !important; }
.fp-aguardando .girando { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #d1d5db; border-top-color: #149142; animation: girar .8s linear infinite; display: inline-block; }
.fp-outras { font-size: 13px; color: #6b7280; }

/* Área do cliente: serviço esperando o 1º pagamento */
.aguardando-pagamento { max-width: 560px; margin: 24px auto; text-align: center; padding: 36px 28px; }
.aguardando-pagamento h1 { font-size: 22px; line-height: 1.3; margin: 12px 0 10px; }
.aguardando-pagamento p { margin: 0 0 10px; }
.aguardando-pagamento .botao { margin-top: 14px; min-width: 220px; justify-content: center; }
.aguardando-icone { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(245, 158, 11, .14); color: #d97706; }

/* ===== Contratação online (pedido em etapas) — sempre claro ===== */
body.pedido { background: #f4f6f5; color: #1f2937; min-height: 100vh; display: flex; flex-direction: column; }
body.pedido a { color: #0e9f4f; }
.pd-topo { background: #fff; border-bottom: 1px solid #e5e7eb; }
.pd-topo-interno { max-width: 1120px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pd-topo .logo, .pd-topo .logo-texto { color: #111827; }
.pd-ja-cliente { font-weight: 600; font-size: 14px; text-decoration: none; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 8px 14px; color: #374151 !important; background: #fff; }
.pd-ja-cliente:hover { border-color: #0e9f4f; color: #0e9f4f !important; }
.pd-conteudo { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 24px 16px 40px; }
.pd-rodape { text-align: center; color: #6b7280; font-size: 13px; padding: 18px 16px 28px; }

.pd-passos { list-style: none; display: flex; justify-content: center; gap: 8px; margin: 0 auto 22px; padding: 0; flex-wrap: wrap; }
.pd-passos li { display: flex; align-items: center; gap: 8px; color: #9ca3af; font-size: 14px; font-weight: 600; }
.pd-passos li + li::before { content: ""; width: 34px; height: 2px; background: #d1d5db; margin-right: 4px; }
.pd-passo-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e5e7eb; color: #6b7280; font-size: 13px; }
.pd-passos li.atual { color: #111827; }
.pd-passos li.atual .pd-passo-num { background: #0e9f4f; color: #fff; box-shadow: 0 0 0 4px rgba(14, 159, 79, .15); }
.pd-passos li.feito { color: #0e9f4f; }
.pd-passos li.feito .pd-passo-num { background: #d1fae5; color: #047857; }

.pd-cartao { background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; padding: 28px; box-shadow: 0 6px 24px rgba(17, 24, 39, .05); }
.pd-cartao + .pd-cartao { margin-top: 18px; }
.pd-cartao-estreito { max-width: 480px; margin: 0 auto; }
.pd-titulo { font-size: 26px; font-weight: 800; margin: 0 0 6px; color: #111827; letter-spacing: -.01em; }
.pd-titulo-2 { font-size: 22px; font-weight: 800; margin: 0 0 16px; color: #111827; }
.pd-sub { color: #6b7280; margin: 0 0 20px; font-size: 15px; }
.pd-centro { text-align: center; }
.pd-plano-escolhido { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1.5px solid #0e9f4f; background: #f0fdf4; border-radius: 12px; padding: 12px 16px; margin-bottom: 22px; }
.pd-plano-escolhido small { display: block; color: #6b7280; font-size: 12px; }
.pd-plano-escolhido strong { color: #047857; font-size: 17px; }
.pd-plano-preco { font-weight: 800; color: #111827; white-space: nowrap; }
.pd-plano-escolhido .pd-plano-preco small { display: inline; font-weight: 500; color: #6b7280; font-size: 13px; }

.pd-campo { margin-bottom: 14px; }
.pd-campo > label { display: block; font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 6px; text-transform: none; }
.pd-obrig { color: #dc2626; }
body.pedido input:not([type=checkbox]):not([type=radio]), body.pedido select, body.pedido textarea {
    width: 100%; background: #fff; color: #111827; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 13px 14px; font: inherit; font-size: 15px; box-sizing: border-box; transition: border-color .15s, box-shadow .15s;
}
body.pedido input::placeholder, body.pedido textarea::placeholder { color: #9ca3af; }
body.pedido input:focus, body.pedido select:focus, body.pedido textarea:focus { outline: none; border-color: #0e9f4f; box-shadow: 0 0 0 3px rgba(14, 159, 79, .14); }
body.pedido .com-erro, body.pedido .com-erro input { border-color: #ef4444 !important; }
.pd-entrada { position: relative; }
.pd-entrada input { padding-right: 46px !important; }
.pd-entrada > svg, .pd-olho svg { width: 20px; height: 20px; fill: none; stroke: #6b7280; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pd-entrada > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.pd-olho { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; cursor: pointer; display: grid; }
.pd-telefone { display: flex; gap: 8px; }
.pd-telefone .pd-entrada { flex: 1; }
.pd-ddi { display: flex; align-items: center; gap: 6px; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 0 12px; font-weight: 600; color: #374151; background: #fff; white-space: nowrap; }
.pd-bandeira { width: 22px; height: 15px; border-radius: 3px; background: linear-gradient(#009c3b, #009c3b); position: relative; overflow: hidden; }
.pd-bandeira::before { content: ""; position: absolute; inset: 2px 3px; background: #ffdf00; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pd-bandeira::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #002776; left: 8px; top: 4.5px; }
.pd-erro { display: block; color: #dc2626; font-size: 13px; margin-top: 5px; }
.pd-alerta { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 12px; padding: 11px 14px; margin: 0 0 16px; font-size: 14px; }
.pd-aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #4b5563; margin: 16px 0 6px; line-height: 1.45; cursor: pointer; }
.pd-aceite input { width: 20px; height: 20px; accent-color: #0e9f4f; flex: none; margin-top: 1px; }
.pd-botao { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #0e9f4f; color: #fff; border: 0; border-radius: 12px; padding: 15px 22px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 16px; transition: background .15s, transform .1s; }
.pd-botao:hover:not(:disabled) { background: #0b8441; }
.pd-botao:active:not(:disabled) { transform: translateY(1px); }
.pd-botao:disabled { background: #d1d5db; color: #fff; cursor: not-allowed; }
.pd-botao-auto { width: auto; min-width: 170px; margin-top: 0; }

.pd-duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.pd-resumo { position: sticky; top: 16px; padding: 22px; }
.pd-resumo-cabeca h2 { font-size: 18px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid #eef0f2; color: #111827; }
.pd-resumo-plano { padding-bottom: 12px; border-bottom: 1px solid #eef0f2; }
.pd-resumo-plano strong { display: block; font-size: 15px; color: #111827; margin-bottom: 4px; }
.pd-resumo-plano small { display: block; color: #6b7280; font-size: 13px; margin-top: 3px; }
.pd-resumo-itens { margin: 0; padding: 10px 0; display: grid; gap: 8px; border-bottom: 1px solid #eef0f2; }
.pd-resumo-itens div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.pd-resumo-itens dt { color: #4b5563; }
.pd-resumo-itens dd { margin: 0; font-weight: 700; color: #111827; white-space: nowrap; }
.pd-desconto dd { color: #0e9f4f !important; }
.pd-hoje { margin: 16px 0 6px; background: #ecfdf3; border: 1px solid #bbf7d0; border-radius: 14px; padding: 16px; text-align: center; }
.pd-hoje span { display: block; color: #047857; font-size: 13px; font-weight: 600; }
.pd-hoje strong { display: block; font-size: 30px; font-weight: 800; color: #111827; }
.pd-resumo-sub { font-size: 14px; color: #6b7280; margin: 18px 0 10px; font-weight: 600; }
.pd-metodos { display: grid; gap: 10px; }
.pd-metodo { display: flex; align-items: center; gap: 12px; border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 13px 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.pd-metodo input { width: 18px; height: 18px; accent-color: #0e9f4f; flex: none; }
.pd-metodo:has(input:checked) { border-color: #0e9f4f; background: #f0fdf4; }
.pd-metodo strong { display: block; font-size: 15px; color: #111827; }
.pd-metodo small { display: block; color: #6b7280; font-size: 12px; }
.pd-metodo-icone { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; flex: none; }
.pd-metodo-icone.pix { background: #e0f7f5; color: #32bcad; }
.pd-metodo-icone svg.pd-icone-pix { fill: currentColor; stroke: none; width: 22px; height: 22px; }
.pd-metodo-icone.boleto { background: #dbeafe; color: #1d4ed8; }
.pd-metodo-icone.cc { background: #f3e8ff; color: #7c3aed; }
.pd-etiqueta { display: inline-block; font-style: normal; background: #dcfce7; color: #047857; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px; margin-top: 4px; letter-spacing: .03em; }
.pd-garantias { list-style: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid #eef0f2; display: grid; gap: 6px; font-size: 13px; color: #4b5563; }
.pd-garantias li::before { content: "✓ "; color: #0e9f4f; font-weight: 800; }
.pd-voltar { display: inline-block; margin-top: 14px; font-size: 14px; color: #6b7280 !important; text-decoration: none; }
.pd-voltar:hover { color: #111827 !important; }

.pd-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.pd-modelo { position: relative; border: 2.5px solid #e5e7eb; border-radius: 18px; padding: 26px 12px 12px; cursor: pointer; background: #f9fafb; transition: border-color .15s, box-shadow .15s; display: flex; flex-direction: column; }
.pd-modelo input { position: absolute; opacity: 0; pointer-events: none; }
.pd-modelo:has(input:checked) { border-color: #0e9f4f; box-shadow: 0 0 0 4px rgba(14, 159, 79, .15); background: #f0fdf4; }
.pd-modelo:has(input:focus-visible) { outline: 3px solid #0e9f4f; outline-offset: 2px; }
.pd-modelo-selo { position: absolute; top: -12px; right: 16px; background: #f97316; color: #fff; font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 8px; letter-spacing: .02em; }
.pd-modelo-tela { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #111827; border: 6px solid #1f2937; }
.pd-modelo-tela img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.pd-modelo-vazio { display: grid; gap: 6px; padding: 10px; height: 100%; box-sizing: border-box; grid-template-rows: 14px 1fr 24px 24px; background: linear-gradient(160deg, #1f2937, #0f172a); }
.pd-modelo-vazio span { background: rgba(255, 255, 255, .12); border-radius: 4px; }
.pd-modelo-vazio span:nth-child(2) { background: linear-gradient(120deg, rgba(14, 159, 79, .55), rgba(252, 201, 52, .45)); }
.pd-modelo-acoes { display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pd-modelo-marcar { font-size: 13px; font-weight: 700; color: #6b7280; padding: 8px 0; }
.pd-modelo:has(input:checked) .pd-modelo-marcar { color: #047857; }
.pd-modelo:has(input:checked) .pd-modelo-marcar::before { content: "✓ "; }
.pd-ver-exemplo { border: 1.5px solid #0e9f4f; color: #0e9f4f !important; background: #fff; border-radius: 10px; padding: 7px 14px; font-weight: 700; font-size: 13px; text-decoration: none; }

.pd-opcoes-dominio { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pd-opcao { position: relative; border: 2px solid #e5e7eb; border-radius: 16px; padding: 22px 14px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: border-color .15s, background .15s; }
.pd-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.pd-opcao:has(input:checked) { border-color: #0e9f4f; background: #f0fdf4; }
.pd-opcao:has(input:focus-visible) { outline: 3px solid #0e9f4f; outline-offset: 2px; }
.pd-opcao strong { color: #111827; font-size: 15px; }
.pd-opcao small { color: #6b7280; font-size: 13px; }
.pd-opcao-icone svg { width: 38px; height: 38px; fill: none; stroke: #0e9f4f; stroke-width: 1.6; }
.pd-metodo-icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pd-novo { position: absolute; top: -10px; right: -6px; background: #f97316; color: #fff; font-size: 11px; font-weight: 800; padding: 6px 9px; border-radius: 50%; }
.pd-caixa-dominio { margin-top: 16px; background: #0e9f4f; border-radius: 16px; padding: 18px; }
.pd-caixa-dominio label { color: #fff; font-weight: 700; font-size: 14px; display: block; margin-bottom: 10px; }
.pd-linha-dominio, .pd-linha-cupom { display: flex; gap: 10px; }
.pd-linha-dominio input { flex: 1; border-color: #fff !important; }
.pd-verificar { background: rgba(255, 255, 255, .22); color: #fff; border: 0; border-radius: 12px; padding: 0 22px; font: inherit; font-weight: 700; cursor: pointer; }
.pd-verificar:hover { background: rgba(255, 255, 255, .32); }
.pd-caixa-dominio .pd-resposta-dominio { color: #fff; }
.pd-resposta-dominio { margin: 10px 0 0; font-size: 14px; font-weight: 600; min-height: 0; }
.pd-resposta-dominio:empty { display: none; }
.pd-resposta-dominio.ok::before { content: "✓ "; }
.pd-resposta-dominio.erro::before { content: "✕ "; }
.pd-cartao .pd-resposta-dominio.ok { color: #047857; }
.pd-cartao .pd-resposta-dominio.erro { color: #dc2626; }
.pd-caixa-dominio .pd-resposta-dominio.ok, .pd-caixa-dominio .pd-resposta-dominio.erro { color: #fff; background: rgba(0, 0, 0, .15); padding: 8px 12px; border-radius: 10px; }
.pd-precos-dominio { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 14px; color: #dcfce7; font-size: 13px; }
.pd-precos-dominio b { color: #fff; }
.pd-caixa-dominio .pd-dica { color: #ecfdf5; margin: 12px 0 0; }
.pd-dica { color: #6b7280; font-size: 13px; margin: 10px 0 0; }
.pd-rodape-etapa { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #eef0f2; }
.pd-rodape-etapa .pd-voltar { margin: 0; }

.pd-secao { font-size: 17px; font-weight: 800; color: #111827; margin: 26px 0 14px; }
.pd-secao:first-of-type { margin-top: 8px; }
.pd-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pd-largo { grid-column: 1 / -1; }
.pd-acesso { margin: 0; padding: 10px 14px; background: #f9fafb; border-radius: 12px; font-size: 14px; color: #111827; word-break: break-all; }
.pd-acesso small { color: #6b7280; }
.pd-linha-cupom input { flex: 1; text-transform: uppercase; }
.pd-aplicar { background: #111827; color: #fff; border: 0; border-radius: 12px; padding: 0 22px; font: inherit; font-weight: 700; cursor: pointer; }

/* Planos (lista) */
body.pedido .cabecalho-pagina h1 { color: #111827; }
body.pedido .cartao.plano { background: #fff; border-color: #e5e7eb; color: #1f2937; }

@media (max-width: 900px) {
    .pd-duas-colunas { grid-template-columns: 1fr; }
    .pd-resumo { position: static; }
}
@media (max-width: 560px) {
    .pd-cartao { padding: 20px 16px; border-radius: 14px; }
    .pd-titulo { font-size: 22px; }
    .pd-grade, .pd-opcoes-dominio { grid-template-columns: 1fr; }
    .pd-passos li + li::before { width: 14px; }
    .pd-passo-nome { display: none; }
    .pd-passos li.atual .pd-passo-nome { display: inline; }
    .pd-linha-dominio { flex-direction: column; }
    .pd-verificar { padding: 12px; }
    .pd-rodape-etapa { flex-direction: column-reverse; align-items: stretch; }
    .pd-botao-auto { width: 100%; }
}
.itens-plano-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; margin-top: 8px; }

/* Vitrine dos planos (/contratar) */
.pv-cabeca { text-align: center; margin: 6px 0 26px; }
.pv-cabeca h1 { font-size: 30px; font-weight: 800; color: #111827; margin: 0 0 6px; }
.pv-cabeca p { color: #6b7280; margin: 0; }
.pv-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 300px)); justify-content: center; gap: 20px; align-items: start; }
.pv-plano { --pv: #0e9f4f; --pv-escuro: #0b8441; --pv-preco: #f97316; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 24px rgba(17, 24, 39, .05); display: flex; flex-direction: column; }
.pv-plano.destaque { --pv: #d97706; --pv-escuro: #b45309; border-color: #d97706; box-shadow: 0 10px 30px rgba(217, 119, 6, .18); }
.pv-faixa { background: #d97706; color: #fff; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .04em; padding: 8px; }
.pv-topo { padding: 22px 20px 20px; text-align: center; border-bottom: 1px solid #eef0f2; }
.pv-nome { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.pv-medalha { width: 44px; height: 44px; border-radius: 10px; border: 2px solid #f97316; display: grid; place-items: center; background: #fff7ed; }
.pv-medalha svg { width: 32px; height: 32px; }
.pv-nome small { display: block; font-size: 15px; color: #374151; line-height: 1.1; }
.pv-nome strong { display: block; font-size: 24px; font-weight: 800; color: #111827; line-height: 1.1; }
.pv-preco { font-size: 42px; font-weight: 900; color: var(--pv-preco); letter-spacing: -.02em; margin: 10px 0 14px; line-height: 1; white-space: nowrap; }
.pv-preco small { font-size: 18px; font-weight: 500; color: #111827; letter-spacing: 0; }
.pv-botao { display: block; background: var(--pv); color: #fff !important; text-decoration: none; font-weight: 800; letter-spacing: .03em; border-radius: 12px; padding: 14px; text-align: center; transition: background .15s, transform .1s; }
.pv-botao:hover { background: var(--pv-escuro); }
.pv-botao:active { transform: translateY(1px); }
.pv-specs { margin: 0; padding: 6px 20px; }
.pv-specs div { padding: 11px 0; border-bottom: 1px solid #f1f2f4; }
.pv-specs div:last-child { border-bottom: 0; }
.pv-specs dt { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; }
.pv-specs dd { margin: 2px 0 0; font-weight: 800; color: #111827; font-size: 16px; }
.pv-specs dd.pv-cor { color: var(--pv); }
.pv-recursos { list-style: none; margin: 0; padding: 12px 20px 4px; border-top: 1px solid #eef0f2; display: grid; gap: 9px; font-size: 14px; }
.pv-recursos li { display: flex; gap: 10px; align-items: flex-start; color: #374151; }
.pv-recursos .pv-marca { flex: none; width: 16px; font-weight: 800; color: var(--pv); }
.pv-recursos li.nao { color: #c3c7cd; text-decoration: line-through; }
.pv-recursos li.nao .pv-marca { color: #c3c7cd; text-decoration: none; }
.pv-novo { font-style: normal; background: #f59e0b; color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 5px; margin-left: 4px; vertical-align: 1px; }
.pv-descricao { padding: 8px 20px 0; margin: 0; color: #6b7280; font-size: 13px; }
.pv-rodape { padding: 16px 20px 18px; margin-top: auto; text-align: center; }
.pv-rodape small { display: block; margin-top: 10px; color: #4b5563; font-size: 13px; }
.pv-rodape small::first-letter { color: #0e9f4f; }
@media (max-width: 560px) { .pv-cabeca h1 { font-size: 24px; } .pv-preco { font-size: 38px; } }
.pd-aceite-erro { color: #dc2626; }
.pd-aceite-erro input { outline: 2px solid #dc2626; outline-offset: 2px; }
.fp-botao svg.fp-icone-pix { fill: currentColor; stroke: none; width: 20px; height: 20px; }

/* Configurações: menu lateral */
.config-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.config-menu { position: sticky; top: 84px; display: grid; gap: 4px; }
.config-menu h1 { font-size: 28px; margin: 0 0 14px; }
.config-menu a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: var(--texto); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.config-menu a:hover { background: var(--superficie-2); }
.config-menu a.ativo { background: rgba(34, 197, 94, .14); color: var(--verde); }
.config-menu svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.config-menu hr { border: 0; border-top: 1px solid var(--borda); margin: 8px 0; width: 100%; }
.config-conteudo > .cartao + .cartao { margin-top: 18px; }
.msg-zap { margin-bottom: 18px; }
.msg-zap textarea { font-family: inherit; line-height: 1.45; }
.msg-variaveis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-variavel { background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-family: ui-monospace, monospace; cursor: pointer; }
.chip-variavel:hover { border-color: var(--verde); color: var(--verde); }
@media (max-width: 900px) {
    .config-layout { grid-template-columns: 1fr; }
    .config-menu { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 6px; }
    .config-menu h1 { display: none; }
    .config-menu hr { display: none; }
}

/* Login do painel do site: fundo branco com pontinhos verdes e ícones de rádio flutuando */
body:has(.login-claro) {
    --fundo: #f7faf8; --superficie: #ffffff; --superficie-2: #f4f6f5; --superficie-3: #dfe4e1; --borda: #e2e6e4; --borda-forte: #b9c1bd;
    --texto: #15191c; --texto-suave: #5b646d; --primaria: #149142; --primaria-forte: #0f7a37; --primaria-suave: rgba(20, 145, 66, 0.11);
    --texto-na-primaria: #ffffff; --vermelho: #d92d2d; --vermelho-suave: rgba(217, 45, 45, 0.1); --sombra: 0 18px 50px rgba(20, 60, 35, 0.12);
    color-scheme: light;
}
body:has(.login-claro) .pagina-simples {
    position: relative; overflow: hidden;
    background: radial-gradient(circle, rgba(20, 145, 66, 0.11) 1px, transparent 1.4px) 0 0 / 18px 18px, #f9fbfa;
}
.login-claro { position: relative; z-index: 1; box-shadow: var(--sombra); }
.login-claro .login-cabecalho { text-align: center; }
.login-claro .login-cabecalho h1 { color: #111827; }
.login-claro input { background: #fff; color: #111827; }
.login-fundo-radio { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.login-fundo-radio .lr { position: absolute; width: 54px; height: 54px; fill: none; stroke: #149142; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .16; animation: lr-flutua 14s ease-in-out infinite; }
.lr.f1 { top: 9%; left: 8%; width: 70px; height: 70px; animation-duration: 13s; }
.lr.f2 { top: 66%; left: 6%; width: 78px; height: 78px; animation-duration: 17s; animation-delay: -4s; }
.lr.f3 { top: 14%; right: 10%; width: 62px; height: 62px; animation-duration: 15s; animation-delay: -7s; }
.lr.f4 { top: 74%; right: 12%; animation-duration: 12s; animation-delay: -2s; }
.lr.f5 { top: 42%; left: 18%; width: 46px; height: 46px; animation-duration: 16s; animation-delay: -9s; }
.lr.f6 { top: 46%; right: 20%; width: 40px; height: 40px; animation-duration: 11s; animation-delay: -5s; }
.lr.f7 { top: 86%; left: 40%; width: 44px; height: 44px; animation-duration: 18s; animation-delay: -11s; }
.lr.f8 { top: 4%; left: 46%; width: 42px; height: 42px; animation-duration: 14s; animation-delay: -6s; }
.lr.f9 { top: 28%; left: 30%; width: 34px; height: 34px; animation-duration: 10s; animation-delay: -3s; }
@keyframes lr-flutua {
    0%, 100% { transform: translate(0, 0) rotate(-6deg); }
    25% { transform: translate(14px, -18px) rotate(4deg); }
    50% { transform: translate(-8px, -30px) rotate(8deg); }
    75% { transform: translate(-16px, -10px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) { .login-fundo-radio .lr { animation: none; } }
@media (max-width: 560px) { .lr.f5, .lr.f6, .lr.f9 { display: none; } }

/* Importação de conteúdos */
.imp-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.imp-numeros div { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; }
.imp-numeros small { display: block; color: var(--texto-suave); font-size: 12px; }
.imp-numeros strong { font-size: 22px; }
.barra-progresso { height: 10px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; border: 1px solid var(--borda); }
.barra-progresso span { display: block; height: 100%; background: var(--verde); transition: width .3s; }

/* Páginas numeradas */
.paginas-num { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 16px; }
.paginas-num a, .paginas-num span { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 14px; font-weight: 600; text-decoration: none; }
.paginas-num a { border: 1px solid var(--borda); color: var(--texto); background: var(--superficie); }
.paginas-num a:hover { border-color: var(--verde, #1db954); color: var(--verde, #1db954); }
.paginas-num .atual { background: var(--verde, #1db954); color: #06140b; }
.paginas-num .off { color: var(--texto-suave); opacity: .4; }
.paginas-num .reticencias { min-width: 20px; padding: 0; color: var(--texto-suave); }