/* =====================================================================
   HolaNinos · tablero.css : LES DEUX TABLEAUX DE BORD (24/09/2026)
   ---------------------------------------------------------------------
   Le menu de gauche (tablero.js), les sections des deux espaces
   (panel.js, panelpro.js), la messagerie et les documents
   (mensajeria.js). Charge APRES panel.css et avant cartes.css.

   AUCUNE COULEUR NOUVELLE. Tout sort des jetons du socle
   (hola-system.css) et de la couche de marque (marque-ninos.css) : le
   violet --br-*, les neutres, les trois etats --ok / --alerte / --refus.
   Le seul blanc sur violet est celui du bouton principal du site
   (#7C4DE0, 5,3:1) : la pastille des non-lus et la bulle de ses propres
   messages le reprennent.

   DEUX REGLES DE PORTEE (memoire css-deux-pieges-de-portee) :
   aucun bloc de mise en page n'ecrit `padding` en raccourci, et aucun
   empilement ne se declare dans un style="" (le JS n'en pose aucun).

   LA COQUILLE N'EXISTE QUE SOUS body[data-dash]. Sans cet attribut
   (visiteur anonyme, autre vue), rien de ce fichier ne touche la page.
   ===================================================================== */

/* =====================================================================
   1. HORS DU TABLEAU DE BORD, LA COQUILLE N'EXISTE PAS
   ===================================================================== */
.tb-nav,.tb-barre{display:none}
.tb-voile{display:none}

/* Dans le tableau de bord, ce qui appartient a l'agenda s'efface : la
   bande de preuve, le rail des rubriques, la premiere question, et
   l'en-tete de page d'avant (chaque section pose le sien). */
body[data-dash] #modoBand,
body[data-dash] #proof,
body[data-dash] #seccionesRail,
body[data-dash] #socioBand,
body[data-dash] #v-panel > .pagehead,
body[data-dash] #v-panelpro > .pagehead{display:none}

/* =====================================================================
   2. LE MENU
   ===================================================================== */
body[data-dash] .tb-nav{
  display:flex;flex-direction:column;gap:var(--sp-12);
  background:var(--surface);border:1px solid var(--trait);
  border-radius:var(--r-card);
  padding-block:var(--sp-16);padding-inline:var(--sp-12);
  box-sizing:border-box;
}

.tb-tete-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);padding-inline:var(--sp-4)}
.tb-logo{display:flex;align-items:center;gap:var(--sp-8);text-decoration:none;color:var(--encre)}
.tb-logo img{width:30px;height:30px;border-radius:8px}
.tb-logo .brand{font-size:17px;font-weight:var(--w-semi);letter-spacing:-.03em}
.tb-logo .brand .a{color:var(--br-500)}
.tb-logo .brand .b{color:var(--encre)}

.tb-fermer{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-pill);
  border:1px solid var(--trait);background:var(--surface);color:var(--encre-2);cursor:pointer;
}

.tb-espace{
  margin:0;padding-inline:var(--sp-4);
  font-size:var(--t-label);font-weight:var(--w-semi);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--doux);
}

.tb-puces{display:flex;flex-wrap:wrap;gap:6px;padding-inline:var(--sp-4)}
.tb-puce{
  display:inline-flex;align-items:center;
  padding-block:4px;padding-inline:10px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:var(--w-semi);line-height:1.3;
  background:var(--br-wash);color:var(--br-ink);border:1px solid var(--br-100);
  text-decoration:none;
}
.tb-puce-neutre{background:var(--surface-2);color:var(--encre-2);border-color:var(--trait)}
.tb-puce-ok{background:var(--ok-fond);color:var(--ok);border-color:var(--ok-trait)}
.tb-puce-ko{background:var(--refus-fond);color:var(--refus);border-color:var(--refus-trait)}
.tb-puce-admin{background:var(--surface);color:var(--encre-2);border-color:var(--trait-fort)}
.tb-puce-admin:hover{border-color:var(--br-400);color:var(--br-ink)}

