/* ===== Versión móvil =====
   Se carga después de styles.css y language.css para no alterar el escritorio. */

.mobile-back{
  display:none;
}

@media (max-width:820px){
  html,
  body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
    background:#121214;
  }

  body{
    display:block;
    min-height:100svh;
    padding:0;
  }

  .finder-window{
    width:100%;
    height:auto;
    min-height:100svh;
    border:0;
    border-radius:0;
    overflow:visible;
    box-shadow:none;
    background:#121214;
    display:block;
  }

  /* Cabecera compacta: título + idioma y buscador debajo. */
  .toolbar{
    position:sticky;
    top:0;
    z-index:50;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "title language"
      "search search";
    gap:9px 10px;
    min-height:0;
    padding:max(10px,env(safe-area-inset-top)) 12px 10px;
    border-bottom:1px solid var(--line);
    background:rgba(30,30,32,.94);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
  }

  .traffic-lights,
  .nav-controls,
  .toolbar-actions > .icon-btn{
    display:none !important;
  }

  .title-block{
    grid-area:title;
    min-width:0;
    padding:0;
    align-self:center;
  }

  .title-block strong{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:17px;
  }

  .title-block small{
    margin-top:3px;
    font-size:11px;
  }

  .toolbar-actions{
    display:contents;
  }

  .language-switcher{
    grid-area:language;
    justify-self:end;
    align-self:center;
  }

  .language-btn{
    min-width:30px;
    height:28px;
    padding:0 6px;
  }

  .search-wrap{
    grid-area:search;
    width:100%;
    height:38px;
    margin:0;
  }

  /* Las categorías de Finder pasan a ser una barra horizontal táctil. */
  .workspace{
    display:block;
    min-height:0;
  }

  .sidebar{
    display:block !important;
    width:100%;
    padding:9px 10px;
    border:0;
    border-bottom:1px solid var(--line);
    background:#171719;
  }

  .sidebar .brand,
  .sidebar nav > p,
  .sidebar-note{
    display:none !important;
  }

  .sidebar nav{
    display:flex;
    align-items:center;
    gap:6px;
    width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .sidebar nav::-webkit-scrollbar{
    display:none;
  }

  .side-item{
    flex:0 0 auto;
    width:auto;
    min-height:38px;
    margin:0;
    padding:8px 11px;
    gap:6px;
    border:1px solid transparent;
    border-radius:999px;
    font-size:13px;
    white-space:nowrap;
  }

  .side-item:hover{
    background:rgba(255,255,255,.055);
  }

  .side-item.active{
    background:#2b2b2f;
    border-color:rgba(255,255,255,.08);
  }

  .side-item .side-icon{
    width:18px !important;
    min-width:18px;
    font-size:14px;
    text-align:center;
  }

  .side-item .side-label{
    width:auto !important;
    max-width:none;
    overflow:visible;
    text-overflow:clip;
  }

  /* En móvil no hacen falta las dos columnas de Finder.
     La columna central ya contiene carpetas o piezas según el contexto. */
  .columns{
    display:block !important;
    min-width:0;
    min-height:0;
  }

  .folders-column{
    display:none !important;
  }

  .items-column{
    display:block;
    width:100%;
    min-height:calc(100svh - 170px);
    padding:8px 10px calc(36px + env(safe-area-inset-bottom));
    border:0;
    background:#121214;
    overflow:visible;
  }

  .items-column .column-header{
    position:static;
    padding:9px 5px 7px;
    border:0;
    background:transparent;
    font-size:12px;
  }

  #itemList .row{
    min-height:78px;
    margin:6px 0;
    padding:9px;
    gap:12px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:14px;
    background:#18181a;
  }

  #itemList .row:hover{
    background:#1d1d20;
  }

  #itemList .row.selected{
    background:#222226;
    border-color:rgba(255,255,255,.13);
  }

  #itemList .row .thumb{
    width:82px;
    height:60px;
    border-radius:10px;
  }

  #itemList .row .folder-icon{
    width:56px;
    min-width:56px;
    text-align:center;
    font-size:31px;
  }

  #itemList .row-title{
    font-size:16px;
  }

  #itemList .row-meta{
    margin-top:5px;
    font-size:12px;
    line-height:1.25;
  }

  #itemList .chevron{
    padding-right:2px;
    font-size:20px;
  }

  /* Una pieza se abre como una vista propia, en lugar de comprimirla
     al lado del listado como en escritorio. */
  .preview-panel{
    display:none !important;
    width:100%;
    min-width:0;
    min-height:0;
    padding:0 14px calc(42px + env(safe-area-inset-bottom));
    overflow:visible;
    background:#121214;
  }

  body.mobile-preview-open .items-column{
    display:none !important;
  }

  body.mobile-preview-open .preview-panel{
    display:block !important;
  }

  .mobile-back{
    width:40px;
    height:40px;
    margin:10px 14px 10px;
    padding:0;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.09);
    border-radius:50%;
    background:#1e1e21;
    color:#f4f4f5;
    font-size:28px;
    line-height:1;
    cursor:pointer;
  }

  body.mobile-preview-open .mobile-back{
    display:flex;
  }

  .statusbar{
    display:none !important;
  }

  /* Galerías */
  .insta-carousel-wrap{
    width:100%;
    max-width:none;
    margin:0;
  }

  .insta-carousel{
    width:100%;
    aspect-ratio:4/3;
    border-radius:15px;
  }

  .insta-slide img{
    border-radius:14px;
  }

  .carousel-dots{
    margin:10px 0 9px;
  }

  .folder-preview-strip{
    gap:7px;
    padding-bottom:6px;
  }

  .folder-preview-thumb{
    flex:0 0 72px;
    width:72px;
    height:54px;
  }

  .preview-title{
    margin:20px 0 6px;
    font-size:27px;
    line-height:1.05;
    letter-spacing:-.025em;
  }

  .preview-subtitle{
    margin-bottom:14px;
    font-size:13px;
  }

  .preview-copy{
    margin-bottom:0;
    font-size:15px;
    line-height:1.55;
  }

  .contrib{
    margin-top:20px;
  }

  .contrib-list span{
    padding:7px 9px;
    font-size:12px;
  }

  /* Vídeo y YouTube */
  .vertical-stage{
    width:100%;
    justify-content:center;
  }

  .vertical-stage video{
    width:auto !important;
    height:min(68svh,620px) !important;
    max-width:100%;
    border-radius:15px;
  }

  .project-video-stage video,
  .youtube-preview,
  .visual-channel{
    width:100%;
    border-radius:15px;
  }

  .youtube-play{
    width:58px;
    height:58px;
    font-size:21px;
  }

  .youtube-open{
    left:14px;
    bottom:13px;
    font-size:12px;
  }

  .visual-channel{
    aspect-ratio:4/3;
  }

  .channel-overlay{
    padding:16px;
    gap:10px;
  }

  .channel-overlay h2{
    font-size:31px;
  }

  .channel-overlay p{
    font-size:13px;
  }

  .channel-overlay > span{
    font-size:11px;
  }

  /* Audio */
  .audio-preview{
    width:100%;
    margin-bottom:14px;
  }

  .audio-art{
    border-radius:15px;
  }

  .audio-player-wrap{
    padding:10px;
  }

  /* Contacto */
  .contact-list-note{
    margin:6px 0;
    min-height:72px;
    border-radius:14px;
    background:#18181a;
  }

  .contact-screen{
    min-height:auto;
    padding:28px 2px 10px;
  }

  .contact-screen h1{
    font-size:52px;
  }

  .contact-intro{
    margin-bottom:30px;
    font-size:16px;
  }

  .contact-link{
    grid-template-columns:1fr auto;
    gap:6px 12px;
    min-height:86px;
    padding:12px 2px;
  }

  .contact-type{
    grid-column:1/-1;
  }

  .contact-link strong{
    min-width:0;
    overflow-wrap:anywhere;
    font-size:20px;
  }

  /* Resumen Todo, por si se muestra al volver de una pieza. */
  .all-summary{
    min-height:auto;
    padding:30px 2px;
  }

  .summary-grid{
    grid-template-columns:1fr;
  }

  .summary-card{
    min-height:96px;
  }
}

@media (max-width:390px){
  .language-btn{
    min-width:27px;
    padding:0 5px;
  }

  #itemList .row .thumb{
    width:74px;
    height:56px;
  }

  .side-item{
    padding-inline:10px;
  }

  .channel-overlay > span{
    display:none;
  }
}