/* ==========================================================
   MGYM sections.css v258
   ----------------------------------------------------------
   Archivo dedicado SOLO a estructura funcional:
   - Layouts
   - Grids
   - Anchuras
   - Espaciados
   - Modales
   - Responsive

   La estética visual debe seguir en:
   mgym-acero-space-final-v258.css
   ========================================================== */


/* ==========================================================
   01. CONTENEDORES PRINCIPALES DE PÁGINA
   ----------------------------------------------------------
   Define el ancho máximo, centrado general y padding base
   de las principales pantallas del sistema.
   ========================================================== */

.mgym-ent-page,
.mgym-lib-page--v11,
.mgym-routines-page,
.mgym-html-config-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 18px 56px;
  box-sizing: border-box;
}


/* ==========================================================
   02. BOX-SIZING GLOBAL INTERNO
   ----------------------------------------------------------
   Aplica box-sizing a todos los elementos internos de las
   páginas MGYM para evitar desbordes por padding/bordes.
   ========================================================== */

.mgym-ent-page *,
.mgym-lib-page--v11 *,
.mgym-routines-page *,
.mgym-html-config-page *,
.mgym-ent-page *::before,
.mgym-lib-page--v11 *::before,
.mgym-routines-page *::before,
.mgym-html-config-page *::before,
.mgym-ent-page *::after,
.mgym-lib-page--v11 *::after,
.mgym-routines-page *::after,
.mgym-html-config-page *::after {
  box-sizing: border-box;
}


/* ==========================================================
   03. HERO / CABECERA DE ENTRENOS
   ----------------------------------------------------------
   Bloque superior de la página de entrenos.
   Usa grid con dos columnas:
   - Columna principal de texto
   - Columna secundaria de apoyo visual o contenido lateral
   ========================================================== */

.mgym-ent-page__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 24px;
  padding: 30px;
  margin-bottom: 22px;
}


/* Limita la anchura del texto para mejorar lectura */
.mgym-ent-page__text {
  max-width: 680px;
}


/* ==========================================================
   04. ACCIONES / BOTONERAS GENERALES
   ----------------------------------------------------------
   Contenedores de botones principales.
   Permiten salto de línea en móvil o cuando no hay espacio.
   ========================================================== */

.mgym-ent-page__actions,
.mgym-ent-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}


/* ==========================================================
   05. GRIDS GENERALES DE ENTRENOS Y FORMULARIOS
   ----------------------------------------------------------
   Base común para rejillas internas.
   ========================================================== */

.mgym-ent-page__grid,
.mgym-ent-form,
.mgym-ent-form__grid {
  display: grid;
  gap: 16px;
}


/* Grid de 2 columnas */
.mgym-ent-page__grid--two,
.mgym-ent-form__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Grid de 3 columnas */
.mgym-ent-form__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* ==========================================================
   06. CAJAS Y CABECERAS INTERNAS DE ENTRENOS
   ----------------------------------------------------------
   Estructura base de tarjetas o bloques funcionales.
   ========================================================== */

.mgym-ent-box {
  padding: 28px 24px;
}


/* Cabecera de bloque con título a la izquierda y acciones/meta a la derecha */
.mgym-ent-box__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}


/* ==========================================================
   07. CAMPOS DE FORMULARIO ENTRENOS
   ----------------------------------------------------------
   Estructura vertical para label + input/select/textarea.
   ========================================================== */

.mgym-ent-field {
  display: grid;
  gap: 6px;
}


/* Campo que ocupa toda la fila del grid */
.mgym-ent-field--full {
  grid-column: 1 / -1;
}


/* Inputs siempre al 100% de su columna */
.mgym-ent-field input,
.mgym-ent-field select,
.mgym-ent-field textarea {
  width: 100%;
}


/* ==========================================================
   08. PÁGINA DE LIBRERÍA V11
   ----------------------------------------------------------
   Esta página usa una anchura más amplia:
   - 96vw en pantallas grandes
   - máximo 1800px
   También evita scroll horizontal accidental.
   ========================================================== */

.mgym-lib-page--v11 {
  max-width: min(96vw, 1800px);
  width: min(96vw, 1800px);
  overflow-x: hidden;
}


/* ==========================================================
   09. BLOQUES PRINCIPALES DE LIBRERÍA
   ----------------------------------------------------------
   Tarjetas principales:
   - Master
   - Colección
   - Formulario
   ========================================================== */

.mgym-lib-master,
.mgym-lib-collection,
.mgym-lib-formcard {
  padding: 22px;
  margin-bottom: 18px;
}


