/* Superbites Academy · campus — pulido móvil (se carga al final del <head>, después del resto del CSS).
   Zona segura del iPhone, toques de 44 px, inputs sin zoom de iOS, barra inferior cómoda con el pulgar
   y el aviso discreto «Instalar app» (PWA). No cambia el diseño de escritorio. */

/* ---------- zona segura (muesca, isla dinámica, horizontal) ---------- */
.top{padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
/* en la app instalada la barra de estado queda encima del contenido: se reserva su alto */
@media (display-mode:standalone){
  .top{height:calc(var(--top-h) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  /* iOS pinta la hora en blanco (black-translucent): en tema claro se le pone una franja oscura detrás */
  :root[data-theme=light] .top{background:linear-gradient(#1A0A03 0 env(safe-area-inset-top),var(--top-bg) env(safe-area-inset-top))}
}
.dlg{max-height:calc(100svh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}

/* ---------- sin inclinación 3D en pantallas táctiles (se salía 2 px por el borde y gasta batería) ---------- */
@media (hover:none){
  .fx,.fx.tilting{transform:none!important}
}

@media (max-width:860px){
  /* barra inferior: el inset ya va dentro de --bottom-h; antes el botón «subir» y el aviso de vista lo sumaban dos veces */
  .to-top{bottom:calc(var(--bottom-h,0px) + 16px);right:max(14px,env(safe-area-inset-right))}
  .viewas{bottom:calc(var(--bottom-h) + 14px)}
  .bottom{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
  .bottom a{min-height:50px;font-size:11px;-webkit-tap-highlight-color:transparent}
  .bottom a:active .ic{transform:scale(.9)}
  .view{padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}

  /* toques de 44 px sin cambiar el dibujo: la zona táctil crece con un pseudo-elemento */
  .icon-btn.sm{position:relative}
  .icon-btn.sm::after{content:"";position:absolute;inset:-6px;border-radius:50%}
  .chip{min-height:44px;padding-inline:18px}
  .ls-tabs button{min-height:42px}
  .af-links{gap:0 18px}
  .af-links a{display:inline-flex;align-items:center;min-height:44px}
  .link,.link.sm{display:inline-flex;align-items:center;min-height:40px}
  .menu-i{min-height:46px}
  .gl-l{min-height:44px}
  .btn-sm{min-height:42px}
  .pl-b{min-width:44px;min-height:44px}
  .act{min-height:44px}
  .gl-back,.back-site{display:inline-flex;align-items:center;min-height:44px}

  /* temario lateral: respeta la muesca y la barra de inicio del iPhone */
  .glossary{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px)}

  /* comunidad: las tarjetas no se salen del ancho (el grid crecía con la cabecera del post) */
  .feed{grid-template-columns:minmax(0,1fr)}
  .feed>*{min-width:0}

  /* inputs a 16 px: iOS hace zoom en cualquier campo más pequeño */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important}

  /* pestañas que se deslizan: se nota que hay más a la derecha */
  .ls-tabs,.chips{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .ls-tabs button,.chip{scroll-snap-align:start}
  .chips{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:28px}
  .ls-tabs{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}

  /* medios y tablas que no rompen el ancho */
  img,video,iframe{max-width:100%}
  pre,code{overflow-wrap:anywhere}
  .st-table{overflow-x:auto}
  #toasts{bottom:calc(var(--bottom-h) + 18px)}
}

/* teléfonos angostos: la barra superior mantiene botones de 44 px */
@media (max-width:420px){
  .top{gap:8px}
  .top-actions{gap:4px}
  .icon-btn{width:42px;height:42px}
  .me-btn{min-width:42px;min-height:42px;place-items:center}
  .complete .cb-ic{flex:none}
  .ls-acts .complete{min-width:0;padding-inline:16px;font-size:15px}
  .post-name{flex-wrap:wrap;row-gap:2px}
  .post-h .pin-tag{font-size:0;gap:0}
}
@media (max-width:360px){
  .bottom a{font-size:10px}
  .icon-btn{width:40px;height:40px}
}

/* ---------- aviso «Instalar app» (solo móvil, discreto, se puede cerrar) ---------- */
.pwa-install{position:fixed;left:12px;right:12px;bottom:calc(var(--bottom-h,0px) + 12px);z-index:140;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:18px;background:var(--glass-solid,rgba(20,15,12,.94));border:1px solid var(--line2);box-shadow:0 18px 40px rgba(0,0,0,.28);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:14px;color:var(--ivory);animation:pwaIn .5s var(--e-out,ease) both;max-width:480px;margin:0 auto}
.pwa-install img{width:36px;height:36px;border-radius:10px;flex:none}
.pwa-install p{flex:1;min-width:0;line-height:1.35;margin:0}
.pwa-install p b{display:block;font-weight:600;font-size:14px}
.pwa-install p small{display:block;color:var(--t62);font-size:12.5px}
.pwa-install .btn{flex:none;min-height:40px;padding:8px 14px;font-size:14px}
.pwa-install .pwa-x{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--t62);font-size:22px;line-height:1;background:none;border:0;cursor:pointer}
.pwa-install .pwa-x:hover{color:var(--ivory)}
@keyframes pwaIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (min-width:861px){.pwa-install{display:none}}
@media (prefers-reduced-motion:reduce){.pwa-install{animation:none}}