.tb-liens{display:flex;flex-direction:column;gap:2px}
.tb-l{
  display:flex;align-items:center;gap:var(--sp-12);
  min-height:44px;box-sizing:border-box;
  padding-block:9px;padding-inline:var(--sp-12);border-radius:var(--r-sm);
  color:var(--encre-2);text-decoration:none;
  font-size:14.5px;font-weight:var(--w-semi);line-height:1.25;
  transition:background var(--d-court) var(--ease-doux),color var(--d-court) var(--ease-doux);
}
.tb-l .ico{flex:none;color:var(--doux);transition:color var(--d-court) var(--ease-doux)}
.tb-l:hover{background:var(--br-wash);color:var(--br-ink)}
.tb-l:hover .ico{color:var(--br-500)}
.tb-l:focus-visible{outline:2px solid var(--br-500);outline-offset:1px}
.tb-l[aria-current="page"]{background:var(--br-100);color:var(--br-ink);box-shadow:inset 3px 0 0 var(--br-500)}
.tb-l[aria-current="page"] .ico{color:var(--br-500)}

.tb-pastille{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:21px;height:21px;padding-inline:6px;box-sizing:border-box;
  border-radius:var(--r-pill);background:var(--br-500);color:var(--br-sur-fond);
  font-size:12px;font-weight:var(--w-bold);line-height:1;
}

.tb-autre{
  display:flex;align-items:center;gap:var(--sp-8);
  padding-block:10px;padding-inline:var(--sp-12);border-radius:var(--r-sm);
  border:1px dashed var(--br-200);color:var(--br-ink);text-decoration:none;
  font-size:13.5px;font-weight:var(--w-semi);
}
.tb-autre:hover{background:var(--br-wash);border-style:solid}