/* Cabecera superior de la librería:
   contenido principal + estadísticas/acciones */
.mgym-lib-master__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}


/* Estadísticas del bloque master */
.mgym-lib-master__stats {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}


/* ==========================================================
   10. TOOLBAR DE LIBRERÍA
   ----------------------------------------------------------
   Barra funcional con:
   - Flecha izquierda
   - Buscador o contenido central
   - Filtros
   - Flecha derecha
   ========================================================== */

.mgym-lib-master__toolbar {
  display: grid;
  grid-template-columns: 52px minmax(260px, 1fr) minmax(420px, auto) 52px;
  gap: 12px;
  align-items: center;
}


/* Grupo de filtros internos */
.mgym-lib-toolbar__filters {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(160px, 220px) auto;
  gap: 10px;
  align-items: center;
}


/* ==========================================================
   11. RAIL / CARRIL DE GRUPOS
   ----------------------------------------------------------
   Carril horizontal para tarjetas de grupo.
   Usa scroll horizontal y snap para navegación suave.
   ========================================================== */

.mgym-lib-grouprail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 10px 0;
}


/* Tarjeta individual dentro del carril */
.mgym-lib-groupcard {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 32px;
  gap: 14px;
  align-items: center;
  padding: 18px;
}


/* ==========================================================
   12. CARRUSEL DE LIBRERÍA
   ----------------------------------------------------------
   Estructura con flechas laterales y zona central scrollable.
   ========================================================== */

.mgym-lib-carousel-shell {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  gap: 12px;
  align-items: center;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}


/* Carrusel horizontal de tarjetas */
.mgym-lib-carousel {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding: 16px 10px 24px;
  min-width: 0;
}


/* Cada tarjeta se alinea al inicio del carrusel */
.mgym-lib-card-v11 {
  scroll-snap-align: start;
}


/* ==========================================================
   13. GRIDS DE FORMULARIOS DE LIBRERÍA
   ----------------------------------------------------------
   Rejillas internas para formularios y datos secundarios.
   ========================================================== */

.mgym-lib-formcard .mgym-lib-grid,
.mgym-lib-grid {
  display: grid;
  gap: 14px;
}


/* Grid principal a 3 columnas */
.mgym-lib-grid--main {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* Grid secundario a 3 columnas */
.mgym-lib-grid--secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* Grid de notas a 2 columnas */
.mgym-lib-grid--notes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Línea con contenido a la izquierda y acción/meta a la derecha */
.mgym-lib-cardline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}


/* ==========================================================
   14. CAMPOS DE LIBRERÍA
   ----------------------------------------------------------
   Campos base para formularios de ejercicios/rutinas.
   ========================================================== */

.mgym-lib-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}


/* Campo ancho completo */
.mgym-lib-field.is-wide {
  grid-column: 1 / -1;
}


/* Inputs fluidos para evitar desbordes */
.mgym-lib-field input,
.mgym-lib-field select,
.mgym-lib-field textarea {
  width: 100%;
  min-width: 0;
}


/* ==========================================================
   15. CHIPS / CHECKS / LISTAS DE ETIQUETAS
   ----------------------------------------------------------
   Chips flexibles para filtros, categorías o selección.
   ========================================================== */

.mgym-lib-chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}


/* Oculta el input real cuando el chip visual controla el estado */
.mgym-lib-chipcheck input {
  display: none;
}


/* ==========================================================
   16. ACCIONES DE LIBRERÍA
   ----------------------------------------------------------
   Botoneras alineadas a la derecha en escritorio.
   En móvil se convierten en botones de ancho completo.
   ========================================================== */

.mgym-lib-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}


/* ==========================================================
   17. EDITOR DE DETALLE
   ----------------------------------------------------------
   Editor interno dividido en 2 columnas.
   ========================================================== */

.mgym-lib-detail-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}


/* Elementos anchos dentro del editor */
.mgym-lib-detail-editor .is-wide {
  grid-column: 1 / -1;
}


/* ==========================================================
   18. MODAL DE LIBRERÍA
   ----------------------------------------------------------
   Modal global para detalle de rutina/ejercicio.
   Ocupa toda la pantalla y centra la tarjeta interna.
   ========================================================== */

/* Estado oculto del modal */
.mgym-lib-modal[hidden] {
  display: none;
}


/* Contenedor fijo a pantalla completa */
.mgym-lib-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}


/* Capa de fondo del modal */
.mgym-lib-modal__backdrop {
  position: absolute;
  inset: 0;
}


