/* ===================================================================== HolaNinos · panel.css — LES DEUX TABLEAUX DE BORD (18/09/2026) --------------------------------------------------------------------- Deux ecrans et deux boutons d'en-tete, rien d'autre. Le fichier est a part (et pas dans opciones.css) pour la meme raison que fiesta.css : opciones.css passe 3 800 lignes et porte deja un chantier du meme jour ; deux ajouts a la fin d'un meme fichier le meme jour, c'est un conflit garanti au moment de deployer. REGLE DE COULEUR TENUE ICI : jamais de texte clair sur un fond de couleur pale. Le violet fonce #5B32B8 sur lavande #F6F2FF se lit avec ou sans le fond. Le seul blanc sur violet est l'etat actif du bouton (#7C4DE0, 5,26:1), le meme que le bouton principal du site. ===================================================================== */ /* ===================================================================== 1. LES DEUX BOUTONS DE L'EN-TETE Ils ne retrecissent jamais et ne passent jamais sous la ligne : c'est la regle posee le 16/09/2026 pour le choix de langue et le bouton du compte (opciones.css, dernier bloc). Sous 900 px le texte s'en va et le dessin reste ; le bouton, lui, reste atteignable a 280 px. ===================================================================== */ .header .wrap>.cuentas{display:flex;align-items:center;gap:7px;flex:none} .cuenta-btn{ display:inline-flex;align-items:center;gap:7px; padding:8px 14px;border-radius:999px; border:1px solid #E0D6FA;background:#F6F2FF;color:#5B32B8; font-family:inherit;font-size:13.5px;font-weight:600;line-height:1; white-space:nowrap;cursor:pointer; transition:background .16s ease,border-color .16s ease,transform .16s ease; } .cuenta-btn svg{flex:none} .cuenta-btn:hover{background:#EDE5FF;border-color:#C9B6F5;transform:translateY(-1px)} .cuenta-btn:focus-visible{outline:2px solid #5B32B8;outline-offset:2px} .cuenta-btn.on{background:#7C4DE0;border-color:#7C4DE0;color:#fff} /* Le bouton des professionnels ne porte pas la couleur de la marque : il ne s'adresse pas aux familles, et deux boutons identiques cote a cote se confondent. */ .cuenta-btn.pro{border-color:#D7DFEA;background:#EEF3F9;color:#2A3F5F} .cuenta-btn.pro:hover{background:#E2EAF5;border-color:#BFCDDF} .cuenta-btn.pro.on{background:#2A3F5F;border-color:#2A3F5F;color:#fff} /* TROISIEME PORTE, 18/09/2026 : « Mon espace ». Elle ne s'adresse ni aux familles ni aux professionnels — elle s'adresse a quelqu'un qui est DEJA quelque part et qui revient. Elle est donc neutre : ni la lavande de la marque, ni le bleu des pros. Trois boutons colores cote a cote dans un en-tete que le responsable venait de dire trop charge, ca aurait rate le but de la soiree. */ .cuenta-btn.mio{border-color:#E4E2EC;background:#fff;color:#2B2740} .cuenta-btn.mio:hover{background:#F7F6FA;border-color:#CFCBDC} .cuenta-btn.mio.on{background:#2B2740;border-color:#2B2740;color:#fff} /* SOUS 1080 px, LE TEXTE DES DEUX PREMIERES PART ET LE DESSIN RESTE. Elles etaient deux le matin du 18/09, elles sont trois le soir : le seuil de 900 px laissait trois libelles longs (« Anadir mi empresa ») sur la meme ligne que quatre rubriques et quatre langues, et l'en-tete debordait entre 900 et 1080 px. « Mon espace » garde son texte plus longtemps : c'est celle qu'on cherche du regard en revenant. */ @media(max-width:1080px){ .cuenta-btn.fam span,.cuenta-btn.pro span{display:none} .cuenta-btn.fam,.cuenta-btn.pro{padding:9px 10px} } @media(max-width:900px){ .cuenta-btn span{display:none} .cuenta-btn{padding:9px 10px} } @media(max-width:420px){ .header .wrap>.cuentas{gap:5px} .cuenta-btn{padding:8px 9px} } /* ===================================================================== 2. LE TABLEAU DE BORD DES FAMILLES ===================================================================== */ .pf-hola{margin:0 0 6px;font-size:18px;font-weight:600;color:#3B2A63} .pf-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .pf-botones .btn-primary, .pf-botones .btn-ghost{flex:1 1 180px} .pf-datos{display:flex;flex-wrap:wrap;gap:12px} .pf-dato{ flex:1 1 130px;display:flex;flex-direction:column;gap:2px; padding:13px 15px;border-radius:15px; background:#F6F2FF;border:1px solid #E6DEFB; } .pf-dato b{font-size:27px;line-height:1.05;color:#5B32B8} .pf-dato span{font-size:12.5px;line-height:1.3;color:#5A5470} .pf-guardados{display:grid;gap:12px} .pf-accesos{ display:grid;gap:10px; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); } .pf-acceso{ padding:12px 14px;border-radius:14px;text-align:left; border:1px solid #E4E2EC;background:#fff;color:#2B2740; font-family:inherit;font-size:14px;font-weight:600;cursor:pointer; transition:border-color .16s ease,background .16s ease,transform .16s ease; } .pf-acceso:hover{border-color:#C9B6F5;background:#F6F2FF;transform:translateY(-1px)} .pf-acceso:focus-visible{outline:2px solid #5B32B8;outline-offset:2px} /* ===================================================================== 3. LE TABLEAU DE BORD DES PROFESSIONNELS ===================================================================== */ .pp-estado{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 15px;border-radius:13px;margin-bottom:12px; background:#EEF3F9;border:1px solid #D7DFEA; } .pp-estado span{font-size:12.5px;color:#4A5568} .pp-estado b{font-size:14.5px;color:#2A3F5F;text-align:right} .pp-estado.pp-pedida{background:#F6F2FF;border-color:#E0D6FA} .pp-estado.pp-pedida b{color:#5B32B8} .pp-estado.pp-baja{background:#FDF1EC;border-color:#F3D7C9} .pp-estado.pp-baja b{color:#8A3E1B} .pp-negocio,.pp-plan-actual{margin:0 0 12px;font-size:14.5px;color:#2B2740} .pp-planes{ display:grid;gap:12px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); } .pp-plan{ display:flex;flex-direction:column;gap:9px; padding:14px;border-radius:16px; border:1px solid #E4E2EC;background:#fff; } .pp-plan.actual{border-color:#7C4DE0;background:#F9F6FF} .pp-plan-t{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .pp-plan-t b{font-size:15.5px;color:#2B2740} .pp-plan .onota{margin:0} .pp-actual{ align-self:flex-start;padding:5px 11px;border-radius:999px; background:#EDE5FF;color:#5B32B8;font-size:12.5px;font-weight:600; } .pp-plan .btn-primary{margin-top:auto} /* La carte « payer ». Elle est volontairement sobre : c'est la seule de l'ecran qui ne fait rien encaisser, et elle ne doit pas ressembler a une caisse. */ .ocard.pp-pago{background:#FBFAFE;border-style:dashed} /* ===================================================================== 4. « MON ESPACE » : LE CHOIX ENTRE LES DEUX PORTES (18/09/2026) Deux cartes larges et non deux boutons : ce qu'on choisit ici n'est pas une action, c'est un endroit ou l'on va rester. La phrase sous le titre est donc lue avant le clic, pas apres. ===================================================================== */ .pf-accesos.ac2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .pf-acceso.ac2-c{ display:flex;flex-direction:column;gap:6px; padding:18px 20px;border-radius:16px; } .pf-acceso.ac2-c b{font-size:16px;font-weight:700;color:#3B2A63} .pf-acceso.ac2-c span{font-size:13px;line-height:1.45;font-weight:400;color:#5A5470} /* ===================================================================== 5. L'EN-TETE TIENT SUR UNE LIGNE (18/09/2026, deuxieme passe) --------------------------------------------------------------------- MESURE, ET PAS UNE IMPRESSION. La barre interieure de l'en-tete est plafonnee a 1180 px, quelle que soit la taille de l'ecran. Avec les trois portes en toutes lettres, les cinq blocs demandaient : logo 138 + rubriques 300 + les trois portes 525 + la langue 165 + quatre ecarts de 16 px = 1 208 px Vingt-huit pixels de trop, sur TOUTES les tailles d'ecran. Ce n'est donc pas un defaut de petit ecran qu'une media query aurait repare : c'etait trop large partout, et `.topnav` etant le seul bloc autorise a retrecir, c'est lui qui encaissait tout — ses quatre boutons debordaient de leur boite et « Agenda » passait sous le logo. TROIS CORRECTIONS, ET AUCUNE NE RETIRE DE TEXTE : 1. les rubriques ne retrecissent plus (`flex:0 0 auto`) ; 2. les trois portes et la langue se resserrent (padding et corps) ; 3. c'est la LANGUE qui retrecit en dernier recours, pas la navigation — on perd moins a serrer « ES EN FR VA » qu'a casser le menu principal. ===================================================================== */ .header .wrap>.topnav{flex:0 0 auto;min-width:0} .header .wrap>.lang{flex:0 1 auto;min-width:0} .header .wrap>.cuentas{gap:6px} .cuenta-btn{padding:8px 12px;font-size:13px;gap:6px} /* La langue : meme regle de couleur, moins de place. Elle passait de 165 a 118 px, et c'est elle qui rendait les vingt-huit pixels. */ .header .wrap>.lang button{padding:6px 9px;font-size:12px} /* SUR UN TELEPHONE, MESURE A 375 px : la barre demandait 398 px pour 375 disponibles, et c'est le LOGO qui payait — « HolaNiños » sortait coupe a « HolaNi ». Le logo est le seul bloc qu'on ne rogne jamais : c'est lui qui dit ou l'on est. Les vingt-trois pixels manquants sont pris sur la langue (quatre boutons serres) et sur l'ecart des trois portes, ce qui en rend quarante-quatre. */ @media(max-width:480px){ /* L'ecart entre les blocs passe de 16 a 8 px : quatre ecarts, donc trente-deux pixels rendus d'un coup. C'est la ou il y en avait le plus a prendre, et c'est ce qui se voit le moins. */ .header .wrap{gap:8px} .header .wrap>.logo{flex:0 0 auto;min-width:0} .header .wrap>.lang button{padding:4px;font-size:11px} .header .wrap>.cuentas{gap:4px} .cuenta-btn{padding:8px} /* Le mot de la marque perd deux points. Mesure : a 17 px, « ES EN FR VA » sortait a seize pixels du bord et le « VA » etait coupe — un bouton qu'on ne peut pas viser n'existe pas, et le valencien est une des quatre langues du site, pas un supplement. */ .header .wrap>.logo .brand{font-size:15px} } /* 24/09/2026 : l'espace professionnel lit ses demandes sur le serveur. */ .pp-peticiones{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px} .pp-peticiones li{border:1px solid #E6E0F5;border-radius:12px;padding:10px 12px;background:#fff; font-size:14px;line-height:1.5;color:#2B2740;overflow-wrap:anywhere} .pp-msg{display:block;margin-top:4px;white-space:pre-wrap} .pp-bloq{margin:0 0 6px;font-size:15px;color:#2B2740} .pp-pend{color:#8A3E1B}