/* ─────────────────────────────────────────────────────────────
   AgriFlow — Menu de Conta (ADR 0025)

   Uma folha só, igual em toda tela. No celular sobe de baixo (bottom
   sheet), no desktop centraliza como diálogo. O markup vem de
   assets/js/conta-sheet.js; aqui mora só a forma.
   ───────────────────────────────────────────────────────────── */

.cs-overlay { z-index: 9200; align-items: flex-end; padding: 0; }

.cs-sheet {
    position: relative;
    width: 100%; max-width: 100%;
    max-height: 88vh; overflow-y: auto; overflow-x: hidden;
    border-radius: 22px 22px 0 0;
    padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
    background: #FFFFFF;
}

/* Puxador: diz "isto sobe de baixo e desce" sem uma palavra. */
.cs-grip {
    width: 40px; height: 4px; margin: 0 auto 6px;
    background: #E2E8F0; border-radius: 999px;
}

.cs-fechar {
    position: absolute; top: 12px; right: 14px;
    width: 34px; height: 34px; border: none; border-radius: 50%;
    background: #F1F5F9; color: #64748B;
    font-size: 14px; line-height: 1; cursor: pointer;
}
.cs-fechar:hover { background: #E2E8F0; color: #1C2B27; }

/* ── Identidade ───────────────────────────────────────────── */
.cs-ident {
    display: flex; align-items: center; gap: 14px;
    padding: 8px 0 16px; border-bottom: 1px solid #F1F5F9;
}
.cs-avatar {
    display: grid; place-items: center; flex-shrink: 0;
    width: 52px; height: 52px; border-radius: 50%;
    background: #C8A227; color: #163832;
    font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800;
}
.cs-ident-txt { min-width: 0; flex: 1; }
.cs-nome {
    margin: 0; font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700;
    color: #1C2B27; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-empresa {
    margin: 2px 0 0; font-family: 'Inter', sans-serif; font-size: 13px;
    color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-papel {
    display: inline-block; margin-top: 7px; padding: 2px 10px;
    border-radius: 999px; background: rgba(22, 56, 50, .09); color: #163832;
    font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
}

/* ── Plano ────────────────────────────────────────────────── */
.cs-plano {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px; padding: 12px 14px;
    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px;
}
.cs-plano-lbl {
    font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: #94A3B8;
}
.cs-plano-val {
    flex: 1; min-width: 0;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: #1C2B27;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-plano-cta {
    flex-shrink: 0; padding: 6px 12px; border-radius: 8px;
    background: #163832; color: #C8A227; text-decoration: none;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
}

/* ── Atalhos ──────────────────────────────────────────────── */
.cs-links { display: flex; flex-direction: column; margin-top: 8px; }
.cs-secao {
    margin: 14px 0 4px;
    font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: #94A3B8;
}
.cs-link {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: 2px 10px; min-height: 52px; padding: 10px 4px;
    border-bottom: 1px solid #F1F5F9; text-decoration: none;
}
.cs-link:last-child { border-bottom: none; }
.cs-link:active { background: #F8FAFC; }
.cs-link-nome {
    grid-column: 1; min-width: 0;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: #1C2B27;
}
.cs-link-dica {
    grid-column: 1; min-width: 0;
    font-family: 'Inter', sans-serif; font-size: 12px; color: #94A3B8;
}
.cs-link-seta {
    grid-column: 2; grid-row: 1 / -1;
    font-size: 22px; line-height: 1; color: #CBD5E1;
}

/* ── Sair ─────────────────────────────────────────────────── */
.cs-sair {
    width: 100%; min-height: 48px; margin-top: 18px;
    border: 1px solid #FECACA; border-radius: 12px;
    background: #FEF2F2; color: #DC2626; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
}
.cs-sair:hover { background: #FEE2E2; }

/* ── Desktop: diálogo centralizado ────────────────────────── */
@media (min-width: 769px) {
    .cs-overlay { align-items: center; padding: 16px; }
    .cs-sheet {
        max-width: 380px; max-height: 90vh;
        border-radius: 18px; padding: 18px 22px 22px;
    }
    .cs-grip { display: none; }
}