/* Navegación compartida de las páginas con sesión (la arma common.js):
   1) menú de cuenta: avatar arriba a la derecha → mountAccountMenu()
   2) barra de pestañas inferior en móvil (≤760px) → mountTabbar() */

/* ---------------- 0. Logo del menú lateral (logo.png: CoderaQuest + lema) ---------------- */
.logo .logo-img{display:block;width:200px;max-width:100%;height:auto}
@media(max-width:760px){
  /* En móvil comparte la fila con el avatar de la derecha */
  .logo .logo-img{width:165px}
}

/* ---------------- 1. Menú de cuenta ---------------- */
.app{position:relative}

/* Escritorio ancho: esquina superior de la columna derecha (que tiene 50px de margen arriba) */
.acct{position:absolute;top:22px;right:28px;z-index:40}
.acct-btn{
  display:flex;align-items:center;gap:4px;height:44px;padding:2px 10px 2px 2px;
  border-radius:24px;border:1px solid #dbe1ec;background:#fff;cursor:pointer;
  box-shadow:0 5px 16px rgba(30,50,80,.07);font:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.acct-btn:hover{border-color:#00c853}
.acct-btn[aria-expanded="true"]{border-color:#00c853;box-shadow:0 0 0 3px #caffb8}
.acct-btn:focus-visible{outline:2px solid #00c853;outline-offset:2px}
.acct-av{width:38px;height:38px;border-radius:50%;background:#f1ffe9;display:grid;place-items:center;font-size:21px;line-height:1;overflow:hidden;white-space:nowrap}
.acct-caret{font-size:11px;color:#667085}

.acct-menu{
  position:absolute;right:0;top:calc(100% + 8px);width:250px;
  background:#fff;border:1px solid #dbe1ec;border-radius:16px;padding:8px;
  box-shadow:0 14px 34px rgba(30,50,80,.16);animation:acct-in .12s ease;
}
.acct-menu[hidden]{display:none}
.acct-head{display:flex;gap:10px;align-items:center;padding:8px 8px 12px;border-bottom:1px solid #edf1f6;margin-bottom:6px}
.acct-head .acct-av{width:42px;height:42px;font-size:24px;flex:none}
.acct-premium{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;color:#7a4b00;background:#fff1d6;border:1px solid #f0c56a;border-radius:10px;padding:1px 7px;vertical-align:middle}
.acct-head div{min-width:0}
.acct-head strong{display:block;font-size:14px;color:#172033;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-head small{font-size:11px;color:#667085}
.acct-menu a{
  display:flex;gap:10px;align-items:center;padding:10px;border-radius:10px;
  font-size:13.5px;font-weight:600;color:#172033;text-decoration:none;
}
.acct-menu a span{width:22px;text-align:center}
.acct-menu a:hover,.acct-menu a:focus-visible{background:#f1ffe9;outline:none}
.acct-menu a.danger{color:#c62828}
.acct-menu a.danger:hover,.acct-menu a.danger:focus-visible{background:#fff0f0}
.acct-menu hr{border:0;border-top:1px solid #edf1f6;margin:6px 0}
@keyframes acct-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Tablet: la columna derecha se oculta y arriba a la derecha queda contenido
   (globo "Java · 2%", banner de Inicio): se le abre una fila propia al avatar. */
@media(max-width:1100px) and (min-width:761px){
  .main{padding-top:58px}
}

/* Móvil: arriba solo está el logo (el menú lateral se oculta) → avatar en esa fila. */
@media(max-width:760px){
  .acct{top:14px;right:14px}
  .acct-menu{width:min(260px,calc(100vw - 28px))}
}

/* ---------------- 2. Barra de pestañas (móvil) ---------------- */
.tabbar,.sheet{display:none}

@media(max-width:760px){
  /* Espacio para que la barra fija no tape el final del contenido */
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}

  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);gap:4px;
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(255,255,255,.97);border-top:1px solid #dbe1ec;
    box-shadow:0 -4px 16px rgba(30,50,80,.06);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a,.tabbar button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    font:inherit;font-size:10.5px;font-weight:700;color:#667085;text-decoration:none;
    background:none;border:0;border-radius:14px;padding:6px 0;min-height:52px;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .tabbar .ti{font-size:21px;line-height:1}
  .tabbar .active{color:#007f35;background:#caffb8}
  .tabbar a:active,.tabbar button:active{transform:scale(.96)}

  /* Hoja "Más" */
  .sheet{position:fixed;inset:0;z-index:60;background:rgba(23,32,51,.42);align-items:flex-end;animation:sheet-fade .15s ease}
  .sheet.open{display:flex}
  .sheet-panel{
    width:100%;background:#fff;border-radius:22px 22px 0 0;
    padding:10px 16px calc(18px + env(safe-area-inset-bottom));
    animation:sheet-up .2s ease;
  }
  .sheet-grip{width:40px;height:5px;border-radius:5px;background:#dbe1ec;margin:2px auto 10px}
  .sheet-panel a{
    display:flex;align-items:center;gap:12px;padding:14px 10px;border-radius:12px;
    font-size:15px;font-weight:600;color:#172033;text-decoration:none;
  }
  .sheet-panel a .ti{width:26px;text-align:center;font-size:19px}
  .sheet-panel a .chev{margin-left:auto;color:#707784}
  .sheet-panel a.active{background:#f1ffe9;color:#007f35}
  .sheet-panel hr{border:0;border-top:1px solid #edf1f6;margin:6px 0}
  .sheet-panel a.danger{color:#c62828}
  .sheet-panel a:focus-visible,.tabbar a:focus-visible,.tabbar button:focus-visible{outline:2px solid #00c853;outline-offset:2px}

  @keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
  @keyframes sheet-fade{from{opacity:0}to{opacity:1}}
}

@media(prefers-reduced-motion:reduce){
  .sheet,.sheet-panel,.acct-menu{animation:none}
}