/* =====================================================================
   StylePro - Design System
   Tokens + componentes. Moderno, limpo, responsivo.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---------- Tokens ---------- */
:root {
    /* Cores */
    --sp-primaria: #6366f1;
    --sp-primaria-esc: #4f46e5;
    --sp-primaria-cl: #a5b4fc;
    --sp-acento: #ec4899;
    --sp-sucesso: #22c55e;
    --sp-aviso: #f59e0b;
    --sp-erro: #ef4444;

    --sp-fundo: #f6f7fb;
    --sp-superficie: #ffffff;
    --sp-superficie-2: #f1f3f9;
    --sp-borda: #e5e8f0;
    --sp-borda-forte: #d3d8e6;

    --sp-texto: #0f172a;
    --sp-texto-2: #475569;
    --sp-texto-3: #94a3b8;

    /* Tipografia Moderna Geométrica Sans */
    --sp-fonte: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sp-fs-xs: 0.75rem;
    --sp-fs-sm: 0.8125rem;
    --sp-fs-md: 0.9375rem;
    --sp-fs-lg: 1.0625rem;
    --sp-fs-xl: 1.375rem;
    --sp-fs-2xl: 1.75rem;
    --sp-fs-3xl: 2.25rem;

    /* Espacamento */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;

    /* Raio */
    --sp-r-sm: 6px;
    --sp-r-md: 10px;
    --sp-r-lg: 16px;
    --sp-r-xl: 24px;
    --sp-r-pilula: 999px;

    /* Sombras */
    --sp-sombra-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --sp-sombra-2: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .05);
    --sp-sombra-3: 0 12px 32px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .06);

    /* Transicao */
    --sp-tr: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--sp-fonte);
    font-size: var(--sp-fs-md);
    color: var(--sp-texto);
    background: var(--sp-fundo);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--sp-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--sp-3); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--sp-fs-2xl); }
h2 { font-size: var(--sp-fs-xl); }
h3 { font-size: var(--sp-fs-lg); }
p { margin: 0 0 var(--sp-3); }
code { background: var(--sp-superficie-2); padding: 0.1em 0.35em; border-radius: var(--sp-r-sm); font-size: 0.9em; }

[x-cloak] { display: none !important; }

