/* ============================================================
   ASISTT VISUAL PATCH V61 · 2026-09-15
   Scope: mobile public header + family/professional panel mobile menu.
   Presentation/navigation layout only. No routes or business logic.
   ============================================================ */

/* ------------------------------------------------------------
   PUBLIC HEADER · MOBILE
   Give the real Asistt logo more presence without changing the
   two-row action layout or desktop behavior.
   ------------------------------------------------------------ */
@media (max-width: 620px){
  .asistt-public-v59 .site-header .header-inner{
    width:calc(100% - 20px);
    gap:10px;
    padding-top:8px;
  }
  .asistt-public-v59 .site-logo-link{
    min-width:0;
    flex:0 1 auto;
  }
  .asistt-public-v59 .site-logo{
    width:184px!important;
    max-width:100%;
    max-height:64px!important;
    object-fit:contain;
    object-position:left center;
  }
  .asistt-public-v59 .menu-toggle{
    min-height:44px;
    padding:9px 13px;
    border-radius:12px;
    font-size:.84rem;
  }
}
@media (max-width: 390px){
  .asistt-public-v59 .site-logo{
    width:174px!important;
    max-height:61px!important;
  }
}
@media (max-width: 350px){
  .asistt-public-v59 .site-logo{width:162px!important}
}

/* ------------------------------------------------------------
   PANEL TOPBAR · MOBILE/TABLET
   Cleaner hierarchy: larger logo, one compact menu control and
   notifications. Logout lives inside the menu sheet.
   ------------------------------------------------------------ */
@media (max-width: 1019px){
  .panel-ui-v59.panel-theme-v36 .panel-topbar{
    min-height:78px;
    padding:9px 14px;
    gap:12px;
    align-items:center;
  }
  .panel-ui-v59.panel-theme-v36 .panel-mobile-logo{
    min-width:0;
    flex:0 1 auto;
  }
  .panel-ui-v59.panel-theme-v36 .panel-mobile-logo img{
    width:176px;
    max-width:100%;
    max-height:61px;
    height:auto;
    object-fit:contain;
    object-position:left center;
  }
  .panel-ui-v59.panel-theme-v36 .panel-topbar-actions{
    margin-left:auto;
    gap:8px;
    align-items:center;
    flex:0 0 auto;
  }
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu>summary{
    min-height:43px;
    padding:0 13px;
    gap:7px;
    border:1px solid #c9dce5;
    border-radius:12px;
    background:#fff;
    color:var(--asistt-navy);
    box-shadow:0 4px 13px rgba(2,40,80,.045);
    font-size:.82rem;
    font-weight:800;
  }
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu>summary:before{
    content:"";
    width:18px;
    height:13px;
    margin:0;
    background:
      linear-gradient(var(--asistt-teal),var(--asistt-teal)) 0 0/18px 2px no-repeat,
      linear-gradient(var(--asistt-teal),var(--asistt-teal)) 0 50%/18px 2px no-repeat,
      linear-gradient(var(--asistt-teal),var(--asistt-teal)) 0 100%/18px 2px no-repeat;
    border-radius:2px;
  }
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu[open]>summary:before{
    content:"";
    width:17px;
    height:17px;
    background:
      linear-gradient(var(--asistt-teal),var(--asistt-teal)) center/17px 2px no-repeat;
    transform:rotate(45deg);
    box-shadow:none;
    position:relative;
  }
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu[open]>summary:after{
    content:"";
    position:absolute;
    left:13px;
    top:50%;
    width:17px;
    height:2px;
    background:var(--asistt-teal);
    transform:translateY(-50%) rotate(-45deg);
    border-radius:2px;
  }
  .panel-ui-v59.panel-theme-v36 .panel-notification-link{
    width:43px;
    height:43px;
    flex:0 0 43px;
    display:grid;
    place-items:center;
    padding:0;
    border-radius:50%;
    background:#fff;
    border:1px solid #d3e2e8;
    color:var(--asistt-navy);
    box-shadow:0 4px 13px rgba(2,40,80,.04);
    font-size:1rem;
  }
  .panel-ui-v59.panel-theme-v36 .panel-notification-link>span[aria-hidden="true"]{
    transform:translateY(-1px);
  }

  /* Mobile menu as a structured account sheet. */
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu[open]::before{
    inset:78px 0 0;
    background:rgba(2,30,49,.26);
    backdrop-filter:blur(1px);
  }
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel{
    top:88px;
    left:12px;
    right:12px;
    max-height:calc(100dvh - 105px - env(safe-area-inset-bottom));
    padding:14px;
    border:1px solid #d5e4ea;
    border-radius:20px;
    background:#fff;
    box-shadow:0 22px 55px rgba(2,40,80,.20);
  }
  .panel-ui-v59 .panel-mobile-menu-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:-2px -2px 12px;
    padding:8px 8px 13px;
    border-bottom:1px solid #e4edf1;
  }
  .panel-ui-v59 .panel-mobile-menu-head>div{
    min-width:0;
    display:grid;
    gap:1px;
  }
  .panel-ui-v59 .panel-mobile-menu-head span{
    color:#7390a1;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .panel-ui-v59 .panel-mobile-menu-head strong{
    color:var(--asistt-navy);
    font-size:1rem;
    line-height:1.25;
  }
  .panel-ui-v59 .panel-mobile-menu-head>a{
    flex:0 0 auto;
    padding:8px 10px;
    border:1px solid #cfe2e8;
    border-radius:10px;
    background:#f8fbfc;
    color:#315a70;
    font-size:.75rem;
    font-weight:800;
  }
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel .panel-mobile-primary-nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel .panel-mobile-primary-nav a,
  .panel-ui-v59.panel-theme-v36 .panel-mobile-more nav a{
    position:relative;
    min-height:48px;
    display:flex;
    align-items:center;
    padding:11px 12px 11px 42px;
    border:1px solid #e0eaee;
    border-radius:12px;
    background:#f8fbfc;
    color:#31566b;
    font-size:.82rem;
    font-weight:750;
    line-height:1.2;
    box-shadow:none;
  }
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel nav a::before{
    content:"•";
    position:absolute;
    left:10px;
    top:50%;
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    transform:translateY(-50%);
    border-radius:8px;
    background:#e9f7fa;
    color:#078aa3;
    font-size:1rem;
    font-weight:900;
  }
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel nav a[href="/panel/"]::before{content:"⌂"}
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel nav a[href*="/perfil/"]::before{content:"●";font-size:.62rem}
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel nav a[href*="/necesidades/"]::before,
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel nav a[href*="/profesionales/"]::before{content:"⌕"}
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel nav a[href*="/mensajes/"]::before{content:"✉";font-size:.76rem}
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel nav a[href*="/ayuda/"]::before{content:"?";font-size:.78rem}
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel nav a[href*="/matches/"]::before{content:"↔";font-size:.78rem}
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel nav a[href*="/notificaciones/"]::before{content:"•"}
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel nav a.is-active{
    background:linear-gradient(135deg,#edf8fc,#e5f5f9);
    border-color:#bfe0e8;
    color:#057e98;
    box-shadow:inset 3px 0 0 var(--asistt-teal);
  }
  .panel-ui-v59.panel-theme-v36 .panel-mobile-more{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #e5edf1;
  }
  .panel-ui-v59.panel-theme-v36 .panel-mobile-more>summary{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
    border:1px solid #e0eaee;
    border-radius:11px;
    background:#fff;
    color:#456779;
    font-size:.78rem;
    font-weight:800;
  }
  .panel-ui-v59.panel-theme-v36 .panel-mobile-more nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:8px;
  }
  .panel-ui-v59 .panel-mobile-menu-logout{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #e5edf1;
  }
  .panel-ui-v59 .panel-mobile-menu-logout button{
    width:100%;
    min-height:44px;
    border:1px solid #e5cfd2;
    border-radius:11px;
    background:#fff7f7;
    color:#9a3e45;
    font:inherit;
    font-size:.82rem;
    font-weight:800;
  }
}

