/* =====================================================
   Cosmex CRM — CSS principal
   Paleta oficial: Roxo #5D36F4 → Azul #2A7BFA → Ciano #00D2FF
   Tipografia: Plus Jakarta Sans (títulos) + Inter (corpo)
   Espelha a identidade do site cosmex.com.br
   ===================================================== */

:root {
    /* ---- Paleta oficial (espelho do site) ---- */
    --roxo:        #5D36F4;
    --azul:        #2A7BFA;
    --ciano:       #00D2FF;
    --azul-medio:  #008BFF;
    --escuro:      #0F0A1F;
    --branco:      #ffffff;
    --cinza-claro: #f4f4f7;
    --cinza-borda: #e2e2e8;
    --texto:       #1a1a2e;
    --texto-suave: #6b6b80;
    --sucesso:     #16a34a;
    --alerta:      #eab308;
    --erro:        #ef4444;

    --gradiente:   linear-gradient(135deg, #5D36F4 0%, #2A7BFA 50%, #00D2FF 100%);
    --gradiente-suave: linear-gradient(135deg, rgba(93,54,244,.08) 0%, rgba(0,210,255,.08) 100%);

    /* ---- Métricas ---- */
    --raio:    0.75rem;
    --raio-lg: 1.25rem;
    --raio-xl: 1.75rem;
    --sombra:      0 20px 60px -15px rgba(93, 54, 244, 0.25);
    --sombra-lg:   0 30px 80px -20px rgba(93, 54, 244, 0.35);
    --sombra-sutil: 0 1px 2px rgba(15, 10, 31, 0.04), 0 2px 8px rgba(15, 10, 31, 0.06);

    /* ---- Tipografia ---- */
    --fonte-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fonte-corpo:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---- Aliases cx-* (compatibilidade com código existente) ---- */
    --cx-fundo:            var(--cinza-claro);
    --cx-painel:           var(--branco);
    --cx-borda:            var(--cinza-borda);
    --cx-texto:            var(--texto);
    --cx-texto-fraco:      var(--texto);
    --cx-texto-mudo:       var(--texto-suave);
    --cx-primaria:         var(--roxo);
    --cx-primaria-hover:   #4c2ad4;
    --cx-fonte:            var(--fonte-corpo);
    --cx-fonte-titulo:     var(--fonte-display);
    --cx-raio:             var(--raio);
    --cx-raio-lg:          var(--raio-lg);
    --cx-sidebar-w:        260px;
    --cx-sombra:           var(--sombra-sutil);
    --cx-sombra-lg:        var(--sombra-lg);
    --cx-sucesso:          var(--sucesso);
    --cx-erro:             var(--erro);
    --cx-alerta:           var(--alerta);
    --cx-info:             var(--azul);
    --cx-cinza-3:          var(--texto-suave);
    --cx-cinza-4:          #8892A6;
    --cx-cinza-5:          #C8CCD6;
    --cx-cinza-6:          var(--cinza-borda);
    --cx-cinza-7:          var(--cinza-claro);
    --cx-branco:           var(--branco);
    --cx-preto:            var(--escuro);
}

/* ==================== RESET ==================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--fonte-corpo);
    color: var(--texto);
    background: var(--cinza-claro);
    line-height: 1.6;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--texto);
}
a { text-decoration: none; color: var(--roxo); }
a:hover { text-decoration: underline; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ==================== UTILITÁRIOS ==================== */
.bg-gradiente { background: var(--gradiente); }
.texto-gradiente {
    background: var(--gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.bg-escuro { background-color: var(--escuro); }

/* ==================== LOGOTIPO ==================== */
.cosmex-logo { display: inline-flex; align-items: center; gap: 0.625rem; }
.cosmex-logo-icon { flex-shrink: 0; }
.cosmex-wordmark {
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--logo-color, var(--texto));
    text-transform: lowercase;
    letter-spacing: -0.02em;
    line-height: 1;
}
.cosmex-tm { font-size: 0.5em; opacity: 0.5; vertical-align: super; margin-left: 1px; }

/* ==================== BOTÕES ==================== */
.btn, .cx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--raio);
    font-family: var(--fonte-display);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    white-space: nowrap;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}
