/* SWMVC — Geral: comum a todas as páginas (site + admin) */
/* 26/08/2026: removido o html{font-size:62.5%} (1rem=10px) — o SWCore
   embutido assume rem padrão do navegador (1rem=16px) e não tem como
   ajustar a lib pra cada projeto. Os valores em rem deste projeto foram
   recalculados (× 0.625) pra manter o mesmo tamanho visual em px de antes,
   agora numa escala única com o SWCore. */

/* ── Tokens de marca (claro) — antes só em dashboard.css, agora aqui
   porque site.css também usa e não carregava aquele arquivo ────── */
:root {
    --sw-pri: #0957af;
    --sw-sec: #1d4ed8;
    --sw-suc: #10b981;
    --sw-per: #ef4444;
    --sw-ale: #f59e0b;

    --sw-txt-bas: #111827;
    --sw-txt-sec: #374151;
    --sw-txt-mut: #6b7280;

    --sw-bg-bas: #f5f5f9;
    --sw-bg-sec: #f3f4f6;
    --sw-bg-sur: #ffffff;
    --sw-bg-hov: #f3f4f6;

    --sw-bor: #e5e7eb;
    --sw-r-s: 0;
    --sw-r-m: 0;
    --sw-r-l: 0;

    --sw-s-p: 0.375rem;
    --sw-s-m: 0.625rem;
    --sw-s-g: 1.5rem;

    --sw-f-pp: 0.75rem;
    --sw-f-san: 'Poppins', system-ui, sans-serif;

    --sw-shd: 0 1px 4px rgba(0, 0, 0, .10);
    --sw-shd-g: 0 4px 16px rgba(0, 0, 0, .12);
    --sw-gls-bg: rgba(255, 255, 255, .82);
    --sw-ease: cubic-bezier(.4, 0, .2, 1);

    /* SWCore embutido assume os tokens dele (--color-primary, --border etc.)
       na cor cinza/azul de demonstração — amarrado aqui na cor real da
       Sanweb, pra qualquer componente/utilitário nativo do SWCore usado em
       qualquer página já sair certo, sem precisar repetir por página. */
    --color-primary: var(--sw-pri);
    --color-secondary: var(--sw-sec);
    --color-success: var(--sw-suc);
    --color-alert: var(--sw-ale);
    --color-error: var(--sw-per);
}

/* ── Tokens de marca (escuro) ─────────────────────────────────── */
html[sw-theme="dark"] {
    --sw-pri: #1d4ed8;
    --sw-sec: #3b82f6;
    --sw-txt-bas: #f4f4f5;
    --sw-txt-sec: #d4d4d8;
    --sw-txt-mut: #90909a;
    --sw-bg-bas: #0d0d14;
    --sw-bg-sec: #12121a;
    --sw-bg-sur: #161622;
    --sw-bg-hov: #222230;
    --sw-bor: #2a2a38;
    --sw-shd: 0 2px 8px rgba(0, 0, 0, .40);
    --sw-shd-g: 0 8px 32px rgba(0, 0, 0, .50);
    --sw-gls-bg: rgba(22, 22, 34, .85);
}

/* O utilitário .border-b/.border-t do Tailwind só define espessura e
   estilo (herda a cor do texto). Sem isso toda borda de divisor saía preta
   forte em vez do cinza sutil de --sw-bor. */
.border-b, .border-t {
    border-color: var(--sw-bor);
}

.app-footer-brand {
    font-weight: 700;
    color: var(--sw-pri);
}

.app-footer-meta {
    font-size: 0.6875rem;
}

.site-header {
    padding: 1.25rem 2.5rem;
}

.site-brand {
    font-weight: 700;
    font-size: 1.25rem;
}

.site-footer {
    padding: 1.25rem 2.5rem;
    color: var(--sw-txt-mut);
}

