/**
 * @file
 * iPAD HORIZONTAL / LAPTOP PEQUENA  ·  1024px - 1279px
 *
 * Ver la escalera completa de tamanos en 320.css.
 *
 * A este ancho ya sirve el diseno de escritorio; aqui solo se ajusta lo que
 * queda holgado o apretado.
 */

@media only screen and (min-width: 1024px) and (max-width: 1279px) {

  /* ---------------------------------------------------------------------
     Cabecera
     Con el menu interno completo (14 enlaces) no caben en una fila a este
     ancho: se parten en tres y la cabecera se va a 167px. Aqui el menu pasa a
     una sola fila con desplazamiento lateral, igual que en tablet.
     --------------------------------------------------------------------- */
  #header .region-header {
    flex-wrap: nowrap;
    column-gap: 14px;
  }

  .logo-website img {
    max-height: 48px;
  }

  .menu-principal ul.navbar-nav,
  .menu-plataforma ul.navbar-nav {
    margin: 8px 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .menu-principal ul.navbar-nav::-webkit-scrollbar,
  .menu-plataforma ul.navbar-nav::-webkit-scrollbar {
    display: none;
  }

  .menu-principal ul.navbar-nav li a,
  .menu-plataforma ul.navbar-nav li a {
    padding: 10px 12px;
    font-size: 15px;
  }

  /* Supervisor: con 8 enlaces este menu se desborda, y un contenedor centrado
     que se desborda deja su inicio fuera del alcance del scroll. Los margenes
     automaticos lo centran cuando cabe y lo alinean al inicio cuando no; la
     barra fina permite desplazarlo tambien con mouse. */
  body.role-supervisor .menu-plataforma ul.navbar-nav {
    justify-content: flex-start;
    scrollbar-width: thin;
  }

  body.role-supervisor .menu-plataforma ul.navbar-nav > li:first-child {
    margin-left: auto;
  }

  body.role-supervisor .menu-plataforma ul.navbar-nav > li:last-child {
    margin-right: auto;
  }

  body.role-supervisor .menu-plataforma ul.navbar-nav::-webkit-scrollbar {
    display: block;
    height: 4px;
  }

  body.role-supervisor .menu-plataforma ul.navbar-nav::-webkit-scrollbar-thumb {
    background: #c9ced8;
    border-radius: 4px;
  }

  /* ---------------------------------------------------------------------
     Portada
     --------------------------------------------------------------------- */
  .slider-principal .views-hero-slider,
  .slider-principal .view-slider-principal .views-slider-slider-image img {
    height: 420px;
  }

  .bloque-principal .field--name-body ul {
    display: grid;
    width: 100%;
    margin: -50px 0 0;
    padding: 0 32px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .bloque-principal .field--name-body ul li {
    width: auto;
    margin: 0;
    float: none;
  }

  .bloque-principal .field--name-body ul li a {
    display: flex;
    width: auto;
    height: auto;
    min-height: 130px;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    font-size: 18px;
  }

  /* ---------------------------------------------------------------------
     Contenido
     --------------------------------------------------------------------- */
  #main {
    padding: 30px 32px;
  }

}