.btn:active, .cx-btn:active { transform: scale(0.97); }
.btn:disabled, .cx-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:hover, .cx-btn:hover { text-decoration: none; }

.btn-gradient, .cx-btn-primario {
    background: var(--gradiente);
    color: var(--branco);
    box-shadow: var(--sombra);
}
.btn-gradient:hover, .cx-btn-primario:hover { opacity: 0.92; color: var(--branco); }

.btn-ghost, .cx-btn-fantasma {
    background: transparent;
    color: var(--texto);
    border: 1px solid var(--cinza-borda);
}
.btn-ghost:hover, .cx-btn-fantasma:hover { border-color: var(--roxo); color: var(--roxo); background: rgba(93,54,244,.04); }

.btn-outline {
    border: 1px solid var(--cinza-borda);
    color: var(--texto);
    background: transparent;
}
.btn-outline:hover { border-color: var(--roxo); color: var(--roxo); }

.cx-btn-secundario { background: var(--escuro); color: var(--branco); }
.cx-btn-secundario:hover { background: #1a1233; color: var(--branco); }

.cx-btn-perigo { background: var(--erro); color: var(--branco); }
.cx-btn-perigo:hover { background: #dc2626; color: var(--branco); }

.cx-btn-sm { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
.btn-lg    { padding: 1rem 2rem; font-size: 1rem; height: 3.25rem; }
.cx-btn-bloco { width: 100%; }

/* ==================== APP LAYOUT ==================== */
body.app {
    display: grid;
    grid-template-columns: var(--cx-sidebar-w) 1fr;
    min-height: 100vh;
    background: var(--cinza-claro);
}

.cx-sidebar {
    background: var(--escuro);
    color: rgba(255,255,255,0.75);
    display: flex; flex-direction: column;
    padding: 20px 0;
    position: sticky; top: 0;
    height: 100vh;
    overflow-y: auto;
    position: relative;
}
/* Orb decorativo sutil na sidebar, ecoa o site */
.cx-sidebar::before {
    content: '';
    position: absolute;
    top: -80px; left: -80px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: var(--gradiente);
    opacity: 0.15;
    filter: blur(60px);
    pointer-events: none;
}
.cx-sidebar > * { position: relative; z-index: 1; }

.cx-brand { padding: 0 20px 20px; }
.cx-brand-link { display: flex; align-items: center; gap: 10px; }
.cx-brand-link .cosmex-wordmark { font-size: 1.25rem; }

.cx-org {
    margin: 0 14px 18px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--raio);
    background: rgba(255,255,255,.03);
    backdrop-filter: blur(4px);
}
.cx-org-nome {
    color: var(--branco);
    font-family: var(--fonte-display);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-org-papel {
    font-size: 10.5px; text-transform: uppercase;
    color: rgba(255,255,255,.45); letter-spacing: 0.08em;
    margin-top: 3px; font-weight: 600;
}

.cx-nav { padding: 4px 14px; flex: 1; }
.cx-nav-sep {
    padding: 18px 8px 8px; margin-top: 8px;
    color: rgba(255,255,255,.35);
    font-size: 10.5px; letter-spacing: 0.1em;
    text-transform: uppercase; font-weight: 700;
    font-family: var(--fonte-display);
    border-top: 1px solid rgba(255,255,255,.06);
}
.cx-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    color: rgba(255,255,255,.75); text-decoration: none;
    font-size: 14px; font-weight: 500;
    transition: all .15s;
    margin-bottom: 2px;
}
.cx-nav-item:hover {
    background: rgba(255,255,255,.06);
    color: var(--branco);
    text-decoration: none;
}
.cx-nav-item.ativo {
    background: var(--gradiente);
    color: var(--branco);
    font-weight: 600;
    box-shadow: 0 4px 14px -4px rgba(93,54,244,.5);
}
.cx-nav-item.ativo:hover { color: var(--branco); }
.cx-nav-ico { display: inline-block; width: 18px; text-align: center; opacity: .85; }

.cx-user {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; margin-top: auto;
    border-top: 1px solid rgba(255,255,255,.06);
}
.cx-user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--gradiente);
    color: var(--branco);
    display: grid; place-items: center;
    font-weight: 700; font-family: var(--fonte-display);
    box-shadow: 0 4px 12px -4px rgba(93,54,244,.5);
}
.cx-user-info { flex: 1; min-width: 0; }
.cx-user-nome {
    color: var(--branco); font-size: 13px; font-weight: 600;
    font-family: var(--fonte-display);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-user-sair { color: rgba(255,255,255,.45); font-size: 12px; }
.cx-user-sair:hover { color: var(--ciano); text-decoration: none; }

.cx-main { min-width: 0; display: flex; flex-direction: column; }
.cx-topbar {
    height: 68px; padding: 0 32px;
    display: flex; align-items: center;
    background: var(--branco);
    border-bottom: 1px solid var(--cinza-borda);
    position: sticky; top: 0; z-index: 10;
}
.cx-titulo { font-size: 1.375rem; font-weight: 700; }
.cx-conteudo { padding: 32px; flex: 1; }

/* ==================== CARDS ==================== */
.cx-card {
    background: var(--branco);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio-lg);
    padding: 24px;
    box-shadow: var(--sombra-sutil);
}
.cx-card + .cx-card { margin-top: 16px; }
.cx-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px; margin-bottom: 16px;
    border-bottom: 1px solid var(--cinza-borda);
    gap: 16px;
}
.cx-card-titulo { font-size: 1.125rem; font-weight: 700; }