.site-nav-link {
    color: var(--sw-txt-sec);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
}
.site-nav-link:hover {
    color: var(--sw-pri);
}
.site-menu-toggle,.site-menu-close,.site-menu-overlay{display:none}.site-cart-link{display:flex;align-items:center;gap:0.375rem;color:var(--sw-txt-sec);text-decoration:none;font-size:0.875rem;font-weight:700}.site-cart-link strong{display:flex;align-items:center;justify-content:center;min-width:1.375rem;height:1.375rem;padding:0 0.3125rem;background:#0957af;color:#fff;font-size:0.6875rem;border-radius:999px}
@media(max-width:991px){.site-header{padding:0.875rem 1rem}.site-menu-toggle{display:flex;align-items:center;justify-content:center;margin-left:auto;width:2.75rem;height:2.75rem;border:1px solid var(--sw-bor);background:var(--sw-bg-sur);color:var(--sw-txt-bas);font-size:1.25rem}.site-nav{position:fixed;z-index:1100;inset:0 auto 0 0;width:min(84%,21.25rem);padding:4.375rem 1.25rem 1.25rem;background:var(--sw-bg-sur);flex-direction:column;align-items:stretch!important;transform:translateX(-105%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.site-nav.is-open{transform:none}.site-nav-link,.site-cart-link{min-height:3rem;padding:0.75rem;border-bottom:1px solid var(--sw-bor);font-size:1.0625rem}.site-menu-close{display:flex;position:absolute;right:0.875rem;top:0.875rem;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:0;background:transparent;color:var(--sw-txt-bas);font-size:1.25rem}.site-menu-overlay{position:fixed;z-index:1090;inset:0;width:100%;height:100%;border:0;background:rgba(0,0,0,.52)}.site-menu-overlay.is-open{display:block}}

.top-scroll-generic {
    overflow-x: auto;
    height: 12px;
    margin-bottom: 4px;
    border-radius: var(--sw-r-s);
    opacity: 0.8;
}

/* Ordenação global das tabelas */
table thead th.sw-sortable {
    position: relative;
    padding-right: 2.25rem;
    cursor: pointer;
    user-select: none;
    transition: color .2s ease, background-color .2s ease;
}

table thead th.sw-sortable::after {
    content: '↕';
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sw-txt-mut);
    font-size: 0.875rem;
    line-height: 1;
    opacity: .5;
    transition: color .2s ease, opacity .2s ease, transform .2s ease;
}

table thead th.sw-sortable:hover,
table thead th.sw-sortable:focus-visible {
    color: var(--sb-bg, var(--sw-pri));
    background: color-mix(in srgb, var(--sb-bg, var(--sw-pri)) 7%, transparent);
}

table thead th.sw-sortable:hover::after,
table thead th.sw-sortable:focus-visible::after,
table thead th.sw-sortable.is-sort-asc::after,
table thead th.sw-sortable.is-sort-desc::after {
    color: var(--sb-bg, var(--sw-pri));
    opacity: 1;
}

table thead th.sw-sortable.is-sort-asc::after { content: '↑'; }
table thead th.sw-sortable.is-sort-desc::after { content: '↓'; }

.sw-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 6px 17px;
    border-top: 1px solid var(--sw-bor);
    background: var(--sw-bg-sec);
}

.sw-table-pagination[hidden] { display: none; }
.sw-table-pagination-info { color: var(--sw-txt-mut); font-size: 0.75rem; }

.sw-table-pagination-size {
    min-height: 2.75rem;
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--sw-bor);
    border-radius: var(--sw-r-m);
    background: var(--sw-bg-sur);
    color: var(--sw-txt-bas);
    font: inherit;
    font-size: 0.75rem;
}

.sw-table-pagination-controls { display: flex; align-items: center; gap: 0.3125rem; }
.sw-table-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.375rem;
    border: 1px solid var(--sw-bor);
    border-radius: var(--sw-r-m);
    background: var(--sw-bg-sur);
    color: var(--sw-txt-bas);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease;
}
.sw-table-page-btn:hover:not(:disabled):not(.is-active) { transform: translateY(-2px); border-color: var(--sw-pri); color: var(--sw-pri); }
.sw-table-page-btn.is-active:hover { transform: translateY(-2px); color: #fff; }
.sw-table-page-btn.is-active { background: var(--sb-bg, var(--sw-pri)); border-color: var(--sb-bg, var(--sw-pri)); color: #fff; }
.sw-table-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.sw-table-page-ellipsis { min-width: 1.25rem; text-align: center; color: var(--sw-txt-mut); }
.paginacao-pagina { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0; }

@media (max-width: 479px) {
    table thead th.sw-sortable { padding-right: 1.875rem; }
    table thead th.sw-sortable::after { right: 0.625rem; }
    .sw-table-pagination { align-items: stretch; padding: 0.75rem; }
    .sw-table-pagination-info { width: 100%; }
    .sw-table-pagination-size { flex: 1; min-width: 0; font-size: 14px; }
    .sw-table-pagination-controls { width: 100%; justify-content: space-between; }
    .sw-table-page-btn { min-width: 2.75rem; }
}

@media (min-width: 768px) {
    .sw-table-pagination-size {
        min-height: 2.125rem;
        padding: 0.25rem 0.5rem;
    }
    .sw-table-page-btn {
        min-width: 2rem;
        min-height: 2rem;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    table thead th.sw-sortable,
    table thead th.sw-sortable::after,
    .sw-table-page-btn { transition: none; }
}
/* Seletor de mídia — modal global (ver media-picker.js).
   Precisa ficar ACIMA do painel lateral ([sw-panel]) quando os dois estão
   abertos ao mesmo tempo (ex.: editar Usuário → Galeria) — o próprio
   [sw-panel] usa z-index:9999999!important (achei 9999990 antes, que era só
   do overlay dele — o painel em si é ainda maior), então o modal precisa de
   um valor maior que ESSE. */
#modal-midia {
    z-index: 2147483647 !important;
}
.media-picker-box {
    width: min(48rem, 92vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--sw-bg-sur);
    border-radius: var(--sw-r-m);
}
.media-picker-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.media-picker-hdr h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sw-txt-bas);
    margin: 0;
}
.media-picker-search {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}
.media-picker-search .sw-input {
    flex: 1;
}
.media-picker-upload-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.media-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.625rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.media-picker-item {
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--sw-bor);
    border-radius: var(--sw-r-s);
    background: var(--sw-bg-sec);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}
.media-picker-item:hover {
    border-color: var(--sw-pri);
    transform: translateY(-2px);
}
.media-picker-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.media-picker-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--sw-txt-mut);
    padding: 2rem 0;
}

/* Fonte padrão do projeto: Poppins (arquivos locais em assets/swcore/fonts/) */
:root {
    --font-sans: "Poppins", system-ui, -apple-system, sans-serif;
}

body {
    font-family: "Poppins", system-ui, -apple-system, sans-serif;
}