/* ---------- Utilitarios ---------- */
.container { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.visivel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texto-sucesso { color: var(--sp-sucesso); }
.texto-erro { color: var(--sp-erro); }
.texto-suave { color: var(--sp-texto-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-0 { margin-bottom: 0; }

/* ---------- Botoes ---------- */
.botao, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 0.6rem 1.15rem;
    font: inherit; font-weight: 600; font-size: var(--sp-fs-md);
    border: 1px solid transparent; border-radius: var(--sp-r-md);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: transform var(--sp-tr), box-shadow var(--sp-tr), background var(--sp-tr), border-color var(--sp-tr);
}
.botao:hover, .btn:hover { text-decoration: none; transform: translateY(-1px); }
.botao:active, .btn:active { transform: translateY(0); }
.botao:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.botao-primario, .btn-primario { background: var(--sp-primaria); color: #fff; box-shadow: var(--sp-sombra-1); }
.botao-primario:hover, .btn-primario:hover { background: var(--sp-primaria-esc); color: #fff; box-shadow: var(--sp-sombra-2); }

.botao-secundario, .btn-secundario { background: var(--sp-superficie); color: var(--sp-texto); border-color: var(--sp-borda-forte); }
.botao-secundario:hover, .btn-secundario:hover { background: var(--sp-superficie-2); }

.botao-fantasma, .btn-fantasma { background: transparent; color: var(--sp-texto-2); }
.botao-fantasma:hover, .btn-fantasma:hover { background: var(--sp-superficie-2); color: var(--sp-texto); }

.botao-perigo, .btn-perigo { background: var(--sp-erro); color: #fff; }
.botao-perigo:hover, .btn-perigo:hover { background: #dc2626; color: #fff; }

.botao-pequeno, .btn-sm { padding: 0.35rem 0.75rem; font-size: var(--sp-fs-sm); border-radius: var(--sp-r-sm); }
.botao-lg, .btn-lg { padding: 0.85rem 1.6rem; font-size: var(--sp-fs-lg); border-radius: var(--sp-r-lg); }
.btn-bloco { width: 100%; display: flex; }
.botao-icon { padding: 0.5rem; aspect-ratio: 1; }

/* Helpers Flexbox & Grid modernos */
.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.align-items-center { align-items: center; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.p-4 { padding: var(--sp-4); }
.py-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.py-5 { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.text-center { text-align: center; }
.w-100 { width: 100%; }
.fs-sm { font-size: var(--sp-fs-sm); }
.texto-secundario { color: var(--sp-texto-2); font-size: var(--sp-fs-md); }

/* Grelhas */
.grelha-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.stat-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-left: 4px solid var(--sp-primaria); }
.stat-numero { font-size: 2rem; font-weight: 800; color: var(--sp-texto); line-height: 1; }
.stat-rotulo { font-size: var(--sp-fs-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--sp-texto-3); }

.grelha-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.cartao-projecto { overflow: hidden; padding: 0; display: flex; flex-direction: column; transition: transform var(--sp-tr), box-shadow var(--sp-tr); }
.cartao-projecto:hover { transform: translateY(-3px); box-shadow: var(--sp-sombra-2); }
.cartao-imagem { height: 160px; background-size: cover; background-position: center; position: relative; padding: var(--sp-2); }
.cartao-corpo { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; }

.cartao-divisao { text-align: center; display: flex; flex-direction: column; align-items: center; padding: var(--sp-6) var(--sp-4); }
.cartao-icone { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: var(--sp-3); }

/* Dialog Modais HTML5 */
dialog.modal-dialog {
    border: none; border-radius: var(--sp-r-lg); padding: 0;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    background: transparent;
}
dialog.modal-dialog::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

/* ---------- Campos ---------- */
.campo { display: block; margin-bottom: var(--sp-4); }
.campo > span, .rotulo {
    display: block; font-size: var(--sp-fs-sm); font-weight: 600;
    color: var(--sp-texto-2); margin-bottom: var(--sp-1);
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=url], input[type=date], select, textarea {
    width: 100%; padding: 0.6rem 0.85rem;
    font: inherit; font-size: var(--sp-fs-md); color: var(--sp-texto);
    background: var(--sp-superficie);
    border: 1px solid var(--sp-borda-forte); border-radius: var(--sp-r-md);
    transition: border-color var(--sp-tr), box-shadow var(--sp-tr);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--sp-primaria);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}
input::placeholder, textarea::placeholder { color: var(--sp-texto-3); }
textarea { min-height: 96px; resize: vertical; }
.campo-ajuda { font-size: var(--sp-fs-xs); color: var(--sp-texto-3); margin-top: var(--sp-1); }
.campo-erro { font-size: var(--sp-fs-xs); color: var(--sp-erro); margin-top: var(--sp-1); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23475569'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; padding-right: 2.2rem; }

/* ---------- Cartoes ---------- */
.cartao {
    background: var(--sp-superficie);
    border: 1px solid var(--sp-borda);
    border-radius: var(--sp-r-lg);
    box-shadow: var(--sp-sombra-1);
    padding: var(--sp-5);
}
.cartao-titulo { font-size: var(--sp-fs-lg); font-weight: 700; margin: 0 0 var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); }

/* ---------- Etiquetas ---------- */
.etiqueta {
    display: inline-flex; align-items: center; gap: 0.3em;
    padding: 0.18em 0.65em; font-size: var(--sp-fs-xs); font-weight: 600;
    border-radius: var(--sp-r-pilula);
    background: var(--sp-superficie-2); color: var(--sp-texto-2);
}
.etiqueta-primaria { background: rgba(99, 102, 241, .14); color: var(--sp-primaria-esc); }
.etiqueta-sucesso { background: rgba(34, 197, 94, .15); color: #15803d; }
.etiqueta-aviso { background: rgba(245, 158, 11, .16); color: #b45309; }
.etiqueta-erro { background: rgba(239, 68, 68, .14); color: #b91c1c; }

/* ---------- Avisos flash ---------- */
.flash-acoess { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.flash {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--sp-r-md);
    font-size: var(--sp-fs-md); font-weight: 500;
    border: 1px solid transparent; animation: sp-surgir 240ms ease-out;
}
.flash-sucesso { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.flash-erro { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.flash-aviso { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.flash-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

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

/* ---------- Cabecalho ---------- */
.cabecalho {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sp-borda);
}
.cabecalho-int { display: flex; align-items: center; gap: var(--sp-4); height: 62px; }
.marca { display: flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: 1.15rem; color: var(--sp-texto); letter-spacing: -0.02em; }
.marca:hover { text-decoration: none; }
.marca-simbolo {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--sp-primaria), var(--sp-acento));
    color: #fff; font-size: 1rem; box-shadow: var(--sp-sombra-1);
}
.nav { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
.nav a {
    padding: 0.45rem 0.85rem; border-radius: var(--sp-r-md);
    color: var(--sp-texto-2); font-weight: 600; font-size: var(--sp-fs-md);
    transition: background var(--sp-tr), color var(--sp-tr);
}
.nav a:hover { background: var(--sp-superficie-2); color: var(--sp-texto); text-decoration: none; }
.nav a.ativo { background: rgba(99, 102, 241, .12); color: var(--sp-primaria-esc); }

/* ---------- Rodape ---------- */
.rodape { border-top: 1px solid var(--sp-borda); margin-top: var(--sp-7); padding: var(--sp-5) 0; color: var(--sp-texto-3); font-size: var(--sp-fs-sm); }
.rodape-int { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; }

/* ---------- Grelha de cartoes ---------- */
.grelha { display: grid; gap: var(--sp-4); }
.grelha-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grelha-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grelha-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ---------- Estatisticas ---------- */
.stat { display: flex; flex-direction: column; gap: 0.15rem; }
.stat-valor { font-size: var(--sp-fs-2xl); font-weight: 800; letter-spacing: -0.03em; }
.stat-rotulo { font-size: var(--sp-fs-sm); color: var(--sp-texto-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Tabela ---------- */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--sp-borda); border-radius: var(--sp-r-lg); background: var(--sp-superficie); }
table.tabela { width: 100%; border-collapse: collapse; font-size: var(--sp-fs-md); }
.tabela th {
    text-align: left; padding: var(--sp-3) var(--sp-4);
    background: var(--sp-superficie-2); font-size: var(--sp-fs-xs);
    text-transform: uppercase; letter-spacing: .05em; color: var(--sp-texto-3);
    border-bottom: 1px solid var(--sp-borda); white-space: nowrap;
}
.tabela td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--sp-borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tr:hover td { background: rgba(99, 102, 241, .04); }

/* ---------- Modal ---------- */
.modal-fundo {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(3px);
    display: grid; place-items: center; padding: var(--sp-4);
    animation: sp-aparecer 160ms ease-out;
}
.modal {
    background: var(--sp-superficie); border-radius: var(--sp-r-lg);
    box-shadow: var(--sp-sombra-3); width: min(560px, 100%);
    max-height: 90vh; overflow-y: auto; padding: var(--sp-5);
    animation: sp-surgir 200ms ease-out;
}
@keyframes sp-aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Vazio ---------- */
.vazio { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--sp-texto-3); }
.vazio-icone { font-size: 2.6rem; margin-bottom: var(--sp-3); opacity: .5; }
.vazio h3 { color: var(--sp-texto-2); }

/* ---------- Barra lateral (admin/builder) ---------- */
.layout-lateral { display: grid; grid-template-columns: 232px 1fr; min-height: calc(100vh - 62px); }
.lateral {
    background: var(--sp-superficie); border-right: 1px solid var(--sp-borda);
    padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: 2px;
}
.lateral-grupo { font-size: var(--sp-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sp-texto-3); padding: var(--sp-4) var(--sp-3) var(--sp-1); }
.lateral a {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 0.55rem var(--sp-3); border-radius: var(--sp-r-md);
    color: var(--sp-texto-2); font-weight: 600; font-size: var(--sp-fs-md);
    transition: background var(--sp-tr), color var(--sp-tr);
}
.lateral a:hover { background: var(--sp-superficie-2); color: var(--sp-texto); text-decoration: none; }
.lateral a.ativo { background: rgba(99, 102, 241, .12); color: var(--sp-primaria-esc); }
.lateral a .icone { width: 20px; text-align: center; }
.conteudo-lateral { padding: var(--sp-5); min-width: 0; }

/* ---------- Pagina de autenticacao ---------- */
.auth-corpo { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-painel {
    display: grid; place-items: center; padding: var(--sp-6);
    background: var(--sp-superficie);
}
.auth-cartao { width: min(400px, 100%); }
.auth-marca { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.auth-hero {
    display: grid; place-items: center; padding: var(--sp-6); color: #fff;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(255,255,255,.22), transparent 45%),
        linear-gradient(135deg, var(--sp-primaria) 0%, var(--sp-acento) 100%);
    position: relative; overflow: hidden;
}
.auth-hero-conteudo { position: relative; z-index: 1; max-width: 420px; }
.auth-hero h2 { font-size: var(--sp-fs-3xl); color: #fff; }
.auth-hero p { color: rgba(255,255,255,.9); font-size: var(--sp-fs-lg); }
.auth-hero-lista { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); }
.auth-hero-lista li { display: flex; gap: var(--sp-3); align-items: flex-start; color: rgba(255,255,255,.95); }
.auth-hero-lista li::before { content: '✓'; font-weight: 800; background: rgba(255,255,255,.25); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: .8rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
    .auth-corpo { grid-template-columns: 1fr; }
    .auth-hero { display: none; }
    .layout-lateral { grid-template-columns: 1fr; }
    .lateral { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--sp-borda); }
    .lateral-grupo { display: none; }
    .lateral a { white-space: nowrap; }
}
@media (max-width: 640px) {
    .cabecalho-int { height: auto; padding: var(--sp-2) 0; flex-wrap: wrap; }
    .nav { width: 100%; overflow-x: auto; }
    h1 { font-size: var(--sp-fs-xl); }
    .cartao { padding: var(--sp-4); }
}