/* TrailLab v385 · shell de escritorio compacto.
   El escritorio se organiza como una cabina: navegación, contenido y contexto
   conservan su propio desplazamiento. El móvil mantiene el comportamiento TWA. */

.tb-pro-promo-v385{display:none}

@media (min-width:1101px){
  :root{
    --tl-shell-top:48px;
    --tl-shell-left:clamp(210px,13.5vw,236px);
    --tl-shell-right:clamp(250px,17vw,292px);
    font-size:var(--tl-type-body, 15px);
  }

  html,body{height:100%;overflow:hidden}
  body:not(.gated){overscroll-behavior:none}

  html body .app{
    display:grid!important;
    grid-template-columns:var(--tl-shell-left) minmax(0,1fr) var(--tl-shell-right);
    grid-template-rows:var(--tl-shell-top) minmax(0,1fr);
    width:100%;height:100dvh;min-height:0!important;overflow:hidden;
    background:var(--tl-canvas,var(--bg));
  }

  /* El logo pertenece al lateral. La franja superior queda libre como soporte
     comercial y, por ahora, contiene únicamente el acceso a TrailLab PRO. */
  html body .topbar{
    position:relative!important;inset:auto!important;
    grid-column:2 / -1;grid-row:1;
    width:auto;height:var(--tl-shell-top);min-height:var(--tl-shell-top);
    padding:5px 18px!important;margin:0!important;
    display:flex!important;justify-content:flex-end;align-items:center;gap:0!important;
    z-index:45;box-shadow:0 6px 22px rgba(0,0,0,.12)!important;
  }
  html body .topbar>.tb-burger,
  html body .topbar>.tb-logo,
  html body .topbar>#tbNav,
  html body .topbar>.tb-idx,
  html body .topbar>.tb-rtoggle{display:none!important}

  html body .topbar>.tb-pro-promo-v385{
    display:inline-flex;align-items:center;gap:9px;
    min-height:36px;padding:6px 13px 6px 10px;
    border:1px solid rgba(166,232,44,.44);border-radius:10px;
    background:linear-gradient(135deg,rgba(166,232,44,.16),rgba(49,214,179,.08));
    color:#e8ffc0;cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 7px 20px rgba(0,0,0,.15);
    transition:transform .16s ease,border-color .16s ease,background .16s ease;
  }
  html body .topbar>.tb-pro-promo-v385:hover{
    transform:translateY(-1px);border-color:#a6e82c;
    background:linear-gradient(135deg,rgba(166,232,44,.24),rgba(49,214,179,.12));
  }
  .tb-pro-promo-v385 .tl-icon{width:17px;height:17px;color:#a6e82c}
  .tb-pro-copy-v385{display:flex;align-items:baseline;gap:8px;line-height:1}
  .tb-pro-copy-v385 strong{
    font:900 var(--tl-type-kicker, 12px)/1 var(--tl-font-action,'Saira',sans-serif);
    letter-spacing:.07em;text-transform:uppercase
  }
  .tb-pro-copy-v385 small{
    color:#9eb8b0;font:700 var(--tl-type-kicker, 12px)/1 var(--tl-font-body,'Archivo',sans-serif);
    letter-spacing:.04em
  }
  .tb-pro-arrow-v385{color:#a6e82c;font-size:var(--tl-type-body, 15px);line-height:1}

  /* Tres paneles estables. Cada uno desplaza sólo su propio contenido. */
  html body aside.left{
    position:relative!important;inset:auto!important;
    grid-column:1;grid-row:1 / -1;
    width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;
    min-width:0;transform:none!important;transition:none!important;
    z-index:46;overflow-x:hidden;overflow-y:auto!important;
    overscroll-behavior:contain;scrollbar-gutter:stable;
    padding:13px 11px 18px!important;
    box-shadow:10px 0 34px rgba(0,0,0,.17)!important;
  }
  html body main.center{
    position:relative;grid-column:2;grid-row:2;
    width:100%;max-width:none!important;height:auto;min-width:0;min-height:0;
    margin:0!important;padding:17px clamp(18px,2vw,30px) 34px!important;
    overflow-x:hidden!important;overflow-y:auto!important;
    overscroll-behavior:contain;scrollbar-gutter:stable;
  }
  html body aside.right{
    position:relative!important;inset:auto!important;
    grid-column:3;grid-row:2;
    width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;
    min-width:0;margin:0!important;padding:16px 13px 28px!important;
    transform:none!important;transition:none!important;
    z-index:20;overflow-x:hidden;overflow-y:auto!important;
    overscroll-behavior:contain;scrollbar-gutter:stable;
    border-top:0!important;box-shadow:-9px 0 28px rgba(0,0,0,.1)!important;
  }
  html body .nav-scrim{display:none!important}

  /* Densidad de producto, sin zoom artificial: tipografía, márgenes y controles
     mantienen su nitidez y dejan ver más información en una sola pantalla. */
  html body aside.left>.brand{margin-bottom:7px!important;padding:3px 6px 11px!important}
  html body aside.left>.nav-item.nav-solo,
  html body aside.left>.nav-group>.nav-grp{
    min-height:37px!important;padding:7px 9px!important;font-size:var(--tl-type-kicker, 12px)!important
  }
  html body aside.left>.nav-item.tl-activity-v381{margin:4px 0 5px!important}
  html body aside.left .nav-grp-body .nav-item{
    min-height:32px!important;padding:6px 8px!important;font-size:var(--tl-type-kicker, 12px)!important
  }
  html body main.center>.top{margin-bottom:14px!important;gap:14px}
  html body #viewHeading{font-size:var(--tl-type-hero, 40px)!important;line-height:1!important}
  html body .eyebrow{font-size:var(--tl-type-kicker, 12px)!important;letter-spacing:.12em}
  html body .view-title{font-size:var(--tl-type-section, 26px)!important;margin-bottom:14px!important}
  html body .countdown{padding:7px 12px!important}

  /* Los laterales propios del Feed y el explorador de rutas permanecen visibles
     dentro del panel central mientras éste se desplaza. */
  #view-feed .feed-shell-v290{
    width:100%!important;max-width:100%!important;
    grid-template-columns:minmax(190px,.75fr) minmax(360px,1.5fr) minmax(210px,.8fr)!important;
    gap:16px!important
  }
  #view-feed .feed-shell-v290>.fd-news,
  #view-feed .feed-shell-v290>.fd-rail{top:0}
  #view-rutas .routes-shell{min-height:min(620px,calc(100dvh - 150px));height:calc(100dvh - 150px)}
  #view-rutas .routes-side,
  #view-rutas .routes-map-wrap{min-height:0;overflow:hidden}
  #view-rutas .routes-list{min-height:0;overflow-y:auto;overscroll-behavior:contain}

  .left,.center,.right,.routes-list{
    scrollbar-width:thin;scrollbar-color:rgba(89,188,164,.48) transparent
  }
  .left::-webkit-scrollbar,.center::-webkit-scrollbar,.right::-webkit-scrollbar,.routes-list::-webkit-scrollbar{width:7px}
  .left::-webkit-scrollbar-thumb,.center::-webkit-scrollbar-thumb,.right::-webkit-scrollbar-thumb,.routes-list::-webkit-scrollbar-thumb{
    border-radius:999px;background:rgba(89,188,164,.42)
  }
}

@media (min-width:1101px) and (max-width:1399px){
  :root{--tl-shell-left:208px;--tl-shell-right:244px;font-size:var(--tl-type-meta, 13px)}
  html body main.center{padding-inline:17px!important}
  .tb-pro-copy-v385 small{display:none}
  #view-feed .feed-shell-v290{
    grid-template-columns:minmax(0,1fr) 238px!important
  }
  #view-feed .feed-shell-v290>.fd-news{
    position:static;grid-column:1 / -1;grid-row:1;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #view-feed .feed-shell-v290>.fd-news>*:first-child{grid-column:1 / -1}
  #view-feed .feed-shell-v290>.fd-center{grid-column:1;grid-row:2}
  #view-feed .feed-shell-v290>.fd-rail{grid-column:2;grid-row:2}
}

html[data-theme="light"] body .topbar>.tb-pro-promo-v385{
  border-color:rgba(80,145,20,.42);background:linear-gradient(135deg,rgba(134,198,34,.2),rgba(49,176,148,.1));color:#315b10
}
html[data-theme="light"] .tb-pro-promo-v385 .tl-icon,
html[data-theme="light"] .tb-pro-arrow-v385{color:#5b8c18}
html[data-theme="light"] .tb-pro-copy-v385 small{color:#527168}