.tb-moi{
  margin-top:auto;display:flex;align-items:center;gap:10px;
  padding-top:var(--sp-12);border-top:1px solid var(--trait);
}
.tb-avatar{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--br-500);color:var(--br-sur-fond);font-weight:var(--w-bold);font-size:15px;
}
.tb-moi-t{display:flex;flex-direction:column;min-width:0;flex:1}
.tb-moi-t b{font-size:13.5px;color:var(--encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-moi-t span{font-size:12.5px;color:var(--doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-sortir{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-pill);
  border:1px solid var(--trait);background:var(--surface);color:var(--encre-2);cursor:pointer;
}
.tb-sortir:hover{border-color:var(--refus-trait);color:var(--refus);background:var(--refus-fond)}
.tb-sortir:focus-visible,.tb-fermer:focus-visible{outline:2px solid var(--br-500);outline-offset:2px}

/* =====================================================================
   3. ORDINATEUR : LE MENU A GAUCHE, LE CONTENU A DROITE
   Le menu occupe la premiere colonne sur toute la hauteur et reste
   visible au defilement ; tout le reste de <main> passe a droite.
   ===================================================================== */
@media (min-width:900px){
  body[data-dash] main.wrap{
    display:grid;grid-template-columns:248px minmax(0,1fr);
    column-gap:var(--sp-32);align-items:start;
  }
  body[data-dash] main.wrap > *{grid-column:2;min-width:0}
  body[data-dash] main.wrap > .tb-nav{
    grid-column:1;grid-row:1 / span 40;
    position:sticky;top:88px;
    max-height:calc(100vh - 104px);overflow:auto;
    margin-top:var(--sp-24);
  }
  .tb-fermer{display:none}
}

/* =====================================================================
   4. TELEPHONE : UN TIROIR DERRIERE LE BOUTON « MENU »
   ===================================================================== */
@media (max-width:899px){
  body[data-dash] .tb-nav{
    position:fixed;top:0;bottom:0;left:0;z-index:230;
    width:min(86vw,320px);border-radius:0 var(--r-card) var(--r-card) 0;
    border-left:0;overflow:auto;box-shadow:var(--el-3);
    transform:translateX(-105%);visibility:hidden;
    transition:transform var(--d-normal) var(--ease),visibility 0s linear var(--d-normal);
  }
  body.tb-ouvert .tb-nav{
    transform:none;visibility:visible;
    transition:transform var(--d-normal) var(--ease),visibility 0s;
  }
  body[data-dash] .tb-voile{
    display:block;position:fixed;inset:0;z-index:220;
    background:rgba(20,23,31,.42);opacity:0;pointer-events:none;
    transition:opacity var(--d-normal) var(--ease-doux);
  }
  body.tb-ouvert .tb-voile{opacity:1;pointer-events:auto}
  body.tb-ouvert{overflow:hidden}

  body[data-dash] .tb-barre{
    display:flex;align-items:center;gap:var(--sp-12);
    position:sticky;top:var(--tb-haut,64px);z-index:30;
    /* <main> n'a pas de marge sur telephone : chaque vue pose ses 18 px.
       La barre les reprend pour s'aligner sur le titre de la section. */
    padding-block:10px;padding-inline:18px;
    background:var(--fond);border-bottom:1px solid var(--trait);
  }
}
.tb-menu{
  flex:none;display:inline-flex;align-items:center;gap:var(--sp-8);
  min-height:44px;box-sizing:border-box;
  padding-block:9px;padding-inline:14px;border-radius:var(--r-pill);
  border:1px solid var(--br-200);background:var(--br-wash);color:var(--br-ink);
  font-family:inherit;font-size:14px;font-weight:var(--w-semi);cursor:pointer;
}
.tb-menu .tb-pastille{margin-left:2px}
.tb-menu:focus-visible{outline:2px solid var(--br-500);outline-offset:2px}
.tb-barre-t{font-size:15px;font-weight:var(--w-semi);color:var(--encre);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (prefers-reduced-motion:reduce){
  body[data-dash] .tb-nav,body[data-dash] .tb-voile,.tb-l,.tb-l .ico{transition:none}
}

/* =====================================================================
   5. LES SECTIONS : EN-TETE, CHIFFRES, « A FAIRE »
   ===================================================================== */
.tb-tete{margin-top:var(--sp-24)}
.tb-tete h1{font-size:var(--t-h2);line-height:var(--lh-title);letter-spacing:var(--ls-title);margin:0 0 6px;color:var(--encre)}
.tb-tete p{margin:0;color:var(--doux);max-width:62ch}

.tb-kpis{
  display:grid;gap:var(--sp-12);margin-top:var(--sp-24);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.tb-kpi{
  display:flex;flex-direction:column;gap:2px;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-lg);
  padding-block:var(--sp-16);padding-inline:var(--sp-16);
}
.tb-kpi-i{color:var(--br-500);margin-bottom:4px;display:inline-flex}
.tb-kpi b{font-family:var(--f-display);font-size:28px;line-height:1.05;font-weight:var(--w-semi);color:var(--encre)}
.tb-kpi-l{font-size:13px;line-height:1.35;color:var(--encre-2)}
.tb-kpi-n{font-size:12px;color:var(--doux)}
.tb-kpi-verrou{background:var(--surface-2);justify-content:center}
.tb-kpi-note{grid-column:1 / -1;margin-top:0}

.tb-todo{list-style:none;margin:0;padding:0}
.tb-todo li{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-12);
  padding-block:var(--sp-12);border-top:1px solid var(--trait);
}
.tb-todo li:first-child{border-top:0;padding-top:0}
.tb-todo-i{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:var(--br-wash);color:var(--br-500);
}
.tb-todo-t{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:0}
.tb-todo-t b{font-size:14.5px;color:var(--encre)}
.tb-todo-t span{font-size:13px;color:var(--doux);line-height:1.4}
.tb-todo-b{flex:none;margin-left:auto}
.tb-fait{display:flex;align-items:center;gap:var(--sp-8);margin:0;color:var(--ok);font-weight:var(--w-semi)}

.tb-cartes{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

/* Les listes : demandes envoyees, activites proposees */
.tb-sol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tb-sol li{border:1px solid var(--trait);border-radius:var(--r-md);background:var(--surface);
  padding-block:12px;padding-inline:14px;overflow-wrap:anywhere}
.tb-sol-h{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-8)}
.tb-sol-h b{font-size:15px;color:var(--encre)}
.tb-sol-m{margin:4px 0 0;font-size:13.5px;color:var(--encre-2)}
.tb-sol-x{margin:6px 0 0;font-size:14px;color:var(--encre);white-space:pre-wrap}
.tb-etat{
  display:inline-flex;padding-block:3px;padding-inline:10px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--encre-2);border:1px solid var(--trait);
  font-size:12.5px;font-weight:var(--w-semi);
}
.tb-etat.ok{background:var(--ok-fond);color:var(--ok);border-color:var(--ok-trait)}

/* « Mon compte » */
.tb-dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--sp-16);margin:0 0 var(--sp-16)}
.tb-dl dt{color:var(--doux);font-size:13.5px}
.tb-dl dd{margin:0;color:var(--encre);font-weight:var(--w-semi);overflow-wrap:anywhere}
.tb-bascule{align-items:flex-start}
.ocard .btn-danger{margin-top:var(--sp-12)}
.ocard-t .ico{color:var(--br-500)}

/* Factures */
.tb-factures{list-style:none;margin:0;padding:0}
.tb-factures li{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-12);
  padding-block:10px;border-top:1px solid var(--trait)}
