/* =====================================================================
   BEMVIA PORTAL DO CLIENTE
   Mesma paleta do admin, mas com tudo maior e mais espaçado —
   pensado para quem tem pouca prática com telas.
   ===================================================================== */
:root{
  --blue:#2F7DF6;
  --blue-dark:#1B5FD4;
  --teal:#2FCE9A;
  --teal-dark:#1FAE81;
  --navy:#16213E;
  --navy-soft:#223059;
  --bg-soft:#F5F8FC;
  --amber:#F5A93B;
  --red-soft:#E8586B;
  --text:#24304A;
  --text-muted:#647089;
  --radius-lg:22px;
  --radius-md:16px;
  --shadow-soft:0 10px 30px rgba(22,33,62,0.08);
  --gradient-care:linear-gradient(120deg, var(--blue) 0%, var(--teal) 100%);
}
*{box-sizing:border-box;}
html,body{overflow-x:hidden;max-width:100%;}
body{margin:0;font-family:'Inter',sans-serif;color:var(--text);background:var(--bg-soft);font-size:19px;line-height:1.6;}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Poppins',sans-serif;font-weight:600;font-size:17px;padding:15px 26px;border-radius:99px;cursor:pointer;border:none;min-height:52px;transition:transform .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--gradient-care);color:#fff;box-shadow:0 8px 20px rgba(47,125,246,0.28);}
.btn-ghost{background:#fff;color:var(--navy);border:2px solid #E3E9F3;}
.btn-block{width:100%;}
.btn-lg{font-size:19px;padding:18px 26px;}

.alert{padding:16px 18px;border-radius:14px;font-size:16.5px;margin-bottom:18px;display:flex;gap:12px;align-items:flex-start;}
.alert-erro{background:#FBE3E6;color:#C23B4E;}
.alert-sucesso{background:#DEF7EC;color:#1FAE81;}
.alert-aviso{background:#FFF1DC;color:#8A6116;}
.alert .alert-title{display:block;font-size:1.05em;font-weight:800;margin-bottom:6px;}
.alert p{margin:0 0 6px;line-height:1.5;}
.alert p:last-child{margin-bottom:0;}

/* ---------- ESTRUTURA ---------- */
.portal-topbar{
  background:#fff;border-bottom:1px solid #E5EAF3;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:30;
}
.portal-topbar img{height:52px;width:auto;}
.portal-topbar .saudacao{font-weight:700;color:var(--navy);font-size:17px;}
.portal-topbar .sair{color:var(--text-muted);font-weight:600;font-size:15px;display:flex;align-items:center;gap:6px;}

.portal-nav{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  max-width:900px;margin:0 auto;padding:14px 16px;
}
@media(max-width:700px){.portal-nav{grid-template-columns:repeat(2,1fr);}}
.portal-nav a{
  background:#fff;border:2px solid #ECF0F7;border-radius:16px;padding:14px 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-weight:700;font-size:14.5px;color:var(--navy-soft);text-align:center;
}
.portal-nav a i{font-size:22px;color:var(--blue);}
.portal-nav a.active{border-color:var(--blue);background:#F3F8FF;}

.portal-main{max-width:900px;margin:0 auto;padding:10px 16px 60px;}

/* ---------- CARDS ---------- */
.card-panel{background:#fff;border:1px solid #ECF0F7;border-radius:var(--radius-md);padding:22px;margin-bottom:18px;}
.card-panel h4{margin:0 0 14px;font-size:18px;color:var(--navy);}

.carteirinha{
  background:var(--gradient-care);border-radius:var(--radius-lg);color:#fff;
  padding:26px;position:relative;overflow:hidden;margin-bottom:18px;
}
.carteirinha::after{content:'';position:absolute;right:-30px;bottom:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,0.12);}
.carteirinha .top-row{display:flex;justify-content:space-between;align-items:flex-start;}
.carteirinha .plano-tag{background:rgba(255,255,255,0.25);padding:6px 16px;border-radius:99px;font-size:14px;font-weight:700;}
.carteirinha .nome{font-family:'Poppins',sans-serif;font-weight:700;font-size:22px;margin-top:20px;}
.carteirinha .cpf{font-size:14px;opacity:.9;font-family:monospace;letter-spacing:.04em;}

.progress-row{margin-bottom:16px;}
.progress-row .prow-label{display:flex;justify-content:space-between;font-size:15px;color:var(--text-muted);margin-bottom:6px;font-weight:600;}
.progress-bar{height:12px;background:#EEF1F7;border-radius:99px;overflow:hidden;}
.progress-bar span{display:block;height:100%;background:var(--gradient-care);border-radius:99px;}

.financeiro-status{display:flex;align-items:center;gap:12px;background:#DEF7EC;color:var(--teal-dark);padding:16px 18px;border-radius:14px;font-weight:700;font-size:16px;margin-bottom:16px;}
.financeiro-status.pendente{background:#FFF1DC;color:#8A6116;}
.financeiro-status.atrasado{background:#FBE3E6;color:#C23B4E;}

.timeline{list-style:none;margin:0;padding:0;}
.timeline li{display:flex;gap:14px;padding-bottom:20px;position:relative;}
.timeline li:not(:last-child)::before{content:'';position:absolute;left:11px;top:26px;bottom:0;width:2px;background:#E5EAF3;}
.timeline .dot{width:24px;height:24px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;flex-shrink:0;}
.timeline .dot.pending{background:#E3E9F3;color:var(--text-muted);}
.timeline .t-content{font-size:16px;}
.timeline .t-content strong{display:block;color:var(--navy);font-size:17px;}
.timeline .t-content span{color:var(--text-muted);font-size:13.5px;}

.status-pill{padding:6px 14px;border-radius:99px;font-size:14px;font-weight:700;white-space:nowrap;}
.status-ativo{background:#DEF7EC;color:var(--teal-dark);}
.status-inativo{background:#F1F2F6;color:var(--text-muted);}
.status-alerta{background:#FBE3E6;color:#C23B4E;}

.lista-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #F0F3F9;}
.lista-item:last-child{border-bottom:none;}
.lista-item .titulo{font-weight:700;color:var(--navy);font-size:16.5px;}
.lista-item .sub{color:var(--text-muted);font-size:14px;margin-top:2px;}

/* ---------- FORMULÁRIOS ---------- */
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-weight:700;font-size:16px;margin-bottom:8px;color:var(--navy-soft);}
.form-control{width:100%;padding:14px 16px;border:1px solid #E3E9F3;border-radius:12px;font-size:17px;font-family:inherit;}
.form-control:focus{outline:3px solid var(--blue);border-color:var(--blue);}
.hint{display:block;color:var(--text-muted);font-size:13.5px;margin-top:6px;}

/* ---------- LOGIN ---------- */
.login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:100vh;padding:24px;}
.login-card{width:100%;max-width:420px;background:#fff;border-radius:var(--radius-lg);padding:36px 30px;box-shadow:var(--shadow-soft);text-align:center;}
.login-logo{height:76px;width:auto;margin:0 auto 14px;}
.login-card h1{font-size:23px;color:var(--navy);margin:0 0 6px;}
.login-sub{color:var(--text-muted);font-size:15px;margin:0 0 24px;}
.login-card form{text-align:left;}

.qr-pix{border-radius:14px;border:1px solid #ECF0F7;}

/* Recibo de pagamento */
.recibo-folha{background:#fff;border:1px solid #ECF0F7;border-radius:var(--radius-lg);padding:28px;max-width:520px;margin:0 auto;}
.recibo-cabecalho{display:flex;align-items:center;gap:16px;padding-bottom:18px;margin-bottom:18px;border-bottom:2px solid #EEF1F7;}
.recibo-cabecalho img{height:48px;width:auto;}
.recibo-cabecalho strong{display:block;font-size:17px;color:var(--navy);}
.recibo-cabecalho span{display:block;font-size:13px;color:var(--text-muted);font-family:monospace;}
table.recibo-tabela{width:100%;border-collapse:collapse;font-size:15.5px;}
table.recibo-tabela td{padding:10px 0;border-bottom:1px solid #F3F5FA;}
table.recibo-tabela td:first-child{color:var(--text-muted);font-weight:600;width:44%;}
table.recibo-tabela td:last-child{font-weight:700;color:var(--navy);}
.recibo-rodape{margin-top:20px;font-size:13.5px;color:var(--text-muted);}

.recibo-autenticacao{
  margin-top:18px;padding:12px 14px;border:1px dashed #C7D2E5;border-radius:10px;
  display:flex;flex-direction:column;gap:3px;background:#FAFBFE;
}
.recibo-autenticacao-label{font-size:9.5px;font-weight:800;letter-spacing:.07em;color:var(--text-muted);}
.recibo-autenticacao-codigo{font-family:monospace;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--navy);word-break:break-all;}
.recibo-autenticacao-hint{font-size:10.5px;color:var(--text-muted);line-height:1.4;}

@media print{
  .portal-topbar, .portal-nav, .no-print, footer{display:none !important;}
  .recibo-folha{border:none;box-shadow:none;max-width:100%;}
}