/* -------------------------------------------------------------------------
   Navegación entre proyectos — punto 5 del documento de la clienta
   · Escritorio: las flechas se quedan siempre a la misma altura, sin que las
     mueva la longitud del texto de la descripción.
   · Móvil: barra fija en la parte baja de la pantalla, como la barra fija
     de arriba con el logo y el botón de menú.
   Se carga después de mycss.css. Nada de esto pisa estilos existentes fuera
   de la ficha de proyecto.
   ------------------------------------------------------------------------- */

/* ============================ ESCRITORIO ============================ */
/* Escritorio y tablet apaisada. La vertical va por el bloque de abajo. */
@media (min-width: 1025px), (min-width: 769px) and (orientation: landscape) {

  /* El problema: .sidebar-inner era flex con justify-content:space-between y
     tres hijos (cabecera, flechas, redes). Las flechas quedaban flotando en el
     hueco sobrante, así que subían o bajaban según lo largo que fuese el texto.
     Con grid, la cabecera se queda con todo el espacio libre (1fr) y las dos
     filas de abajo se anclan a una distancia constante del borde inferior. */
  .sidebar_proyectos .sidebar-inner {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    align-content: stretch;
    height: 100%;
  }

  /* Si algún proyecto llevase una descripción larga, se desplaza dentro de su
     propia caja en lugar de empujar las flechas hacia abajo. */
  .sidebar_proyectos .sidebar-inner > .sidebar_header {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .sidebar_proyectos .sidebar-inner > .sidebar_header::-webkit-scrollbar {
    display: none;
  }

  /* Altura propia y constante para la fila de flechas. */
  footer.sidebar_footer.sidebar_footer_escritorio {
    min-height: 84px;
    align-items: center;
    flex: none;
  }
}

/* ============================== MÓVIL ============================== */
/* La tablet en vertical se comporta como el movil.
   El tema solo tenia un corte, en 768px: por encima, todo era escritorio. Eso
   dejaba a una tablet vertical (810-1024px) con la barra lateral fija comiendose
   340px y la foto en un hueco de proporcion 0,43 —una tira vertical del 22 % de
   la imagen—. La condicion de orientacion evita tocar el escritorio ni las
   tablets apaisadas, que ahi el ancho si da de si. */
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {

  footer.sidebar_footer.sidebar_footer_movil {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;              /* por debajo de .c-header (1000) y del menú desplegable (900) */
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    min-height: 52px;
    padding: 0 4vw;
    /* Sin esto, en iPhone la barra queda debajo del indicador de inicio. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid #e8e8e8;
  }

  footer.sidebar_footer_movil .col_arrow {
    width: 33.3333%;
  }

  /* Área de pulsación de 44 px, que es el mínimo cómodo con el dedo.
     Se excluye .grid-links: sus puntitos se montan con float, y un contenedor
     flex anula los floats y los deja alineados en una sola línea. */
  footer.sidebar_footer_movil .col_arrow > a:not(.grid-links) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
  }

  footer.sidebar_footer_movil .col_arrow svg {
    width: 34px;
    height: 34px;
  }

  footer.sidebar_footer_movil .grid-links {
    display: block;
    margin: 0 auto;
    padding: 15px 22px 15px 15px;
  }

  /* Que la barra no tape el final del contenido ni el pie. */
  main#single_proyectos {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }
}

/* Cuando el menú desplegable está abierto, la barra estorba. */
.has-nav-open footer.sidebar_footer_movil {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}