/* ══════════════════════════════════════════════════════════════
   estilo.css — Identidade visual AABB Nova Friburgo (Portal do Sócio)
   Adaptado de aabb-gestao/src/css/estilo.css: mesmos tokens, base,
   login, shell (sidebar+bottomnav), cards, chips, toast, modal,
   formulários, botões e impressão. Bloco da CARTEIRINHA copiado
   VERBATIM (fidelidade total exigida pela fase P4).
   Mobile-first: o sócio usa o celular.

   ATENÇÃO url(): resolve relativo a ESTE arquivo (src/css/), por
   isso os assets aparecem como ../../assets/... (duas pastas acima).
   ══════════════════════════════════════════════════════════════ */

:root {
  --blue:#003087; --blue-dark:#002060; --blue-light:#1a4db3; --blue-soft:#E8EEFA;
  --yellow:#FFD100; --yellow-dark:#E6BC00;
  --bg:#F1F5F9; --surface:#fff;
  --border:#E2E8F0; --border-strong:#CBD5E1;
  --text:#0F172A; --text2:#475569; --text3:#94A3B8;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --shadow:0 2px 8px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05);
  --shadow-md:0 4px 16px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:0 8px 32px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.08);
  --radius:10px; --radius-lg:14px; --radius-xl:18px;
  --sidebar-w:230px; --bottomnav-h:50px;
  --ok:#16A34A; --warn:#D97706; --err:#DC2626;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.5}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ═══════════════════════ LOGIN (index.html) ═══════════════════════ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue) 55%,var(--blue-light) 100%);}
