/* =====================================================================
   DarkShoppe Mobile 2026
   Orden visual: destacado derecho > contenido > promociones izquierdas.
   Esta capa complementa las plantillas nuevas y las plantillas heredadas.
   ===================================================================== */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-wrap:anywhere}
iframe,video,canvas,svg{max-width:100%}
input,select,textarea,button{max-width:100%}

/* Orden estable en escritorio y lectura correcta en mobile. */
body.ds-body .ds-layout{
  grid-template-areas:"left main right";
}
body.ds-body .ds-sidebar-left{grid-area:left}
body.ds-body .ds-main{grid-area:main}
body.ds-body .ds-sidebar-right{grid-area:right}

.ds-page .ds-content-shell{
  grid-template-areas:"left main right";
}
.ds-page .ds-sidebar-left{grid-area:left}
.ds-page .ds-main{grid-area:main}
.ds-page .ds-sidebar-right{grid-area:right}

.ds-placement-label{
  display:none;
  align-items:center;
  gap:7px;
  margin:0 2px -4px;
  color:#91a4c2;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ds-placement-label::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:#37e2ad;
  box-shadow:0 0 0 4px rgba(55,226,173,.1);
}
.ds-sidebar-left .ds-placement-label::before{
  background:#62b5ff;
  box-shadow:0 0 0 4px rgba(98,181,255,.1);
}

@media(max-width:1180px){
  body.ds-body .ds-layout,
  .ds-page .ds-content-shell{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "right"
      "main"
      "left";
  }
  body.ds-body .ds-main,
  body.ds-body .ds-sidebar-left,
  body.ds-body .ds-sidebar-right,
  .ds-page .ds-main,
  .ds-page .ds-sidebar-left,
  .ds-page .ds-sidebar-right{
    order:initial!important;
    width:100%;
    min-width:0;
    position:static;
  }
  .ds-placement-label{display:flex}
}

