/* =====================================================================
   LinkCore — Estilos
   Identidade visual herdada do Gestão para Templos: tema claro/escuro,
   gradiente azul profundo, cards suaves, responsivo. Complementa o
   Bootstrap 5.
   ===================================================================== */

:root {
    --cor-fundo: #f4f6fb;
    --cor-primaria: #2563eb;
    --cor-primaria-escura: #1e40af;
    --cor-sucesso: #16a34a;
    --cor-alerta: #d97706;
    --cor-perigo: #dc2626;
}

body.pagina-painel,
body.pagina-login {
    background-color: var(--cor-fundo);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ------------------------- Login ------------------------- */

body.pagina-login {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
}

.login-card {
    width: 100%;
    max-width: 440px;
    border-radius: 1.15rem;
    animation: surgir .4s ease-out;
}

.login-icone {
    width: 74px;
    height: 74px;
    margin: 0 auto;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
    color: #fff;
    font-size: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(30, 64, 175, .35);
}

/* Botão "Entrar com Google" */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .7rem 1rem;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: .6rem;
    background: #fff;
    color: #1f2937;
    transition: box-shadow .15s ease, transform .15s ease;
}

.btn-google:hover {
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .12);
    transform: translateY(-1px);
    color: #111827;
    background: #fff;
}

.btn-google svg { flex-shrink: 0; }

[data-bs-theme="dark"] .btn-google {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

/* ------------------------- Cards do dashboard ------------------------- */

.card-resumo {
    border-radius: .85rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

.card-resumo:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08) !important;
}