/* ==================== FORMULÁRIOS ==================== */
.cx-campo, .form-group { margin-bottom: 1.25rem; }
.cx-label {
    display: block; margin-bottom: 0.5rem;
    font-size: 0.875rem; font-weight: 600; color: var(--texto);
}
.form-group label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--texto); }
.form-group label a { float: right; color: var(--roxo); font-weight: 500; font-size: 0.75rem; text-decoration: none; }
.form-group label a:hover { text-decoration: underline; }

.form-input-wrapper { position: relative; }
.form-input-wrapper svg { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--texto-suave); }

.cx-input, .cx-select, .cx-textarea, .form-input {
    width: 100%;
    padding: 0.75rem 0.875rem;
    font-family: inherit;
    font-size: 0.875rem;
    background: var(--branco);
    color: var(--texto);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    transition: border-color .15s, box-shadow .15s;
}
.form-input { padding-left: 2.5rem; }
.form-input.no-icon { padding-left: 0.875rem; }
.cx-input:focus, .cx-select:focus, .cx-textarea:focus, .form-input:focus {
    outline: 0;
    border-color: var(--roxo);
    box-shadow: 0 0 0 3px rgba(93, 54, 244, .12);
}
.form-input.error { border-color: var(--erro); }
.cx-textarea { min-height: 96px; resize: vertical; }
.cx-ajuda { font-size: 0.75rem; color: var(--texto-suave); margin-top: 0.375rem; }

.form-error { font-size: 0.75rem; color: var(--erro); margin-top: 0.375rem; display: flex; align-items: center; gap: 0.25rem; }
.form-checkbox { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.form-checkbox label { font-size: 0.875rem; color: var(--texto-suave); cursor: pointer; }
.form-checkbox input[type="checkbox"] { accent-color: var(--roxo); width: 16px; height: 16px; }

.cx-erro-campo {
    background: #FEF2F2; border: 1px solid #FECACA;
    color: #991B1B; padding: 0.75rem 1rem;
    border-radius: var(--raio); font-size: 0.8125rem; margin-bottom: 1.25rem;
    display: flex; align-items: flex-start; gap: 0.5rem;
}
.cx-sucesso-campo {
    background: #F0FDF4; border: 1px solid #BBF7D0;
    color: #14532D; padding: 0.75rem 1rem;
    border-radius: var(--raio); font-size: 0.8125rem; margin-bottom: 1.25rem;
}

/* ==================== TABELAS ==================== */
.cx-tabela { width: 100%; border-collapse: collapse; }
.cx-tabela th, .cx-tabela td {
    text-align: left; padding: 12px 16px;
    border-bottom: 1px solid var(--cinza-borda);
}
.cx-tabela th {
    font-family: var(--fonte-display);
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--texto-suave);
    background: var(--cinza-claro);
}
.cx-tabela tbody tr { transition: background .12s; }
.cx-tabela tbody tr:hover { background: rgba(93,54,244,.03); }