.tb-factures li:first-child{border-top:0}
.tb-fac-t{display:flex;flex-direction:column;flex:1 1 180px;min-width:0}
.tb-fac-t b{font-size:14px;color:var(--encre);overflow-wrap:anywhere}
.tb-fac-t span{font-size:13px;color:var(--doux)}
.tb-fac-m{font-size:15px;color:var(--encre)}

/* L'apercu de la fiche publique : on la montre, on ne s'en sert pas. */
.tb-apercu{max-width:380px;pointer-events:none}

/* =====================================================================
   6. LA MESSAGERIE
   ===================================================================== */
.mg-carte{padding-block:var(--sp-16)}
.mg-liste{
  display:flex;flex-direction:column;gap:var(--sp-8);
  max-height:min(56vh,560px);overflow:auto;
  background:var(--fond-2);border:1px solid var(--trait);border-radius:var(--r-lg);
  padding-block:var(--sp-12);padding-inline:var(--sp-12);
}
.mg-vide{display:flex;flex-direction:column;align-items:center;gap:var(--sp-8);text-align:center;
  color:var(--doux);padding-block:var(--sp-24);padding-inline:var(--sp-16)}
.mg-vide p{margin:0;max-width:44ch}
.mg-jour{align-self:center;margin:6px 0 2px;font-size:12px;color:var(--doux);
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-pill);
  padding-block:2px;padding-inline:10px}
.mg-b{
  align-self:flex-start;max-width:min(82%,560px);
  background:var(--surface);border:1px solid var(--trait);
  border-radius:16px 16px 16px 6px;padding-block:9px;padding-inline:13px;
}
.mg-b.mio{align-self:flex-end;background:var(--br-500);border-color:transparent;color:var(--br-sur-fond);
  border-radius:16px 16px 6px 16px}
.mg-t{margin:0;line-height:1.5;overflow-wrap:anywhere}
.mg-m{margin:4px 0 0;font-size:12px;color:var(--doux)}
.mg-b.mio .mg-m{color:rgba(255,255,255,.86)}

.mg-form{margin-top:var(--sp-12)}
.mg-lab{display:block;font-size:13px;font-weight:var(--w-semi);color:var(--encre-2);margin-bottom:6px}
.mg-form textarea{
  display:block;width:100%;box-sizing:border-box;min-height:88px;resize:vertical;
  border:1px solid var(--trait-fort);border-radius:var(--r-md);background:var(--surface);color:var(--encre);
  padding-block:10px;padding-inline:12px;font-family:inherit;font-size:15px;line-height:1.45;
}
.mg-form textarea:focus{outline:2px solid var(--br-500);outline-offset:1px;border-color:transparent}
.mg-pied{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);margin-top:var(--sp-8)}
.mg-compte{font-size:12px;color:var(--doux)}
.mg-pied .btn-primary,.dc-b{display:inline-flex;align-items:center;gap:var(--sp-8)}
.mg-note{margin-top:var(--sp-12)}

