/* Tema dark/light — páginas públicas do app (login, planos, termos) */

.tema-toggle-auth {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--adad-borda-forte);
    border-radius: 12px;
    background: var(--adad-branco);
    color: var(--adad-texto-claro);
    box-shadow: 0 8px 22px var(--adad-sombra);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.tema-toggle-auth:hover {
    background: var(--adad-hover);
    color: var(--adad-azul);
    border-color: var(--adad-azul-claro);
}

.tema-toggle-auth:active {
    transform: scale(0.96);
}

.tema-toggle-auth i {
    font-size: 1.15rem;
    line-height: 1;
}

html[data-theme="dark"] .tema-toggle-auth {
    background: rgba(59, 168, 224, 0.12);
    border-color: rgba(59, 168, 224, 0.35);
    color: var(--adad-azul-claro);
    box-shadow: 0 0 0 1px rgba(59, 168, 224, 0.08), 0 8px 22px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .tema-toggle-auth:hover {
    background: rgba(59, 168, 224, 0.22);
    color: #fff;
}

/* Login / cadastro */
html[data-theme="dark"] .login-page {
    background: linear-gradient(160deg, var(--adad-fundo-1) 0%, var(--adad-fundo-2) 50%, var(--adad-gradiente-fim) 100%);
}

html[data-theme="dark"] .login-page::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(59, 168, 224, 0.14) 0%, transparent 65%);
}

html[data-theme="dark"] .login-box {
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45),
        0 8px 24px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
    border-color: var(--adad-borda-forte);
}

html[data-theme="dark"] .login-box .login-cabecalho {
    border-bottom-color: var(--adad-borda-forte);
}

html[data-theme="dark"] .login-box .form-control {
    background: var(--adad-superficie-2);
    color: var(--adad-texto);
    border-color: var(--adad-borda);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .login-box .form-control:hover,
html[data-theme="dark"] .login-box .form-control:focus {
    background: var(--adad-superficie-3);
    border-color: var(--adad-azul);
}

html[data-theme="dark"] .login-box .form-control::placeholder {
    color: var(--adad-texto-suave);
}

html[data-theme="dark"] .form-check-input {
    background-color: var(--adad-superficie-2);
    border-color: #2a3d52;
}

html[data-theme="dark"] .form-check-input:hover:not(:disabled) {
    border-color: #3a5170;
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--adad-azul);
    border-color: var(--adad-azul);
}

html[data-theme="dark"] .form-check-input:focus {
    border-color: var(--adad-azul);
    box-shadow: 0 0 0 3px rgba(59, 168, 224, 0.18);
}

html[data-theme="dark"] .form-check-label {
    color: var(--adad-texto-claro);
}

html[data-theme="dark"] .login-box .login-rodape {
    background: var(--adad-superficie-2);
    border-top-color: var(--adad-borda-forte);
    box-shadow: none;
}

html[data-theme="dark"] .input-prefixo {
    background: var(--adad-superficie-3);
    color: var(--adad-azul-claro);
}

html[data-theme="dark"] .cadastro-passo {
    background: rgba(59, 168, 224, 0.16);
    color: var(--adad-azul-claro);
}

html[data-theme="dark"] .cadastro-explicacao {
    background: var(--adad-superficie-2);
    border-color: var(--adad-borda);
}

html[data-theme="dark"] .btn-voltar:hover {
    background: var(--adad-hover);
}

html[data-theme="dark"] .login-sucesso {
    background: rgba(61, 214, 140, 0.12);
    border-color: rgba(61, 214, 140, 0.35);
    color: var(--adad-sucesso);
}

html[data-theme="dark"] .tela-carregando {
    background: #0d141c !important;
    background: linear-gradient(160deg, var(--adad-fundo-1) 0%, var(--adad-fundo-2) 50%, var(--adad-gradiente-fim) 100%) !important;
}

html[data-theme="dark"] .tela-carregando::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(59, 168, 224, 0.18) 0%, transparent 65%);
}

/* Termos */
html[data-theme="dark"] body:has(.termos-page) {
    background: var(--adad-fundo-1);
}

html[data-theme="dark"] .termos-card {
    background: var(--adad-branco) !important;
    border-color: var(--adad-borda-forte) !important;
}

html[data-theme="dark"] .termos-meta {
    color: var(--adad-texto-claro) !important;
}

html[data-theme="dark"] .termos-conteudo h1 {
    color: var(--adad-azul) !important;
}

html[data-theme="dark"] .termos-conteudo h2 {
    color: var(--adad-texto) !important;
}

html[data-theme="dark"] .termos-conteudo p,
html[data-theme="dark"] .termos-conteudo li {
    color: var(--adad-texto-claro) !important;
}

/* Confirmar e-mail / sucesso */
html[data-theme="dark"] .confirm-obs {
    color: var(--adad-texto-claro) !important;
}