/* ==================== BADGES ==================== */
.cx-badge {
    display: inline-block; padding: 3px 10px;
    border-radius: 999px; font-size: 0.75rem; font-weight: 600;
    background: var(--cinza-borda); color: var(--texto-suave);
    font-family: var(--fonte-display);
}
.cx-badge-aberta { background: #DBEAFE; color: #1E40AF; }
.cx-badge-ganho { background: #DCFCE7; color: #14532D; }
.cx-badge-perdido { background: #FEE2E2; color: #991B1B; }
.cx-badge-descartado { background: var(--cinza-borda); color: var(--texto-suave); }

/* ==================== KANBAN ==================== */
.cx-kanban {
    display: flex; gap: 14px;
    overflow-x: auto; padding-bottom: 12px;
}
.cx-coluna {
    flex: 0 0 300px;
    background: var(--cinza-claro);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio-lg);
    padding: 14px;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 200px);
}
.cx-coluna-titulo {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--fonte-display);
    font-weight: 700; margin-bottom: 12px; font-size: 0.9375rem;
}
.cx-coluna-cor {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--roxo); display: inline-block; margin-right: 8px;
}
.cx-coluna-contador {
    background: var(--branco); color: var(--texto-suave);
    padding: 2px 10px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600;
    border: 1px solid var(--cinza-borda);
}
.cx-coluna-lista { flex: 1; overflow-y: auto; }
.cx-card-negocio {
    background: var(--branco);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: grab;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.cx-card-negocio:hover {
    box-shadow: var(--sombra-sutil);
    border-color: rgba(93,54,244,.3);
    transform: translateY(-1px);
}
.cx-card-negocio.arrastando { opacity: 0.4; cursor: grabbing; }
.cx-card-negocio h4 { font-family: var(--fonte-display); font-size: 0.875rem; margin-bottom: 4px; }
.cx-card-negocio .valor {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700; font-family: var(--fonte-display);
    font-size: 0.9375rem;
}
.cx-card-negocio .contato { font-size: 0.75rem; color: var(--texto-suave); margin-top: 4px; }

/* ==================== VAZIO ==================== */
.cx-vazio {
    text-align: center; padding: 60px 20px;
    color: var(--texto-suave);
}
.cx-vazio h3 { font-size: 1.125rem; margin-bottom: 8px; color: var(--texto); }
.cx-vazio p { font-size: 0.875rem; }

/* ==================== TOAST ==================== */
.cx-toast-container {
    position: fixed; bottom: 24px; right: 24px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 999;
}
.cx-toast {
    background: var(--escuro); color: var(--branco);
    padding: 12px 18px; border-radius: var(--raio);
    font-size: 0.875rem; font-weight: 500;
    box-shadow: var(--sombra-lg);
    animation: cxSlideIn .2s ease-out;
    max-width: 360px;
    border: 1px solid rgba(255,255,255,.08);
}
.cx-toast.sucesso { background: var(--sucesso); }
.cx-toast.erro    { background: var(--erro); }
.cx-toast.alerta  { background: var(--alerta); color: var(--escuro); }
@keyframes cxSlideIn {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ==================== PÁGINAS PÚBLICAS (login, cadastro, seletor) ==================== */
/* Estilo espelhado do login.php do site institucional cosmex.com.br */

body.publica { min-height: 100vh; background: var(--branco); }

.login-page { min-height: 100vh; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .login-page { flex-direction: row; } }

/* Painel esquerdo (marca) */
.login-brand {
    background: var(--escuro);
    padding: 2rem;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
    color: var(--branco);
}
@media (min-width: 1024px) { .login-brand { width: 50%; padding: 3rem; } }

.login-brand-orb {
    position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}

.login-back {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: rgba(255,255,255,0.7); font-size: 0.875rem;
    position: relative; z-index: 1;
    text-decoration: none; width: fit-content;
}
.login-back:hover { color: var(--branco); text-decoration: none; }

.login-brand-content { position: relative; z-index: 1; max-width: 28rem; }
.login-brand-content h1 {
    color: var(--branco);
    font-family: var(--fonte-display);
    font-size: 1.875rem; margin: 2rem 0 1rem;
    line-height: 1.2;
}
@media (min-width: 1024px) { .login-brand-content h1 { font-size: 2.25rem; } }
.login-brand-content p { color: rgba(255,255,255,0.65); font-size: 1rem; line-height: 1.6; }

.login-brand-features {
    margin-top: 2rem;
    display: grid; gap: 0.75rem;
}
.login-brand-features li {
    display: flex; align-items: center; gap: 0.625rem;
    color: rgba(255,255,255,.75);
    font-size: 0.9375rem;
}
.login-brand-features .tick {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    display: grid; place-items: center; flex-shrink: 0;
}
.login-brand-features .tick svg { color: var(--ciano); }

.login-brand-footer {
    position: relative; z-index: 1;
    color: rgba(255,255,255,0.4); font-size: 0.75rem;
}
.login-brand-footer .status {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: rgba(255,255,255,.55);
}
.login-brand-footer .status .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
}

/* Painel direito (form) */
.login-form-side {
    background: var(--branco);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
@media (min-width: 1024px) { .login-form-side { width: 50%; padding: 3rem; } }

.login-form { width: 100%; max-width: 28rem; }
.login-form h2 {
    font-size: 1.5rem; margin-bottom: 0.5rem;
    font-family: var(--fonte-display);
}
.login-form > p.sub { color: var(--texto-suave); margin-bottom: 2rem; font-size: 0.9375rem; }

.login-submit { width: 100%; height: 3rem; margin-bottom: 1rem; }
.login-signup { text-align: center; font-size: 0.875rem; color: var(--texto-suave); margin-top: 1.5rem; }
.login-signup a { color: var(--roxo); font-weight: 600; }

/* Seletor de organização (cards clicáveis) */
.org-lista { display: grid; gap: 0.75rem; margin-top: 1rem; }
.org-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    background: var(--branco);
    color: var(--texto); text-align: left;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit; font-size: inherit;
    width: 100%;
}
.org-item:hover {
    border-color: var(--roxo);
    background: rgba(93,54,244,.03);
    transform: translateY(-1px);
    box-shadow: var(--sombra-sutil);
}
.org-item strong { font-family: var(--fonte-display); font-weight: 700; }
.org-item .papel { color: var(--texto-suave); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

/* ==================== ROW / UTILS ==================== */
.cx-row { display: flex; gap: 16px; flex-wrap: wrap; }
.cx-row > * { flex: 1; min-width: 0; }
.cx-mt-8  { margin-top: 0.5rem; }
.cx-mt-16 { margin-top: 1rem; }
.cx-mt-24 { margin-top: 1.5rem; }
.cx-mb-16 { margin-bottom: 1rem; }
.cx-flex-entre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cx-flex-fim   { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.cx-txt-mudo   { color: var(--texto-suave); }
.cx-txt-fraco  { color: var(--texto); opacity: 0.72; }
.cx-txt-sm     { font-size: 0.8125rem; }

/* Reset legado do editor de etapas */
.cx-linha-etapa { transition: background .12s; }
.cx-linha-etapa.arrastando { opacity: 0.4; }