/* ==========================================================
   UTILIDADES FLEX
   Librería CSS reutilizable para maquetación con Flexbox
   Uso:
   <link rel="stylesheet" href="utilidades-flex.css">
   ========================================================== */


/* ==========================================================
   1. ACTIVAR FLEX
   ========================================================== */

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}


/* ==========================================================
   2. DIRECCIÓN DE LOS ELEMENTOS
   ========================================================== */

.flex-fila {
  flex-direction: row;
}

.flex-fila-inversa {
  flex-direction: row-reverse;
}

.flex-columna {
  flex-direction: column;
}

.flex-columna-inversa {
  flex-direction: column-reverse;
}


/* ==========================================================
   3. SALTO DE LÍNEA
   ========================================================== */

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-inverso {
  flex-wrap: wrap-reverse;
}


/* ==========================================================
   4. ALINEACIÓN HORIZONTAL
   justify-content
   En flex-direction: row afecta al eje horizontal.
   ========================================================== */

.justify-inicio {
  justify-content: flex-start;
}

.justify-centro {
  justify-content: center;
}

.justify-final {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}


/* ==========================================================
   5. ALINEACIÓN VERTICAL
   align-items
   En flex-direction: row afecta al eje vertical.
   ========================================================== */

.items-inicio {
  align-items: flex-start;
}

.items-centro {
  align-items: center;
}

.items-final {
  align-items: flex-end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}


/* ==========================================================
   6. ALINEACIÓN DE VARIAS LÍNEAS
   align-content
   Solo tiene efecto cuando hay flex-wrap.
   ========================================================== */

.content-inicio {
  align-content: flex-start;
}

.content-centro {
  align-content: center;
}

