/*
 * Adaptación a pantallas estrechas.
 * Recoge los tres puntos de ruptura del proyecto, que son 1100 px para la tableta ancha, 860 px para la tableta estrecha y el móvil apaisado, y 560 px para el móvil de pie.
 * Ocupa el sexto lugar de la cascada porque solo corrige lo que las hojas anteriores ya dejaron escrito, de modo que aquí no aparece ningún componente nuevo.
 * El menú lateral se declara aquí entero, dado que en el escritorio no existe y las pestañas se ven de corrido.
 */

/* ------------------------------------------------------------
   Hasta 860 px: Las pestañas pasan a menú lateral.
   ------------------------------------------------------------ */

@media (max-width: 860px) {
  /*
   * La cabecera renuncia al desenfoque del fondo mientras el menú es lateral.
   * Un filtro de fondo convierte a la cabecera en el bloque contenedor de todo lo que lleve posición fija dentro de ella, y con él puesto el panel lateral se encogía a la altura de la propia cabecera en lugar de ocupar el alto de la pantalla.
   */
  .cabecera {
    background: var(--superficie);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Los dos botones de la cabecera se pintan por encima del panel abierto, porque el del menú es también el que lo cierra y quedaba tapado por debajo de él. */
  .cabecera .boton-icono {
    position: relative;
    z-index: 31;
  }

  /* El selector repite las dos clases del botón para que esta regla pese lo mismo que la que lo oculta en el escritorio y gane por venir después. */
  .boton-icono.boton-menu {
    display: inline-grid;
    order: 3;
  }

  /*
   * El menú se sale de la pantalla en lugar de ocultarse del todo.
   * De ese modo conserva su sitio en el orden de lectura y la transición tiene algo que mover.
   * El panel cuelga de la cabecera, así que su nivel se compara con el de sus hermanos y no con el del resto de la página.
   */
  .nav-principal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: min(288px, 82vw);
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 74px 16px 24px;
    overflow-y: auto;
    background: var(--superficie);
    border-left: 1px solid var(--borde);
    box-shadow: var(--sombra-alta);
    transform: translateX(102%);
    visibility: hidden;
    transition: transform var(--transicion), visibility var(--transicion);
  }

  .nav-principal.nav-abierta {
    transform: none;
    visibility: visible;
  }

  .nav-enlace {
    padding: 11px 14px;
    border-radius: var(--radio-s);
    font-size: 0.96rem;
  }

  .rejilla-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .barras-bloque {
    grid-template-columns: minmax(0, 1fr);
  }

  .lista,
  .rejilla {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  }

  main {
    padding: 22px 16px 70px;
  }

  .heroe {
    padding: 34px 8px 26px;
  }

  .modal {
    max-height: 92vh;
    padding: 20px;
  }
}

/* ------------------------------------------------------------
   Hasta 560 px: Una sola columna y tablas con desplazamiento propio.
   ------------------------------------------------------------ */

@media (max-width: 560px) {
  .cabecera-contenido {
    padding: 9px 14px;
    gap: 10px;
  }

  .marca {
    font-size: 1rem;
  }


  main {
    padding: 18px 14px 60px;
  }

  .lista,
  .rejilla,
  .cifras {
    grid-template-columns: minmax(0, 1fr);
  }

  .heroe-acciones .boton {
    width: 100%;
    justify-content: center;
  }

  .barra-herramientas {
    gap: 10px;
  }

  .campo-busqueda {
    flex: 1 1 100%;
  }

  /* La tabla conserva su ancho mínimo y se desplaza dentro de su envoltorio, porque partirla en renglones pierde la comparación entre columnas. */
  .tabla-envoltorio {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabla {
    font-size: 0.86rem;
  }

  .tabla th,
  .tabla td {
    padding: 7px 9px;
  }

  .panel {
    padding: 18px 16px;
  }

  .resultado-area {
    grid-template-columns: minmax(0, 1fr) 58px;
  }
}