/* Tarjeta del modal */
.mgym-lib-modal__card {
  position: relative;
  width: min(1120px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  margin: 12px auto;
  padding: 22px;
}


/* Botón de cierre */
.mgym-lib-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
}


/* Grid principal del modal:
   normalmente imagen/datos + contenido lateral */
.mgym-lib-modal__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
}


/* Grupos flexibles dentro del modal */
.mgym-lib-modal__chips,
.mgym-lib-modal__thumbs,
.mgym-lib-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* Metadatos y texto del modal a 2 columnas */
.mgym-lib-modal__meta,
.mgym-lib-modal__textgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}


/* ==========================================================
   19. PÁGINA DE RUTINAS
   ----------------------------------------------------------
   Estructura base para listados, builder y colección.
   ========================================================== */

.mgym-routines-grid {
  display: grid;
  gap: 16px;
}


/* Bloques principales de rutinas */
.mgym-routines-master,
.mgym-routines-builder,
.mgym-routines-collection {
  padding: 22px;
  margin-bottom: 18px;
}


/* Tarjeta individual de rutina */
.mgym-routine-card {
  padding: 18px;
}


/* Acciones internas de tarjeta de rutina */
.mgym-routine-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


/* ==========================================================
   20. CONFIGURACIÓN / WORKSPACE
   ----------------------------------------------------------
   Estructura general de la pantalla de configuración.
   ========================================================== */

.mgym-config-workspace {
  display: grid;
  gap: 18px;
}


/* Campos e info boxes del bloque carbon plan */
.mgym-config-plan-carbon-block__fields,
.mgym-config-plan-carbon-block__info-boxes {
  display: grid;
  gap: 14px;
}


/* Campos del bloque carbon plan en 3 columnas */
.mgym-config-plan-carbon-block__fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* ==========================================================
   21. RESPONSIVE <= 1100px
   ----------------------------------------------------------
   Ajustes para tablet horizontal y pantallas medias:
   - Toolbar pasa a 1 columna
   - Filtros y grids complejos pasan a 1 columna
   - Se ocultan flechas laterales de librería
   ========================================================== */

@media (max-width: 1100px) {
  .mgym-lib-master__toolbar {
    grid-template-columns: 1fr;
  }

  .mgym-lib-toolbar__filters,
  .mgym-lib-grid--main,
  .mgym-lib-grid--secondary,
  .mgym-lib-modal__grid,
  .mgym-lib-modal__meta,
  .mgym-lib-modal__textgrid {
    grid-template-columns: 1fr;
  }

  .mgym-lib-navbtn,
  .mgym-lib-sidearrow {
    display: none;
  }

  .mgym-config-plan-carbon-block__fields {
    grid-template-columns: 1fr 1fr;
  }
}


/* ==========================================================
   22. RESPONSIVE <= 900px
   ----------------------------------------------------------
   Ajustes para tablet vertical:
   - Hero pasa a una sola columna
   - Cabecera master se apila
   - Stats permiten salto de línea
   - Cardlines y editores pasan a 1 columna
   ========================================================== */

@media (max-width: 900px) {
  .mgym-ent-page__hero {
    grid-template-columns: 1fr;
  }

  .mgym-lib-master__top {
    grid-template-columns: 1fr;
  }

  .mgym-lib-master__stats {
    flex-wrap: wrap;
  }

  .mgym-lib-cardline,
  .mgym-lib-detail-editor,
  .mgym-lib-grid--notes {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   23. RESPONSIVE <= 781px
   ----------------------------------------------------------
   Ajustes móviles:
   - Páginas casi a pantalla completa
   - Padding reducido
   - Todos los grids principales pasan a 1 columna
   - Botones de librería ocupan el 100%
   ========================================================== */

@media (max-width: 781px) {
  .mgym-ent-page,
  .mgym-lib-page--v11,
  .mgym-routines-page,
  .mgym-html-config-page {
    width: calc(100vw - 10px);
    max-width: calc(100vw - 10px);
    padding: 18px 5px 38px;
  }

  .mgym-ent-page__grid--two,
  .mgym-ent-form__grid--2,
  .mgym-ent-form__grid--3,
  .mgym-config-plan-carbon-block__fields {
    grid-template-columns: 1fr;
  }

  .mgym-lib-master,
  .mgym-lib-collection,
  .mgym-lib-formcard {
    padding: 14px;
  }

  .mgym-lib-carousel {
    padding: 12px 5px 20px;
  }

  .mgym-lib-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mgym-lib-actions .mgym-lib-btn {
    width: 100%;
  }
}