/* AIRYA VÍDEO CONFERÊNCIA — o desenho das telas comerciais e da casca Airya.
   Usa as variáveis da casca do 3060 (--texto, --borda, --superficie…), que o
   Motor de Layout troca com o tema: claro, escuro e o da casa valem aqui também. */

.av-tela { display: flex; flex-direction: column; gap: 16px; padding: 4px 2px 32px; font-size: var(--airya-fonte, 14px); }
.av-tela .campo { margin: 0; }
.av-tela h3 { margin: 0 0 10px; font-size: 15px; }
.av-cabeca h2 { margin: 0 0 4px; font-size: 20px; }
.av-cabeca p { margin: 0; max-width: 90ch; }
.av-tela .cartao { padding: 16px; border-radius: 14px; }
.av-tela code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--superficie-2); border: 1px solid var(--borda); word-break: break-all; }
.av-tela mark { background: color-mix(in srgb, var(--gold) 30%, transparent); color: inherit; padding: 0 3px; border-radius: 3px; }
.av-tela mark.suave { background: color-mix(in srgb, var(--texto-suave) 18%, transparent); }
.av-carregando { padding: 24px; }

.av-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.av-grade4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.av-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 14px; border: 0; padding: 0; margin: 0 0 10px; }
.av-largo { grid-column: 1 / -1; }
.av-form { display: flex; flex-direction: column; gap: 2px; }
.av-erro { color: var(--vermelho); font-size: 13px; min-height: 0; }
.av-erro:not(:empty) { margin: 6px 0; }
.av-check, .av-checks label { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; }
.av-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; }
.av-filtro { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.av-lista { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; }
.av-linha { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--borda) 60%, transparent); font-size: 13.5px; }
.av-linha strong { font-weight: 600; }
.av-linha span { text-align: right; }

.av-faixa { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--borda); border-left: 4px solid var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--superficie)); font-size: 13.5px; }
.av-faixa.ok { border-left-color: var(--verde); background: color-mix(in srgb, var(--verde) 8%, var(--superficie)); }
.av-faixa.perigo { border-left-color: var(--vermelho); background: color-mix(in srgb, var(--vermelho) 7%, var(--superficie)); }
.av-faixa ul { margin: 6px 0 0; padding-left: 18px; }

