.cliente-area {
    --cliente-borda: var(--cor_3-light);
    --cliente-fundo: #fff;
    --cliente-fundo-suave: var(--cor_4);
    --cliente-texto: var(--cor_2);
    --cliente-destaque: var(--cor_1);
    --cliente-destaque-claro: var(--cor_1-light);
    color: var(--cliente-texto);
    max-width: 1100px;
}

.cliente-area-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.cliente-card, .cliente-nav, .cliente-progress-card { background: var(--cliente-fundo); border: 1px solid var(--cliente-borda); border-radius: 10px; }
.cliente-nav { padding: 18px; position: sticky; top: 20px; }
.cliente-nav-perfil { display: flex; align-items: center; gap: 12px; padding: 8px 6px 18px; margin-bottom: 12px; border-bottom: 1px solid var(--cliente-borda); }
.cliente-nav-avatar { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%; color: var(--cliente-destaque); background: var(--cliente-fundo-suave); font-weight: 700; font-size: 18px; }
.cliente-nav-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cliente-nav-link { display: flex; align-items: center; gap: 11px; padding: 11px 12px; margin: 4px 0; border-radius: 7px; color: var(--cliente-texto); text-decoration: none; transition: background .15s ease, color .15s ease; }
.cliente-nav-link i { font-size: 20px; color: var(--cliente-destaque); }
.cliente-nav-link:hover { background: var(--cliente-fundo-suave); color: var(--cliente-texto); }
.cliente-nav-link.active { background: var(--cliente-destaque); color: #fff; }
.cliente-nav-link.active i { color: #fff; }
.cliente-nav-sair { border-top: 1px solid var(--cliente-borda); margin-top: 12px; padding-top: 12px; }
.cliente-nav-sair button { width: 100%; text-align: left; }
.cliente-pagina-titulo p:first-child { color: var(--cliente-destaque); letter-spacing: .08em; font-weight: 700; }
.cliente-lista-pedidos { display: grid; gap: 12px; }
.cliente-pedido-card { display: flex; align-items: center; gap: 14px; padding: 17px 18px; color: var(--cliente-texto); background: var(--cliente-fundo); border: 1px solid var(--cliente-borda); border-radius: 9px; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.cliente-pedido-card:hover { color: var(--cliente-texto); border-color: var(--cliente-destaque); box-shadow: 0 5px 18px rgba(40, 40, 47, .08); transform: translateY(-1px); }
.cliente-pedido-icone { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; border-radius: 50%; background: var(--cliente-fundo-suave); color: var(--cliente-destaque); font-size: 23px; }
.cliente-pedido-info { display: grid; gap: 3px; min-width: 0; }
.cliente-pedido-info small { color: #737373; }
.cliente-pedido-status { margin-left: auto; padding: 6px 10px; border-radius: 20px; background: var(--cliente-fundo-suave); font-size: .85rem; white-space: nowrap; }
.cliente-pedido-seta { color: var(--cliente-destaque); font-size: 23px; }
.cliente-vazio { border-style: dashed; }
.cliente-vazio-icone { color: var(--cliente-destaque); font-size: 42px; }
.cliente-form-label { font-weight: 600; }

.cliente-progress-card { padding: 26px 22px 20px; }
.cliente-progress-wrap { position: relative; padding: 0 3px; }
.cliente-progress-track, .cliente-progress-fill { position: absolute; z-index: 0; top: 17px; left: 10%; height: 4px; border-radius: 4px; }
.cliente-progress-track { right: 10%; background: var(--cliente-borda); }
.cliente-progress-fill { width: 0; background: var(--cliente-destaque); transition: width .25s ease; }
.cliente-progress-etapas { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 4px; padding: 0; margin: 0; list-style: none; }
.cliente-progress-etapa { width: 20%; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: .83rem; line-height: 1.25; color: #777; }
.cliente-progress-ponto { width: 36px; height: 36px; display: grid; place-items: center; margin: 0 0 9px; border: 2px solid var(--cliente-borda); border-radius: 50%; background: var(--cliente-fundo); color: #777; font-size: 17px; }
.cliente-progress-etapa.concluida, .cliente-progress-etapa.atual { color: var(--cliente-texto); font-weight: 600; }
.cliente-progress-etapa.concluida .cliente-progress-ponto { color: #fff; border-color: var(--cliente-destaque); background: var(--cliente-destaque); }
.cliente-progress-etapa.atual .cliente-progress-ponto { color: var(--cliente-destaque); border-color: var(--cliente-destaque); box-shadow: 0 0 0 4px var(--cliente-destaque-claro); }

@media (max-width: 767.98px) {
    .cliente-area-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .cliente-nav { position: static; padding: 12px; }
    .cliente-nav-perfil { display: none; }
    .cliente-nav-lista { display: flex; overflow-x: auto; gap: 5px; padding-bottom: 2px; }
    .cliente-nav-link { flex: 0 0 auto; margin: 0; padding: 9px 11px; }
    .cliente-nav-sair { display: none; }
    .cliente-pedido-card { gap: 10px; padding: 13px; }
    .cliente-pedido-status { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
    .cliente-progress-card { padding: 20px 8px 16px; }
    .cliente-progress-track, .cliente-progress-fill { top: 14px; }
    .cliente-progress-etapa { font-size: .68rem; overflow-wrap: anywhere; }
    .cliente-progress-ponto { width: 30px; height: 30px; font-size: 14px; margin-bottom: 7px; }
}