@media (max-width: 620px){
  .panel-ui-v59.panel-theme-v36 .panel-topbar{
    min-height:76px;
    padding:8px 10px;
    gap:8px;
  }
  .panel-ui-v59.panel-theme-v36 .panel-mobile-logo img{
    width:164px;
    max-height:58px;
  }
  .panel-ui-v59.panel-theme-v36 .panel-home-button{display:none}
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu>summary{
    min-height:42px;
    padding:0 11px;
  }
  .panel-ui-v59.panel-theme-v36 .panel-notification-link{
    width:42px;
    height:42px;
    flex-basis:42px;
  }
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu[open]::before{inset:76px 0 0}
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel{
    top:84px;
    left:9px;
    right:9px;
    max-height:calc(100dvh - 100px - env(safe-area-inset-bottom));
  }
}

@media (max-width: 430px){
  .panel-ui-v59.panel-theme-v36 .panel-mobile-logo img{
    width:158px;
    max-height:56px;
  }
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu>summary{
    width:44px;
    min-width:44px;
    padding:0;
    font-size:0;
  }
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu>summary:before{margin:0}
  .panel-ui-v59.panel-theme-v36 .panel-user-mobile-menu-panel .panel-mobile-primary-nav,
  .panel-ui-v59.panel-theme-v36 .panel-mobile-more nav{
    grid-template-columns:1fr;
  }
}

@media (max-width: 360px){
  .panel-ui-v59.panel-theme-v36 .panel-mobile-logo img{width:148px}
  .panel-ui-v59.panel-theme-v36 .panel-topbar-actions{gap:6px}
  .panel-ui-v59.panel-theme-v36 .panel-notification-link{width:40px;height:40px;flex-basis:40px}
}


/* ------------------------------------------------------------
   PUBLIC HEADER · DESKTOP ALIGNMENT V67
   Align logo and action buttons with the same content width as
   the home body, and scale logo up slightly without overshooting.
   ------------------------------------------------------------ */
@media (min-width: 1020px){
  .asistt-public-v59 .site-header .header-inner{
    width:min(calc(100% - 32px),var(--container));
    min-height:80px;
    gap:18px;
    padding-inline:0;
  }
  .asistt-public-v59 .site-logo-link{
    flex:0 0 auto;
  }
  .asistt-public-v59 .site-logo{
    width:208px!important;
    max-height:72px!important;
  }
  .asistt-public-v59 .main-nav{
    margin-left:auto;
    gap:19px;
  }
  .asistt-public-v59 .header-actions{
    gap:10px;
    margin-left:6px;
    flex:0 0 auto;
  }
  .asistt-public-v59 .header-actions .btn{
    min-height:42px;
    padding:.68rem 1.02rem;
  }
}
@media (min-width: 1220px){
  .asistt-public-v59 .site-logo{
    width:218px!important;
    max-height:74px!important;
  }
}