html[data-theme="dark"] .sucesso-alerta {
    background: linear-gradient(135deg, var(--adad-superficie-3) 0%, var(--adad-superficie-2) 100%);
    border-color: var(--adad-borda);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .sucesso-alerta strong {
    color: var(--adad-azul-claro);
}

/* Alertas flutuantes */
html[data-theme="dark"] .alerta-item {
    background: var(--adad-branco);
    border-color: var(--adad-borda-forte);
    box-shadow: 0 14px 36px var(--adad-sombra-forte);
}

html[data-theme="dark"] .alerta-fechar {
    color: var(--adad-texto-claro);
}

html[data-theme="dark"] .alerta-fechar:hover {
    background: rgba(59, 168, 224, 0.14);
    color: var(--adad-azul-claro);
}

html[data-theme="dark"] .alerta-barra-fundo {
    background: rgba(255, 255, 255, 0.1);
}

/* O tom do tipo entra como camada sobre um fundo opaco (nunca translúcido). */
html[data-theme="dark"] .alerta-success {
    background:
        linear-gradient(180deg, transparent 0%, rgba(61, 214, 140, 0.12) 100%),
        var(--adad-branco);
    border-color: rgba(61, 214, 140, 0.28);
}

html[data-theme="dark"] .alerta-warning {
    background:
        linear-gradient(180deg, transparent 0%, rgba(230, 200, 138, 0.12) 100%),
        var(--adad-branco);
    border-color: rgba(230, 200, 138, 0.28);
}

html[data-theme="dark"] .alerta-danger {
    background:
        linear-gradient(180deg, transparent 0%, rgba(232, 90, 104, 0.12) 100%),
        var(--adad-branco);
    border-color: rgba(232, 90, 104, 0.28);
}

html[data-theme="dark"] .alerta-info {
    background:
        linear-gradient(180deg, transparent 0%, rgba(59, 168, 224, 0.12) 100%),
        var(--adad-branco);
    border-color: rgba(59, 168, 224, 0.28);
}

/* Assinar plano (PIX) */
html[data-theme="dark"] .pagamento-box.pagamento-sucesso {
    background: linear-gradient(180deg, rgba(61, 214, 140, 0.12) 0%, var(--adad-branco) 55%) !important;
    border-color: rgba(61, 214, 140, 0.35) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .pagamento-box.pagamento-erro {
    background: linear-gradient(180deg, rgba(232, 90, 104, 0.12) 0%, var(--adad-branco) 55%) !important;
    border-color: rgba(232, 90, 104, 0.35) !important;
}

html[data-theme="dark"] .pagamento-resumo li {
    border-bottom-color: var(--adad-borda-forte) !important;
}

html[data-theme="dark"] .pagamento-resumo li span,
html[data-theme="dark"] .pix-aviso {
    color: var(--adad-texto-claro) !important;
}

html[data-theme="dark"] .pagamento-resumo li strong {
    color: var(--adad-azul-claro) !important;
}

html[data-theme="dark"] .pix-qr {
    border-color: var(--adad-borda) !important;
    background: #fff !important;
}

html[data-theme="dark"] .pix-box {
    background: var(--adad-superficie-2) !important;
    border-color: var(--adad-borda) !important;
    color: var(--adad-texto) !important;
}

html[data-theme="dark"] .btn-copiar-pix {
    background: var(--adad-superficie-3) !important;
    border-color: var(--adad-borda) !important;
    color: var(--adad-azul-claro) !important;
}

html[data-theme="dark"] .btn-copiar-pix:hover {
    background: var(--adad-hover) !important;
}

/* Escolher plano */
html[data-theme="dark"] body.escolha-page {
    background: linear-gradient(160deg, var(--adad-fundo-1) 0%, var(--adad-fundo-2) 50%, var(--adad-gradiente-fim) 100%) !important;
}

html[data-theme="dark"] .escolha-header .section-tag {
    background: rgba(59, 168, 224, 0.14) !important;
    color: var(--adad-azul-claro) !important;
}

html[data-theme="dark"] .plan-card {
    background: linear-gradient(165deg, rgba(26, 36, 51, 0.98) 0%, rgba(30, 43, 60, 0.94) 100%) !important;
    border-color: var(--adad-borda-forte) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
    color: var(--adad-texto);
}

html[data-theme="dark"] .plan-card.featured,
html[data-theme="dark"] .plan-card.is-preferido {
    background: linear-gradient(165deg, rgba(30, 48, 68, 0.98) 0%, rgba(26, 40, 58, 0.96) 100%) !important;
    border-color: rgba(59, 168, 224, 0.45) !important;
    box-shadow: 0 16px 44px rgba(59, 168, 224, 0.18) !important;
}

html[data-theme="dark"] .plan-card:hover {
    border-color: rgba(59, 168, 224, 0.55) !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .plan-card h3,
html[data-theme="dark"] .plan-card .plan-name,
html[data-theme="dark"] .plan-card .plan-price,
html[data-theme="dark"] .plan-card .plan-price .valor {
    color: var(--adad-texto) !important;
}

html[data-theme="dark"] .plan-card .plan-desc,
html[data-theme="dark"] .plan-card li,
html[data-theme="dark"] .plan-card p,
html[data-theme="dark"] .plan-card .plan-meta {
    color: var(--adad-texto-claro) !important;
}

html[data-theme="dark"] .btn-outline {
    background: transparent !important;
    color: var(--adad-azul-claro) !important;
    border-color: var(--adad-borda) !important;
}

html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .plan-card:hover .plan-cta.btn-outline {
    background: rgba(59, 168, 224, 0.12) !important;
    border-color: var(--adad-azul) !important;
}
