/* CS Integrador | FIX41.1
   Expansión armónica de listados compactos en móvil.
   Corrige clipping de proyectos/licencias y garantiza acceso a acciones.
*/

:root {
  --fix411-list-max-mobile: min(76dvh, 720px);
  --fix411-list-max-short: min(70dvh, 620px);
  --fix411-list-gap: 12px;
}

/* Base: los contenedores detectados por runtime pueden crecer más que la capa v1.1.88. */
.fix411-scroll-list:not(html):not(body):not(main):not(header):not(footer):not(#app-header):not(#app-footer) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* La tarjeta/agrupación expandida nunca debe recortar su detalle. */
.fix411-expanded-item,
.fix411-expanded-item > *,
.fix411-expanded-item [class*="detail"],
.fix411-expanded-item [class*="body"],
.fix411-expanded-item [class*="content"],
.fix411-expanded-item [class*="actions"] {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Botones del detalle expandido siempre accesibles. */
.fix411-expanded-item .actions,
.fix411-expanded-item [class*="actions"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  width: 100% !important;
  margin-top: 12px !important;
}

.fix411-expanded-item .button,
.fix411-expanded-item button:not(.icon-button):not(.row-toggle):not(.menu-toggle):not(.filter-toggle),
.fix411-expanded-item a[role="button"] {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Evita superposición visual entre resumen compacto y detalle abierto. */
.fix411-expanded-item {
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  /*
    El viewport interno anterior era demasiado corto para una fila expandida.
    FIX41.1 permite una ventana mayor y scroll vertical natural.
  */
  .fix411-scroll-list:not(html):not(body):not(main):not(header):not(footer):not(#app-header):not(#app-footer) {
    max-height: var(--fix411-list-max-mobile) !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: clip !important;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding-bottom: 14px !important;
  }

  /* Cuando hay una agrupación abierta, damos aún más espacio útil al detalle. */
  .fix411-scroll-list.fix411-has-expanded:not(html):not(body):not(main):not(header):not(footer):not(#app-header):not(#app-footer) {
    max-height: min(82dvh, 780px) !important;
    padding-bottom: 22px !important;
  }

  /* Si el listado está dentro de un panel con max-height heredado, neutralizarlo. */
  .fix411-scroll-list-wrapper,
  .fix411-scroll-list-wrapper > .fix411-scroll-list:not(html):not(body):not(main):not(header):not(footer):not(#app-header):not(#app-footer) {
    height: auto !important;
    min-height: 0 !important;
  }

  .fix411-scroll-list-wrapper {
    max-height: none !important;
    overflow: visible !important;
  }

  /*
    Fila/tarjeta compacta:
    cerrada = conserva presentación compacta;
    abierta = detalle completo sin clipping.
  */
  .fix411-expandable-item {
    min-height: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .fix411-expandable-item.fix411-expanded-item {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 14px;
  }

  /* El contenido abierto puede usar todo el ancho de la tarjeta. */
  .fix411-expanded-item [data-mobile-detail],
  .fix411-expanded-item [data-detail],
  .fix411-expanded-item .mobile-row-detail,
  .fix411-expanded-item .row-detail,
  .fix411-expanded-item .project-detail,
  .fix411-expanded-item .license-detail {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
  }

  /* Evita que estados largos / referencias reduzcan espacio de botones. */
  .fix411-expanded-item p,
  .fix411-expanded-item dd,
  .fix411-expanded-item dt,
  .fix411-expanded-item span,
  .fix411-expanded-item strong,
  .fix411-expanded-item a {
    overflow-wrap: anywhere;
  }

  /* Botones apilados y simétricos en móvil. */
  .fix411-expanded-item .button,
  .fix411-expanded-item button:not(.icon-button):not(.row-toggle):not(.menu-toggle):not(.filter-toggle),
  .fix411-expanded-item a[role="button"] {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /*
    Si el panel padre tiene overflow oculto por capas anteriores,
    el runtime agrega esta clase para liberar la zona de detalle.
  */
  .fix411-release-parent {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
}

@media (max-width: 760px) and (max-height: 720px) {
  .fix411-scroll-list:not(html):not(body):not(main):not(header):not(footer):not(#app-header):not(#app-footer) {
    max-height: var(--fix411-list-max-short) !important;
  }

  .fix411-scroll-list.fix411-has-expanded:not(html):not(body):not(main):not(header):not(footer):not(#app-header):not(#app-footer) {
    max-height: min(78dvh, 650px) !important;
  }
}