/**
 * Zelo — tema visual (guia de marca 2026).
 * Teal #0F2E32 · #0FA3A3 · Verde #6CC05A · Lime #B8E14A · Off-white #F2F4F7
 * Sem gradientes — cores sólidas apenas.
 */
@import url('/css/theme-base.css');
@import url('/css/fonts-zelo.css');

:root,
body.theme-zelo,
body.instance-zelo {
    --zelo-teal-dark: #0F2E32;
    --zelo-teal: #0FA3A3;
    --zelo-green: #6CC05A;
    --zelo-lime: #B8E14A;
    --zelo-offwhite: #F2F4F7;
    --zelo-text: #222628;
    --zelo-white: #FFFFFF;
    --zelo-teal-mid: #1a4248;

    --base-orange: var(--zelo-lime);
    --base-orange-hover: #a3c93f;
    --base-orange-soft: rgba(184, 225, 74, 0.18);
    --base-charcoal: var(--zelo-teal-dark);
    --base-charcoal-mid: var(--zelo-teal-mid);
    --base-charcoal-light: #2a555c;
    --base-white: var(--zelo-white);
    --base-gray-bg: var(--zelo-offwhite);
    --base-gray-text: #64748b;

    --cor-header-bg: var(--zelo-teal-dark);
    --cor-menu-bg: var(--zelo-teal-mid);
    --cor-menu-link-texto: var(--zelo-offwhite);
    --cor-menu-link-hover-bg: var(--zelo-lime);
    --cor-menu-link-hover-texto: var(--zelo-teal-dark);
    --cor-dropdown-bg: var(--zelo-teal-mid);
    --cor-dropdown-link-hover-bg: var(--zelo-lime);

    --cor-texto-principal: var(--zelo-text);
    --cor-fundo-pagina: var(--zelo-offwhite);
    --cor-link-padrao: #0b7f7f;


    --cor-vermelho: var(--zelo-lime);
    --cor-vermelho-escuro: var(--zelo-green);
    --cor-chumbo: var(--zelo-teal-mid);
    --cor-chumbo-escuro: var(--zelo-teal-dark);
}

body.theme-zelo,
body.instance-zelo {
    font-family: var(--font-body, "Poppins", system-ui, sans-serif);
    background-color: var(--cor-fundo-pagina);
    color: var(--zelo-text);
}

/* Links e botões Zelo: theme-base não deve “sumir” com o contraste */
body.theme-zelo.zelo-shell:not(.zelo-shell--dark) a:not(.zelo-btn):not(.btn),
body.instance-zelo.zelo-shell:not(.zelo-shell--dark) a:not(.zelo-btn):not(.btn) {
    color: #0b7f7f;
}

body.theme-zelo.zelo-shell:not(.zelo-shell--dark) a:not(.zelo-btn):not(.btn):hover,
body.instance-zelo.zelo-shell:not(.zelo-shell--dark) a:not(.zelo-btn):not(.btn):hover {
    color: #086666 !important;
}

/* Anula gradientes herdados de theme-base (Zelo = cores sólidas) */
body.theme-zelo.login-page,
body.instance-zelo.login-page,
body.theme-base.theme-zelo.login-page,
body.theme-zelo .login-container,
body.instance-zelo .login-container,
body.theme-zelo .login-left,
body.instance-zelo .login-left,
body.theme-zelo .login-box,
body.instance-zelo .login-box {
    background: var(--zelo-teal-dark) !important;
    background-image: none !important;
}

body.theme-zelo .sidebar,
body.instance-zelo .sidebar {
    background: var(--zelo-teal-dark) !important;
    background-image: none !important;
    border-right: 1px solid rgba(184, 225, 74, 0.12);
}

body.theme-zelo .btn-primary,
body.theme-zelo .btn-login,
body.theme-zelo .btn.btn-primary,
body.instance-zelo .btn-primary,
body.instance-zelo .btn-login,
body.instance-zelo .btn.btn-primary {
    background-image: none !important;
}

body.theme-zelo .sidebar-subtitle,
body.instance-zelo .sidebar-subtitle {
    color: var(--zelo-lime);
}

body.theme-zelo .btn-primary,
body.theme-zelo .btn-login,
body.instance-zelo .btn-primary,
body.instance-zelo .btn-login {
    background: var(--zelo-lime);
    border-color: transparent;
    color: var(--zelo-teal-dark);
    font-weight: 600;
}

