/* Portal de Certificados — sistema visual partilhado.
   A cor de marca (--brand-*) é injetada por página a partir das Definições. */

:root {
    --surface-bg: #eef1f8;
    --ink-900: #10152b;
    --ink-700: #333a52;
    --ink-500: #6b7290;
    --shadow-sm: 0 2px 6px rgba(16, 24, 40, .05);
    --shadow-md: 0 4px 10px rgba(16, 24, 40, .05), 0 16px 36px -12px rgba(16, 24, 40, .16);
    --shadow-lg: 0 8px 20px rgba(16, 24, 40, .08), 0 24px 56px -16px rgba(16, 24, 40, .24);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--surface-bg);
    color: var(--ink-900);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .fw-black { letter-spacing: -0.02em; }
.text-muted { color: var(--ink-500) !important; }

main.p-3.p-md-4 { padding: 2rem 2.5rem !important; }
@media (max-width: 767.98px) {
    main.p-3.p-md-4 { padding: 1.25rem !important; }
}

/* ---------- Utilitários de marca ---------- */
.bg-brand-50 { background-color: var(--brand-50) !important; }
.bg-brand-100 { background-color: var(--brand-100) !important; }
.bg-brand-500 { background-color: var(--brand-500) !important; }
.bg-brand-600 { background-color: var(--brand-600) !important; }
.bg-brand-700 { background-color: var(--brand-700) !important; }
.text-brand-500 { color: var(--brand-500) !important; }
.text-brand-600 { color: var(--brand-600) !important; }
.text-brand-700 { color: var(--brand-700) !important; }
.border-brand-100 { border-color: var(--brand-100) !important; }
.border-brand-500 { border-color: var(--brand-500) !important; }

/* ---------- Cartões flutuantes (base do sistema) ---------- */
.surface-card {
    background: #fff;
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}
.surface-card-flat {
    background: #fff;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease;
}
.surface-card-flat:hover { box-shadow: var(--shadow-md); }

.surface-row {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease;
}
.surface-row:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.surface-card-lift {
    background: #fff;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: box-shadow .2s ease, transform .2s ease;
}
.surface-card-lift:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

/* ---------- Badges de ícone (tiles pastel) ---------- */
.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 1.35rem;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.icon-tile-brand { background: var(--brand-50); color: var(--brand-600); }
.icon-tile-indigo { background: #ecefff; color: #4f5bd5; }
.icon-tile-amber  { background: #fff3d9; color: #b7791f; }
.icon-tile-slate  { background: #eaedf3; color: #495166; }
.icon-tile-rose   { background: #ffe9ef; color: #c23a5a; }

/* ---------- Botões ---------- */
.btn-brand {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    padding-top: .55em;
    padding-bottom: .55em;
    padding-left: 1.25em;
    padding-right: 1.25em;
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--brand-600) 60%, transparent);
}
.btn-brand:hover, .btn-brand:focus {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
    color: #fff;
    transform: translateY(-1px);
}
.btn, .form-select, .form-control {
    border-radius: var(--radius-sm);
}
.btn-lg, .form-control-lg { border-radius: var(--radius-md); }
.btn.rounded-pill, .btn-brand, .btn-dark { border-radius: 999px; }
.btn-link { text-decoration: none; }
.btn-light { background: #fff; box-shadow: var(--shadow-sm); border: none; }

/* ---------- Badges ---------- */
.badge-brand {
    background-color: var(--brand-50);
    color: var(--brand-700);
    border: none;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.45em 0.85em;
}

/* ---------- Portal público: hero com gradiente + glass ---------- */
.hero-gradient {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 15% -10%, color-mix(in srgb, var(--brand-500) 16%, transparent), transparent),
        radial-gradient(1000px 560px at 100% 5%, #dfe3ff 0%, transparent 60%),
        var(--surface-bg);
}

.glass-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.result-card {
    border-radius: var(--radius-lg);
    border: none !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.result-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

/* ---------- Admin: sidebar ---------- */
.admin-sidebar {
    width: 272px;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--ink-900) 0%, #1a2140 100%);
    color: #aab0c9;
}
.admin-sidebar .nav-link {
    color: #aab0c9;
    border-radius: var(--radius-sm);
    font-weight: 500;
    padding: 0.75rem 1rem;
    transition: background-color .15s ease, color .15s ease;
}
.admin-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #fff;
}
.admin-sidebar .nav-link.active {
    background-color: var(--brand-600);
    color: #fff;
    box-shadow: var(--shadow-md);
}

/* ---------- Cabeçalhos de secção (ícone + título + descrição) ---------- */
.section-card-header {
    display: flex;
    align-items: center;
    padding: 1.75rem;
    background: #fafbfd;
    border-bottom: 1px solid rgba(16, 24, 40, .05);
}
.section-card-header .icon-tile { width: 60px; height: 60px; font-size: 1.5rem; }

/* ---------- Tabelas ---------- */
.table-surface {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.table-surface table { margin-bottom: 0; }
.table-surface thead th {
    background: #fafbfd;
    border-bottom: 1px solid rgba(16, 24, 40, .06);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--ink-500);
    font-weight: 700;
    padding: 1rem 1.5rem;
}
.table-surface tbody td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(16, 24, 40, .04);
    vertical-align: middle;
}
.table-surface tbody tr:last-child td { border-bottom: none; }
.table-surface tbody tr:hover { background-color: color-mix(in srgb, var(--brand-50) 60%, transparent); }

/* ---------- Números grandes (stat-like) ---------- */
.stat-number {
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* ---------- Nav tabs (modais) ---------- */
.nav-tabs { border-bottom: 1px solid rgba(16, 24, 40, .08); }
.nav-tabs .nav-link {
    border: none;
    color: var(--ink-500);
    font-weight: 600;
    padding: 1rem 0.25rem;
    margin-right: 1.75rem;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}
.nav-tabs .nav-link.active {
    color: var(--brand-600);
    background: transparent;
    border-bottom-color: var(--brand-600);
}

/* ---------- Modais ---------- */
.modal-content { border: none; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

/* ---------- Certificados / cartões de modelo ---------- */
.template-thumb {
    aspect-ratio: 1.41;
    object-fit: contain;
    background: var(--surface-bg);
    border-radius: var(--radius-md);
}

.certificate-preview-scale { transform-origin: top center; }

/* ---------- Loading ---------- */
.spinner-brand { color: var(--brand-600); }

@media (max-width: 767.98px) {
    .admin-sidebar { width: 100%; }
}