.content-final {
  align-content: flex-end;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-evenly {
  align-content: space-evenly;
}

.content-stretch {
  align-content: stretch;
}


/* ==========================================================
   7. ALINEACIÓN INDIVIDUAL DE UN ELEMENTO
   align-self
   Se aplica al hijo, no al contenedor.
   ========================================================== */

.self-auto {
  align-self: auto;
}

.self-inicio {
  align-self: flex-start;
}

.self-centro {
  align-self: center;
}

.self-final {
  align-self: flex-end;
}

.self-stretch {
  align-self: stretch;
}

.self-baseline {
  align-self: baseline;
}


/* ==========================================================
   8. CRECIMIENTO DE LOS HIJOS
   flex-grow
   Se aplica al hijo.
   ========================================================== */

.grow-0 {
  flex-grow: 0;
}

.grow-1 {
  flex-grow: 1;
}

.grow-2 {
  flex-grow: 2;
}

.grow-3 {
  flex-grow: 3;
}


/* ==========================================================
   9. REDUCCIÓN DE LOS HIJOS
   flex-shrink
   Se aplica al hijo.
   ========================================================== */

.shrink-0 {
  flex-shrink: 0;
}

.shrink-1 {
  flex-shrink: 1;
}


/* ==========================================================
   10. TAMAÑO BASE DEL HIJO
   flex-basis
   Se aplica al hijo.
   ========================================================== */

.basis-auto {
  flex-basis: auto;
}

.basis-0 {
  flex-basis: 0;
}

.basis-25 {
  flex-basis: 25%;
}

.basis-33 {
  flex-basis: 33.333%;
}

.basis-50 {
  flex-basis: 50%;
}

.basis-66 {
  flex-basis: 66.666%;
}

.basis-75 {
  flex-basis: 75%;
}

.basis-100 {
  flex-basis: 100%;
}

.basis-150px {
  flex-basis: 150px;
}

.basis-200px {
  flex-basis: 200px;
}

.basis-250px {
  flex-basis: 250px;
}

.basis-300px {
  flex-basis: 300px;
}


/* ==========================================================
   11. PROPIEDAD FLEX COMPLETA
   Se aplica al hijo.
   ========================================================== */

.flex-0 {
  flex: 0 0 auto;
}

.flex-1 {
  flex: 1 1 0;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}


/* ==========================================================
   12. ORDEN DE LOS HIJOS
   Se aplica al hijo.
   ========================================================== */

.orden-0 {
  order: 0;
}

.orden-1 {
  order: 1;
}

.orden-2 {
  order: 2;
}

.orden-3 {
  order: 3;
}

.orden-4 {
  order: 4;
}

.orden-5 {
  order: 5;
}

.orden-primero {
  order: -999;
}

.orden-ultimo {
  order: 999;
}


/* ==========================================================
   13. SEPARACIÓN ENTRE ELEMENTOS
   gap
   ========================================================== */

.gap-0 {
  gap: 0;
}

.gap-5 {
  gap: 5px;
}

.gap-10 {
  gap: 10px;
}

.gap-15 {
  gap: 15px;
}

.gap-20 {
  gap: 20px;
}

.gap-25 {
  gap: 25px;
}

.gap-30 {
  gap: 30px;
}

.gap-40 {
  gap: 40px;
}


/* Separación horizontal */

.gap-x-5 {
  column-gap: 5px;
}

.gap-x-10 {
  column-gap: 10px;
}

.gap-x-20 {
  column-gap: 20px;
}

.gap-x-30 {
  column-gap: 30px;
}


/* Separación vertical */

.gap-y-5 {
  row-gap: 5px;
}

.gap-y-10 {
  row-gap: 10px;
}

.gap-y-20 {
  row-gap: 20px;
}

.gap-y-30 {
  row-gap: 30px;
}


/* ==========================================================
   14. ATAJOS FRECUENTES
   ========================================================== */

.flex-centro {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-centro-horizontal {
  display: flex;
  justify-content: center;
}

.flex-centro-vertical {
  display: flex;
  align-items: center;
}

.flex-between-centro {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-around-centro {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-evenly-centro {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.flex-columna-centro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* ==========================================================
   15. ANCHOS ÚTILES
   ========================================================== */

.ancho-25 {
  width: 25%;
}

.ancho-33 {
  width: 33.333%;
}

.ancho-50 {
  width: 50%;
}

.ancho-66 {
  width: 66.666%;
}

.ancho-75 {
  width: 75%;
}

.ancho-100 {
  width: 100%;
}


/* ==========================================================
   16. ALTOS ÚTILES
   ========================================================== */

.alto-100 {
  height: 100%;
}

.min-alto-100vh {
  min-height: 100vh;
}

.alto-50vh {
  height: 50vh;
}

.alto-100vh {
  height: 100vh;
}


/* ==========================================================
   17. RESPONSIVE
   A partir de 768px hacia abajo.
   ========================================================== */

@media (max-width: 768px) {

  .movil-flex {
    display: flex;
  }

  .movil-columna {
    flex-direction: column;
  }

  .movil-fila {
    flex-direction: row;
  }

  .movil-wrap {
    flex-wrap: wrap;
  }

  .movil-nowrap {
    flex-wrap: nowrap;
  }

  .movil-justify-inicio {
    justify-content: flex-start;
  }

  .movil-justify-centro {
    justify-content: center;
  }

  .movil-justify-final {
    justify-content: flex-end;
  }

  .movil-items-inicio {
    align-items: flex-start;
  }

  .movil-items-centro {
    align-items: center;
  }

  .movil-items-final {
    align-items: flex-end;
  }

  .movil-ancho-100 {
    width: 100%;
  }

  .movil-basis-100 {
    flex-basis: 100%;
  }

  .movil-flex-1 {
    flex: 1 1 100%;
  }

}


/* ==========================================================
   18. CLASES VISUALES OPCIONALES PARA PRUEBAS
   Puedes eliminarlas si solo quieres la librería flex.
   ========================================================== */

.flex-demo-caja {
  padding: 12px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  border-radius: 6px;
}

.flex-demo-contenedor {
  padding: 15px;
  border: 1px dashed #999;
  background: #fafafa;
  margin-bottom: 20px;
}