:root {
    --verde-claro: #B9E34B;
    --verde-escuro: #5F8D2D;
    --laranja: #F6A03A;
    --cinza-fundo: #F5F6F8;
    --branco: #FFFFFF;
    --texto: #2B2E33;
    --texto-suave: #8A8F98;
    --raio: 18px;
    --sombra: 0 8px 24px rgba(20, 20, 20, 0.06);
}

* { box-sizing: border-box; }

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--cinza-fundo);
    color: var(--texto);
}

a { text-decoration: none; }

/* ---------- Layout ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    background: var(--branco);
    border-right: 1px solid #ECEEF1;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar .marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 24px 8px;
    font-weight: 600;
    font-size: 1.1rem;
}
.sidebar .marca .bolha {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--verde-claro);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--verde-escuro);
}

.sidebar .item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 12px;
    color: var(--texto-suave); font-size: 0.92rem; font-weight: 500;
}
.sidebar .item:hover { background: var(--cinza-fundo); color: var(--texto); }
.sidebar .item.ativo { background: var(--verde-claro); color: var(--verde-escuro); }
.sidebar .item i { width: 18px; text-align: center; }

.conteudo { flex: 1; padding: 24px 28px; min-width: 0; }

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.topbar h1 { font-size: 1.4rem; font-weight: 600; margin: 0; }
.topbar .subtitulo { color: var(--texto-suave); font-size: 0.9rem; }

.usuario-chip {
    display: flex; align-items: center; gap: 10px;
    background: var(--branco); padding: 8px 14px; border-radius: 999px;
    box-shadow: var(--sombra);
}
.usuario-chip .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--verde-claro); color: var(--verde-escuro);
    display: flex; align-items: center; justify-content: center; font-weight: 600;
}

/* ---------- Cards ---------- */
.card-app {
    background: var(--branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    border: none;
    padding: 20px;
}

.card-indicador { text-align: left; }
.card-indicador .rotulo { color: var(--texto-suave); font-size: 0.82rem; }
.card-indicador .valor { font-size: 1.6rem; font-weight: 700; margin-top: 4px; }
.card-indicador .icone {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px; font-size: 1.1rem;
}
.bg-verde { background: #EAF7CE; color: var(--verde-escuro); }
.bg-laranja { background: #FDECD7; color: var(--laranja); }
.bg-cinza { background: #EFF1F4; color: var(--texto-suave); }

/* ---------- Botões ---------- */
.btn-primario {
    background: var(--verde-claro); color: var(--verde-escuro);
    border: none; font-weight: 600; border-radius: 12px; padding: 10px 18px;
}
.btn-primario:hover { background: #A9D33B; color: var(--verde-escuro); }

.btn-outline-app {
    border: 1px solid #E2E5EA; color: var(--texto); border-radius: 12px; background: var(--branco);
}

/* ---------- Tabelas ---------- */
.tabela-app { background: var(--branco); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.tabela-app table { margin-bottom: 0; }
.tabela-app th { color: var(--texto-suave); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; border-bottom: 1px solid #EEF0F3; }
.tabela-app td { vertical-align: middle; border-bottom: 1px solid #F3F4F6; }

.badge-status { border-radius: 999px; padding: 5px 12px; font-size: 0.75rem; font-weight: 600; }
.badge-ativo { background: #EAF7CE; color: var(--verde-escuro); }
.badge-inativo { background: #F3F4F6; color: var(--texto-suave); }
.badge-agendado { background: #FDECD7; color: var(--laranja); }
.badge-confirmado { background: #E7F0FF; color: #3364D6; }
.badge-realizado { background: #EAF7CE; color: var(--verde-escuro); }
.badge-cancelado { background: #FBE7E7; color: #C0392B; }

/* ---------- Login ---------- */
.tela-login {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--cinza-fundo);
}
.card-login {
    background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra);
    padding: 40px; width: 100%; max-width: 380px;
}

/* ---------- Login layout with side panel ---------- */
.login-lado {
    display: none;
}
@media (min-width: 900px) {
    .tela-login { padding: 40px; }
    .login-wrap { display: flex; max-width: 900px; width: 100%; box-shadow: var(--sombra); border-radius: var(--raio); overflow: hidden; }
    .login-lado {
        display: flex; flex-direction: column; justify-content: center;
        background: linear-gradient(160deg, var(--verde-claro), var(--verde-escuro));
        color: #fff; width: 45%; padding: 40px;
    }
    .card-login { border-radius: 0; box-shadow: none; width: 55%; }
}

@media (max-width: 900px) {
    .sidebar { position: fixed; left: -260px; z-index: 20; transition: left .2s; box-shadow: var(--sombra); }
    .sidebar.aberta { left: 0; }
    .conteudo { padding: 16px; }
}