/* Two-Column Layout - Shared CSS Module
 * Used by: App11 (El Plano), App12 (Plano-Sucesión)
 *
 * Provides a responsive 2-column grid layout with:
 * - Left column: Controls (buttons, toggles)
 * - Center-right column: Main content (grid, editor) - EXPANDED to fill all available space
 *
 * Replaces three-column-layout.css (which had an unused right column)
 * Apps can customize positioning via CSS custom properties
 */

/* ========== BASE 2-COLUMN GRID ========== */
.two-column-layout {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: var(--col-left, 250px) 1fr;
  gap: var(--layout-gap, 2rem);
  padding: var(--layout-padding, 1rem);
  width: 100%;
}

/* ========== CONTROLS CONTAINER (LEFT COLUMN) ========== */
.two-column-layout__controls {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: var(--controls-justify, flex-start);
  padding-top: var(--controls-padding-top, 20px);
  margin: var(--controls-margin, 20px);
}

/* Vertical layout support */
.two-column-layout__controls .controls[data-layout="vertical"] {
  flex-direction: column;
  gap: var(--controls-gap, 1.5rem);
  width: auto;
  height: auto;
  margin: var(--controls-inner-margin, 30px);
  position: static;
  align-items: flex-start;
}

/* Control buttons row */
.two-column-layout__controls .control-buttons-row {
  display: flex;
  flex-direction: column !important;
  gap: var(--buttons-gap, 0.5rem);
  align-items: var(--buttons-align, start);
}

/* Button row (Random + Reset in same row) */
.two-column-layout__controls .button-row {
  display: flex;
  flex-direction: row;
  gap: var(--button-row-gap, 1.5rem);
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

/* ========== MAIN CONTENT CONTAINER (CENTER-RIGHT COLUMN) ========== */
.two-column-layout__main {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  position: relative;
  /* Expands to fill all available horizontal space (no right column) */
}

/* ========== RESPONSIVE BREAKPOINTS ========== */
/* Standard breakpoints for Apps 11-12 */

@media (max-width: 900px) {
  .two-column-layout {
    grid-template-columns: var(--col-left-tablet, 80px) 1fr;
    gap: var(--layout-gap-tablet, 0.8rem);
    padding: var(--layout-padding-tablet, 0.4rem);
  }

  .two-column-layout__controls {
    margin: var(--controls-margin-tablet, 8px);
  }
}

@media (max-width: 768px) {
  .two-column-layout {
    grid-template-columns: var(--col-left-mobile, 70px) 1fr;
    gap: var(--layout-gap-mobile, 0.6rem);
    padding: var(--layout-padding-mobile, 0.3rem);
  }

  .two-column-layout__controls {
    margin: var(--controls-margin-mobile, 5px);
  }
}

@media (max-width: 600px) {
  .two-column-layout {
    grid-template-columns: var(--col-left-small, 55px) 1fr;
    gap: var(--layout-gap-small, 0.5rem);
    padding: var(--layout-padding-small, 0.25rem);
  }

  .two-column-layout__controls {
    margin: var(--controls-margin-small, 4px);
  }
}

@media (max-width: 480px) {
  .two-column-layout {
    grid-template-columns: var(--col-left-tiny, 50px) 1fr;
    gap: var(--layout-gap-tiny, 0.4rem);
    padding: var(--layout-padding-tiny, 0.2rem);
  }

  .two-column-layout__controls {
    margin: var(--controls-margin-tiny, 3px);
  }
}

@media (max-width: 400px) {
  .two-column-layout {
    grid-template-columns: var(--col-left-ultra, 45px) 1fr;
    gap: var(--layout-gap-ultra, 0.3rem);
    padding: var(--layout-padding-ultra, 0.15rem);
  }

  .two-column-layout__controls {
    margin: var(--controls-margin-ultra, 2px);
  }

  /* Ocultar botones secundarios en pantallas ultra-pequeñas */
  .two-column-layout__controls .random,
  .two-column-layout__controls .reset,
  .two-column-layout__controls .tap {
    display: none !important;
  }
}