/* START DEBUG PADDING */
.flow-container::before {
  display: none;
}

/* END DEBUG PADDING  */

/* Layout System */

:root {
  --flow-container-max-width: 1440px;
  --flow-container-datapanel-max-width: 1600px;
  --padding-desktop: 60px;
  --padding-tablet: 12px;
  --padding-mobile: 12px;
  --gap-desktop: 24px;
  --gap-tablet: 20px;
  --gap-mobile: 16px;
  /* Padding para elementos full-width que necesitan su contenido alineado con la grid:
  en viewports > 1440px el padding crece para mantener el contenido alineado con .flow-container */
  --full-width-aligned-padding: max(var(--padding-desktop), calc((100% - var(--flow-container-max-width)) / 2 + var(--padding-desktop)));
}

/* Desktop medium */
@media (max-width: 1279px) {
  :root {
    --flow-container-max-width: 1442px !important;
  }
}



/* Laptop */
@media (max-width: 1023px) {}

/* Tablet */
@media (max-width: 767px) {}

/* flow-container: max-width 1440px, grid de 12 columnas */
.flow-container {
  display: grid;
  box-sizing: border-box;
  max-width: var(--flow-container-max-width);
  padding-inline: var(--padding-desktop);
  column-gap: var(--gap-desktop);
  grid-template-columns: repeat(12, 1fr);
  margin-inline: auto;
  position: relative;
}

.flow-container-nogrid {
  max-width: var(--flow-container-max-width);
  padding-inline: var(--padding-desktop);
  column-gap: var(--gap-desktop);
  margin-inline: auto;
  position: relative;

}

.flow-container::before {
  position: absolute;
  content: "padding";
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transform: rotate(-90deg);
  outline: solid;
  height: fit-content;
  line-height: 1;
  font-size: 10px;

  @media (max-width: 768px) {
    left: -10px;
  }
}

/* Full-width: ocupa todo el ancho, con padding que alinea el contenido a la grid en pantallas anchas */
.full-width {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--full-width-aligned-padding);
}

/* Full-width-gridded: equivalente a .flow-container — usar preferiblemente .flow-container */
.full-width-gridded {
  box-sizing: border-box;
  display: grid;
  max-width: var(--flow-container-max-width);
  padding-inline: var(--padding-desktop);
  column-gap: var(--gap-desktop);
  grid-template-columns: repeat(12, 1fr);
  margin-inline: auto;
  position: relative;
}

/* Tablet */
@media (max-width: 1024px) {
  .flow-container {
    padding-inline: var(--padding-tablet);
    column-gap: var(--gap-tablet);
    grid-template-columns: repeat(8, 1fr);
  }

  .flow-container-nogrid {
    padding-inline: var(--padding-tablet);
  }

  .full-width-gridded {
    padding-inline: var(--padding-tablet);
    column-gap: var(--gap-tablet);
    grid-template-columns: repeat(8, 1fr);
  }

  /* .full-width no necesita override: --full-width-aligned-padding resuelve a var(--padding-tablet) automáticamente */
}

/* Mobile */
@media (max-width: 768px) {
  .flow-container {
    padding-inline: var(--padding-mobile);
    column-gap: var(--gap-mobile);
    grid-template-columns: repeat(4, 1fr);
  }

  .flow-container-nogrid {
    padding-inline: var(--padding-mobile);
  }

  .full-width-gridded {
    padding-inline: var(--padding-mobile);
    column-gap: var(--gap-mobile);
    grid-template-columns: repeat(4, 1fr);
  }

  /* .full-width no necesita override: --full-width-aligned-padding resuelve a var(--padding-mobile) automáticamente */
}

/* ==============================
   Column Span Utilities
   flow-cols-{1..12}    → default (all sizes)
   md\:flow-cols-{1..12} → tablet+ (min-width: 769px)
   lg\:flow-cols-{1..12} → desktop+ (min-width: 1025px)
   ============================== */

/* Base: all breakpoints */
.flow-cols-1 {
  grid-column: span 1;
}

.flow-cols-2 {
  grid-column: span 2;
}

.flow-cols-3 {
  grid-column: span 3;
}

.flow-cols-4 {
  grid-column: span 4;
}

.flow-cols-5 {
  grid-column: span 5;
}

.flow-cols-6 {
  grid-column: span 6;
}

.flow-cols-7 {
  grid-column: span 7;
}

.flow-cols-8 {
  grid-column: span 8;
}

.flow-cols-9 {
  grid-column: span 9;
}

.flow-cols-10 {
  grid-column: span 10;
}

.flow-cols-11 {
  grid-column: span 11;
}

.flow-cols-12 {
  grid-column: span 12;
}

/* md: tablet and up (≥769px) */
@media (min-width: 769px) {
  .md\:flow-cols-1 {
    grid-column: span 1;
  }

  .md\:flow-cols-2 {
    grid-column: span 2;
  }

  .md\:flow-cols-3 {
    grid-column: span 3;
  }

  .md\:flow-cols-4 {
    grid-column: span 4;
  }

  .md\:flow-cols-5 {
    grid-column: span 5;
  }

  .md\:flow-cols-6 {
    grid-column: span 6;
  }

  .md\:flow-cols-7 {
    grid-column: span 7;
  }

  .md\:flow-cols-8 {
    grid-column: span 8;
  }
}

/* lg: desktop and up (≥1025px) */
@media (min-width: 1025px) {
  .lg\:flow-cols-1 {
    grid-column: span 1;
  }

  .lg\:flow-cols-2 {
    grid-column: span 2;
  }

  .lg\:flow-cols-3 {
    grid-column: span 3;
  }

  .lg\:flow-cols-4 {
    grid-column: span 4;
  }

  .lg\:flow-cols-5 {
    grid-column: span 5;
  }

  .lg\:flow-cols-6 {
    grid-column: span 6;
  }

  .lg\:flow-cols-7 {
    grid-column: span 7;
  }

  .lg\:flow-cols-8 {
    grid-column: span 8;
  }

  .lg\:flow-cols-9 {
    grid-column: span 9;
  }

  .lg\:flow-cols-10 {
    grid-column: span 10;
  }

  .lg\:flow-cols-11 {
    grid-column: span 11;
  }

  .lg\:flow-cols-12 {
    grid-column: span 12;
  }
}
.page-node-type-data-page .flow-container {
  --flow-container-max-width: var(--flow-container-datapanel-max-width);
}

.user-login-form {
    background: var(--nexo-color-primary);
    color: white;
    padding: 2rem;
    width: fit-content;
}
.user-login-form input:not(.form-submit) {
    border: solid 1px white;
    width: fit-content;
}