/* Atinate: scoped presentation, no runtime or appointment rules. */
.brand-svg{width:24px;height:24px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.brand-logo{object-fit:contain;background:transparent}
.auth-panel{max-width:650px;margin:0 auto;padding:22px 0 34px}
.auth-panel .page-intro{max-width:100%;margin-bottom:26px;padding-top:0}
.auth-panel .page-intro h1{font-size:clamp(30px,3.1vw,44px);line-height:1.14;letter-spacing:-.025em}
.auth-form{display:grid;gap:20px;min-width:0}
.auth-form .field{display:flex;flex-direction:column;gap:8px;margin:0;min-width:0}
.auth-form .field input{display:block;width:100%;box-sizing:border-box;min-width:0}
.auth-form .field .r8-password{position:relative;display:block;width:100%;max-width:100%;min-width:0}
.auth-form .r8-password input{padding-right:90px}
.auth-form .r8-password .icon-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);margin:0;min-height:36px;max-width:78px;padding:6px 12px;font-size:14px}
.auth-form>.btn{justify-self:start;min-width:150px;min-height:48px}
.auth-links{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:24px}
.auth-links a:not(.btn){color:#4642bf;font-weight:600;text-decoration:none}
.team-name-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px;margin:30px 0}
.team-name-card{font:inherit;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;min-height:135px;padding:25px;border:1px solid #ddddee;border-radius:24px;background:#fff;color:#242a50;cursor:pointer;font-size:clamp(20px,2vw,25px);font-weight:700;transition:background .15s,border-color .15s,transform .15s}
.team-name-card:hover{background:#f1edff;border-color:#7470cf;transform:translateY(-2px)}
.team-name-card:focus-visible,.resource-card:focus-visible,.whatsapp-contact:focus-visible{outline:3px solid #4642bf;outline-offset:4px}
.professional-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 40px);border-radius:26px;overflow:auto}
.professional-dialog .dialog-body{padding:28px 34px}
.professional-dialog h2{font-size:clamp(27px,3vw,38px);margin:18px 0 12px}
.professional-dialog h3{font-size:19px;margin:0 0 10px}
.profile-lead{font-size:18px;color:#5e6380;line-height:1.65}
.profile-block{padding:19px 0;border-top:1px solid #e4e3ef}
.profile-block p{margin:0;line-height:1.7;white-space:pre-line}
.profile-tags{display:flex;flex-wrap:wrap;gap:9px}
.profile-tags span{padding:8px 13px;border-radius:12px;background:#f1edff;color:#4642bf;font-size:15px}
.resource-card{font:inherit;text-align:left;cursor:pointer;color:inherit;width:100%}
.resource-card[hidden]{display:none!important}
.contact-row{display:flex;align-items:center;gap:16px;min-height:90px;padding:20px 0;color:inherit;text-decoration:none;border-bottom:1px solid #e4e3ef}
.contact-row>span{flex:1;min-width:0}.contact-row strong,.contact-row small{display:block}.contact-row small{margin-top:6px;color:#626882;overflow-wrap:anywhere}
.contact-row .brand-svg:last-child:not(:first-child){width:20px}
.contact-row[href]:hover{color:#4743c6}
.privacy-contact{margin-top:32px}.privacy-contact>.text-link{margin-left:20px}
.footer .footer-cookies{font-size:14px;display:block;color:inherit;font-weight:400;padding:0;margin-top:8px;min-height:30px}
.footer .socials a{display:inline-flex;align-items:center;justify-content:center}
.footer .socials .brand-svg{width:24px;height:24px}
.home-visits{padding-top:20px;font-size:13px;color:#cdd0e1;text-align:center}
.whatsapp-contact{position:fixed;right:22px;bottom:24px;z-index:80;display:inline-flex;align-items:center;gap:10px;padding:14px 20px;min-height:50px;background:#087a45;color:#fff;border-radius:99px;text-decoration:none;font-size:15px;font-weight:700;box-shadow:0 6px 20px #17243c26}
.whatsapp-contact .brand-svg{width:27px;height:27px;stroke-width:1.6}
body:has(dialog[open]) .whatsapp-contact{visibility:hidden}
.footer{padding-bottom:96px}
@media(max-width:720px){
 .auth-panel{padding:8px 0 20px}.auth-form{gap:17px} .auth-form>.btn{width:100%}.auth-links{justify-content:space-between;font-size:15px;gap:12px}
 .team-name-grid{grid-template-columns:1fr;gap:14px}.team-name-card{min-height:100px}
 .professional-dialog .dialog-body{padding:22px}.professional-dialog .footer-actions{padding:16px 22px}
 .whatsapp-contact{right:14px;bottom:calc(86px + env(safe-area-inset-bottom));padding:12px 16px;font-size:14px}
 .privacy-contact>.text-link{display:block;margin:20px 0 0}.contact-row{gap:12px}
 .footer{padding-bottom:150px}.home-visits{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.team-name-card{transition:none}}

.account-shortcuts{display:flex;gap:20px;flex-wrap:wrap;font-size:14px}.account-shortcuts a{color:#4642bf}
.article{max-width:900px;padding:38px 24px 60px}.article h2{margin-top:30px;font-size:23px}.article>p{line-height:1.8;color:#5d6380}
.hero-art>img{object-fit:cover}

/* Reserved portrait space: no existing, remote or invented portrait is loaded. */
.professional-profile-heading{display:grid;grid-template-columns:148px minmax(0,1fr);gap:26px;align-items:center;margin:24px 0 26px}
.professional-portrait-space{width:148px;aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;border:1px solid #dfddec;border-radius:22px;background:linear-gradient(145deg,#f5f2ff,#eae6fa);color:#aba5cc}
.professional-portrait-space svg{display:block;width:62%;height:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.professional-profile-title{min-width:0}.professional-profile-title h2{margin:0 0 12px;overflow-wrap:anywhere}.professional-profile-title .profile-lead{margin:0}
@media(max-width:520px){.professional-profile-heading{grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center;margin:22px 0}.professional-portrait-space{width:132px;border-radius:20px}.professional-profile-title h2{font-size:29px}}

/* ------------------------------------------------------------------
   Cuenta autenticada: cabecera, imagen personal y eleccion de perfil.
   Se apoya en las variables y en los controles que R10 ya define; no
   introduce un tema nuevo ni un panel aparte.
   ------------------------------------------------------------------ */
.account-menu { position: relative; display: flex; align-items: center; gap: .5rem; }
.account-menu .account { display: flex; align-items: center; gap: .5rem; }
.account-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-role { display: block; font-size: .72rem; opacity: .75; line-height: 1; }
.account-links { display: flex; align-items: center; gap: .75rem; font-size: .82rem; }
.account-links form { margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit;
    text-decoration: underline; cursor: pointer; }

.avatar { border-radius: 50%; object-fit: cover; width: 28px; height: 28px; flex: 0 0 auto; }
.avatar-lg { width: 96px; height: 96px; }

.profile-identity { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.avatar-defaults { display: flex; gap: .5rem; flex-wrap: wrap; }
.avatar-option { background: none; border: 2px solid transparent; border-radius: 50%;
    padding: 2px; cursor: pointer; line-height: 0; }
.avatar-option[aria-pressed="true"] { border-color: currentColor; }
.avatar-option img { border-radius: 50%; }

.profile-choice .choice { width: 100%; text-align: left; margin-bottom: .5rem; }

.portrait-preview img { border-radius: .5rem; object-fit: cover; max-width: 100%; height: auto; }
.activity-row { padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.08); gap: 1rem; }
.activity-row:last-child { border-bottom: 0; }

.hero-photo { width: 100%; height: auto; border-radius: 1rem; object-fit: cover; display: block; }

/* A 320 px la cabecera se apila y los enlaces de cuenta bajan a una fila
   propia: el nombre no empuja al logotipo fuera de la pantalla. */
@media (max-width: 640px) {
    .account-menu { flex-wrap: wrap; justify-content: flex-end; }
    .account-name { max-width: 7rem; }
    .account-links { gap: .5rem; font-size: .76rem; }
}
@media (max-width: 380px) {
    .account-name { display: none; }
}