/* ===== Controles específicos de escritorio ===== */

.sidebar-version{
  display:none;
}

.photo-folders-column{
  display:none;
}

@media (min-width:821px){
  /*
     Fotos mantiene el comportamiento de Finder, pero muestra únicamente
     las columnas útiles en cada nivel:

     1) Fotos -> Categorías | Fotos
     2) Subcarpeta -> Categorías | Fotos | contenido de la subcarpeta
     3) Trabajo seleccionado -> Fotos | contenido de la subcarpeta | preview

     Las columnas conservan las mismas anchuras que el resto de la web.
  */
  .columns.photos-columns{
    grid-template-columns:290px 330px 330px minmax(0,1fr);
  }

  .columns.photos-columns .photo-folders-column{
    display:block;
  }

  /* Nivel Fotos: todavía no hay una subcarpeta seleccionada. */
  .columns.photos-columns:not(.photos-folder-selected){
    grid-template-columns:290px 330px minmax(0,1fr);
  }

  .columns.photos-columns:not(.photos-folder-selected) .items-column{
    display:none;
  }

  /* Al seleccionar un trabajo, Categorías deja paso al preview.
     Se usa el estado real de navegación, no la clase visual temporal .selected. */
  .columns.photos-columns.photos-item-selected{
    grid-template-columns:290px 330px minmax(0,1fr);
  }

  .columns.photos-columns.photos-item-selected .folders-column{
    display:none;
  }

  /* Contacto usa todo el espacio de contenido, sin columnas Finder intermedias. */
  .columns:has(.contact-screen){
    grid-template-columns:minmax(0,1fr);
  }

  .columns:has(.contact-screen) .folders-column,
  .columns:has(.contact-screen) .photo-folders-column,
  .columns:has(.contact-screen) .items-column{
    display:none !important;
  }

  .columns:has(.contact-screen) .preview-panel{
    grid-column:1 / -1;
  }

  /* La versión hereda el estilo de la localización y queda deliberadamente sutil. */
  .sidebar-note .sidebar-version{
    display:block;
    margin-top:5px;
    padding:0;
    color:inherit;
    font-size:.70em;
    line-height:1.45;
    letter-spacing:.14em;
    font-weight:500;
    opacity:.42;
  }

  /* La barra lateral entra también en la navegación tipo Finder. */
  .side-item.keyboard-selected{
    background:linear-gradient(180deg,#287cf0 0%,#1264d2 100%) !important;
    color:#fff;
  }

  .side-item.keyboard-selected .side-label,
  .side-item.keyboard-selected .side-icon{
    color:#fff;
  }

  .desktop-carousel-controls{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    aspect-ratio:4/3;
    pointer-events:none;
    z-index:6;
  }

  .desktop-carousel-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid rgba(255,255,255,.09);
    border-radius:50%;
    background:rgba(18,18,20,.34);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    color:rgba(255,255,255,.76);
    font-size:0;
    line-height:1;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    box-shadow:0 3px 12px rgba(0,0,0,.12);
    transition:background .18s ease,color .18s ease,opacity .18s ease,transform .18s ease,border-color .18s ease;
  }

  /* SVG en máscara con viewBox simétrico: el chevron queda centrado geométricamente. */
  .desktop-carousel-nav::before{
    content:"";
    display:block;
    width:12px;
    height:12px;
    flex:0 0 12px;
    background:currentColor;
    -webkit-mask-position:center;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:12px 12px;
    mask-position:center;
    mask-repeat:no-repeat;
    mask-size:12px 12px;
  }

  .desktop-carousel-nav.previous::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7.5 2.25 3.75 6l3.75 3.75' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7.5 2.25 3.75 6l3.75 3.75' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .desktop-carousel-nav.next::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m4.5 2.25 3.75 3.75L4.5 9.75' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m4.5 2.25 3.75 3.75L4.5 9.75' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* Los controles solo aparecen al entrar con el ratón en la galería.
     focus-within mantiene accesibilidad al navegar con teclado. */
  .insta-carousel-wrap:hover .desktop-carousel-nav,
  .insta-carousel-wrap:focus-within .desktop-carousel-nav{
    opacity:.82;
    pointer-events:auto;
  }

  .desktop-carousel-nav:hover:not(:disabled),
  .desktop-carousel-nav:focus-visible:not(:disabled){
    opacity:1;
    color:#fff;
    background:rgba(24,24,27,.62);
    border-color:rgba(255,255,255,.15);
    transform:translateY(-50%) scale(1.03);
  }

  .desktop-carousel-nav.previous{
    left:10px;
  }

  .desktop-carousel-nav.next{
    right:10px;
  }

  .desktop-carousel-nav:disabled{
    opacity:0 !important;
    pointer-events:none !important;
    cursor:default;
  }

  .desktop-carousel-nav:focus-visible{
    outline:1px solid rgba(255,255,255,.55);
    outline-offset:2px;
  }
}