/* =========================================================
   MC2 DELIVERY — cliente_perfil.css
   FASE 4 — PADRONIZAÇÃO VISUAL
   Cores, raios e sombras usam o Design System global.
========================================================= */

.cliente-perfil-page {
min-height: 70vh;
padding: 35px 20px 60px;
}

.cliente-perfil-container {
width: min(
900px,
100%
);
margin: 0 auto;
}

.cliente-perfil-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 30px;
}

.cliente-perfil-eyebrow {
display: inline-block;
margin-bottom: 7px;
color: var(--mc2-info, #2563EB);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
}

.cliente-perfil-header h1 {
margin: 0;
color: var(--mc2-text, #111827);
font-size: 32px;
line-height: 1.2;
}

.cliente-perfil-header p {
margin: 9px 0 0;
color: var(--mc2-text-secondary, #6B7280);
font-size: 14px;
line-height: 1.6;
}

.cliente-perfil-back {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 9px 14px;
box-sizing: border-box;
border: 1px solid var(--mc2-info-border, #DBEAFE);
border-radius: var(--mc2-radius-md, 12px);
background: var(--mc2-info);
color:  var(--mc2-surface);
text-decoration: none;
font-size: 13px;
font-weight: 800;
transition:
transform .15s ease,
border-color .15s ease,
box-shadow .15s ease;
}

.cliente-perfil-back:hover {
transform: translateY(-1px);
background: var(--mc2-info-hover);
}

.cliente-perfil-section {
margin-bottom: 25px;
}

.cliente-perfil-card {
display: flex;
gap: 24px;
padding: 25px;
box-sizing: border-box;
background: var(--mc2-surface, #FFFFFF);
border: 1px solid var(--mc2-border, #E5E7EB);
border-radius: var(--mc2-radius-xl, 18px);
box-shadow:
var(--mc2-shadow-sm);
}

.cliente-perfil-photo-area {
flex: 0 0 auto;
}

.cliente-perfil-photo,
.cliente-perfil-photo-placeholder {
width: 105px;
height: 105px;
border-radius: 50%;
}

.cliente-perfil-photo {
display: block;
object-fit: cover;
border: 3px solid var(--mc2-surface, #FFFFFF);
box-shadow:
0 4px 15px rgba(
15,
23,
42,
0.15
);
}

.cliente-perfil-photo-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: var(--mc2-info-soft, #EFF6FF);
color: var(--mc2-info, #2563EB);
font-size: 34px;
font-weight: 900;
}

.cliente-perfil-main {
width: 100%;
min-width: 0;
}

.cliente-perfil-name {
margin-bottom: 22px;
}

.cliente-perfil-name span,
.cliente-perfil-item span {
display: block;
margin-bottom: 5px;
color: var(--mc2-text-secondary, #6B7280);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.cliente-perfil-name strong {
display: block;
color: var(--mc2-text, #111827);
font-size: 21px;
}

.cliente-perfil-grid {
display: grid;
grid-template-columns:
repeat(
2,
minmax(
0,
1fr
)
);
gap: 19px 30px;
}

.cliente-perfil-item {
min-width: 0;
}

.cliente-perfil-item strong {
display: block;
color: var(--mc2-text, #111827);
font-size: 14px;
line-height: 1.45;
word-break: break-word;
}

.cliente-perfil-section-header {
margin-bottom: 12px;
}

.cliente-perfil-section-header h2 {
margin: 0;
color: var(--mc2-text, #111827);
font-size: 20px;
}

.cliente-perfil-section-header p {
margin: 6px 0 0;
color: var(--mc2-text-secondary, #6B7280);
font-size: 13px;
}

.cliente-perfil-actions {
display: grid;
grid-template-columns:
repeat(
2,
minmax(
0,
1fr
)
);
gap: 14px;
}

.cliente-perfil-action {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
padding: 18px;
box-sizing: border-box;
background: var(--mc2-surface, #FFFFFF);
border: 1px solid var(--mc2-border, #E5E7EB);
border-radius: var(--mc2-radius-lg, 16px);
color: inherit;
text-decoration: none;
transition:
transform 0.15s ease,
box-shadow 0.15s ease,
border-color 0.15s ease;
}

.cliente-perfil-action:hover {
transform: translateY(-1px);
border-color: var(--mc2-info-border, #DBEAFE);
box-shadow:
0 7px 18px rgba(
15,
23,
42,
0.07
);
}

.cliente-perfil-action-icon {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
flex: 0 0 45px;
border-radius: var(--mc2-radius-md, 12px);
background: var(--mc2-info-soft, #EFF6FF);
font-size: 22px;
}

.cliente-perfil-action > span:last-child {
min-width: 0;
}

.cliente-perfil-action strong {
display: block;
color: var(--mc2-text, #111827);
font-size: 14px;
}

.cliente-perfil-action small {
display: block;
margin-top: 4px;
color: var(--mc2-text-secondary, #6B7280);
font-size: 12px;
line-height: 1.45;
}

.cliente-perfil-footer {
margin-top: 5px;
}

@media (max-width: 700px) {

.cliente-perfil-page {
    padding: 25px 15px 45px;
}

.cliente-perfil-header {
    align-items: flex-start;
    flex-direction: column;
}

.cliente-perfil-card {
    flex-direction: column;
    padding: 20px;
}

.cliente-perfil-grid,
.cliente-perfil-actions {
    grid-template-columns: 1fr;
}

}

@media (max-width: 450px) {

.cliente-perfil-header h1 {
    font-size: 27px;
}

.cliente-perfil-photo,
.cliente-perfil-photo-placeholder {
    width: 85px;
    height: 85px;
}

.cliente-perfil-name strong {
    font-size: 18px;
}

}