/* ===================================
   EMA+ — pele visual (tokens do protótipo)
   Carregado por último nos layouts; só sobrepõe aparência.
   =================================== */

:root {
    --sky: #91D8F7; --sky-2: #DDF3FC; --sky-ink: #1F7FB0;
    --orange: #F58634; --orange-ink: #C45F14; --orange-2: #FEEBDD;
    --p-blue: #2F6BF2; --p-blue-2: #EAF0FF;
    --p-grad: linear-gradient(100deg, #6C86F0 0%, #7461D2 55%, #7A49AE 100%);
    --p-lilac: #F3F2FB; --p-text: #1E2330; --p-muted: #7A8194;
    --p-card: #FFFFFF; --p-line: #ECEDF3; --p-soft: #F7F8FB; --page: #EEF4F8;
    --ok: #1E9E6A; --ok-2: #E3F6EE; --warn: #B86E10; --warn-2: #FDF2E1;
    --bad: #DD5147; --bad-2: #FCE9E7; --vio: #8B5CF6; --vio-2: #F0EAFE;
    --p-shadow: 0 8px 24px -16px rgba(40, 50, 90, .35);
    --display: "Poppins", "Plus Jakarta Sans", system-ui, sans-serif;
    --body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-bs-theme="dark"] {
    --p-lilac: #1F2130; --p-text: #E7E9F1; --p-muted: #9CA3B7;
    --p-card: #1A1D27; --p-line: #2A2E3C; --p-soft: #161924; --page: #12141B;
    --p-blue-2: rgba(47, 107, 242, .18);
}

/* Bootstrap: cor primária e tipografia */
[data-color-theme=Blue_Theme]:root,
[data-bs-theme][data-color-theme=Blue_Theme]:root {
    --bs-primary: #2F6BF2;
    --bs-primary-rgb: 47, 107, 242;
    --bs-light-primary: rgba(47, 107, 242, .1);
    --bs-primary-bg-subtle: rgba(47, 107, 242, .1);
    --bs-body-font-family: var(--body);
    --bs-body-color: var(--p-text);
    --bs-border-radius: 10px;
}

[data-color-theme=Blue_Theme]:root .btn-primary,
[data-bs-theme][data-color-theme=Blue_Theme]:root .btn-primary {
    --bs-btn-bg: #2F6BF2; --bs-btn-border-color: #2F6BF2;
    --bs-btn-hover-bg: #2558CC; --bs-btn-hover-border-color: #2558CC;
    --bs-btn-active-bg: #2558CC; --bs-btn-active-border-color: #2558CC;
}

body {
    font-family: var(--body);
    font-size: 14px;
    background: var(--page);
    color: var(--p-text);
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .card-title, .fw-bolder {
    font-family: var(--display);
}

/* Topbar */
.modern-topbar {
    background: var(--p-card);
    border-bottom: 1px solid var(--p-line);
}

.nav-link:hover {
    background: var(--p-blue-2);
    color: var(--p-blue);
}

.nav-link.active {
    background: var(--p-blue);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(47, 107, 242, .7);
}

.profile-avatar,
.user-avatar-large {
    background: linear-gradient(135deg, #91D8F7, #6C86F0);
}

/* Cartões, faixas, botões, pills, inputs */
.card {
    background: var(--p-card);
    border: 1px solid var(--p-line);
    border-radius: 16px;
    box-shadow: var(--p-shadow);
}

.banner, .bg-primary-gradient, .welcome-banner {
    background: var(--p-grad) !important;
    color: #fff;
    border-radius: 16px;
}

.welcome-card, .card.welcome, .welcome-section-compact .card {
    background: var(--p-lilac);
}

.sec-t, .section-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--p-muted);
}

.btn { border-radius: 10px; font-weight: 600; }
.badge, .pill { border-radius: 999px; }
.form-control, .form-select { border-radius: 9px; }

/* PrimeVue (componentes Vue) */
.p-button { border-radius: 10px; }
.p-button:not(.p-button-secondary):not(.p-button-outlined):not(.p-button-text):not(.p-button-danger):not(.p-button-success) {
    background: var(--p-blue);
    border-color: var(--p-blue);
}
.p-inputtext, .p-select, .p-dropdown { border-radius: 9px; }

/* Rodapé "powered by" */
.page-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.page-wrapper > .pfoot { margin-top: auto; }

.pfoot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: var(--p-card);
    border-top: 1px solid var(--p-line);
    font-size: 12px;
    color: #5B6270;
}
.pfoot .pw { display: flex; align-items: center; gap: 12px; }
.pfoot .pw .psi { height: 22px; }
.pfoot .pw .iso { height: 38px; }
.pfoot .pw .dg { height: 32px; }
.pfoot .pw .sep { width: 1px; height: 26px; background: var(--p-line); }
[data-bs-theme="dark"] .pfoot { color: var(--p-muted); }
[data-bs-theme="dark"] .pfoot .pw img { background: #fff; border-radius: 6px; padding: 2px 4px; }

@media (max-width: 860px) {
    .pfoot { padding: 6px 10px; }
    .pfoot > div:last-child { display: none; }
}

@media (max-width: 520px) {
    .pfoot .pw { gap: 8px; font-size: 11px; }
    .pfoot .pw .psi { height: 16px; }
    .pfoot .pw .iso { height: 26px; }
    .pfoot .pw .dg { height: 22px; }
}

/* login: painel esquerdo (protótipo EMA+) */
.ema-login { flex: 1; display: flex; }
.ema-login-row { flex: 1; }
.ema-login-art { background: linear-gradient(150deg, #EEF9FE 0%, #D6F0FC 55%, #FEEBDD 100%); position: relative; overflow: hidden; padding: 48px 40px; color: #23303A; }
.ema-login-art h2 { font-family: var(--display); font-size: 38px; line-height: 1.08; margin: 0; max-width: 12ch; font-weight: 700; color: inherit; }
.ema-login-art h2 span { color: var(--orange-ink); }
.ema-login-art p { margin: 28px 0 0; max-width: 36ch; font-size: 15px; color: #44525E; }
.ema-login-mark { width: 54px; margin-bottom: 26px; }
.ema-login-ring { position: absolute; left: 40px; bottom: -60px; width: 420px; height: 420px; opacity: .35; pointer-events: none; }
.ema-login-form { display: flex; align-items: center; padding: 40px; }
.ema-login-box { width: 100%; }
.ema-login-logo { display: inline-block; margin-bottom: 28px; }
.ema-login-logo img { max-height: 56px; }
.ema-login-box h2 { font-size: 18px; }