/**
 * Zelo — tema visual oficial (teal → verde, marca Alicerce).
 * Assets: /assets/brand/zelo/
 */
@import url('/css/fonts-base.css');

:root {
    --zelo-primary: #0EA3A3;
    --zelo-primary-hover: #0B8585;
    --zelo-accent: #6CC05A;
    --zelo-accent-soft: #B6CF51;
    --zelo-primary-soft: rgba(14, 163, 163, 0.14);
    --zelo-charcoal: #102F33;
    --zelo-charcoal-mid: #1A4248;
    --zelo-white: #FFFFFF;
    --zelo-gray-bg: #F4FAFA;
    --zelo-gray-text: #5B7275;

    --base-orange: var(--zelo-primary);
    --base-orange-hover: var(--zelo-primary-hover);
    --base-charcoal: var(--zelo-charcoal);
    --base-charcoal-mid: var(--zelo-charcoal-mid);

    --cor-header-bg: var(--zelo-charcoal);
    --cor-menu-bg: var(--zelo-charcoal-mid);
    --cor-link-padrao: var(--zelo-primary);
    --cor-vermelho: var(--zelo-primary);
    --cor-fundo-pagina: var(--zelo-gray-bg);
}

body.theme-zelo,
body.instance-zelo {
    --rd-primary: var(--zelo-primary);
    --rd-primary-dark: var(--zelo-charcoal);
    --rd-primary-light: var(--zelo-accent);
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--zelo-charcoal);
    background: var(--zelo-gray-bg);
}

body.theme-zelo.login-page,
body.instance-zelo.login-page {
    background: linear-gradient(135deg, #102F33 0%, #0EA3A3 55%, #6CC05A 130%);
}

body.theme-zelo .login-box,
body.instance-zelo .login-box {
    border-top: 3px solid var(--zelo-primary);
}

body.theme-zelo .login-header .logo-img,
body.instance-zelo .login-header .logo-img {
    max-height: 72px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

body.theme-zelo .btn-login,
body.instance-zelo .btn-login {
    background: linear-gradient(90deg, var(--zelo-primary) 0%, var(--zelo-accent) 100%);
    border-color: var(--zelo-primary);
}

body.theme-zelo .btn-login:hover,
body.instance-zelo .btn-login:hover {
    background: linear-gradient(90deg, var(--zelo-primary-hover) 0%, #5aad4a 100%);
}

body.theme-zelo .sidebar-brand-wide,
body.instance-zelo .sidebar-brand-wide {
    max-height: 44px;
    width: auto;
}