/* Estilos generales */
body {
  background: #f2f2f2;
  font-family: Arial, sans-serif;
}

.container {
  border: 1px solid #000;
  margin: 10px;
  padding: 10px;
  display: flex;
  gap: 10px;
  background: #f8f8f8;
}

.item {
  background: blue;
  color: white;
  text-align: center;
  padding: 20px;
  flex: 1;
}

/* ===================== */
/* Fila 1: 4 cajas iguales */
.row1 .item {
  flex: 1;
}

/* ===================== */
/* Fila 2: la caja central más ancha */
.row2 .item:nth-child(2) {
  flex: 2;
}

/* ===================== */
/* Fila 3: la caja central más angosta */
.row3 .item:nth-child(2) {
  flex: 1;
}
.row3 .item:nth-child(1),
.row3 .item:nth-child(3) {
  flex: 2;
}

/* ===================== */
/* Fila 4: 5 cajas pequeñas en orden distinto */
.row4 {
  justify-content: left;
}
.row4 .item {
  flex: 0 0 60px;
}

/* ===================== */
/* Fila 5: barra vertical izquierda y otras cajas distribuidas */
.row5 {
  height: 400px;
  display: flex;
}

.row5 .alto {
  flex: 0 0 60px;   /* ancho fijo */
  height: 90%;     /* ocupa toda la altura */
}

.row5 .columna {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* distribuye arriba, centro, abajo */
  align-items: center;
}
.row5 .columna .item {
  flex: none;
  width: 60px;
}