.login-bg-foto{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;filter:saturate(1.1)}
.login-bg-veu{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,32,96,.88),rgba(0,48,135,.75) 60%,rgba(26,77,179,.7))}
.login-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;pointer-events:none}
.login-orb.o1{width:340px;height:340px;background:var(--yellow);top:-120px;right:-90px}
.login-orb.o2{width:280px;height:280px;background:var(--blue-light);bottom:-100px;left:-70px}
.login-card{position:relative;background:var(--surface);border-radius:26px;max-width:400px;width:100%;box-shadow:0 32px 80px rgba(0,0,0,.45);overflow:hidden}
.login-hero{background:var(--blue);padding:34px 32px 26px;position:relative;overflow:hidden}
.login-hero::after{content:'';position:absolute;bottom:-40px;right:-40px;width:170px;height:170px;border-radius:50%;background:rgba(255,209,0,.12)}
.login-logo{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.login-logo-mark{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.2);overflow:hidden}
.login-logo-text h1{font-size:17px;font-weight:800;color:#fff}
.login-logo-text p{font-size:11.5px;color:rgba(255,255,255,.6);margin-top:2px}
.login-tagline{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.6}
.login-body{padding:28px 32px 30px}
.login-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.login-field label{font-size:12px;font-weight:600;color:var(--text2)}
.login-field input{padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:14px;background:var(--bg);color:var(--text);width:100%}
.login-field input:focus{outline:none;border-color:var(--blue-light)}
.login-err{display:none;padding:10px 14px;background:#FEF2F2;border:1px solid #FCA5A5;border-radius:var(--radius);font-size:12.5px;color:var(--err);text-align:center;margin-bottom:12px}
.login-err.show{display:block}
.login-btn{width:100%;padding:13px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius);font-size:14px;font-weight:700;letter-spacing:.2px}
.login-btn:hover{background:var(--blue-light)}
.login-btn:disabled{opacity:.6;cursor:default}
.login-hint{text-align:center;font-size:11px;color:var(--text3);margin-top:14px}

/* três "vistas" alternáveis no mesmo card (login / primeiro acesso / sem vínculo) */
.vista{display:none}
.vista.ativa{display:block}
.login-msg{font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:20px}
.login-acoes-empilhadas{display:flex;flex-direction:column;gap:10px}
.login-link{display:block;width:100%;text-align:center;font-size:12.5px;font-weight:700;color:var(--blue);margin-top:14px;cursor:pointer;background:none;border:none}
.login-link:hover{text-decoration:underline}
.login-titulo-vista{font-size:15.5px;font-weight:800;color:var(--blue);margin-bottom:10px}
.login-field textarea{padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:14px;background:var(--bg);color:var(--text);width:100%;resize:vertical;font-family:inherit}
.login-field textarea:focus{outline:none;border-color:var(--blue-light)}

/* passos dentro de vista-primeiro-acesso / vista-sem-vinculo (fase P3 — js/acesso.js) */
.passo-acesso{display:none}
.passo-acesso.ativa{display:block}

/* ═══════════════════════ FUNDO DE PÁGINA (foto temática por rota) ═══════════════════════
   Camada fixa atrás de TODO o conteúdo do app (login/index.html tem o próprio
   mecanismo — .login-bg-foto/.login-bg-veu — este bloco é só do app.html).
   Cada rota (ver FOTOS_FUNDO em js/app.js) aplica uma foto do clube sob um véu
   claro no mesmo tom de --bg — a foto é só um toque sutil de ambiente, nunca
   pode competir com a leitura do conteúdo (por isso o véu é tão opaco). Duas
   camadas (.fundo-camada) permitem crossfade em opacity ao trocar de rota; sem
   foto (rota padrão) nenhuma camada fica "ativa" e o --bg normal do body
   aparece por baixo, exatamente como antes desta funcionalidade.
   #app-shell abaixo ganha position:relative+z-index:1 para pintar por CIMA
   desta camada fixa (senão um position:fixed pinta acima de conteúdo estático
   independente da ordem no DOM — ver nota de stacking context). */
#fundo-pagina{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fundo-camada{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .3s ease}
.fundo-camada.ativa{opacity:1}

/* ═══════════════════════ SHELL (app.html) ═══════════════════════ */
#app-shell{display:flex;min-height:100vh;position:relative;z-index:1}
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--blue-dark);color:#fff;display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:6px 8px 22px}
.sidebar-logo-mark{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.sidebar-logo-text{font-size:13px;font-weight:700;color:#fff}
.sidebar-logo-text small{display:block;font-size:10.5px;font-weight:500;color:rgba(255,255,255,.55)}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--radius);color:rgba(255,255,255,.72);font-size:13.5px;font-weight:600;margin-bottom:2px;background:transparent;border:none;width:100%;text-align:left}
.nav-item .nav-ico{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;line-height:1}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--yellow);color:var(--blue-dark)}
.sidebar-footer{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.sidebar-user{display:flex;align-items:center;gap:9px;font-size:12px;color:rgba(255,255,255,.85);margin-bottom:8px;word-break:break-all}
.sidebar-user-av{width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--blue-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.btn-sair{width:100%;padding:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);color:#fff;font-size:12.5px;font-weight:600}
.btn-sair:hover{background:rgba(255,255,255,.16)}

.conteudo{flex:1;min-width:0;padding:22px 26px 90px;max-width:1200px}
.topbar-mobile{display:none}

/* cabeçalho leve de página (sem card próprio — a foto de fundo da rota fica
   em #fundo-pagina, atrás dele; ver bloco FUNDO DE PÁGINA acima) */
.pagina-cabecalho{margin-bottom:18px}
.pagina-titulo{font-size:20px;font-weight:800;color:var(--blue)}
.pagina-subtitulo{font-size:12.5px;color:var(--text2);margin-top:3px}

/* bottom nav mobile — 5 itens diretos, SEM menu "Mais" */
.bottomnav{display:none}

@media (max-width:880px){
  .sidebar{display:none}
  #app-shell{display:block}
  .topbar-mobile{display:flex;align-items:center;justify-content:space-between;background:var(--blue-dark);color:#fff;padding:14px 16px;position:sticky;top:0;z-index:20}
  .topbar-mobile-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:13.5px}
  .topbar-mobile-mark{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .conteudo{padding:16px 14px calc(var(--bottomnav-h) + 20px)}
  .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);z-index:30;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
  .bottomnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 1px 6px;background:none;border:none;color:var(--text3);font-size:9.5px;font-weight:600}
  .bottomnav-item .nav-ico{width:100%;height:24px;display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1}
  .bottomnav-item.active{color:var(--blue)}
  /* emoji não muda de cor com `color` — o item ativo ganha destaque por leve escala + fundo */
  .bottomnav-item.active .nav-ico{transform:scale(1.12)}
}

/* ═══════════════════════ CARDS / KPIs ═══════════════════════ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}
.kpi-card .kpi-num{font-size:26px;font-weight:800;color:var(--blue)}
.kpi-card .kpi-label{font-size:12px;color:var(--text2);font-weight:600;margin-top:2px}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm)}

/* blocos da página Início (situação/próxima reserva/atalhos) */
.resumo-inicio{margin-bottom:16px}
.resumo-inicio-titulo{font-size:13.5px;font-weight:800;color:var(--blue);margin-bottom:10px}
.link-inicio{display:inline-block;font-size:12.5px;font-weight:700;color:var(--blue);cursor:pointer;background:none;border:none;padding:0}
.link-inicio:hover{text-decoration:underline}
.texto-vazio{font-size:13px;color:var(--text3)}
.situacao-ok{font-size:14px;font-weight:700;color:var(--ok)}
.situacao-pendente{font-size:14px;font-weight:700;color:var(--warn)}
.reserva-linha{font-size:13px;color:var(--text2);margin-bottom:8px}
.atalhos-lista{display:flex;flex-direction:column;gap:8px}

/* ═══════════════════════ CHIPS ═══════════════════════ */
.chip{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:.2px}
.chip-pago{background:#DCFCE7;color:#166534}
.chip-pendente{background:#FEF3C7;color:#92400E}
.chip-parcial{background:#FFEDD5;color:#C2410C}

.vazio{text-align:center;padding:40px 20px;color:var(--text3);font-size:13px}

/* ═══════════════════════ MEUS DADOS (perfil.js, fase P3) ═══════════════════════ */
.perfil-grade{display:grid;grid-template-columns:1fr;gap:16px;max-width:560px}
.card-titulo{font-size:14.5px;font-weight:800;color:var(--blue);margin-bottom:14px}
.perfil-linha{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.perfil-linha:last-of-type{border-bottom:none}
.perfil-label{color:var(--text2);font-weight:600}
.perfil-valor{color:var(--text);font-weight:600;text-align:right}
.perfil-dependentes{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.perfil-dependentes .perfil-label{display:block;margin-bottom:8px}
.lista-dependentes{list-style:none;display:flex;flex-direction:column;gap:6px}
.lista-dependentes li{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--text)}
.dep-parentesco{color:var(--text3);font-weight:600;font-size:12px}
.perfil-nota{margin-top:14px;font-size:11.5px;color:var(--text3);font-style:italic}

.perfil-foto-area{display:flex;justify-content:center;margin-bottom:14px}
.perfil-foto-img{width:110px;height:110px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow)}
.perfil-foto-avatar{width:110px;height:110px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800}
.perfil-foto-acoes{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ═══════════════════════ MENSALIDADES (mensalidades.js, fase P3) ═══════════════════════ */
.mensalidades-resumo{font-size:14.5px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.mensalidades-resumo.resumo-ok{color:var(--ok);background:#F0FDF4;border-color:#86EFAC}
.mensalidades-resumo.resumo-pendente{color:var(--warn);background:#FEF3C7;border-color:#FDE68A}
.mensalidades-lista{padding:6px 18px}
.mensalidade-linha{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--border)}
.mensalidade-linha:last-child{border-bottom:none}
.mensalidade-competencia{font-size:13.5px;font-weight:700;color:var(--text);flex:1 1 140px}
.mensalidade-detalhe{font-size:12px;color:var(--text2);width:100%}
.mensalidades-rodape{margin-top:14px;font-size:11.5px;color:var(--text3);text-align:center}

/* ═══════════════════════ MODAL / FORM ═══════════════════════ */
.modal-veu{position:fixed;inset:0;background:rgba(0,20,50,.55);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.modal-veu.hidden{display:none}
.modal-caixa{background:var(--surface);border-radius:var(--radius-xl);max-width:640px;width:100%;margin:16px 0 40px;box-shadow:var(--shadow-lg)}
.modal-topo{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-topo h3{font-size:15.5px;font-weight:800;color:var(--blue)}
.modal-fechar{background:none;border:none;font-size:20px;color:var(--text3);line-height:1;padding:4px}
.modal-corpo{padding:20px 22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:11.5px;font-weight:700;color:var(--text2)}
.campo input,.campo select,.campo textarea{padding:9px 11px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:13px;background:var(--bg);color:var(--text)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--blue-light)}
.form-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}

/* ═══════════════════════ BOTÕES ═══════════════════════ */
.btn{padding:10px 16px;border-radius:var(--radius);font-size:13px;font-weight:700;border:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-light)}
.btn-secundario{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}
.btn-secundario:hover{background:var(--border)}
.btn-perigo{background:#FEF2F2;color:var(--err);border:1.5px solid #FCA5A5}
.btn-sm{padding:6px 11px;font-size:12px}

/* ═══════════════════════ STUB "EM CONSTRUÇÃO" ═══════════════════════ */
.stub{text-align:center;padding:36px 20px}
.stub-emoji{font-size:34px;margin-bottom:10px}
.stub h3{font-size:16px;font-weight:800;color:var(--blue);margin-bottom:6px}
.stub p{font-size:13px;color:var(--text2);max-width:420px;margin:0 auto}

/* ═══════════════════════ TOASTS ═══════════════════════ */
#toasts{position:fixed;bottom:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px}
@media (max-width:880px){#toasts{bottom:calc(var(--bottomnav-h) + 12px);right:12px;left:12px}}
.toast{padding:11px 16px;border-radius:12px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-lg);background:var(--surface);border:1px solid var(--border);color:var(--text)}
.toast.ok{border-color:#86EFAC;background:#F0FDF4;color:#166534}
.toast.err{border-color:#FCA5A5;background:#FEF2F2;color:var(--err)}

.carregando{text-align:center;padding:30px;color:var(--text3);font-size:13px}

/* ═══════════════════════ IMPRESSÃO — visibilidade base ═══════════════════════
   .print-somente só vira display:block dentro de @media print (ver abaixo).
   Sem esta regra base, #carteirinha-print (que já nasce com essa classe em
   app.html) ficaria sempre visível na página normal assim que a fase P4
   populasse seu innerHTML — mesma regra base do gestao (estilo.css lá). */
.print-somente{display:none}

/* ═══════════════════════ IMPRESSÃO (carteirinha, fase P4) ═══════════════════════
   Mesmo mecanismo do gestao: .no-print some, .print-somente aparece,
   window.print() gera o PDF. */
@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }
  body{background:#fff;font-size:12px}
  .sidebar,.topbar-mobile,.bottomnav,#toasts,#modal-raiz,.no-print,.pagina-cabecalho,#fundo-pagina{display:none !important}
  #app-shell{display:block}
  .conteudo{padding:0;max-width:100%}
  .print-somente{display:block}
  .card,.kpi-card{box-shadow:none !important;break-inside:avoid;page-break-inside:avoid}
}

/* ═══════════════════════ CARTEIRINHA DO SÓCIO ═══════════════════════
   Copiado VERBATIM de aabb-gestao/src/css/estilo.css (fidelidade total
   exigida — carteirinha v2 aprovada). Portal = v2 SEM foto (o design
   aprovado não tem slot de foto no cartão).
   Cartão de identificação com frente E verso, para impressão. Frente: foto
   do clube sob véu azul-marinho + escudo + nome/código/categoria/selo.
   Verso: contato do clube, site + Instagram (ícones SVG inline), selos
   AABB/FENABB. Reaproveita o mecanismo de impressão (#carteirinha-print /
   .print-somente / window.print()). */
.carteirinha-grade{display:flex;flex-direction:column;gap:14mm;align-items:center}
.carteirinha-par{display:flex;gap:10mm;flex-wrap:wrap;justify-content:center;break-inside:avoid;page-break-inside:avoid}

.cartao-id{
  width:340px;aspect-ratio:1.586/1;border-radius:14px;position:relative;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.2);color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px 14px;
  font-variant-numeric:tabular-nums;break-inside:avoid;page-break-inside:avoid;
}

/* FRENTE */
.cartao-id.frente{
  background:
    radial-gradient(120% 140% at 15% -10%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(160deg, rgba(18,41,79,.55) 0%, rgba(11,30,63,.62) 55%, rgba(6,18,37,.72) 100%),
    url("../../assets/fotos/piscina-panoramica.jpg") center/cover no-repeat;
}
.cartao-id.frente::before{
  content:"";position:absolute;inset:6px;border:1px solid rgba(232,185,77,.35);
  border-radius:9px;pointer-events:none;
}
.ci-topo{display:flex;align-items:center;gap:10px}
.ci-crest{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(232,185,77,.55)}
.ci-clube-nome{font-size:12.5px;font-weight:800;letter-spacing:.01em;line-height:1.15}
.ci-clube-sub{font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:#F3D488;margin-top:2px}
.ci-meio{margin:6px 0}
.ci-kicker{font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:5px}
.ci-nome{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.12;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-rodape{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.ci-dado-label{font-size:7.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:2px}
.ci-dado-valor{font-size:13px;font-weight:700}
.ci-selo{display:flex;align-items:center;gap:6px;background:rgba(232,185,77,.14);
  border:1px solid rgba(232,185,77,.4);border-radius:20px;padding:5px 11px 5px 8px}
.ci-selo-ponto{width:6px;height:6px;border-radius:50%;background:#5FD68A;flex-shrink:0}
.ci-selo.inativo .ci-selo-ponto{background:#8A93B8}
.ci-selo-texto{font-size:9.5px;font-weight:800;letter-spacing:.03em;color:#F3D488}
.ci-selo.inativo .ci-selo-texto{color:rgba(255,255,255,.55)}

/* VERSO */
.cartao-id.verso{
  background:#F6F1E4;color:#0B1E3F;
  background-image:repeating-linear-gradient(180deg, transparent 0 27px, rgba(11,30,63,.05) 27px 28px);
}
.cv-contato{font-size:9.5px;line-height:1.55;color:#4A5578;max-width:260px}
.cv-contato b{color:#0B1E3F;font-weight:700}
.cv-linha-ouro{width:30px;height:3px;background:#E8B94D;border-radius:2px;margin-bottom:7px}
.cv-meio{border-top:1px solid #E4D9BE;border-bottom:1px solid #E4D9BE;
  padding:8px 0;display:flex;flex-direction:column;gap:5px}
.cv-canal{display:flex;align-items:center;gap:7px}
.cv-canal svg{flex-shrink:0;color:#E8B94D;width:12px;height:12px}
.cv-canal-texto{font-size:10.5px;font-weight:700;color:#0B1E3F}
.cv-rodape{display:flex;justify-content:space-between;align-items:flex-end}
.cv-emissao{font-size:7.5px;color:#4A5578;letter-spacing:.02em}
.cv-selos{display:flex;gap:7px}
.cv-selo-chip{background:#fff;border:1px solid #E4D9BE;border-radius:6px;
  padding:5px 8px;display:flex;align-items:center;height:32px}
.cv-selo-chip img{height:100%;width:auto;display:block;object-fit:contain}

/* ═══════════════════════ PRÉVIA DA CARTEIRINHA NA PÁGINA (fase P4) ═══════════════════════
   Fora do mecanismo de impressão: mostra o MESMO par frente+verso (mesma
   função carteirinhaHtml) direto na tela, antes de imprimir. .carteirinha-par
   já é flex+wrap — dois cartões de 340px lado a lado no desktop, empilhados
   no mobile (não cabem os dois + gap numa tela estreita). */
.carteirinha-preview{display:flex;justify-content:center}
.carteirinha-aviso{background:#FEF3C7;border:1px solid #FDE68A;color:var(--warn);
  padding:12px 16px;border-radius:var(--radius-lg);font-size:12.5px;line-height:1.5;margin-bottom:16px}

/* ═══════════════════════ NAVEGAÇÃO DE MÊS (Reservas, fase P5) ═══════════════════════ */
.competencia-nav{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.competencia-label{font-size:14.5px;font-weight:800;color:var(--blue);min-width:120px;text-align:center}
.subtitulo-secao{font-size:14px;font-weight:800;color:var(--blue);margin:22px 0 10px}

/* ═══════════════════════ RESERVAS — calendário de ocupação (fase P5) ═══════════════════════
   Adaptado do calendário de Locações do gestao (js/locacoes.js + bloco
   correspondente do estilo.css de lá): mesma grade semanal, mesma paleta por
   espaço — mas SEM dado pessoal nenhum (o portal só lê agendaPublica) e sem
   interação de clique (o sócio pede reserva pelo formulário, não pelo dia). */
.legenda-espacos{display:flex;flex-wrap:wrap;gap:12px;margin:2px 0 14px;font-size:11.5px;color:var(--text2)}
.legenda-item{display:flex;align-items:center;gap:5px}
.legenda-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.legenda-dot-pedido{background:#fff;border:1.5px dashed var(--text2)}
.calendario-cab{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;text-align:center;font-size:11px;font-weight:700;color:var(--text3)}
.calendario-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calendario-dia{min-height:78px;border:1px solid var(--border);border-radius:8px;padding:5px;display:flex;flex-direction:column;gap:3px;background:var(--surface);overflow:hidden}
.calendario-dia.vazio{border:none;background:transparent}
.calendario-dia.hoje{border-color:var(--yellow-dark);box-shadow:inset 0 0 0 1.5px var(--yellow-dark)}
.calendario-dia-num{font-size:11px;font-weight:800;color:var(--text3)}
.calendario-dia.hoje .calendario-dia-num{color:var(--blue)}
.reserva-chip{font-size:9.5px;padding:2px 5px;border-radius:5px;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reserva-chip-pedido{background:#fff;border:1.5px dashed;font-weight:800}
@media (max-width:880px){
  .calendario-dia{min-height:58px;padding:3px}
  .reserva-chip{font-size:8.5px}
}
@media (max-width:560px){
  .calendario-cab,.calendario-grade{gap:3px}
  .calendario-dia{min-height:46px}
  .calendario-dia-num{font-size:9.5px}
}

/* ═══════════════════════ RESERVAS — formulário + minhas solicitações (fase P5) ═══════════════════════ */
.reservas-aviso{font-size:12px;color:var(--text2);background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 13px;margin-bottom:14px}
/* Chip extra: recusada precisa ler como "vermelho" nesta lista (chip-parcial
   já existente é laranja, usado noutro contexto) — mesma paleta do .toast.err. */
.chip-recusada{background:#FEF2F2;color:var(--err)}
.solicitacoes-lista{padding:6px 18px}
.solicitacao-linha{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--border)}
.solicitacao-linha:last-child{border-bottom:none}
.solicitacao-info{flex:1 1 160px}
.solicitacao-data{font-size:13.5px;font-weight:700;color:var(--text)}
.solicitacao-espaco{font-size:12px;color:var(--text2);margin-top:1px}
.solicitacao-detalhe{font-size:12px;color:var(--text2)}
.solicitacao-acoes{width:100%}