/* ============================================================
   VÍBRIA — Tots els estils del projecte
   ============================================================ */

/* ---- Reset ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Variables ---- */
:root {
    --drac:     #2f5d3a;
    --drac-clar:#366a43;
    --drac-fos: #244a2e;
    --fosc:     #1a1a1a;
    --clar:     #ffffff;
}

/* ---- Base ---- */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--fosc);
    background: #eef2ef;
    min-height: 100vh;
}

/* ---- Cabecera verde degradada (compartida) ---- */
.capçalera {
    background: linear-gradient(90deg, var(--drac-fos) 0%, var(--drac-clar) 100%);
    color: var(--clar);
}

/* ---- Tarjeta blanca (compartida) ---- */
.targeta {
    background: var(--clar);
    width: 100%;
}

/* ---- Pie de página (compartido) ---- */
.peu {
    font-size: .8rem;
    color: #888;
    line-height: 1.5;
}
.peu a {
    color: var(--drac);
    text-decoration: none;
}
.peu a:hover,
.peu a:focus {
    text-decoration: underline;
}


/* ============================================================
   Pàgina de login  (body.pagina-login → index.php)
   ============================================================ */

body.pagina-login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

body.pagina-login .targeta {
    max-width: 380px;
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

body.pagina-login .capçalera {
    padding: 2.25rem 1.75rem;
}

body.pagina-login .capçalera h1 {
    font-size: 2rem;
    letter-spacing: 2px;
}

.lema {
    margin-top: .5rem;
    font-size: .95rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
}

.cos {
    padding: 2rem 1.75rem;
}

.benvinguda {
    margin-bottom: 1.75rem;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #333;
}

.boto-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .9rem 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fosc);
    text-decoration: none;
    background: var(--clar);
    border: 1.5px solid #dadce0;
    border-radius: 10px;
    transition: background .15s ease, box-shadow .15s ease;
}
.boto-google:hover,
.boto-google:focus {
    background: #f5f5f5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.g {
    font-weight: 700;
    font-size: 1.15rem;
    font-family: Arial, sans-serif;
}
.g .b { color: #4285F4; }
.g .r { color: #EA4335; }
.g .g { color: #FBBC05; }
.g .v { color: #34A853; }

body.pagina-login .peu {
    margin-top: 1.75rem;
}

.avis {
    background: #fdECEA;
    color: #a4271b;
    border: 1px solid #f5c6c0;
    border-radius: 8px;
    padding: .75rem .9rem;
    font-size: .9rem;
    line-height: 1.4;
    margin-bottom: 1.25rem;
}

.firma {
    margin-top: 1.5rem;
    font-size: .85rem;
}
.firma a {
    color: var(--drac);
    text-decoration: none;
    font-weight: 600;
}
.firma a:hover,
.firma a:focus {
    text-decoration: underline;
}


/* ============================================================
   Portal del soci  (body.pagina-portal → vbr_site/index.php)
   ============================================================ */

body.pagina-portal {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    gap: 1.25rem;
}

body.pagina-portal .capçalera {
    max-width: 600px;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.capçalera-marca {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.boto-sortir {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--drac-fos);
    background: var(--clar);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease;
    cursor: pointer;
}
.boto-sortir:hover,
.boto-sortir:focus {
    background: #dce8de;
}

body.pagina-portal .targeta {
    max-width: 600px;
    border-radius: 14px;
    padding: 2rem 1.75rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}

.benvinguda-nom {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--drac);
    margin-bottom: .4rem;
}

.benvinguda-email {
    font-size: .9rem;
    color: #666;
    margin-bottom: 1.75rem;
}

.en-construccio {
    background: #f0f6f2;
    border: 1.5px dashed #a8c7b0;
    border-radius: 10px;
    padding: 1.75rem;
    text-align: center;
    color: #5a7a62;
}

.en-construccio .icona {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .75rem;
}

.en-construccio p {
    font-size: .95rem;
    line-height: 1.5;
}


/* ============================================================
   Pàgina de login — NOVA IDENTITAT (handoff 2026-06-25)
   Substitueix visualment els estils de login antics (que queden
   com a CSS mort inofensiu). Tot scoped a body.pagina-login.
   ============================================================ */

body.pagina-login {
  margin: 0;
  min-height: 100vh;
  padding: 28px 18px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EEF2EF;                 /* verd Drac molt suau */
  font-family: 'Figtree', system-ui, sans-serif;
  color: #3A4A40;
  -webkit-font-smoothing: antialiased;
}

/* ---- tarjeta ---- */
body.pagina-login .vbr-card {
  width: 100%;
  max-width: 360px;
  background: #FFFFFF;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 48px -18px rgba(31,58,40,.32), 0 2px 8px rgba(31,58,40,.06);
  animation: vibCardEntra 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ---- capçalera ---- */
body.pagina-login .vbr-header {
  position: relative;
  padding: 38px 30px 30px;
  text-align: center;
  background: linear-gradient(180deg, #F4F8F4 0%, #FFFFFF 100%);
}
body.pagina-login .vbr-glow {
  position: absolute;
  left: 50%; top: 64px;
  width: 230px; height: 160px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
              rgba(236,106,58,.20) 0%, rgba(236,106,58,.07) 45%, rgba(236,106,58,0) 70%);
  animation:
    vibGlowEntra 1.4s ease 0.1s both,
    vibGlow      4.5s ease-in-out 1.5s infinite;
  pointer-events: none;
}
body.pagina-login .vbr-mark {
  position: relative;
  display: block;
  width: 128px; height: auto;
  margin: 0 auto 14px;
  transform-origin: 50% 80%;
  animation:
    vibEntra 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s both,
    vibVida  5.5s ease-in-out 1.15s infinite;
}
body.pagina-login .vbr-wordmark {
  position: relative;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 42px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #2F5D3A;
  animation: vibTextEntra 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s both;
}
body.pagina-login .vbr-lema {
  position: relative;
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: #6E8A74;
  max-width: 240px;
  margin: 10px auto 0;
  animation: vibTextEntra 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s both;
}

/* ---- cos ---- */
body.pagina-login .vbr-body { padding: 8px 30px 30px; }
body.pagina-login .vbr-intro {
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
  margin: 0 0 22px;
  color: #3A4A40;
}

/* ---- botó Google ---- */
body.pagina-login .vbr-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  background: #FFFFFF;
  border: 1px solid #DCE0DA;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(31,58,40,.06);
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
body.pagina-login .vbr-google:hover {
  background: #FBFCFB;
  border-color: #C7CFC6;
  box-shadow: 0 4px 14px -4px rgba(31,58,40,.18);
}
body.pagina-login .vbr-google span {
  font-weight: 600;
  font-size: 15px;
  color: #2C3A30;
}

/* ---- lletra petita / peu ---- */
body.pagina-login .vbr-fine {
  font-size: 12.5px;
  line-height: 1.5;
  color: #93A096;
  text-align: center;
  margin: 20px 4px 0;
}
.vbr-text-foc {
  background: linear-gradient(90deg, #EC6A3A 0%, #C44E1A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}
body.pagina-login .vbr-sep {
  height: 1px;
  margin: 22px 0 16px;
  background: linear-gradient(90deg,
              rgba(236,106,58,0) 0%, rgba(236,106,58,.35) 50%, rgba(236,106,58,0) 100%);
}
body.pagina-login .vbr-foot {
  font-size: 12.5px;
  color: #93A096;
  text-align: center;
  margin: 0;
}
body.pagina-login .vbr-foot a {
  color: #2F5D3A;
  font-weight: 600;
  text-decoration: none;
}

/* ---- avisos (flash d'error) ---- */
body.pagina-login .vbr-avis {
  font-size: 13px;
  line-height: 1.45;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 18px;
  text-align: center;
}
body.pagina-login .vbr-avis--acces {
  background: #FBEAE6; color: #B23B26; border: 1px solid #F3CFC6;
}
body.pagina-login .vbr-avis--tecnic {
  background: #FBF3E2; color: #9A6B14; border: 1px solid #F0E2C0;
}
body.pagina-login .vbr-avis--info {
  background: #EEF3F1; color: #3A5047; border: 1px solid #D8E4DE;
}

/* ---- animacions ---- */
@keyframes vibCardEntra {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}
@keyframes vibEntra {
  from { opacity: 0; transform: translateY(18px) scale(0.90); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes vibVida {
  0%   { transform: translateY(0)    scale(1)             rotate(0deg);    }
  25%  { transform: translateY(-5px) scale(1.022, 1.044)  rotate(-0.4deg); }
  50%  { transform: translateY(-7px) scale(0.994, 1.006)  rotate(0.18deg); }
  75%  { transform: translateY(-4px) scale(1.016, 1.028)  rotate(0.4deg);  }
  100% { transform: translateY(0)    scale(1)             rotate(0deg);    }
}
@keyframes vibGlowEntra {
  from { opacity: 0;    }
  to   { opacity: 0.55; }
}
@keyframes vibGlow {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.9;  }
}
@keyframes vibTextEntra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* respecta qui prefereix menys moviment */
@media (prefers-reduced-motion: reduce) {
  body.pagina-login .vbr-card,
  body.pagina-login .vbr-mark,
  body.pagina-login .vbr-glow,
  body.pagina-login .vbr-wordmark,
  body.pagina-login .vbr-lema { animation: none; }
}

/* enllaç "contacta amb la junta" dins del text fi del login */
body.pagina-login .vbr-fine a,
body.pagina-login .vbr-avis a {
  color: #2F5D3A;
  font-weight: 600;
  text-decoration: underline;
}


/* ============================================================
   Ajuda d'accés  (body.pagina-ajuda → modulos/auth/ajudaLogin.php)
   Reutilitza la base de .pagina-login (centrat, targeta, tipografia).
   ============================================================ */

body.pagina-ajuda .vbr-opcio {
  border: 1px solid #E2E8E3;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  text-align: left;
}
body.pagina-ajuda .vbr-opcio h2 {
  font-size: 15px;
  color: #2F5D3A;
  margin-bottom: 6px;
}
body.pagina-ajuda .vbr-opcio p {
  font-size: 13.5px;
  line-height: 1.5;
  color: #6E8A74;
  margin-bottom: 12px;
}
body.pagina-ajuda label {
  display: block;
  font-size: 13px;
  color: #3A4A40;
  margin: 10px 0 4px;
}
/* input[type=date] afegit el 2026-07-28 amb el camp "Data de naixement" del
   formulari de sol·licitud: sense ell el camp sortia amb l'estil cru del
   navegador, descol·locat de la resta. */
body.pagina-ajuda input[type="text"],
body.pagina-ajuda input[type="email"],
body.pagina-ajuda input[type="date"],
body.pagina-ajuda textarea {
  width: 100%;
  border: 1px solid #DCE0DA;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  color: #2C3A30;
  background: #fff;
}
/* Safari/iOS no centra verticalment el text d'un input[type=date] i el deixa
   més alt que la resta; box-sizing + alçada explícita els iguala. */
body.pagina-ajuda input[type="date"] {
  box-sizing: border-box;
  min-height: 42px;
}

/* Nota d'ajuda sota un camp concret (més petita que el .vbr-opcio p general). */
body.pagina-ajuda .vbr-camp-nota {
  font-size: 12.5px;
  line-height: 1.45;
  color: #7B8F80;
  margin: 6px 0 0;
}


/* ============================================================
   LAYOUT — topbar + sidebar + contingut (portal i admin)
   ============================================================ */

.vbr-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f0f2f0;
}

/* ---- Topbar ---- */
.vbr-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 54px;
  background: var(--drac);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px 0 16px; /* dreta 24px = padding de .vbr-principal, perquè el menú d'usuari quedi alineat amb el contingut */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.vbr-topbar-esq { display: flex; align-items: center; gap: 10px; }
.vbr-topbar-dre { display: flex; align-items: center; gap: 10px; }

.vbr-hamburger {
  display: none;
  background: none; border: none;
  color: #fff; font-size: 20px;
  cursor: pointer; padding: 6px; line-height: 1;
}

.vbr-topbar-marca {
  font-size: 16px; font-weight: 700;
  letter-spacing: 2.5px; color: #fff;
  text-decoration: none;
}

.vbr-topbar-nom {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}

.vbr-btn-sortir {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  padding: 5px 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.vbr-btn-sortir:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* ---- Cos (sidebar + principal) ---- */
.vbr-cos {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ---- Sidebar ---- */
.vbr-sidebar {
  width: 220px;
  min-width: 220px;
  background: #1f3d27;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: sticky;
  top: 54px; /* alçada del topbar */
  height: calc(100vh - 54px);
  align-self: flex-start;
}

.vbr-nav { list-style: none; padding: 8px 0; }

.vbr-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
}
.vbr-nav a:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.vbr-nav a.actiu {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-left-color: #9ed3ad;
}
.vbr-nav .vbr-nav-icona { font-size: 15px; flex-shrink: 0; }

/* ── Accordion sidebar ───────────────────────────────── */
.vbr-nav-grup-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px 14px 10px 18px;
  background: none; border: none; cursor: pointer; text-align: left;
  color: rgba(255,255,255,0.85); font: inherit; font-size: 14px; font-weight: 500;
  transition: background .15s;
}
.vbr-nav-grup-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.vbr-nav-grup-esq { display: flex; align-items: center; gap: 10px; }

/* Punt d'avís al botó d'un grup del sidebar (2026-07-28).
   Amb el grup plegat, .vbr-nav-sub té max-height:0 i el comptador del subitem
   NO es veu: una sol·licitud nova podia quedar-hi dies sense que ningú ho
   notés. El parpelleig és molt suau a propòsit — ha de cridar l'atenció de
   reüll, no competir amb el contingut de la pàgina. */
.vbr-nav-grup-punt {
  width: 7px; height: 7px; border-radius: 50%;
  background: #f59e0b; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.18);
  animation: vbr-nav-punt 2.4s ease-in-out infinite;
}
/* El punt es veu SEMPRE, també amb el grup obert. Al principi s'amagava en
   obrir-lo ("ja es veu el comptador al submenú"), però resulta que la pàgina
   de Sol·licituds obre el grup tota sola: el punt quedava invisible justament
   allà on l'anaves a mirar, i semblava espatllat. Redundant val més que
   invisible. */

@keyframes vbr-nav-punt {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
  50%      { opacity: .3;  box-shadow: 0 0 0 3px rgba(245,158,11,0);    }
}
/* Qui té el sistema configurat per evitar animacions veu el punt fix. */
@media (prefers-reduced-motion: reduce) {
  .vbr-nav-grup-punt { animation: none; }
}
.vbr-nav-fletxa { font-size: 18px; transition: transform .2s; display: inline-block; color: rgba(255,255,255,0.4); }
.vbr-nav-grup.obert .vbr-nav-fletxa { transform: rotate(90deg); color: rgba(255,255,255,0.7); }
.vbr-nav-sub { overflow: hidden; max-height: 0; transition: max-height .25s ease; list-style: none; }
.vbr-nav-grup.obert .vbr-nav-sub { max-height: 400px; }
.vbr-nav-sub li a {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px 8px 32px;
  font-size: 13px; color: rgba(255,255,255,0.6); text-decoration: none;
  transition: background .15s, color .15s;
}
.vbr-nav-sub li a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.vbr-nav-sub li a.actiu { color: #fff; background: rgba(255,255,255,0.1); }
.vbr-nav-sub-prefix { color: rgba(255,255,255,0.3); font-size: 11px; }
/* Comptador (sol·licituds en espera) al costat d'un ítem del menú */
.vbr-nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: #fff; background: #c5372a; border-radius: 999px;
}

/* ── Subgrup de 2n nivell dins un grup del sidebar (p.ex. "Usuaris" dins Sistema) ──
   Mateix estil de fletxa/toggle que el grup pare, un nivell més indentat. ── */
.vbr-nav-subgrup-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 16px 8px 32px; border: none; background: none;
  font: inherit; font-size: 13px; color: rgba(255,255,255,0.6);
  text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.vbr-nav-subgrup-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.vbr-nav-fletxa--sub { font-size: 12px; transition: transform .2s ease; }
.vbr-nav-subgrup.obert .vbr-nav-fletxa--sub { transform: rotate(90deg); color: rgba(255,255,255,0.7); }
.vbr-nav-subsub { overflow: hidden; max-height: 0; transition: max-height .2s ease; list-style: none; }
.vbr-nav-subgrup.obert .vbr-nav-subsub { max-height: 200px; }
.vbr-nav-subsub li a { padding-left: 48px; }

/* ── Dropdown usuari (topbar) ────────────────────────── */
.vbr-user-wrap { position: relative; }
.vbr-user-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25); border-radius: 6px;
  color: rgba(255,255,255,0.9); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .15s; white-space: nowrap;
}
.vbr-user-btn:hover { background: rgba(255,255,255,0.22); color: #fff; }
.vbr-user-fletxa { font-size: 10px; opacity: .7; }
.vbr-user-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 200px; z-index: 300;
  overflow: hidden;
}
.vbr-user-menu.visible { display: block; }
.vbr-user-menu-item {
  display: block; padding: 10px 16px; font-size: 13px;
  color: #333; text-decoration: none; cursor: pointer;
  transition: background .1s;
}
a.vbr-user-menu-item:hover { background: #f5f5f5; }
.vbr-user-menu-item--disabled { color: #aaa; cursor: default; }
.vbr-user-menu-item--danger { color: #c5372a; }
a.vbr-user-menu-item--danger:hover { background: #fff5f5; }
.vbr-user-menu-sep { border-top: 1px solid #eee; margin: 4px 0; }

/* ── (antic separador de seccions — mantingut per compatibilitat) ── */
.vbr-nav-sep {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 1.5px; color: rgba(255,255,255,0.3);
  padding: 16px 18px 4px;
}

/* ---- Àrea principal ---- */
.vbr-principal {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* ---- Capçalera de pàgina ---- */
.vbr-pag-cap {
  margin-bottom: 20px;
  border-bottom: 1px solid #dde5dd;
  padding-bottom: 12px;
}
.vbr-pag-cap h1 {
  font-size: 20px;
  font-weight: 600;
  color: #1f3d27;
}

/* ---- Graella de targetes ---- */
.vbr-targetes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.vbr-targeta {
  background: #fff;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  border-top: 3px solid var(--drac);
}
.vbr-targeta--neutra { border-top-color: #ccc; }
.vbr-targeta--avís   { border-top-color: #e0a800; }

.vbr-targeta .vbr-t-titol {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 1px; color: #888; margin-bottom: 10px;
}
.vbr-targeta .vbr-t-valor {
  font-size: 26px; font-weight: 700; color: #2f5d3a;
  line-height: 1.1;
}
.vbr-targeta .vbr-t-sub {
  font-size: 12px; color: #999; margin-top: 4px;
}
.vbr-targeta .vbr-t-cos {
  font-size: 13.5px; color: #333; line-height: 1.7;
}
.vbr-targeta .vbr-t-cos strong { color: #1f3d27; }

/* ---- Badges d'estat ---- */
.vbr-badge {
  display: inline-block;
  padding: 3px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600;
  /* Un badge és una etiqueta, no un paràgraf: mai es parteix en dues línies.
     Sense això, la columna «Estat» de la llista de membres decidia l'amplada
     pel text més llarg de la SEVA pàgina, i n'hi ha quatre de 13-14 caràcters
     («Esperant fitxa», «Pendent d'alta», «Pendent @Gmail», «Mai connectat»):
     ajustar l'amplada per a un només hauria tornat a partir els altres tres el
     dia que entrés una sol·licitud. Amb nowrap, la taula reserva sola l'espai
     que calgui i el problema no pot reaparèixer amb una etiqueta nova. */
  white-space: nowrap;
}
.vbr-badge--ok      { background: #d4edda; color: #155724; }
.vbr-badge--warn    { background: #fff3cd; color: #856404; }
.vbr-badge--info    { background: #d1ecf1; color: #0c5460; }
.vbr-badge--espera  { background: #e5e7eb; color: #4b5563; }
.vbr-badge--menor   { background: #fef3e2; color: #b45309; }
.vbr-badge--sense-acces { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
.vbr-badge--error   { background: #f8d7da; color: #721c24; }
.vbr-badge--critic  { background: #dc2626; color: #fff; font-weight: 700; letter-spacing: .2px; }
/* Pendent @Gmail — violeta, clarament diferent de "Menor" (ambre) */
.vbr-badge--pendent { background: #ede9fe; color: #6d28d9; border: 1px solid #c4b5fd; font-weight: 600; }
/* Baixa: estat històric, no un error → gris apagat amb vora discontínua (no vermell) */
.vbr-badge--baixa   { background: #f3f4f6; color: #9ca3af; border: 1px dashed #d1d5db; }

/* ---- Avís «menor: cal responsable» (formularis alta/edició) ---- */
.vbr-avis-menor {
  background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #dc2626;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 16px;
  color: #b91c1c; font-size: 13px; font-weight: 500;
}
.vbr-avis-menor a,
.vbr-avis-menor__lnk {
  color: #b91c1c; font-weight: 700; text-decoration: underline; cursor: pointer;
  background: none; border: none; padding: 0; font: inherit;
}

/* ---- Tooltip propi lleuger (hover) — reutilitzable via data-tip ---- */
.vbr-tip { position: relative; }
.vbr-tip::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%);
  width: max-content; max-width: 230px;
  background: #1f2937; color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.35;
  text-align: center; white-space: normal; text-transform: none;
  padding: 7px 10px; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transition: opacity .15s ease;
  z-index: 60; pointer-events: none;
}
.vbr-tip::before {
  content: ''; position: absolute; left: 50%; bottom: calc(100% + 3px);
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #1f2937;
  opacity: 0; visibility: hidden; transition: opacity .15s ease;
  z-index: 60; pointer-events: none;
}
.vbr-tip:hover::after, .vbr-tip:hover::before { opacity: 1; visibility: visible; }

/* ---- Pestanyes (fitxa d'edició: Dades personals / Delegacions) ---- */
.vbr-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 2px solid #e5e7eb; margin-bottom: 20px;
}
.vbr-tab {
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 10px 18px; font-size: 14px; font-weight: 600; color: #6b7280;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.vbr-tab:hover { color: #374151; }
.vbr-tab--actiu { color: #2f5d3a; border-bottom-color: #2f5d3a; }

/* ---- Accions crítiques (dashboard) ---- */
.vbr-accions-critiques { margin-top: 28px; }
.vbr-ac-titol {
  font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
  color: #666; font-weight: 700; margin: 0 0 12px;
}
.vbr-ac-ok {
  background: #e6f4ea; color: #2f8f4e; border: 1px solid #bfe3cb;
  border-radius: 10px; padding: 14px 18px; font-size: 14px; font-weight: 600;
}
.vbr-ac-item {
  display: flex; align-items: center; gap: 14px;
  border-radius: 10px; padding: 12px 16px; margin-bottom: 10px;
  text-decoration: none; transition: background .15s;
  border: 1px solid; border-left-width: 4px;
}
.vbr-ac-item--critic  { background: #fef2f2; border-color: #fecaca; border-left-color: #dc2626; color: #7f1d1d; }
.vbr-ac-item--critic:hover  { background: #fee2e2; }
.vbr-ac-item--pendent { background: #fff7ed; border-color: #fed7aa; border-left-color: #ea580c; color: #7c2d12; }
.vbr-ac-item--pendent:hover { background: #ffedd5; }
.vbr-ac-num  { font-size: 20px; font-weight: 800; min-width: 36px; text-align: center; }
.vbr-ac-text { flex: 1; font-size: 14px; font-weight: 600; }
.vbr-ac-fletxa { font-size: 18px; }
.vbr-ac-item--critic  .vbr-ac-num, .vbr-ac-item--critic  .vbr-ac-fletxa { color: #dc2626; }
.vbr-ac-item--pendent .vbr-ac-num, .vbr-ac-item--pendent .vbr-ac-fletxa { color: #ea580c; }

/* ---- Overlay (mòbil) ---- */
.vbr-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 150;
}
.vbr-overlay.visible { display: block; }

/* ============================================================
   RESPONSIVE — mòbil (<768px)
   ============================================================ */
@media (max-width: 767px) {
  .vbr-hamburger { display: block; }
  .vbr-topbar-nom { display: none; }

  .vbr-sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
  }
  .vbr-sidebar.obert { transform: translateX(0); }

  .vbr-principal { padding: 14px; }
  .vbr-topbar    { padding-right: 14px; } /* mateix marge dret que .vbr-principal en mòbil */
  .vbr-targetes  { grid-template-columns: 1fr; }
}
body.pagina-ajuda textarea { min-height: 80px; resize: vertical; }

/* honeypot: invisible per a humans, visible per a bots */
body.pagina-ajuda .vbr-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

body.pagina-ajuda .vbr-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 14px;
  padding: 12px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font: 600 15px 'Figtree', system-ui, sans-serif;
  background: #2F5D3A;
  color: #fff;
  text-decoration: none;
}
body.pagina-ajuda .vbr-btn:hover { background: #244A2E; }
body.pagina-ajuda .vbr-btn--secundari {
  background: #fff;
  color: #2F5D3A;
  border: 1.5px solid #2F5D3A;
}
body.pagina-ajuda .vbr-btn--secundari:hover { background: #F3F8F4; }

body.pagina-ajuda .vbr-ok {
  background: #E6F4EA;
  color: #2F8F4E;
  border: 1px solid #BFE3CB;
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
body.pagina-ajuda .vbr-torna {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  color: #6E8A74;
  text-decoration: none;
  text-align: center;
}
body.pagina-ajuda .vbr-torna:hover { text-decoration: underline; }

/* PC: targeta més ampla i les dues opcions en paral·lel (en mòbil queden apilades) */
body.pagina-ajuda .vbr-card { max-width: 620px; }
body.pagina-ajuda .vbr-opcions { display: grid; gap: 14px; }
@media (min-width: 620px) {
  body.pagina-ajuda .vbr-opcions { grid-template-columns: 1fr 1fr; align-items: start; }
}


/* ============================================================
   ADMIN — badge topbar, botons, barra de cerca, taula, formularis
   ============================================================ */

/* ---- Badge "ADMIN" a la topbar ---- */
.vbr-badge-admin {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.9);
  border-radius: 4px; padding: 2px 6px; margin-left: 6px;
  vertical-align: middle;
}

/* ---- Indicador SuperAdmin a la topbar ---- */
.vbr-superadmin-badge {
  font-size: 15px; font-weight: 700; letter-spacing: 0.5px;
  color: #f4b24a;
  text-shadow: 0 0 8px rgba(244,178,74,.45);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ---- Botons genèrics (admin i portal) ---- */
.vbr-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  font: 600 13.5px system-ui, sans-serif;
  border-radius: 6px; border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, box-shadow .15s;
  line-height: 1.3;
}
.vbr-btn--principal { background: var(--drac); color: #fff; }
.vbr-btn--principal:hover { background: var(--drac-fos); color: #fff; }
.vbr-btn--secundari {
  background: #fff; color: var(--drac-fos);
  border: 1.5px solid var(--drac);
}
.vbr-btn--secundari:hover { background: #f0f7f1; }
.vbr-btn--sm { padding: 5px 12px; font-size: 12px; }
/* Botó de perill (donar de baixa, accions destructives) */
.vbr-btn--perill { background: #c5372a; color: #fff; border-color: #c5372a; }
.vbr-btn--perill:hover { background: #a82d22; color: #fff; }
/* Botó de perill només-text (sense fons ni vora): per a zones ja prou marcades */
.vbr-btn--perill-text { color: #c5372a; background: none; border: none; }
.vbr-btn--perill-text:hover { color: #a82d22; background: none; }
/* Botó d'avís (taronja): l'acció no és destructiva ni és cap rebuig NOSTRE,
   però tanca el tràmit. Cas d'ús: «Ha declinat» — se'n va perquè ho ha decidit
   ELL. En verd (secundari) es confonia amb una acció normal i convidava a
   prémer-lo; en vermell semblaria que el fem fora nosaltres. */
.vbr-btn--avis {
  background: #fff; color: #9a5b00;
  border: 1.5px solid #e08c1a;
}
.vbr-btn--avis:hover { background: #fdf3e3; color: #7d4900; }
/* Text «(opcional)» als labels de formulari */
.vbr-opcional { color: #aaa; font-size: 12px; }

/* ---- Bandeja de sol·licituds (accions per fila) ---- */
.vbr-solic-accions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; }
.vbr-solic-form { margin: 0; }
.vbr-solic-denegar { position: relative; }
.vbr-solic-denegar > summary { list-style: none; cursor: pointer; }
.vbr-solic-denegar > summary::-webkit-details-marker { display: none; }
.vbr-solic-denegar-form {
  margin-top: 8px; padding: 10px;
  background: #fff7f6; border: 1px solid #f0c9c3; border-radius: 6px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 240px;
}
.vbr-solic-denegar-label { font-size: 11.5px; color: #7a2018; font-weight: 600; }
.vbr-solic-denegar-form textarea {
  width: 100%; font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid #ddd; border-radius: 5px; resize: vertical;
}
.vbr-solic-motiu { font-size: 12.5px; color: #7a2018; }

/* ---- Històric d'enviaments del formulari (safata) · 2026-07-29 ---- */
/* Va SOBRE el botó de reenviar, perquè la pregunta que es fa secretaria just
   abans de prémer-lo és «quan l'hi vaig enviar?». Abans només hi havia el
   flash del moment, que desapareix. */
.vbr-envia-wrap { display: inline-block; }
.vbr-bombolla-wrap { display: inline-block; }

/* Badge de col·lisió: el xoc de dades s'ha de veure a la llista, ABANS de
   decidir. Cursor d'ajuda perquè es noti que hi ha detall a sobre. */
.vbr-xoc-wrap { cursor: help; }
.vbr-bombolla strong.vbr-xoc-qui { color: #8a5a12; }

/* position:FIXED, posicionada per JS — igual que el tooltip de la llista de
   membres, i pel mateix motiu: .vbr-taula-wrap porta overflow-x:auto, i això
   fa que el navegador calculi overflow-y:auto també. Qualsevol bombolla
   absoluta dins d'una fila queda TALLADA pel contenidor. Amb position:fixed
   surt del flux i ja no hi ha res que la retalli. */
/* Classe genèrica: la fa servir l'històric d'enviaments i l'avís de col·lisió
   de dades. Qualsevol bombolla nova dins d'una taula hauria de reutilitzar-la
   en lloc de tornar a resoldre el retall. */
.vbr-bombolla {
  display: none;
  position: fixed; z-index: 9999;
  width: max-content; max-width: 260px;
  font-size: 12px; line-height: 1.45; color: #5b6b60; text-align: left;
  background: #fff; border: 1px solid #dce5de; border-radius: 8px;
  padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.15);
  pointer-events: none;
}
.vbr-enviament { display: flex; align-items: flex-start; gap: 7px; }
.vbr-enviament + .vbr-enviament { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e0e8e1; }
/* Els reenviaments anteriors, atenuats: interessa el darrer. */
.vbr-enviament--vell { opacity: .6; }
.vbr-enviament-marca { font-weight: 700; flex-shrink: 0; }
.vbr-enviament-marca.ok { color: #2f8f4e; }
.vbr-enviament-marca.ko { color: #c5372a; }
.vbr-enviament-mail { color: #8b9a90; word-break: break-all; }
.vbr-enviament-caduca {
  margin-top: 7px; padding-top: 6px; border-top: 1px solid #e6ece7;
  font-size: 11.5px; color: #8b9a90;
}

/* ---- Menú «Resta d'opcions» de la safata · 2026-07-29 ---- */
/* Amb Veure fitxa + Acceptar + Ha declinat + Denegar la cel·la ja costava de
   llegir. A la fila hi queda el que es fa gairebé sempre; la resta, plegat.
   position:fixed i col·locat per JS pel mateix motiu que .vbr-bombolla. */
.vbr-menu-wrap { display: inline-block; position: relative; }

.vbr-menu-btn {
  font: inherit; font-size: 12.5px; line-height: 1;
  color: #5b6b60; background: transparent;
  border: 1px solid transparent; border-radius: 7px;
  padding: 7px 10px; cursor: pointer;
}
.vbr-menu-btn:hover,
.vbr-menu-btn[aria-expanded="true"] { background: #eef2ef; border-color: #dce5de; color: #3c4a41; }
.vbr-menu-btn:focus-visible { outline: 2px solid #2f8f4e; outline-offset: 2px; }

.vbr-menu-panel {
  display: none;
  position: fixed; z-index: 9998;
  min-width: 232px; max-width: 300px;
  background: #fff; border: 1px solid #dce5de; border-radius: 10px;
  padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.16);
  text-align: left;
}
.vbr-menu-panel.obert { display: block; }

.vbr-menu-item-form { margin: 0; }
/* Serveix per a <button> i per a <a> (Denegar, a Membres > En espera, porta a
   una pàgina de confirmació en lloc d'enviar el formulari des del menú). */
.vbr-menu-item {
  display: flex; align-items: flex-start; gap: 9px; width: 100%;
  box-sizing: border-box; text-decoration: none;
  font: inherit; font-size: 13px; line-height: 1.35; text-align: left;
  color: #3c4a41; background: transparent; border: 0; border-radius: 7px;
  padding: 9px 10px; cursor: pointer;
}
.vbr-menu-item:hover { background: #eef2ef; }
.vbr-menu-item--perill { color: #c5372a; }
.vbr-menu-item--perill:hover { background: #fdeeec; }
.vbr-menu-icona { flex-shrink: 0; font-size: 13px; line-height: 1.35; opacity: .75; }
.vbr-menu-item-nota { display: block; font-size: 11.5px; color: #8b9a90; margin-top: 2px; }

/* Denegar desplega el motiu DINS del mateix panell (el JS el recol·loca). */
.vbr-menu-denegar > summary { list-style: none; }
.vbr-menu-denegar > summary::-webkit-details-marker { display: none; }
.vbr-menu-denegar[open] > summary { background: #fdeeec; }
.vbr-menu-denegar .vbr-solic-denegar-form { padding: 4px 10px 8px; }

/* ---- Panell «Revisar» d'una sol·licitud rebuda · 2026-07-29 ---- */
/* A «rebuda» encara no hi ha fitxa que consultar: el formulari públic només
   demana quatre dades. S'ensenyen aquí, i les tres decisions viuen a dins,
   perquè abans es demanava admetre —i escriure a un desconegut— sense poder
   veure què havia posat. */
.vbr-revisar > summary { list-style: none; cursor: pointer; display: inline-flex; }
.vbr-revisar > summary::-webkit-details-marker { display: none; }

.vbr-revisar-cos {
  margin-top: 10px; padding: 18px 20px;
  width: max-content; min-width: 300px; max-width: 380px;
  background: #fff; border: 1px solid #dce5de; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.09);
  text-align: left; white-space: normal;
}

.vbr-revisar-titol {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  color: #8b9a90; font-weight: 700;
  margin: 0 0 14px; padding-bottom: 9px; border-bottom: 1px solid #eef1ee;
}

/* Etiqueta a SOBRE del valor, no al costat. Una graella de dues columnes
   dins d'una cel·la de taula estreta acaba sempre apilant-se malament; així
   es llegeix igual de bé a qualsevol amplada i al mòbil. */
.vbr-revisar-dades { margin: 0; }
.vbr-revisar-dades dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  color: #9aa89e; font-weight: 600; margin-bottom: 2px;
}
.vbr-revisar-dades dd {
  margin: 0 0 13px; font-size: 14px; line-height: 1.4; color: #2c3a30;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.vbr-revisar-dades dd:last-of-type { margin-bottom: 0; }

.vbr-revisar-avis {
  margin: 14px 0 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  background: #fff7ed; border: 1px solid #fde3b8; border-radius: 8px; color: #b45309;
}

/* Acció principal a tota l'amplada; les dues sortides negatives, a sota i
   discretes. Que el que es fa el 90% de les vegades sigui el més fàcil. */
.vbr-revisar-accions {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef1ee;
}
.vbr-revisar-accions > form:first-child .vbr-btn { width: 100%; justify-content: center; }
.vbr-revisar-sortides {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}

/* ---- Intents d'algú que ja consta al sistema (safata) · 2026-07-29 ---- */
/* Plegat per defecte: no ha de competir amb la safata, però ha de veure's que
   hi és. Ambre perquè demana una trucada, no una acció al sistema. */
.vbr-intents {
  background: #fff7ed; border: 1px solid #fde3b8; border-radius: 10px;
  padding: 12px 16px; margin: 0 0 18px;
}
.vbr-intents > summary {
  cursor: pointer; font-size: 13.5px; color: #b45309; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.vbr-intents > summary::-webkit-details-marker { display: none; }
.vbr-intents-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: #f59e0b; color: #fff; font-size: 12px; font-weight: 700;
}
.vbr-intents-nota { margin: 10px 0 4px; color: #92400e; }
.vbr-intents-llista { list-style: none; margin: 8px 0 0; padding: 0; }
.vbr-intents-llista li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid #fde3b8; font-size: 13px;
}
.vbr-intents-nom { font-weight: 600; color: #3f5146; }
.vbr-intents-quan { font-size: 12px; color: #9aa89e; margin-left: auto; }

/* ---- Proposta de reconciliació responsable ↔ soci (safata) · 2026-07-29 ---- */
/* Blau informatiu, no verd ni ambre: no és ni un èxit ni un problema, és una
   troballa que secretaria ha de confirmar. */
.vbr-reconc {
  display: flex; flex-direction: column; gap: 6px;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
  padding: 9px 11px; margin-top: 4px; max-width: 320px;
}
.vbr-reconc-txt { font-size: 12px; line-height: 1.45; color: #1e40af; }

/* ---- Alta manual de sol·licitud (safata de secretaria) · 2026-07-28 ---- */
/* Plegable perquè la safata segueixi sent el primer que es veu: l'alta manual
   és el cas excepcional (qui s'apunta en persona o per telèfon), no el normal. */
.vbr-solic-nova { margin: 0 0 24px; }
.vbr-solic-nova > summary {
  list-style: none; cursor: pointer; display: inline-flex;
}
.vbr-solic-nova > summary::-webkit-details-marker { display: none; }
.vbr-solic-nova-form {
  margin-top: 14px; padding: 20px 22px 22px;
  background: #fff; border: 1px solid #E2E8E3; border-radius: 12px;
}
/* L'últim .vbr-form-fila ja porta margin-bottom propi; sense això el botó
   quedava massa a prop de la darrera fila de camps. */
.vbr-solic-nova-form .vbr-btn { margin-top: 4px; }

/* Cel·la del candidat: el nom i l'etiqueta "Ex-membre" s'encavalcaven. */
.vbr-solic-candidat {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  line-height: 1.4;
}

/* Files més airejades que la taula genèrica: la columna d'accions porta
   diversos botons i, amb el padding estàndard, tocaven la vora de la fila. */
.vbr-taula--solic td { padding: 14px; }
.vbr-taula--solic th { padding: 11px 14px; }
.vbr-taula--solic .vbr-solic-accions { gap: 8px; }
.vbr-taula--solic .vbr-solic-motiu { display: inline-block; max-width: 40ch; }

/* ---- Formulari públic de fitxa (via token) · mobile-first ---- */
/* Estils autocontinguts: no depenen de body.pagina-login/ajuda. */
body.pagina-solicitud { background: #eef2ef; padding: 20px 14px 60px; }
.vbr-solic-public {
  max-width: 680px; margin: 0 auto;
  background: #fff; border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 26px 22px;
}
.vbr-solic-public-cap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; margin-bottom: 18px;
}
.vbr-solic-public .vbr-wordmark {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 28px; line-height: 1; letter-spacing: .04em; color: var(--drac);
}
.vbr-solic-public-titol { font-size: 22px; color: var(--drac-fos); margin: 6px 0 2px; }
.vbr-solic-public .vbr-avis {
  padding: 14px 16px; border-radius: 8px; font-size: 14px; line-height: 1.5;
}
.vbr-solic-public .vbr-avis--acces {
  background: #fdf2f0; color: #7a2018; border: 1px solid #f0c9c3;
}
.vbr-solic-public .vbr-ok {
  padding: 14px 16px; border-radius: 8px; font-size: 14px; line-height: 1.5;
  background: #e8f5ea; color: #1e5631; border: 1px solid #b7dfc0;
}
.vbr-solic-public .vbr-torna {
  display: inline-block; margin-top: 16px;
  color: var(--drac); text-decoration: none; font-size: 13px;
}
.vbr-solic-public .vbr-torna:hover { text-decoration: underline; }
/* ---- Responsables i consentiment (formulari públic de fitxa) · 2026-07-29 ---- */
.vbr-resp-nota { margin: -8px 0 14px; }

/* <fieldset> perquè cada responsable és un grup de camps de debò: els lectors
   de pantalla anuncien la <legend> abans de cada camp i així se sap de quin
   dels dos es parla. Vora suau per separar-los sense fer soroll. */
.vbr-resp-bloc {
  border: 1px solid #e2e8e3; border-radius: 10px;
  padding: 14px 16px 4px; margin: 0 0 14px;
}
.vbr-resp-bloc legend {
  font-size: 12px; font-weight: 600; color: #4a5c50;
  padding: 0 6px;
}

/* Casella de consentiment: text al costat i alineat a dalt, no centrat, perquè
   són tres línies i quedaria desmanegat. */
.vbr-consent {
  margin: 20px 0 0; padding: 14px 16px;
  background: #f7f9f7; border: 1px solid #e2e8e3; border-radius: 10px;
}
.vbr-consent label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.55; color: #3f5146; cursor: pointer;
}
.vbr-consent input[type="checkbox"] {
  width: 17px; height: 17px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--drac);
}

.vbr-solic-public-peu { margin-top: 22px; display: flex; justify-content: flex-end; }
.vbr-solic-public-peu .vbr-btn { width: 100%; justify-content: center; }
@media (min-width: 560px) {
  .vbr-solic-public-peu .vbr-btn { width: auto; }
}

/* ---- Capçalera de pàgina amb botó d'acció ---- */
.vbr-pag-cap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---- Navegació anterior/següent dins la fitxa de membre ---- */
.vbr-fitxa-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vbr-fitxa-pos { font-size: 12px; color: #888; min-width: 42px; text-align: center; }

/* ---- Paginador de taules (p.ex. visor de logs) ---- */
.vbr-paginador {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; flex-wrap: wrap;
  margin-top: 14px; margin-right: 16px;
  padding-bottom: 16px;
}
.vbr-paginador-info { font-size: 12px; color: #888; }
.vbr-btn--disabled,
.vbr-btn--disabled:hover {
  opacity: .4; cursor: default; pointer-events: none;
  background: #fff; color: #999; border-color: #ccc;
}

/* ---- Barra de cerca + filtre ---- */
.vbr-barra {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 16px;
}
.vbr-barra form { display: contents; }
.vbr-cerca {
  flex: 1; min-width: 160px; max-width: 320px;
  padding: 8px 12px;
  border: 1px solid #cdd8ce; border-radius: 6px;
  font: inherit; font-size: 13.5px; background: #fff;
  transition: border-color .15s;
}
.vbr-cerca:focus { outline: none; border-color: var(--drac); }
.vbr-filtre { display: flex; gap: 6px; margin-left: auto; }

/* ---- Taula de dades ---- */
.vbr-taula-wrap {
  background: #fff; border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  overflow-x: auto;
}
.vbr-taula {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
}
.vbr-taula th {
  background: #f7f9f7; text-align: left; padding: 10px 14px;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; color: #666;
  border-bottom: 1.5px solid #e0e8e0; white-space: nowrap;
}
.vbr-taula td {
  padding: 10px 14px; border-bottom: 1px solid #eef1ee;
  vertical-align: middle;
}
.vbr-taula tr:last-child td { border-bottom: none; }
.vbr-taula tr:hover td { background: #f7fbf7; }
.vbr-taula .col-num { font-weight: 700; color: var(--drac); }
.vbr-taula-buit { padding: 28px; text-align: center; font-size: 13.5px; color: #aaa; }
.vbr-taula-peu { margin-top: 8px; font-size: 12px; color: #aaa; }

/* ---- Ordenació per capçalera (taules .vbr-taula--sortable) ---- */
.vbr-taula--sortable th.vbr-th-sort { cursor: pointer; user-select: none; }
.vbr-taula--sortable th.vbr-th-sort:hover { background: #eef4ef; color: #1f3d27; }
.vbr-taula--sortable th.vbr-th-sorted { color: var(--drac); }
.vbr-sort-ico { font-size: 9px; color: #9ca3af; margin-left: 2px; }

/* ---- Avisos de formulari / flash ---- */
.vbr-form-avis {
  border-radius: 8px; padding: 7px 14px;
  font-size: 13px; line-height: 1.4; margin-bottom: 14px;
}
/* Slot que reserva sempre l'espai del missatge flash (eviti salts de layout) */
.vbr-avis-slot { min-height: 34px; margin-bottom: 14px; }
.vbr-avis-slot .vbr-form-avis { margin-bottom: 0; }
.vbr-form-avis--ok    { background: #e6f4ea; color: #2f8f4e; border: 1px solid #bfe3cb; animation: vbr-avis-halo-ok 1.3s ease-out 2; }
.vbr-form-avis--warn  { background: #fff7ed; color: #b45309; border: 1px solid #fde3b8; animation: vbr-avis-halo-warn 1.3s ease-out 2; }
.vbr-form-avis--error { background: #fbeae6; color: #b23b26; border: 1px solid #f3cfc6; animation: vbr-avis-halo-error 1.3s ease-out 2; }
/* Informatiu i permanent (p. ex. «aquests camps estan blocats»): SENSE halo.
   Les altres tres variants criden l'atenció perquè informen d'una cosa que
   acaba de passar; aquesta surt sempre, i un avís que batega cada vegada que
   obres una fitxa deixa de llegir-se al tercer cop. */
.vbr-form-avis--info  { background: #f1f4f2; color: #4a5a50; border: 1px solid #dce5de; }

/* ---- Camps que secretaria ha d'omplir per poder activar · 2026-07-29 ---- */
/* Una sol·licitud acceptada encara no té data d'alta ni tasca: les posa
   secretaria. Es marquen en taronja suau —només les que FALTEN, no totes— per
   no obligar-la a comparar camp a camp buscant el buit. */
.vbr-cal-omplir {
  background: #fff7ed; border: 1px solid #fde3b8; border-radius: 8px;
  padding: 10px 12px; margin: -4px -4px 0;
}
.vbr-cal-omplir > label { color: #b45309; }
.vbr-cal-omplir-nota {
  display: inline-block; margin-left: 8px;
  font-size: 11.5px; color: #b45309; white-space: nowrap;
}
.vbr-form-avis > div + div { margin-top: 4px; }

/* Cada línia de discrepància de DriveSync, amb sangria per llegir-se com a llista */
.vbr-drive-avis-linia { padding-left: 20px; margin-top: 3px; }

/* Halo d'entrada (2 polsos i s'atura) — crida l'atenció sense quedar-se
   parpellejant per sempre com el punt d'avisos de la llista. */
@keyframes vbr-avis-halo-ok {
  0%   { box-shadow: 0 0 0 0 rgba(47,143,78,.35); }
  70%  { box-shadow: 0 0 0 10px rgba(47,143,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,143,78,0); }
}
@keyframes vbr-avis-halo-warn {
  0%   { box-shadow: 0 0 0 0 rgba(180,83,9,.35); }
  70%  { box-shadow: 0 0 0 10px rgba(180,83,9,0); }
  100% { box-shadow: 0 0 0 0 rgba(180,83,9,0); }
}
@keyframes vbr-avis-halo-error {
  0%   { box-shadow: 0 0 0 0 rgba(178,59,38,.35); }
  70%  { box-shadow: 0 0 0 10px rgba(178,59,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(178,59,38,0); }
}
@media (prefers-reduced-motion: reduce) {
  .vbr-form-avis--ok, .vbr-form-avis--warn, .vbr-form-avis--error { animation: none; }
}

/* ---- Panell de dades incompletes (fitxa d'edició) ---- */
.vbr-avis-panel {
  background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b;
  border-radius: 8px; padding: 12px 16px; margin-bottom: 18px;
}
.vbr-avis-panel-tit {
  font-size: 13px; font-weight: 700; color: #b45309; margin-bottom: 6px;
}
.vbr-avis-panel-llista {
  margin: 0; padding-left: 20px; list-style: disc;
}
.vbr-avis-panel-llista li {
  font-size: 13px; color: #92400e; line-height: 1.6;
}

/* ---- Formularis ---- */
.vbr-form { max-width: none; }

.vbr-form-seccio {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #888;
  border-bottom: 1px solid #e0e8e0; padding-bottom: 6px;
  margin: 24px 0 16px;
}
.vbr-form-seccio:first-of-type { margin-top: 0; }

.vbr-config-nota {
  font-size: 13px; color: #6b7280; line-height: 1.5;
  background: #f6f8f6; border-left: 3px solid #cbd5c9;
  padding: 12px 16px; margin: -8px 0 16px; border-radius: 4px;
}
.vbr-config-nota p { margin: 0 0 8px; }
.vbr-config-nota p:last-child { margin-bottom: 0; }
.vbr-config-nota code {
  font-size: 12px; background: #e9ede9; padding: 1px 5px; border-radius: 3px;
}
.vbr-config-nota-llista {
  margin: 4px 0 10px; padding-left: 20px; list-style: decimal;
}
.vbr-config-nota-llista li { margin-bottom: 4px; }

/* Contingut de cada pestanya a Configuració (nom propi: "vbr-tab-panel" ja
   l'usen alta.php/editar.php amb un mecanisme diferent, basat només en
   style.display inline per JS — NO tocar aquell nom per no trencar-los). */
.vbr-config-panel { display: none; }
.vbr-config-panel--actiu { display: block; }

.vbr-form-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 14px;
}
.vbr-form-grup { display: flex; flex-direction: column; gap: 4px; }
.vbr-form-grup label { font-size: 12px; font-weight: 600; color: #444; }
.vbr-form-grup input,
.vbr-form-grup select,
.vbr-form-grup textarea {
  padding: 9px 11px;
  border: 1px solid #cdd8ce; border-radius: 6px;
  font: inherit; font-size: 13.5px; color: #2c3a30;
  background: #fff; transition: border-color .15s, transform .15s;
  transform-origin: left center;
}
.vbr-form-grup input:focus,
.vbr-form-grup select:focus,
.vbr-form-grup textarea:focus { outline: none; border-color: var(--drac); }
.vbr-form-grup select:focus { box-shadow: 2px 0 8px rgba(0,0,0,.10); }
.vbr-form-grup select:has(option[value=""]:checked) { color: #aaa; }
.vbr-form-grup textarea { min-height: 90px; resize: vertical; }
.vbr-form-hint { font-size: 11.5px; color: #aaa; }

/* .vbr-form-hint està pensada com a pista EN LÍNIA d'un camp (<span> dins d'un
   .vbr-form-grup): per això no té marges. Quan s'usa com a paràgraf solt —cosa
   que fan unes quantes pàgines— queda arrapada al que ve a sobre i a sota.
   Aquesta regla només afecta els usos en <p>; els <span> queden igual. */
p.vbr-form-hint { margin-top: .4em; line-height: 1.5; }

/* Paràgraf d'introducció d'una pàgina, just sota el títol. Existeix perquè
   fins ara s'hi reaprofitava .vbr-form-hint, que és massa petita i grisa per a
   un text que la gent ha de llegir de veritat.
   SENSE max-width a propòsit: ha d'ocupar la mateixa amplada que la taula que
   ve a sota, o el bloc de text queda escapçat i desalineat amb la resta de la
   pàgina (decisió del desenvolupador, 2026-07-28). */
.vbr-pag-intro {
  font-size: 13px;
  line-height: 1.6;
  color: #6b7d70;
  margin: 0 0 22px;
}

.vbr-form-grup--ample { grid-column: 1 / -1; }

/* ── Fitxa de lectura (portal soci) ─────────────────── */
.vbr-fitxa-seccio {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: #888; font-weight: 600; padding: 20px 0 8px;
  border-bottom: 1px solid #eee; margin-bottom: 4px;
}
.vbr-fitxa { margin-bottom: 8px; }
.vbr-fitxa-fila {
  display: flex; gap: 16px; padding: 10px 0;
  border-bottom: 1px solid #f3f3f3; align-items: baseline;
}
.vbr-fitxa-label {
  flex: 0 0 160px; font-size: 13px; color: #888; font-weight: 500;
}
.vbr-fitxa-valor { font-size: 14px; color: #222; flex: 1; }
.vbr-fitxa-sub { font-size: 12px; color: #999; margin-left: 6px; }
@media (max-width: 480px) {
  .vbr-fitxa-fila { flex-direction: column; gap: 2px; }
  .vbr-fitxa-label { flex: none; font-size: 11px; }
}

/* ── Pestanyes de navegació (tabs) ──────────────────── */
.vbr-tabs {
  display: flex; border-bottom: 2px solid #e8e8e8; margin-bottom: 24px;
}
.vbr-tab {
  padding: 10px 20px; font-size: 14px; font-weight: 500;
  color: #888; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.vbr-tab:hover { color: var(--drac); }
.vbr-tab.actiu { color: var(--drac); border-bottom-color: var(--drac); font-weight: 600; }

/* Botó "+" inline dins d'un label (per obrir gestors secundaris) */
.vbr-btn-new {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; font-size: 14px; font-weight: 700; line-height: 1;
  color: var(--drac); background: #e8f0e9; border-radius: 4px;
  text-decoration: none; margin-left: 6px; vertical-align: middle;
  transition: background .15s;
}
.vbr-btn-new:hover { background: #cfe0d4; }

.vbr-form-peu {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid #e0e8e0;
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* ── Pestanyes (perfil del soci i futures seccions) ───────────────── */
.vbr-tabs {
  display: flex;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 24px;
  gap: 0;
}
.vbr-tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.vbr-tab:hover { color: #2f5d3a; }
.vbr-tab--actiu {
  color: #2f5d3a;
  border-bottom-color: #2f5d3a;
  font-weight: 600;
}
.vbr-tab--aviat {
  color: #d1d5db;
  cursor: default;
  pointer-events: none;
  font-style: italic;
}

/* ---- Validació cross-tab (2026-08-06) ----------------------------------
   El panell d'errors es pinta fora de les pestanyes, així que un error d'un
   camp que viu en una altra no es veia. La pestanya que en té es marca amb un
   punt vermell, i el nom de la pestanya dins del missatge hi porta. */
.vbr-tab--amb-error { color: #c5372a; }
.vbr-tab--amb-error::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 50%;
  background: #c5372a;
}
.vbr-tab--amb-error.vbr-tab--actiu { border-bottom-color: #c5372a; }

.vbr-err-anar {
  background: #fdeceb;
  border: 1px solid #f0b8b2;
  color: #a82d22;
  border-radius: 4px;
  padding: 1px 7px;
  margin-right: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.vbr-err-anar:hover { background: #f8d7d4; }

/* ---- Foto de perfil del soci ---- */
.vbr-foto-soci {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 130px;
}
.vbr-foto-soci__img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #c5d6c9;
}
.vbr-foto-soci__buit {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}
.vbr-foto-soci__hint {
  font-size: 10px;
  color: #aaa;
  text-align: center;
  line-height: 1.3;
}

/* ---- Contenidor de tasques secundàries ---- */
/* ---- Badge de rol únic (sota la foto) ---- */
.vbr-badge-rol {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-align: center;
  padding: 5px 8px;
  border-radius: 20px;
  background: #eee;
  color: #aaa;
  border: 1px solid #e0e0e0;
  white-space: nowrap;
  transition: all .15s;
}
.vbr-badge-rol--adult.actiu { background: #e8f0fe; color: #2563eb; border-color: #bcd2fb; }
.vbr-badge-rol--menor.actiu { background: #fef3e2; color: #b45309; border-color: #f5d9a8; }

/* ---- Info-strip (Edat · Sexe · Tasca, a la fila de Nom) ---- */
.vbr-info-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: #eee;
  color: #bbb;
  border: 1px solid #e0e0e0;
  transition: all .2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vbr-info-strip.adult { background: #e8f0fe; color: #2563eb; border-color: #bcd2fb; }
.vbr-info-strip.menor { background: #fef3e2; color: #b45309; border-color: #f5d9a8; }

.vbr-tasques-sec {
  background: #f0f4f1;
  border: 1px solid #c5d6c9;
  border-radius: 8px;
  padding: 14px 16px 12px;
  margin-bottom: 16px;
}
.vbr-tasques-sec > .vbr-tasques-sec-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #2f5d3a;
  margin-bottom: 10px;
}

/* ---- Select dins el contenidor de tasques (sense vbr-form-grup) ---- */
.vbr-tasques-sec select {
  padding: 9px 11px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  color: var(--fosc);
  transition: border-color .15s, transform .15s;
  transform-origin: left center;
}
.vbr-tasques-sec select:focus {
  outline: none;
  border-color: var(--drac);
  box-shadow: 2px 0 8px rgba(0,0,0,.10);
}
.vbr-tasques-sec select:has(option[value=""]:checked) { color: #aaa; }

/* ---- Chips de tasques secundàries ---- */
.vbr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 36px;
  padding: 6px 8px;
  background: #fff;
  border: 1px dashed #b8ccbc;
  border-radius: 6px;
}
.vbr-chips:empty::after {
  content: 'Cap tasca secundària afegida';
  font-size: 12px;
  color: #aaa;
  font-style: italic;
  align-self: center;
}
.vbr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e8f0ea;
  color: #2f5d3a;
  border-radius: 20px;
  padding: 4px 10px 4px 14px;
  font-size: 13px;
  font-weight: 500;
}
.vbr-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  color: #2f5d3a;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  opacity: .5;
  flex-shrink: 0;
}
.vbr-chip-x:hover { opacity: 1; }
.vbr-chip-link { color: inherit; text-decoration: none; }
.vbr-chip-link:hover { text-decoration: underline; }

/* ---- Checkbox amb etiqueta (toggle per soci) ---- */
.vbr-check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-top: 4px;
}
.vbr-check-label input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: #2f5d3a;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Utilitats (auditoria 2026-07-25 §2f) ──────────────────────
   Reemplacen tots els style="..." inline de alta.php i editar.php
   (norma "sense estilos inline"). Estat ESTÀTIC/inicial només.
   ⚠️ CURA en tocar el JS d'aquests dos fitxers: un valor EXPLÍCIT
   (el.style.display='block'/'none') sí guanya sempre per especifi-
   citat sobre aquestes classes — però el.style.display='' (cadena
   buida) NO les venç, només neteja un valor inline previ. Si cal
   "mostrar" un element que depèn d'una d'aquestes classes (p. ex.
   vbr-hidden), fes-ho amb classList.toggle/add/remove, mai amb
   style.display=''. (Bug real d'aquest tipus trobat i corregit el
   mateix 2026-07-25 al canvi de pestanyes d'alta.php/editar.php.) */

/* Primitives de flexbox / espaiat, reutilitzades en molts punts */
.vbr-flex-1        { flex: 1; }
.vbr-min-w-0       { min-width: 0; }
.vbr-w-100         { width: 100%; }
.vbr-flex-center   { display: flex; align-items: center; }
.vbr-flex-end      { display: flex; align-items: flex-end; }
.vbr-flex-col-12   { display: flex; flex-direction: column; gap: 12px; }
.vbr-fila-flex     { display: flex; gap: 12px; }
.vbr-fila-cap      { display: flex; align-items: stretch; gap: 20px; margin-bottom: 14px; }
.vbr-justify-start   { justify-content: flex-start; }
.vbr-justify-between { justify-content: space-between; }
.vbr-self-end      { align-self: flex-end; }
.vbr-pb-1          { padding-bottom: 1px; }
.vbr-block         { display: block; }
.vbr-hidden        { display: none; }
.vbr-text-req      { color: #c00; }
.vbr-fw-400        { font-weight: 400; }
.vbr-mb-0          { margin-bottom: 0; }
.vbr-mb-10         { margin-bottom: 10px; }
.vbr-mb-12         { margin-bottom: 12px; }
.vbr-mt-4          { margin-top: 4px; }
.vbr-mt-6          { margin-top: 6px; }
.vbr-mt-8          { margin-top: 8px; }

/* Modificadors compostos, reutilitzats o propis d'un bloc concret */
.vbr-check-label--sm  { font-size: 12px; gap: 6px; font-weight: 500; }
.vbr-w-50-flex        { width: 50%; flex: 0 0 50%; }
.vbr-w-35-nowrap      { width: 35%; white-space: nowrap; }
.vbr-etiqueta-suau    { font-size: 11px; color: #aaa; text-transform: none; }
.vbr-hint-petit       { font-size: 12px; color: #888; }
.vbr-caixa-suau {
  background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 16px; margin-top: 8px;
}
.vbr-caixa-suau--buida {
  background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 22px; text-align: center; color: #6b7280;
}
.vbr-caixa-tit  { margin: 0 0 6px; font-weight: 600; }
.vbr-caixa-txt  { margin: 0; font-size: 13px; line-height: 1.5; }
.vbr-num-soci   { font-size: 14px; color: #aaa; font-weight: 400; }
.vbr-badge-rol--w120 { width: 120px; text-align: center; padding-top: 9px; padding-bottom: 9px; }
.vbr-badge--fitxa {
  width: 120px; text-align: center; padding-top: 7px; padding-bottom: 7px;
  box-sizing: border-box; margin-top: auto;
}
.vbr-zona-risc {
  margin-top: 32px; padding-top: 16px; border-top: 1px solid #eee; text-align: right;
}
.vbr-zona-risc-tit {
  margin: 0 0 8px; font-size: 12px; color: #aaa;
  text-transform: uppercase; letter-spacing: .5px;
}
.vbr-zona-risc .vbr-btn--perill { margin-right: -18px; }

/* =============================================================
   IMPORTACIÓ DE MEMBRES  (vbr_admin/socis/importar.php)
   Mogut des del <style> inline del PHP → font única de veritat.
   ============================================================= */

/* ── Indicador de passos ──────────────────────────────────── */
.vbr-import-steps {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 28px;
}
.vbr-import-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #9ca3af;
}
.vbr-import-step span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #e5e7eb; color: #9ca3af; font-size: 12px; font-weight: 700;
}
.vbr-import-step.active       { color: #1a2e1f; }
.vbr-import-step.active span  { background: #2d6a4f; color: #fff; }
.vbr-import-step.done         { color: #16a34a; }
.vbr-import-step.done span    { background: #dcfce7; color: #16a34a; }
.vbr-import-step-sep {
  flex: 1; height: 1px; background: #e5e7eb;
  margin: 0 12px; max-width: 60px;
}

/* ── Taula d'excloses al resultat ──────────────────────────── */
.vbr-import-excloses {
  margin-top: 28px;
  background: #fff9f9;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 18px 20px;
}
.vbr-import-excloses-tit {
  font-size: 13px; font-weight: 700; color: #b91c1c; margin-bottom: 4px;
}

/* ── Contenidor pas 1 ─────────────────────────────────────── */
.vbr-import-wrap {
  max-width: 560px;
}

/* ── Zona de pujada ───────────────────────────────────────── */
.vbr-dropzone {
  border: 2px dashed #d1fae5;
  border-radius: 14px;
  background: #f9fefb;
  padding: 40px 24px 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.vbr-dropzone:hover,
.vbr-dropzone.over { border-color: #6ee7b7; background: #f0fdf4; }
.vbr-dropzone.selected { border-color: #2d6a4f; background: #f0fdf4; }

.vbr-dropzone-icon { width: 48px; height: 48px; margin: 0 auto 14px; display: block; }

.vbr-dropzone-text {
  font-size: 15px; color: #374151; margin: 0 0 6px;
}
.vbr-dropzone-link {
  color: #2d6a4f; font-weight: 600; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.vbr-dropzone-hint {
  font-size: 12px; color: #9ca3af; margin: 0;
}
.vbr-dropzone-nom {
  margin: 12px 0 0; font-size: 13px; font-weight: 600;
  color: #1a2e1f; background: #dcfce7; border-radius: 6px;
  padding: 6px 12px; display: inline-block;
}
.vbr-dropzone-input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.vbr-import-peu-btn { margin-top: 20px; }

/* ── Font alternativa: Google Sheets ─────────────────────── */
.vbr-import-o {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0; color: #9ca3af; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.vbr-import-o::before, .vbr-import-o::after {
  content: ''; flex: 1; height: 1px; background: #e5e7eb;
}
.vbr-import-sheets {
  border: 2px solid #e5e7eb; border-radius: 14px;
  background: #f9fafb; padding: 22px 24px; text-align: center;
}
.vbr-import-sheets-tit { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #374151; }
.vbr-import-sheets-txt { margin: 0 0 16px; font-size: 12px; color: #9ca3af; }

/* ── Botons pas 1 ─────────────────────────────────────────── */
.vbr-import-accions { margin-top: 20px; }
.vbr-btn--lg { padding: 10px 28px; font-size: 15px; }
.vbr-btn--principal:disabled {
  opacity: .45; cursor: not-allowed;
}

/* ── Resum comptadors ─────────────────────────────────────── */
.vbr-ir-ok       { color: #16a34a; font-size: 14px; font-weight: 500; }
.vbr-ir-avis     { color: #b45309; font-size: 14px; font-weight: 500; }
.vbr-ir-error    { color: #dc2626; font-size: 14px; font-weight: 500; }
.vbr-ir-duplicat { color: #7c3aed; font-size: 14px; font-weight: 500; }
.vbr-ir-compartit{ color: #7c3aed; font-size: 14px; font-weight: 500; }
.vbr-ir-total    { color: #9ca3af; font-size: 13px; margin-left: auto; }

/* ── Diagnòstic agrupat ───────────────────────────────────── */
.vbr-import-diagnostic {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 16px 20px; margin-bottom: 20px; font-size: 13px;
}
.vbr-import-diagnostic-tit {
  font-weight: 700; color: #1a2e1f; margin-bottom: 12px; font-size: 14px;
}
.vbr-import-diagnostic-sec {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; margin: 10px 0 6px;
}
.vbr-import-diagnostic-sec.error     { color: #dc2626; }
.vbr-import-diagnostic-sec.avis      { color: #b45309; margin-top: 14px; }
.vbr-import-diagnostic-sec.compartit { color: #7c3aed; margin-top: 14px; }
.vbr-import-diagnostic-sec.cols      { color: #6b7280; margin-top: 16px; }

.vbr-diag-taula {
  width: 100%; border-collapse: collapse;
}
.vbr-diag-taula tr:nth-child(odd) { background: #fef2f2; }
.vbr-diag-taula--avis tr:nth-child(odd) { background: #fffbeb; }
.vbr-diag-taula--compartit tr:nth-child(odd) { background: #f5f3ff; }
.vbr-diag-taula--compartit .vbr-diag-icona { color: #7c3aed; }
.vbr-diag-nota-compartit {
  font-size: 12px; color: #4b5563; margin: 6px 0 10px;
  padding: 8px 12px; background: #f5f3ff; border-left: 3px solid #7c3aed; border-radius: 4px;
}
.vbr-diag-taula td { padding: 5px 10px; font-size: 13px; }
.vbr-diag-icona {
  width: 24px; font-size: 13px; text-align: center;
  color: #dc2626;
}
.vbr-diag-taula--avis .vbr-diag-icona { color: #b45309; }
.vbr-diag-msg { color: #374151; }
.vbr-diag-cnt {
  text-align: right; color: #9ca3af; font-size: 12px;
  white-space: nowrap; width: 80px;
}
.vbr-diag-files {
  font-size: 11px; color: #9ca3af; margin-top: 2px;
}
/* Panel de columnes CSV */
.vbr-diag-cols {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.vbr-diag-col {
  font-size: 11px; padding: 3px 8px; border-radius: 5px;
  border: 1px solid #e5e7eb; background: #f3f4f6; color: #6b7280;
  cursor: default;
}
.vbr-diag-col.mapejat {
  background: #dcfce7; border-color: #86efac; color: #15803d;
}
.vbr-diag-col small { color: #9ca3af; margin-left: 4px; }

/* ── Resum de comptadors ──────────────────────────────────── */
.vbr-import-resum {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 12px 18px; margin-bottom: 20px;
}
.vbr-import-resum .ok     { color: #16a34a; font-size: 14px; }
.vbr-import-resum .avis   { color: #b45309; font-size: 14px; }
.vbr-import-resum .error  { color: #dc2626; font-size: 14px; }
.vbr-import-resum .total  { color: #9ca3af; font-size: 13px; margin-left: auto; }

/* ── Taula de previsualització ────────────────────────────── */
.vbr-taula--import { font-size: 12px; }
.vbr-taula--import th,
.vbr-taula--import td { padding: 5px 8px; }
/* Look verd propi de la taula d'importació (sobreescriu el genèric) */
.vbr-taula--import th.vbr-th-sort:hover { background: #f0fdf4; color: inherit; }
.vbr-taula--import th.vbr-th-sorted     { background: #dcfce7; color: #15803d; }

.vbr-import-fila--ok       { background: #fff; }
.vbr-import-fila--avis     { background: #fef9c3; border-left: 3px solid #fbbf24; }
.vbr-import-fila--error    { background: #fee2e2; border-left: 3px solid #f87171; }
.vbr-import-fila--duplicat { background: #ede9fe; border-left: 3px solid #a78bfa; }
.vbr-badge--duplicat {
  background: #ede9fe; color: #7c3aed; border: 1px solid #c4b5fd;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
}

.vbr-import-detall td {
  font-size: 11px; padding-top: 2px !important; padding-bottom: 8px !important;
  border-top: none !important;
}
.vbr-msg-error { color: #dc2626; margin-right: 14px; }
.vbr-msg-avis  { color: #b45309; margin-right: 14px; }
.vbr-nd        { color: #d1d5db; font-style: normal; }
.vbr-nowrap    { white-space: nowrap; }

/* ── Format esperat (details) ─────────────────────────────── */
.vbr-import-format {
  margin-top: 28px; border-top: 1px solid #e5e7eb; padding-top: 16px;
}
.vbr-import-format summary {
  cursor: pointer; font-size: 13px; color: #6b7280; user-select: none;
}
.vbr-import-format summary:hover { color: #374151; }
.vbr-import-format-cos { margin-top: 14px; font-size: 13px; color: #6b7280; }
.vbr-import-format-cos p { margin-bottom: 10px; }

/* ── Nota responsables (resultat) ─────────────────────────── */
.vbr-import-nota-resp {
  background: #fefce8; border: 1px solid #fde68a; border-radius: 8px;
  padding: 12px 16px; font-size: 13px; color: #92400e;
  margin: 0 auto 24px; max-width: 520px;
}
.vbr-import-nota-ok {
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px;
  padding: 12px 16px; font-size: 13px; color: #166534;
  margin: 0 auto 24px; max-width: 520px;
}

@media (max-width: 700px) {
  .vbr-import-steps { gap: 4px; }
  .vbr-import-step-sep { max-width: 20px; }
  .vbr-taula--import th:nth-child(6),
  .vbr-taula--import td:nth-child(6),
  .vbr-taula--import th:nth-child(8),
  .vbr-taula--import td:nth-child(8) { display: none; }
}

/* =============================================================
   RESPONSABLES QUE NO SÓN MEMBRES — llista + diàleg (2026-08-07)
   Parcial vbr_admin/_partials/responsables_externs.php
   Substitueix els tres <fieldset> sempre pintats: mitja pantalla
   de camps buits per a una cosa que la majoria de menors no fa
   servir. Ara, una llista del que hi ha i un botó.
   ============================================================= */
.vbr-rx-llista { display: flex; flex-direction: column; gap: 8px; }

.vbr-rx-buit {
  color: #8b968d; font-style: italic; font-size: 13px; margin: 4px 0;
}

.vbr-rx-fila {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #f7faf7; border: 1px solid #dfe7df; border-radius: 8px;
  padding: 10px 12px;
}
.vbr-rx-dades  { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.vbr-rx-nom    { font-weight: 600; color: #1f3d27; }
.vbr-rx-cond   { font-size: 12px; color: #4b7a55; font-weight: 600; }
.vbr-rx-menor  { font-size: 12px; color: #6b7280; }
.vbr-rx-accions { display: flex; gap: 6px; flex-shrink: 0; }

.vbr-btn-mini {
  background: #fff; border: 1px solid #cbd5cb; border-radius: 6px;
  padding: 5px 10px; font-size: 12px; font-weight: 600; color: #2f5c3a;
  cursor: pointer; font-family: inherit;
}
.vbr-btn-mini:hover           { background: #eef5ee; }
.vbr-btn-mini--perill         { color: #b91c1c; border-color: #f0c9c9; }
.vbr-btn-mini--perill:hover   { background: #fdf0f0; }

/* ---- Diàleg (element <dialog> natiu; el primer del projecte) ---- */
.vbr-dialog {
  border: none; border-radius: 14px; padding: 22px 24px;
  width: min(560px, calc(100vw - 32px));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  color: #1f3d27;
}
.vbr-dialog::backdrop { background: rgba(20, 32, 22, .45); }

.vbr-dialog-titol {
  margin: 0 0 14px; font-size: 18px; font-weight: 700; color: #1f3d27;
}
.vbr-dialog-error {
  background: #fdf0f0; border: 1px solid #f0c9c9; border-left: 4px solid #dc2626;
  border-radius: 8px; padding: 9px 12px; margin: 0 0 14px;
  color: #b91c1c; font-size: 13px; font-weight: 500;
}
.vbr-dialog-peu {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px;
}

/* Diàleg de correcció del preview d'importació (2026-08-10): capçalera amb
   el títol a l'esquerra i les anomalies detectades a la dreta, perquè es
   vegin ABANS d'editar i just després de corregir, sense sortir del diàleg. */
.vbr-corregir-cap {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin: 0 0 14px; flex-wrap: wrap;
}
.vbr-corregir-cap .vbr-dialog-titol { margin: 0; }
.vbr-corregir-motius {
  display: flex; flex-direction: column; gap: 4px;
  max-width: 320px; text-align: right;
}
.vbr-corregir-motius:empty { display: none; }
/* Una línia per grup (Errors / Avisos), missatges separats per comes —
   abans cada anomalia era una píndola pròpia i la llista s'allargava molt
   amb files que tenien mitja dotzena d'avisos. */
.vbr-corregir-motiu-linia {
  font-size: 12px; font-weight: 500; border-radius: 6px; padding: 5px 9px; margin: 0;
  line-height: 1.4;
}
.vbr-corregir-motiu-linia strong { font-weight: 700; }
.vbr-corregir-motiu-linia--bloq { background: #fdf0f0; color: #b91c1c; }
.vbr-corregir-motiu-linia--avis { background: #fbf3df; color: #8a6d1f; }

/* El <fieldset> natiu porta vora i padding propis que trenquen la graella
   de .vbr-form-fila — es neutralitzen aquí, no amb estil inline. */
.vbr-corregir-camps { border: none; margin: 0; padding: 0; min-width: 0; }
.vbr-corregir-camps:disabled { opacity: .55; }

@media (max-width: 560px) {
  .vbr-corregir-cap { flex-direction: column; }
  .vbr-corregir-motius { max-width: 100%; text-align: left; }
}

/* Pista sota el camp de document: tres estats amb NOM, no un vermell/verd.
   «No es pot comprovar» (passaport) no és el mateix que «està malament», i
   pintar-los igual seria la norma N8 trencada al CSS. */
.vbr-dialog-pista           { font-size: 12px; margin: 5px 0 0; font-weight: 500; }
.vbr-dialog-pista.es-ok     { color: #2f5d3a; }
.vbr-dialog-pista.es-avis   { color: #8a6d1f; }
.vbr-dialog-pista.es-error  { color: #c5372a; }

/* Mòbil: els botons del peu passen a ocupar l'ample i el diàleg s'enganxa
   a baix, que és on hi arriba el polze. */
@media (max-width: 560px) {
  .vbr-dialog { width: 100vw; max-width: 100vw; border-radius: 14px 14px 0 0;
                margin: auto auto 0; padding: 18px 16px; }
  .vbr-dialog-peu { flex-direction: column-reverse; }
  .vbr-dialog-peu .vbr-btn { width: 100%; }
  .vbr-rx-fila    { align-items: flex-start; }
  .vbr-rx-accions { width: 100%; justify-content: flex-end; }
}

/* =============================================================
   LLISTA DE MEMBRES — strip perfil + tooltip global
   (vbr_admin/socis/index.php). Mogut des del <style> inline.
   ============================================================= */
.vbr-taula .col-accions { white-space: nowrap; }

/* ---- Strip perfil a la taula ---- */
.vbr-strip-taula {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
  background: #eee; color: #aaa; border: 1px solid #e0e0e0;
}
.vbr-strip-taula.adult { background: #e8f0fe; color: #2563eb; border-color: #bcd2fb; }
.vbr-strip-taula.menor { background: #fef3e2; color: #b45309; border-color: #f5d9a8; }

/* ---- Indicador d'incidències de dades (columna Avisos) ---- */
.vbr-col-inci { text-align: center; }
.vbr-inci {
  position: relative;
  display: inline-block; width: 11px; height: 11px; border-radius: 50%; cursor: help;
  animation: vbr-inci-puls 2.2s ease-in-out infinite;
}
.vbr-inci--critic  { background: #dc2626; }  /* 🔴 cal actuar */
.vbr-inci--pendent { background: #f59e0b; }  /* 🟠 buit d'onboarding */
.vbr-inci--avis    { background: #cbd5e1; }  /* · dada menor per completar */

/* Halo "ping" — només als nivells que realment criden a l'acció (no al gris,
   per no convertir tota la llista en soroll constant). */
.vbr-inci--critic::after,
.vbr-inci--pendent::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: vbr-inci-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.vbr-inci--critic::after  { background: #dc2626; }
.vbr-inci--pendent::after { background: #f59e0b; }

@keyframes vbr-inci-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
@keyframes vbr-inci-ping {
  0%          { transform: scale(1);   opacity: .55; }
  75%, 100%   { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vbr-inci,
  .vbr-inci--critic::after,
  .vbr-inci--pendent::after { animation: none; }
}

/* ---- Input de filtre en viu de la llista (ocupa l'ample disponible) ---- */
.vbr-cerca--full { flex: 1; min-width: 200px; }

/* ---- Utilitat d'espaiat ---- */
.vbr-mb-24 { margin-bottom: 24px; }

/* ---- Tooltip global (position:fixed, posicionat per JS) ---- */
.vbr-tt {
  display: none;
  position: fixed;
  z-index: 9999;
  background: #fff;
  border: 1px solid #e2e8e4;
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 230px;
  max-width: 300px;
  box-shadow: 0 8px 24px rgba(0,0,0,.13);
  pointer-events: none;
  text-align: left;
}
.vbr-tt-nom {
  font-weight: 700; font-size: 13px; color: #1a2e1f; margin-bottom: 5px;
}
.vbr-tt-strip {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 9px; border-radius: 20px; display: inline-block; margin-bottom: 10px;
  background: #eee; color: #aaa; border: 1px solid #e0e0e0;
}
.vbr-tt-strip.adult { background: #e8f0fe; color: #2563eb; border-color: #bcd2fb; }
.vbr-tt-strip.menor { background: #fef3e2; color: #b45309; border-color: #f5d9a8; }
.vbr-tt-dades { display: flex; flex-direction: column; gap: 3px; }
.vbr-tt-dades div { font-size: 12px; color: #4b5563; display: flex; gap: 8px; }
.vbr-tt-dades div span { color: #9ca3af; font-size: 11px; min-width: 56px; }

/* ---- Seccions de relacions (responsables / menors tutelats) ---- */
.vbr-tt-sep { height: 1px; background: #eef0ec; margin: 8px 0; }
.vbr-tt-rel-tit {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: #9ca3af; margin-bottom: 5px;
}
.vbr-tt-rel {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: baseline; gap: 0 6px;
  font-size: 12px; color: #374151; margin-bottom: 3px;
}
.vbr-tt-rel-cond {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: #6b7280;
}
.vbr-tt-rel-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbr-tt-rel-tel { color: #6b7280; font-size: 11px; white-space: nowrap; }

/* ---- Icona d'avís a la fila + secció d'avisos al tooltip ---- */
.vbr-avis-ico {
  color: #d97706; font-size: 14px; cursor: help; flex-shrink: 0;
  line-height: 1;
}
.vbr-tt-avisos {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid #f0e6d2;
}
.vbr-tt-avisos-tit {
  font-size: 11px; font-weight: 700; color: #b45309;
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px;
}
.vbr-tt-avis {
  font-size: 12px; color: #92400e; padding: 1px 0 1px 4px;
}
.vbr-tt-avis::before { content: '• '; color: #d97706; }

/* ── Importació: elements semàntics (abans style= inline) ──── */
.vbr-import-adult-err     { color: #b91c1c; font-weight: 600; }
.vbr-import-completat     { text-align: center; padding: 36px 24px; }
.vbr-import-completat-tit { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.vbr-import-completat-sub { color: #4b5563; font-size: 14px; margin-bottom: 24px; }
.vbr-import-completat-err { color: #dc2626; }
.vbr-import-motiu         { color: #b91c1c; }
.vbr-import-llegenda { font-size: 11px; color: #6b7280; margin: 0 0 6px; }
.vbr-import-no td   { background: #fef2f2; color: #6b7280; }
.vbr-import-sel-tots { margin: 8px 0 6px; font-size: 13px; color: #374151; }

/* ── Filtre de checkbox a les capçaleres de la taula ── */
.vbr-th-f { cursor: pointer; user-select: none; white-space: nowrap; position: relative; }
.vbr-th-f:hover { background: #f0fdf4; }
.vbr-th-f-ico { font-size: 11px; color: #9ca3af; margin-left: 3px; transition: color .15s; }
.vbr-th-f.actiu .vbr-th-f-ico { color: #2d6a4f; font-weight: 700; }
.vbr-flt-drop {
  position: absolute; top: calc(100% + 2px); left: 0; z-index: 200;
  background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 6px 0; min-width: 170px;
  min-height: 180px; max-height: 320px; overflow-y: auto;
}
.vbr-flt-drop label {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px; font-size: 13px; cursor: pointer; color: #374151;
}
.vbr-flt-drop label:hover { background: #f0fdf4; }
.vbr-flt-reset {
  padding: 5px 14px 7px; font-size: 12px; font-weight: 600; color: #dc2626;
  cursor: pointer; border-bottom: 1px solid #e5e7eb; margin-bottom: 4px;
  text-transform: none; letter-spacing: 0;
}
.vbr-flt-reset:hover { background: #fef2f2; }
.vbr-flt-reset--ocult { display: none; }

/* ── Cel·la de membre a la llista: avatar + nom (abans style= inline) ── */
.vbr-cel-membre { display: flex; align-items: center; gap: 10px; }
.vbr-avatar-img {
  border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid #d1d5db;
}
.vbr-avatar-ini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: #e5e7eb; color: #9ca3af; font-size: 12px; font-weight: 700;
}
.vbr-inline { display: inline; }

/* ── Pantalla «compte desactivat» (vbr_site/auth/compte-desactivat.php) ── */
.vbr-cd-icona { text-align: center; margin-bottom: 14px; }
.vbr-cd-candau {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: #fbeae6; border: 1.5px solid #f3cfc6;
}
.vbr-cd-titol {
  text-align: center; font-family: 'DM Serif Display', Georgia, serif;
  font-size: 21px; color: #b23b26; margin: 0 0 16px; letter-spacing: .3px;
}
.vbr-cd-sessio { margin-top: 4px; }
.vbr-cd-email  { color: #2c3a30; display: block; margin-top: 2px; }
.vbr-cd-logout-ico { color: #6b7280; flex-shrink: 0; }

/* ── Portal soci: modificadors de targeta (abans style= inline) ── */
.vbr-targeta--ample { grid-column: 1 / -1; }
.vbr-t-cos--2col    { columns: 2; column-gap: 32px; }

/* ── Asterisc de camp obligatori als formularis ── */
.vbr-req { color: #c00; }

/* ── Sistema > Configuració: fila d'edició inline (input + botó) ── */
.vbr-config-fila { display: flex; gap: 8px; align-items: center; }
.vbr-config-input {
  flex: 1; min-width: 0;
  padding: 9px 11px;
  border: 1px solid #cdd8ce; border-radius: 6px;
  font: inherit; font-size: 13.5px; color: #2c3a30;
  background: #fff; transition: border-color .15s;
}
.vbr-config-input:focus { outline: none; border-color: var(--drac); }

/* ── Sistema > Visualització de logs ── */
.vbr-log-filtre-accio { max-width: 260px; flex: none; }
.vbr-log-detall-btn { cursor: pointer; color: var(--drac); font-size: 12.5px; }
.vbr-log-dades {
  margin-top: 6px; padding: 8px 10px; max-width: 420px; max-height: 240px;
  overflow: auto; background: #f4f7f4; border: 1px solid #e0e8e0; border-radius: 6px;
  font-size: 11.5px; white-space: pre-wrap; word-break: break-word;
}
.vbr-log-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--drac); font-weight: 600; text-decoration: none;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(45,90,61,0.08); border: 1px solid rgba(45,90,61,0.18);
  transition: background .15s, border-color .15s;
}
.vbr-log-link:hover { background: rgba(45,90,61,0.16); border-color: rgba(45,90,61,0.3); }
.vbr-log-link-ico { font-size: 10.5px; opacity: .75; }

/* ── Log: enllaç "Qui" amb avatar/inicials (reutilitza .vbr-avatar-img/-ini) ── */
.vbr-log-membre-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px 3px 3px; border-radius: 999px;
  color: #2c3a30; font-weight: 600; text-decoration: none;
  background: #fff; border: 1px solid #e0e8e0;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.vbr-log-membre-link:hover {
  border-color: var(--drac); box-shadow: 0 3px 10px rgba(0,0,0,.10); transform: translateY(-1px);
}
.vbr-log-membre-link .vbr-avatar-img,
.vbr-log-membre-link .vbr-avatar-ini { width: 22px; height: 22px; font-size: 10px; }
.vbr-log-membre-link-ico { font-size: 10px; color: var(--drac); opacity: .65; }

/* ── Sistema > Rols: arbre de permisos i assignació ── */
.vbr-permisos-bloc { margin-bottom: 16px; }
.vbr-permis-col { text-align: center; width: 90px; }
.vbr-permis-col input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; }
.vbr-permis-si { color: #155724; font-weight: 700; }
.vbr-permis-no { color: #c9d2ca; }
.vbr-form-inline { display: inline; margin: 0; }
.vbr-assignar-fila { margin-top: 12px; max-width: 560px; }

/* ── Camps de només lectura dins d'un formulari (parada 2026-08-06) ──────────
   Per a dades que el sistema mostra però ningú edita: el tipus de document
   (que es dedueix del número) i el nivell de pirotècnia (que arriba del
   certificat de la Generalitat). Es pinten com un camp perquè s'entengui que
   formen part de la fitxa, però sense caixa d'entrada: si sembla editable i
   no ho és, la pantalla està mentint.                                        */
.vbr-form-estatic {
  margin: 0; padding: 9px 12px;
  border: 1px dashed #d7ded8; border-radius: 8px;
  background: #f7f9f7; color: #2c3a30; font-weight: 600;
  min-height: 40px; display: flex; align-items: center;
}
/* Sense valor encara: gris i en cursiva. NO taronja — el taronja de
   .vbr-cal-omplir vol dir «omple això», i aquí ningú pot fer-ho. */
.vbr-form-estatic--buit { color: #8b968d; font-weight: 500; font-style: italic; }


/* ==========================================================================
   Assistent de vinculació del Llibre de Socis (Configuració > Gestió Google)
   Reutilitza .vbr-dialog; només afegeix el que és propi de l'assistent.
   ========================================================================== */

/* Més ample que un diàleg normal: aquí hi cap un informe amb llistes, no
   quatre camps.

   Centrat EXPLÍCITAMENT a la pantalla. El <dialog> modal ja se centra sol amb
   el `margin:auto` del navegador, però només mentre càpiga: quan creix —i
   aquest creix, perquè l'informe canvia d'alçada segons el que trobi— el
   navegador el deixa enganxat a dalt. Fixant-lo al 50% amb transform, la
   posició deixa de dependre del contingut i el diàleg no salta entre pantalla
   i pantalla de l'assistent. */
.vbr-dialog--ample {
  width: min(680px, calc(100vw - 32px));
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.vbr-vlb-intro   { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.vbr-vlb-exemple {
  background: #f4f7f4; border-radius: 8px; padding: 9px 12px; margin: 0 0 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  color: #4a5c4e; overflow-x: auto; white-space: nowrap;
}
.vbr-vlb-exemple strong { color: #1f3d27; background: #ffe9b8; padding: 1px 3px; border-radius: 3px; }

.vbr-vlb-passos { margin: 0 0 4px; padding-left: 20px; }
.vbr-vlb-passos li { margin-bottom: 14px; font-size: 14px; line-height: 1.55; }

/* L'adreça del compte de servei i el seu botó de copiar. Es trenca en dues
   línies al mòbil: l'adreça és llarga i no es pot partir a mitges. */
.vbr-vlb-copia {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px;
}
.vbr-vlb-copia code {
  background: #f4f7f4; border: 1px solid #dbe4dc; border-radius: 6px;
  padding: 6px 9px; font-size: 12px; color: #1f3d27;
  overflow-wrap: anywhere; flex: 1 1 240px;
}
.vbr-vlb-nota { display: block; font-size: 12.5px; color: #6b7a6e; }

.vbr-vlb-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #2f4a35; }
.vbr-vlb-input { width: 100%; }

/* ── Informe ──────────────────────────────────────────────────────────────
   Quatre colors amb SIGNIFICAT, no decoració: vermell bloqueja, ambre avisa,
   verd confirma, gris explica què s'ha mirat. Un informe tot d'un color
   obliga a llegir-lo sencer per saber si es pot continuar. */
.vbr-vlb-informe { max-height: 46vh; overflow-y: auto; margin-bottom: 4px; }

.vbr-vlb-bloc {
  border-radius: 8px; padding: 10px 13px; margin: 0 0 12px; font-size: 13px;
  border: 1px solid transparent; border-left-width: 4px;
}
.vbr-vlb-bloc-titol { margin: 0 0 6px; font-weight: 700; font-size: 13px; }
.vbr-vlb-bloc ul    { margin: 0; padding-left: 18px; }
.vbr-vlb-bloc li    { margin-bottom: 5px; line-height: 1.5; }
.vbr-vlb-bloc li:last-child { margin-bottom: 0; }

.vbr-vlb-bloc.es-ok    { background: #eef7f0; border-color: #c7e3cf; border-left-color: #2f7d43; color: #1f5130; }
.vbr-vlb-bloc.es-error { background: #fdf0f0; border-color: #f0c9c9; border-left-color: #dc2626; color: #a3211b; }
.vbr-vlb-bloc.es-avis  { background: #fdf7e8; border-color: #efe0b8; border-left-color: #d99a1c; color: #7a5c14; }
.vbr-vlb-bloc.es-info  { background: #f4f7f4; border-color: #dbe4dc; border-left-color: #9aa89d; color: #4a5c4e; }

@media (max-width: 560px) {
  /* Al mòbil es desfà el centrat i s'enganxa a baix, com la resta de diàlegs
     del projecte: és on hi arriba el polze. Cal desfer el transform vertical
     explícitament — si no, el `top:50%` del centrat seguiria manant i el
     diàleg quedaria mig fora de la pantalla. */
  .vbr-dialog--ample {
    width: 100vw; max-width: 100vw;
    top: auto; bottom: 0;
    transform: translateX(-50%);
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
  }
  .vbr-vlb-informe { max-height: 40vh; }
}

/* Bloc del pas «Preparar»: l'ÚNIC de l'assistent que escriu al full de la
   junta. Es distingeix visualment de l'informe a posta — un botó que modifica
   un document extern no ha de semblar-se a una línia de resultat. */
.vbr-vlb-preparar {
  border: 1px dashed #cbd8cd; border-radius: 8px; padding: 12px 14px; margin: 4px 0 0;
  background: #fbfcfb;
}
.vbr-vlb-preparar-txt { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: #4a5c4e; }