.card-resumo.borda-sucesso  { border-left: 4px solid var(--cor-sucesso) !important; }
.card-resumo.borda-alerta   { border-left: 4px solid var(--cor-alerta) !important; }
.card-resumo.borda-perigo   { border-left: 4px solid var(--cor-perigo) !important; }
.card-resumo.borda-info     { border-left: 4px solid #0891b2 !important; }
.card-resumo.borda-primaria { border-left: 4px solid var(--cor-primaria) !important; }

.rotulo-card {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
}

.icone-card {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.texto-sucesso { color: var(--cor-sucesso); }

/* ------------------------- Tabelas ------------------------- */

.tabela-dados tbody tr { animation: surgir .25s ease-out; }

.tabela-dados th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.badge-status {
    display: inline-block;
    padding: .3em .7em;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 2rem;
    white-space: nowrap;
}

.badge-sucesso   { background: #dcfce7; color: #15803d; }
.badge-alerta    { background: #fef3c7; color: #b45309; }
.badge-perigo    { background: #fee2e2; color: #b91c1c; }
.badge-cancelado { background: #f1f5f9; color: #64748b; }

/* ------------------------- Modal PIX ------------------------- */

.pix-qrcode {
    width: 230px;
    height: 230px;
    border-radius: .75rem;
    border: 4px solid #e2e8f0;
    background: #fff;
}

.pix-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.3rem;
}

.plano-card {
    border: 2px solid #e2e8f0;
    border-radius: .85rem;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

.plano-card:hover {
    border-color: var(--cor-primaria);
    transform: translateY(-3px);
}

.plano-card .preco { font-size: 1.6rem; font-weight: 800; }

[data-bs-theme="dark"] .plano-card { border-color: #334155; }
[data-bs-theme="dark"] .plano-card:hover { border-color: var(--cor-primaria); }

/* ------------------------- Áreas bloqueadas (recurso Prime) ------------------------- */

.area-bloqueada { opacity: .65; }
.area-bloqueada .card-body { pointer-events: auto; }

/* ------------------------- Animações ------------------------- */

@keyframes surgir {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------- Caixa de aceite dos termos ------------------------- */

.caixa-termos {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1f2937;
}

.caixa-termos a { color: var(--cor-primaria); }

[data-bs-theme="dark"] .caixa-termos {
    background-color: #16213a;
    border-color: #334155;
    color: #e2e8f0;
}

[data-bs-theme="dark"] .caixa-termos a { color: #7dd3fc; }

/* ------------------------- Rodapé ------------------------- */

.rodape-sistema { line-height: 1.5; }

/* Rodapé sempre na parte inferior: o body vira coluna flex e o main
   estica — em páginas curtas o rodapé não fica "voando" no meio. */
body.pagina-painel {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh; /* altura real no mobile (desconta a barra do navegador) */
}

body.pagina-painel main { flex: 1 0 auto; }

body.pagina-painel .rodape-sistema { margin-top: auto; }

/* Fundo do rodapé: um tom levemente mais escuro que a página, sem linha */
.rodape-fundo { background-color: #e9edf4; }

[data-bs-theme="dark"] .rodape-fundo { background-color: #0b1220; }

.rodape-logo {
    height: 34px;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

[data-bs-theme="dark"] .pagina-login .rodape-sistema {
    border-color: rgba(0, 0, 0, .1) !important;
}

/* ------------------------- Tema escuro ------------------------- */

[data-bs-theme="dark"] .pagina-painel,
[data-bs-theme="dark"] .pagina-login {
    background-color: #0f172a;
}

[data-bs-theme="dark"] .pagina-login {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e3a5f 100%);
}

[data-bs-theme="dark"] .bg-white { background-color: #1e293b !important; }
[data-bs-theme="dark"] .card { --bs-card-bg: #1e293b; }

[data-bs-theme="dark"] .card.bg-light {
    background-color: #16213a !important;
    --bs-bg-opacity: 1;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: #16213a;
    --bs-table-color: #cbd5e1;
    --bs-table-border-color: #334155;
}

[data-bs-theme="dark"] .rotulo-card { color: #94a3b8; }

[data-bs-theme="dark"] .card-resumo:hover {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .45) !important;
}

[data-bs-theme="dark"] .badge-sucesso   { background: #14532d; color: #86efac; }
[data-bs-theme="dark"] .badge-alerta    { background: #78350f; color: #fcd34d; }
[data-bs-theme="dark"] .badge-perigo    { background: #7f1d1d; color: #fca5a5; }
[data-bs-theme="dark"] .badge-cancelado { background: #334155; color: #94a3b8; }

[data-bs-theme="dark"] .texto-sucesso { color: #4ade80; }

/* Botão de tema */
.icone-tema { font-size: 1.05rem; }

.botao-tema-login {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =====================================================================
   Modernização dos painéis — "janelas" com mais vida:
   cards suaves, navbar em gradiente, modais flutuantes.
   ===================================================================== */

/* ------- Cards ------- */
body.pagina-painel .card {
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 1rem;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .05);
    overflow: hidden;
}

body.pagina-painel .card > .card-header {
    border-bottom: 1px solid rgba(15, 23, 42, .05);
    padding-top: .85rem;
    padding-bottom: .85rem;
}

body.pagina-painel .list-group-item { border-color: rgba(15, 23, 42, .05); }

/* ------- Navbar em gradiente ------- */
body.pagina-painel .navbar.bg-primary,
body.pagina-login .navbar.bg-primary {
    background: linear-gradient(120deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%) !important;
}

.navbar .nav-link {
    border-radius: 2rem;
    padding-left: .95rem !important;
    padding-right: .95rem !important;
    transition: background .15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus { background: rgba(255, 255, 255, .12); }

.navbar .nav-link.active { background: rgba(255, 255, 255, .18); font-weight: 600; }

/* ------- Botões ------- */
.btn { border-radius: .65rem; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }

.btn-primary { box-shadow: 0 4px 14px rgba(37, 99, 235, .28); }

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .38);
}

.btn-warning { box-shadow: 0 4px 14px rgba(217, 119, 6, .25); }
.btn-warning:hover { transform: translateY(-1px); }

/* ------- Formulários ------- */
.form-control, .form-select { border-radius: .6rem; }

.form-control:focus, .form-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .14);
}

/* ------- Modais flutuantes ------- */
.modal-content {
    border: 0;
    border-radius: 1.1rem;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
}

.modal-header { border-bottom: 1px solid rgba(15, 23, 42, .06); }
.modal-footer { border-top: 1px solid rgba(15, 23, 42, .06); }

/* ------- Dropdowns ------- */
.dropdown-menu {
    border: 0;
    border-radius: .85rem;
    box-shadow: 0 12px 36px rgba(15, 23, 42, .18);
    padding: .45rem;
}

.dropdown-item { border-radius: .55rem; padding: .45rem .8rem; }

/* ------- Tabelas: linha destaca no hover ------- */
.tabela-dados tbody tr { transition: background .12s ease; }
.tabela-dados tbody tr:hover { background: rgba(37, 99, 235, .05); }

/* ------- Tema escuro dos painéis modernizados ------- */
[data-bs-theme="dark"] body.pagina-painel .card {
    border-color: rgba(148, 163, 184, .1);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .38);
}

[data-bs-theme="dark"] body.pagina-painel .card > .card-header { border-color: rgba(148, 163, 184, .09); }
[data-bs-theme="dark"] body.pagina-painel .list-group-item { border-color: rgba(148, 163, 184, .09); }
[data-bs-theme="dark"] .tabela-dados tbody tr:hover { background: rgba(59, 130, 246, .09); }
[data-bs-theme="dark"] .modal-content { box-shadow: 0 24px 64px rgba(0, 0, 0, .6); }
[data-bs-theme="dark"] .modal-header { border-color: rgba(148, 163, 184, .1); }
[data-bs-theme="dark"] .modal-footer { border-color: rgba(148, 163, 184, .1); }
[data-bs-theme="dark"] .dropdown-menu { box-shadow: 0 12px 36px rgba(0, 0, 0, .55); }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 .22rem rgba(59, 130, 246, .2);
}

/* ------------------------- Banner de consentimento ------------------------- */

.banner-consentimento {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    /* padding-bottom extra respeita a barra de gestos do iPhone (notch) */
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 23, 42, .97);
    color: #e2e8f0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .35);
    backdrop-filter: blur(8px);
    animation: surgir .35s ease-out;
    font-size: .9rem;
}

.banner-consentimento a { color: #7dd3fc; }

.banner-consentimento-texto { max-width: 760px; line-height: 1.55; }

.banner-consentimento.banner-saindo {
    transition: transform .3s ease, opacity .3s ease;
    transform: translateY(100%);
    opacity: 0;
}

@media (max-width: 576px) {
    .banner-consentimento { font-size: .82rem; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
    .banner-consentimento .btn { width: 100%; }
}

/* =====================================================================
   Página pública de links (/{slug}) — a essência do LinkCore
   ===================================================================== */

body.pagina-links {
    min-height: 100vh;
    min-height: 100dvh; /* altura real no mobile (desconta a barra do navegador) */
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 45%, var(--lk-cor, #2563eb) 180%);
    color: #e2e8f0;
    display: flex;
    justify-content: center;
}

.links-container {
    width: 100%;
    max-width: 620px;
    padding: 3rem 1.25rem 2rem;
    text-align: center;
    animation: surgir .45s ease-out;
    position: relative; /* fica acima do fundo fixo (::before) da página */
    z-index: 1;
}

.links-avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, .85);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    margin-bottom: 1rem;
}

.links-avatar-inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--lk-cor, #2563eb), rgba(255, 255, 255, .18));
}

.links-nome {
    font-size: 1.45rem;
    font-weight: 800;
    margin-bottom: .35rem;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

.links-bio {
    color: rgba(226, 232, 240, .85);
    font-size: .95rem;
    max-width: 460px;
    margin: 0 auto .5rem;
    line-height: 1.55;
}

.links-acoes {
    display: flex;
    justify-content: center;
    gap: .6rem;
    margin: .85rem 0 1.4rem;
}

.links-acao {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .15s ease;
    backdrop-filter: blur(6px);
}

.links-acao:hover {
    background: rgba(255, 255, 255, .22);
    transform: translateY(-2px);
}

.links-qr {
    background: #fff;
    color: #334155;
    border-radius: 1rem;
    display: inline-block;
    padding: 1rem 1.25rem;
    margin-bottom: 1.4rem;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
    animation: surgir .3s ease-out;
}

.links-qr img { border-radius: .5rem; }

.links-lista {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.links-botao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .95rem 1.35rem;
    border-radius: .9rem;
    background: rgba(255, 255, 255, .96);
    color: #1f2937;
    font-weight: 600;
    text-decoration: none;
    border-left: 5px solid var(--lk-cor, #2563eb);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
    word-break: break-word;
    text-align: left;
}

.links-botao i {
    color: var(--lk-cor, #2563eb);
    flex-shrink: 0;
    transition: transform .16s ease;
}

.links-botao:hover {
    transform: translateY(-3px) scale(1.012);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .38);
    background: #fff;
    color: #0f172a;
}

.links-botao:hover i { transform: translate(2px, -2px); }

.links-vazio {
    color: rgba(226, 232, 240, .7);
    padding: 2rem 0 1rem;
}

.links-rodape {
    margin-top: 2.4rem;
    font-size: .85rem;
}

.links-rodape a {
    color: rgba(226, 232, 240, .75);
    text-decoration: none;
    transition: color .15s ease;
}

.links-rodape a:hover { color: #fff; }

@media (max-width: 576px) {
    .links-container { padding-top: 2.2rem; }
    .links-avatar { width: 92px; height: 92px; }
    .links-botao { padding: .85rem 1.1rem; }
}

/* ------------------------- Ajustes mobile ------------------------- */

@media (max-width: 576px) {
    .card-resumo h4 { font-size: 1.15rem; }
}

/* =====================================================================
   Tabela vira CARDS no celular (sem rolagem lateral)
   Aplique a classe .tabela-cards na <table> e data-rotulo="Coluna" em
   cada <td>. Abaixo de 768px cada linha vira um cartão empilhado.
   ===================================================================== */
@media (max-width: 767.98px) {
    .table-responsive:has(.tabela-cards) { overflow-x: visible; }

    .tabela-cards thead { display: none; } /* rótulos vão para cada célula */

    .tabela-cards,
    .tabela-cards tbody,
    .tabela-cards tr,
    .tabela-cards td {
        display: block;
        width: 100%;
    }

    .tabela-cards tr {
        margin: 0 .75rem 1rem;
        padding: .35rem .25rem;
        border: 1px solid rgba(15, 23, 42, .1);
        border-radius: .85rem;
        box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
        background: var(--bs-body-bg, #fff);
    }

    .tabela-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
        border: 0;
        border-bottom: 1px solid rgba(15, 23, 42, .06);
        padding: .55rem .85rem;
        max-width: none !important;
        white-space: normal;
    }

    .tabela-cards tr td:last-child { border-bottom: 0; }

    /* Rótulo da coluna à esquerda de cada célula */
    .tabela-cards td::before {
        content: attr(data-rotulo);
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #64748b;
        text-align: left;
        flex-shrink: 0;
    }
    .tabela-cards td[data-rotulo=""]::before { content: none; }

    /* Ações e botões de ordenar ocupam a linha inteira, alvos maiores */
    .tabela-cards td.td-acoes { justify-content: flex-end; }
    .tabela-cards td.td-acoes .btn { padding: .5rem .75rem; }
    .tabela-cards .btn-group-sm > .btn { padding: .45rem .7rem; }

    [data-bs-theme="dark"] .tabela-cards tr {
        border-color: rgba(148, 163, 184, .16);
        background: #1e293b;
    }
    [data-bs-theme="dark"] .tabela-cards td { border-color: rgba(148, 163, 184, .12); }
    [data-bs-theme="dark"] .tabela-cards td::before { color: #94a3b8; }
}