/* ESTRUCTURA
   Pantalla ancha:   barra superior (marca, pestañas Diseño | Mis planos)
                     Diseño:     [ barra del plano / plano / estado | datos ]
                     Mis planos: la biblioteca a pantalla completa
   Pantalla angosta: sin barra superior; abajo una navegación Plano / Datos / Planos. */

.app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--alto-barra) minmax(0, 1fr);
}

.vistas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

/* ---------- Diseño: barra del plano + plano + datos ----------
   El panel de datos ocupa toda la altura de la derecha; la barra del plano solo cubre la columna del plano. */
.diseno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ancho-datos);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "barra datos"
    "escenario datos";
  min-width: 0;
  min-height: 0;
}
.cabecera { grid-area: barra; }
.escenario { grid-area: escenario; }
.datos { grid-area: datos; }

.cabecera {
  position: relative;
  z-index: 10; /* el menú Exportar se abre por encima del plano */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--alto-cabecera);
  padding: 8px 22px;
  background: var(--grafito);
  border-bottom: 1px solid var(--riel);
}
.cabecera__nombre { flex: 1 1 auto; min-width: 0; }
.cabecera__acciones { display: flex; flex: none; gap: 10px; }

.escenario {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto; /* barra de la práctica (si se ve) · mesa · estado */
  min-width: 0;
  min-height: 0;
}
.escenario > .practica-barra { grid-row: 1; }
.escenario > .mesa { grid-row: 2; }
.escenario > .estado { grid-row: 3; }

/* Constructor: tres bloques separados por una línea fina, sin tarjetas dentro de tarjetas */
.datos {
  min-height: 0;
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--riel);
}

.navegacion { display: none; }

/* ---------- Pantallas angostas ---------- */
@media (max-width: 1099px) {
  .app { grid-template-rows: minmax(0, 1fr) auto; }
  .app > .barra { display: none; }

  .diseno {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "barra"
      "contenido";
  }
  .escenario, .datos { grid-area: contenido; }
  .datos { border-left: 0; }
  .app[data-panel="plano"] .datos { display: none; }
  .app[data-panel="datos"] .escenario { display: none; }

  .navegacion { display: grid; }
}

@media (max-width: 720px) {
  .cabecera { gap: 8px; padding: 8px 12px; }
  .cabecera__acciones { gap: 6px; }
  .cabecera__acciones .boton__texto, .cabecera__acciones .menu__flecha { display: none; }
  .cabecera .cabecera__acciones .boton { padding: 0; width: 42px; justify-content: center; }
  /* El menú de planos se ancla a la barra y no al botón, para no salirse de la pantalla */
  .cabecera .nombre .menu { position: static; }
}