.av-metrica { display: flex; flex-direction: column; gap: 2px; }
.av-metrica span { font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.av-metrica b { font-size: 22px; }
.av-metrica small { color: var(--texto-suave); font-size: 12px; }

.av-uso { margin: 10px 0; }
.av-uso div { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.av-uso i { display: block; height: 8px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; border: 1px solid var(--borda); }
.av-uso s { display: block; height: 100%; background: var(--verde); text-decoration: none; }
.av-uso s.quase { background: var(--gold); }
.av-uso s.cheio { background: var(--vermelho); }

/* ── PLANOS em 3D leve ── */
.av-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; perspective: 1600px; }
.av-plano { position: relative; display: flex; flex-direction: column; gap: 8px; transform: rotateY(4deg); transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.av-plano:hover { transform: rotateY(0) translateY(-4px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.45); }
.av-plano.destaque { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.av-plano.atual { outline: 2px solid var(--verde); outline-offset: 2px; }
.av-plano h3 { margin: 0; font-size: 18px; }
.av-plano p { margin: 0; font-size: 13px; color: var(--texto-suave); min-height: 3.6em; }
.av-plano ul { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 4px; font-size: 12.5px; }
.av-plano ul li.nao { opacity: .5; }
.av-plano .botao { margin-top: auto; }
.av-preco { font-size: 24px; font-weight: 700; }
.av-preco small { font-size: 12px; font-weight: 500; color: var(--texto-suave); margin-left: 3px; }
.av-fita { position: absolute; top: -10px; right: 14px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--gold); color: #1b1405; }
.av-faixas { display: flex; gap: 8px; font-size: 12px; }
.av-faixas span { padding: 3px 8px; border-radius: 8px; background: var(--superficie-2); border: 1px solid var(--borda); }
.av-assinatura .av-preco { margin: 6px 0; }
.av-recursos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.av-recursos div { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borda); font-size: 13px; flex-wrap: wrap; }
.av-recursos div.nao { opacity: .6; }
.av-recursos small { color: var(--texto-suave); margin-left: auto; }
.av-matriz td.sim { color: var(--verde); font-weight: 600; }
.av-matriz td.nao { color: var(--texto-suave); }
.av-plano-edit { padding-top: 10px; border-top: 1px dashed var(--borda); }

/* ── APARELHOS desenhados em CSS ── */
.av-aparelho { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.av-aparelho.este { border-color: var(--gold); }
.av-desenho { position: relative; margin: 6px auto 12px; border: 2px solid var(--texto); border-radius: 10px; opacity: .85; }
.av-desenho i { position: absolute; inset: 5px; border-radius: 5px; background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 40%, transparent), color-mix(in srgb, var(--acento, #43d1c0) 30%, transparent)); overflow: hidden; }
.av-desenho i::after { content: ''; position: absolute; left: -60%; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: av-brilho 3.6s ease-in-out infinite; }
@keyframes av-brilho { 0% { left: -60%; } 60%, 100% { left: 120%; } }
.av-desenho.celular { width: 40px; height: 72px; }
.av-desenho.tablet { width: 62px; height: 82px; }
.av-desenho.notebook { width: 92px; height: 58px; border-radius: 6px 6px 2px 2px; }
.av-desenho.notebook::after { content: ''; position: absolute; left: -12px; right: -12px; bottom: -9px; height: 6px; background: var(--texto); border-radius: 0 0 8px 8px; }
.av-desenho.desktop { width: 100px; height: 64px; border-radius: 5px; margin-bottom: 30px; }
.av-desenho.desktop::after { content: ''; position: absolute; left: 36px; right: 36px; bottom: -22px; height: 20px; border-left: 2px solid var(--texto); border-right: 2px solid var(--texto); border-bottom: 4px solid var(--texto); }

/* ── MANUAL, TERMOS, EMPRESA, CONEXÕES ── */
.av-manual-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.av-capitulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.av-capitulo { display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: transform .25s, border-color .25s; }
.av-capitulo:hover { transform: translateY(-3px); border-color: var(--gold); }
.av-capitulo .num { font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: .08em; }
.av-capitulo small { color: var(--texto-suave); font-size: 12px; }
.av-capitulo i { font-style: normal; font-size: 12px; color: var(--gold); margin-top: 4px; }
.av-termos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.av-termo { text-align: left; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.av-termo:hover { border-color: var(--gold); }
.av-documento { line-height: 1.6; max-width: 100ch; }
.av-documento h2, .av-documento h3, .av-documento h4 { margin: 18px 0 6px; }
.av-documento blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--gold); color: var(--texto-suave); }
.av-md-tabela { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--borda); font-size: 13px; }
.av-empresa img { display: block; margin-bottom: 8px; }
.av-familia { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.av-familia div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); }
.av-familia div.este { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--superficie)); }
.av-familia small { color: var(--texto-suave); }
.av-conexoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.av-conexao { border-left: 4px solid var(--texto-suave); }
.av-conexao.ok { border-left-color: var(--verde); }
.av-conexao h3 { margin: 0; }
.av-conexao p { font-size: 13px; margin: 8px 0; }

.av-toast { position: fixed; z-index: 9999; left: 50%; bottom: 26px; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); padding: 11px 16px; border-radius: 12px; background: var(--superficie); color: var(--texto); border: 1px solid var(--gold); box-shadow: 0 16px 40px -18px rgba(0,0,0,.5); font-size: 13.5px; transition: opacity .35s, transform .35s; }
.av-toast.sai { opacity: 0; transform: translate(-50%, 12px); }

/* ── A CASCA AIRYA: marca, doca, grupos, cadeados ── */
.av-logo { width: 26px; height: 26px; flex: none; object-fit: contain; }
.av-doca { display: flex; align-items: center; gap: 6px; }
.av-doca button, .av-doca .av-plano-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); font: inherit; font-size: 12px; cursor: pointer; }
.av-doca button:hover, .av-doca .av-plano-chip:hover { border-color: var(--gold); }
.av-doca .av-plano-chip { border-color: var(--gold); color: var(--ouro-texto, var(--gold)); font-weight: 700; }
.av-novo { margin-left: auto; padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--ouro-texto, var(--gold)); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); }
.av-selo-plano { margin-left: auto; padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; background: var(--superficie-2); border: 1px solid var(--borda); }
.item-lateral.av-trancado { opacity: .62; }
.av-grupo-titulo { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.av-grupo-titulo .av-seta { margin-left: auto; font-size: 10px; opacity: .7; }
.av-aviso-copia { margin: 0 0 10px; }

@media (max-width: 700px) {
  .av-duas { grid-template-columns: 1fr; }
  .av-plano { transform: none; }
  .av-linha { flex-direction: column; gap: 2px; }
  .av-linha span { text-align: left; }
  .av-doca .rotulo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .av-plano, .av-plano:hover, .av-capitulo:hover { transform: none; transition: none; }
  .av-desenho i::after { animation: none; }
}
:root[data-movimento="nenhum"] .av-desenho i::after, :root[data-movimento="reduzido"] .av-desenho i::after { animation: none; }
:root[data-movimento="nenhum"] .av-plano { transform: none; transition: none; }
:root[data-densidade="compacta"] .av-tela .cartao { padding: 12px; }
:root[data-densidade="confortavel"] .av-tela .cartao { padding: 20px; }