/* La boite de l'equipe (tableau d'administration) */
.mg-boite{list-style:none;margin:var(--sp-8) 0 0;padding:0;display:grid;gap:var(--sp-8)}
.mg-h{
  width:100%;display:flex;align-items:center;gap:var(--sp-12);text-align:left;cursor:pointer;
  border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--surface);color:var(--encre);
  padding-block:10px;padding-inline:12px;font-family:inherit;
}
.mg-h:hover{border-color:var(--br-200)}
.mg-h.nl{background:var(--br-wash);border-color:var(--br-200)}
.mg-h-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mg-h-t b{font-size:14px;overflow-wrap:anywhere}
.mg-h-e{font-size:12.5px;color:var(--doux)}
.mg-h-x{font-size:13px;color:var(--encre-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-retour{margin-bottom:var(--sp-8)}

/* =====================================================================
   7. LES DOCUMENTS
   ===================================================================== */
.dc-envoi{margin-bottom:var(--sp-12)}
.dc-zone{
  display:flex;align-items:center;gap:var(--sp-12);cursor:pointer;
  border:2px dashed var(--br-200);border-radius:var(--r-lg);background:var(--surface);
  padding-block:var(--sp-16);padding-inline:var(--sp-16);color:var(--br-500);
}
.dc-zone:hover{background:var(--br-wash)}
.dc-zone:focus-within{outline:2px solid var(--br-500);outline-offset:2px}
.dc-zone span{display:flex;flex-direction:column;gap:2px}
.dc-zone b{color:var(--encre);font-size:14.5px}
.dc-zone span span{color:var(--doux);font-size:13px}
.dc-etat{margin-top:var(--sp-8)}
.dc-etat:empty{display:none}
.dc-etat.ok{color:var(--ok)}
.dc-etat.ko{color:var(--refus)}

.dc-liste{list-style:none;margin:0;padding:0}
.dc-l{display:flex;align-items:center;gap:10px;padding-block:10px;border-top:1px solid var(--trait)}
.dc-l:first-child{border-top:0}
.dc-i{flex:none;color:var(--br-500);display:inline-flex}
.dc-t{display:flex;flex-direction:column;min-width:0;flex:1}
.dc-t b{font-size:14px;color:var(--encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-t span{font-size:12.5px;color:var(--doux)}
.dc-b{flex:none;padding-block:8px;padding-inline:12px;text-decoration:none}
.dc-x{padding-inline:10px}
.ad-docs{margin:var(--sp-8) 0 var(--sp-16)}

@media (max-width:520px){
  .dc-b span{display:none}
  .tb-kpi b{font-size:24px}
  .mg-b{max-width:88%}
}

/* Le bouton « Envoyer » garde sa taille : .btn-primary prend toute la
   largeur ailleurs sur le site. */
.mg-pied .btn-primary{width:auto;flex:none;margin:0}
/* Le tableau d'administration colore ses paragraphes (.pcard p) : la
   bulle violette doit garder son texte blanc partout. */
.mg-b .mg-t{color:var(--encre)}
.mg-b.mio .mg-t{color:var(--br-sur-fond)}

/* « Cambiar de plan » et le portail : de l'air entre les cartes des
   forfaits, le bouton, et le bouton suivant. */
#v-panelpro .pp-cambiar{margin-top:var(--sp-16)}
#v-panelpro #ppPortal{margin-top:var(--sp-12)}

/* =====================================================================
   LA GRILLE UNIQUE, LES IMAGES ET L'AGENDA (13/10/2026)
   ===================================================================== */
.pp-lanz{background:#EFE9FB;color:#2B2740;border-radius:10px;padding:6px 10px}
.im-h{margin:14px 0 8px;font-size:.92rem}
.im-fila{display:flex;gap:12px;flex-wrap:wrap}
.im-fig{margin:0;width:150px}
.im-fig img{width:150px;height:112px;object-fit:contain;display:block;border-radius:12px;
  border:1px solid var(--trait,#E4DFF3);background:#fff}
.im-fig figcaption{margin-top:6px}
.im-fig .dc-b{width:100%;justify-content:center}

.ag-dia{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 0;
  border-bottom:1px solid var(--trait,#E4DFF3)}
.ag-dn{width:88px;flex:none;text-transform:capitalize}
.ag-plages{display:flex;flex-wrap:wrap;gap:6px 10px;flex:1 1 220px}
.ag-plage{display:inline-flex;align-items:center;gap:4px}
.ag-plage input[type=time]{font:inherit;padding:6px 8px;border-radius:10px;border:1px solid var(--trait,#E4DFF3)}
.ag-x{border:0;background:transparent;font-size:1.3rem;line-height:1;cursor:pointer;color:#8A1F4A;
  min-width:32px;min-height:32px;border-radius:8px}
.ag-x:focus-visible{outline:2px solid #5B32B8}
.ag-mas{font-size:.82rem;padding:6px 10px}
.ag-cierres{list-style:none;margin:0 0 10px;padding:0}
.ag-cierres li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0}
.ag-citas{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ag-cita{border:1px solid var(--trait,#E4DFF3);border-radius:12px;padding:10px 12px;background:#fff}
.ag-cita.ag-pend{border-color:#C9A227;background:#FFFBEA}
.ag-cita-h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.ag-cita-m{margin:4px 0 0;font-size:.88rem}
.ag-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ag-b{font-size:.86rem;padding:8px 12px}
@media (max-width:520px){ .ag-dn{width:100%} }

/* LES TROIS CARTES de l'abonnement (13/10/2026) */
.pp-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 12px}
@media(max-width:760px){ .pp-tres{grid-template-columns:1fr} }
.pp-c3{display:flex;flex-direction:column;gap:8px}
.pp-c3 .olista{flex:1;margin:0}
.pp-opcion{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#EFE9FB;display:grid;gap:8px}
.pp-opcion.actual{outline:2px solid #7C4DE0}
.pp-opcion .onota{margin:0;color:#2B2740}