@media(max-width:920px){
  /* Menú nuevo: panel flotante, scrolleable y sin desplazar la página. */
  .ds-nav-wrap{padding:7px 8px!important}
  .ds-nav{position:relative;padding:8px 10px!important;border-radius:18px!important}
  .ds-nav-brand-row{min-width:0!important}
  .ds-nav-menu{
    position:absolute;
    z-index:1200;
    top:calc(100% + 8px);
    left:0;
    right:0;
    max-height:calc(100dvh - 92px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:10px;
    border:1px solid rgba(148,163,184,.22);
    border-radius:18px;
    background:rgba(8,13,24,.98);
    box-shadow:0 24px 60px rgba(0,0,0,.5);
  }
  .ds-nav-link,.ds-user-pill{min-height:46px}

  /* Menú heredado. */
  .custom-header{padding:8px 10px!important}
  #custom-main-nav{position:relative;min-height:48px}
  .custom-logo-menu{width:100%;justify-content:space-between}
  .custom-nav-links{
    top:calc(100% + 8px)!important;
    left:0!important;
    right:0!important;
    max-height:calc(100dvh - 80px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .custom-nav-link{min-height:46px}
}

@media(max-width:780px){
  body.ds-body .ds-shell{padding:8px 8px 0!important}
  body.ds-body .ds-layout{gap:12px!important;margin-top:8px!important}
  body.ds-body .ds-main{border-radius:19px!important}
  body.ds-body .ds-main-inner{padding:12px!important}

  .ds-page .ds-content-shell{padding:8px!important;gap:12px!important}
  .ds-page .ds-main{padding:12px!important;border-radius:19px!important}

  /* El bloque superior derecho queda corto, atractivo y navegable por swipe. */
  body.ds-body .ds-sidebar-right,
  .ds-page .ds-sidebar-right{
    gap:10px!important;
    overflow:hidden;
  }
  .ds-sidebar-right .ds-programs-panel{
    width:100%;
    border-radius:18px!important;
    box-shadow:0 14px 34px rgba(0,0,0,.3)!important;
  }
  .ds-sidebar-right .ds-programs-panel__head{
    min-height:58px!important;
    padding:10px 12px!important;
  }
  .ds-sidebar-right .ds-programs-panel__icon{
    width:34px!important;
    height:34px!important;
    border-radius:11px!important;
  }
  .ds-sidebar-right .ds-programs-list{
    display:flex!important;
    grid-template-columns:none!important;
    gap:9px!important;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    padding:10px!important;
  }
  .ds-sidebar-right .ds-programs-item{
    flex:0 0 min(310px,86vw);
    scroll-snap-align:start;
  }
  .ds-sidebar-right .ds-programs-link{
    min-height:86px;
    grid-template-columns:76px minmax(0,1fr)!important;
  }
  .ds-sidebar-right .ds-programs-media{
    width:76px!important;
    height:68px!important;
  }
  .ds-sidebar-right .ds-programs-all{
    margin:0 10px 10px!important;
    min-height:42px;
  }

  /* Promociones inferiores cómodas para tocar y leer. */
  body.ds-body .ds-sidebar-left,
  .ds-page .ds-sidebar-left{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin-top:2px;
  }
  .ds-sidebar-left .ds-promo,
  .ds-sidebar-left .promo-card{
    border-radius:18px!important;
    padding:16px!important;
  }

  /* Contenido general. */
  .ds-hero{padding:22px 16px!important;border-radius:18px!important}
  .ds-hero h1,.ds-title{letter-spacing:-.04em!important}
  .ds-hero h1{font-size:clamp(1.9rem,10vw,2.8rem)!important}
  .ds-hero p,.ds-subtitle{font-size:.95rem!important;line-height:1.55!important}
  .ds-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .ds-stat{min-width:0;padding:10px!important}
  .ds-stat strong{font-size:1.15rem!important}
  .ds-stat span{font-size:.68rem!important}
  .ds-filter-panel{padding:11px!important;border-radius:16px!important}
  .ds-pill-row,.ds-order{display:grid!important;grid-template-columns:1fr!important}
  .ds-pill{width:100%;min-height:44px;justify-content:flex-start!important}
  .ds-grid,.publicaciones,.publicaciones-container{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .ds-card{border-radius:18px!important}
  .ds-card-media{height:auto!important;aspect-ratio:16/10}
  .ds-card-body{padding:14px!important}
  .ds-card-cta{min-height:44px}
  .ds-actions,.ds-hero-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .ds-actions .ds-btn,.ds-hero-actions .ds-btn,.ds-btn,.btn,.custom-btn{min-height:44px}
  .ds-page-head,.ds-page-body,.ds-card-pad{padding:16px!important}
  .ds-feature-grid,.ds-grid-2{grid-template-columns:1fr!important}
  .ds-toolbar,.ds-card-head,.card-header{align-items:stretch!important}
  .ds-toolbar>*,.ds-card-head>*,.card-header>*{max-width:100%}
  .table-responsive,.tabla-responsive,.ds-table-wrap{
    max-width:100%;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  table,.table,.tabla,.tabla-sesiones,.custom-table{font-size:13px}
  th,td{padding:11px 10px!important;white-space:nowrap}
  input,select,textarea,.form-control,.custom-form-control{font-size:16px!important}
  .modal,.modal-sesiones{padding:10px!important}
  .modal-content,.modal-sesiones-content{margin:3vh auto!important;padding:16px!important;border-radius:18px!important}
  .ds-footer{margin-top:14px!important;padding:18px 12px!important}
  .ds-footer-inner{display:grid!important;grid-template-columns:1fr!important}
  .ds-footer-links{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%}
  .ds-footer-links a{justify-content:center;text-align:center}
}

@media(max-width:420px){
  .ds-brand strong{font-size:.95rem}
  .ds-brand small{display:none!important}
  .ds-menu-button{width:42px!important;height:42px!important}
  .custom-logo a{font-size:19px!important}
  .ds-stats{grid-template-columns:1fr!important}
  .ds-stat{display:flex;align-items:center;justify-content:space-between}
  .ds-pagination{display:grid!important;grid-template-columns:1fr 1fr!important}
  .ds-pagination span{grid-column:1/-1;grid-row:1}
  .ds-sidebar-right .ds-programs-item{flex-basis:88vw}
  .ds-footer-links{grid-template-columns:1fr!important}
}

@media(max-width:340px){
  body.ds-body .ds-shell,.ds-page .ds-content-shell{padding-inline:5px!important}
  body.ds-body .ds-main-inner,.ds-page .ds-main{padding:9px!important}
  .ds-sidebar-right .ds-programs-item{flex-basis:91vw}
  .ds-sidebar-right .ds-programs-link{grid-template-columns:64px minmax(0,1fr)!important}
  .ds-sidebar-right .ds-programs-media{width:64px!important;height:64px!important}
}

@media(hover:none){
  .ds-card:hover,.ds-programs-link:hover,.ds-btn:hover{transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}