body.theme-zelo .btn-primary:hover,
body.instance-zelo .btn-primary:hover,
body.theme-zelo .btn-login:hover,
body.instance-zelo .btn-login:hover {
    background: var(--zelo-green);
    color: var(--zelo-teal-dark);
}

/* Páginas standalone Zelo — layout do shell em /zelo/assets/shell.css */
.zelo-shell {
    min-height: 100vh;
    background: var(--zelo-offwhite);
    color: var(--zelo-text);
    font-family: var(--font-body, "Poppins", system-ui, sans-serif);
}

.zelo-shell--dark {
    background: var(--zelo-teal-dark);
    color: var(--zelo-white);
}

/* Topbar/nav legado substituído pelo shell (sidebar + topbar magra) */
.zelo-topbar .zelo-tagline,
.zelo-tagline {
    display: none !important;
}

.zelo-nav {
    display: none !important;
}

.zelo-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px;
}

/* F5: estações usam workspace largo (ver /zelo/assets/experiencia.css) */
.zelo-wrap.zelo-workspace {
    max-width: 1480px;
    padding: 16px 20px 32px;
}

.zelo-card {
    background: var(--zelo-white);
    border-radius: 12px;
    padding: 18px 20px;
    margin-top: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    border: 1px solid #e5e7eb;
    text-align: left;
}

.zelo-shell--dark .zelo-card {
    background: var(--zelo-teal-mid);
    border-color: rgba(184, 225, 74, 0.15);
    color: var(--zelo-white);
}

/* Botões: geometria BASE; cores refinadas em /zelo/assets/ui-base.css */
.zelo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0fa3a3;
    color: #fff;
    border: 1px solid transparent;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: normal;
}

.zelo-btn:hover {
    background: #0c8585;
    color: #fff;
}

.zelo-btn--secondary {
    background: #f3f4f6;
    color: #111827;
    border-color: #e5e7eb;
}

.zelo-btn--secondary:hover {
    background: #e5e7eb;
    color: #111827;
}

.zelo-btn--muted {
    background: transparent;
    color: #6b7280;
    border-color: #d1d5db;
}

.zelo-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--zelo-white);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.zelo-table th {
    background: #f8fafc;
    color: #64748b;
    padding: 10px 12px;
    text-align: left;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid #e5e7eb;
}

.zelo-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    font-size: .875rem;
    color: #374151;
}

.zelo-badge {
    background: rgba(15, 163, 163, 0.12);
    color: #0c8585;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
}

.zelo-hero-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    color: #111827;
}

.zelo-hero-sub {
    color: #6b7280;
    font-size: 13px;
    margin: 0 0 18px;
}

.zelo-shell--dark .zelo-hero-title {
    color: var(--zelo-white);
}

.zelo-shell--dark .zelo-hero-sub {
    color: rgba(242, 244, 247, 0.65);
}

/* Login — logo claro no teal, sem caixa branca */
body.theme-zelo .login-header .logo-container,
body.instance-zelo .login-header .logo-container,
body.theme-zelo .login-header .logo-container--brand,
body.instance-zelo .login-header .logo-container--brand,
body.theme-zelo .login-header .logo-container--zelo,
body.instance-zelo .login-header .logo-container--zelo {
    width: auto !important;
    height: auto !important;
    max-width: 280px;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.theme-zelo .login-header .logo-img,
body.instance-zelo .login-header .logo-img,
body.theme-zelo .logo-container img,
body.instance-zelo .logo-container img {
    display: block;
    max-height: 64px !important;
    width: auto !important;
    max-width: 220px;
    height: auto !important;
    margin: 0 auto;
    object-fit: contain !important;
    border-radius: 0 !important;
    clip-path: none !important;
}

body.theme-zelo .login-hero-tagline,
body.instance-zelo .login-hero-tagline {
    color: var(--zelo-lime);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
}

/* Sidebar brand logo visível */
body.theme-zelo .sidebar-brand-wide,
body.instance-zelo .sidebar-brand-wide {
    display: block;
    max-height: 36px;
    width: auto;
    max-width: 140px;
}

body.theme-zelo .sidebar-brand-icon,
body.instance-zelo .sidebar-brand-icon {
    display: block;
    height: 32px;
    width: 32px;
}