/*
 * CS Integrador · UI layout hardening v1.1.74 FIX1
 * Corrige regresiones de botones/acciones después de Continuidad/Evolución.
 * Esta hoja debe cargarse al final del <head>.
 */

:root {
  --ui-fix-action-gap: .625rem;
  --ui-fix-action-min: 36px;
}

/* Ningún hijo de las filas funcionales puede imponer un ancho superior al
   contenedor. Esto es crítico con nombres de archivo, referencias y estados. */
:where(
  .stage-document-row,
  .stage-payment-row,
  .stage-capability-row,
  .stage-milestone-row,
  .stage-period-head,
  .stage-period-body,
  .stage-panel-head,
  .stage-project-head,
  .stage-project-summary,
  .stage-upload-grid,
  .stage-form-grid,
  .stage-repeater-row,
  .continuity-review,
  .continuity-field-grid
),
:where(
  .stage-document-row,
  .stage-payment-row,
  .stage-capability-row,
  .stage-milestone-row,
  .stage-period-head,
  .stage-period-body,
  .stage-panel-head,
  .stage-project-head,
  .stage-project-summary,
  .stage-upload-grid,
  .stage-form-grid,
  .stage-repeater-row,
  .continuity-review,
  .continuity-field-grid
) > * {
  min-width: 0;
  max-width: 100%;
}

:where(
  .stage-document-row strong,
  .stage-document-row small,
  .stage-payment-row strong,
  .stage-payment-row small,
  .stage-project-title,
  .stage-project-title h1,
  .stage-project-meta,
  .stage-ref,
  .stage-period-head h3
) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Grupos de acciones: una única regla de geometría. No modifica colores. */
:where(
  .stage-action-stack,
  .stage-payment-actions,
  .stage-document-actions,
  .stage-quote-decision,
  .actions,
  .action-group,
  .form-actions,
  .card-actions,
  .table-actions,
  .document-actions,
  .payment-actions,
  .toolbar-actions,
  .modal-actions
) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: var(--ui-fix-action-gap) !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

:where(
  .stage-action-stack,
  .stage-payment-actions,
  .stage-document-actions,
  .stage-quote-decision,
  .actions,
  .action-group,
  .form-actions,
  .card-actions,
  .table-actions,
  .document-actions,
  .payment-actions,
  .toolbar-actions,
  .modal-actions
) > :where(button, .button, .btn, a.button, a.btn, input[type="submit"], input[type="button"], input[type="reset"]) {
  position: static !important;
  inset: auto !important;
  float: none !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: var(--ui-fix-action-min);
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: center;
}

/* Documentos: el texto nunca puede invadir la zona de acciones. */
.stage-document-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: .75rem 1rem !important;
  align-items: center !important;
  overflow: hidden;
}
.stage-document-row > :first-child {
  min-width: 0 !important;
  overflow: hidden;
}
.stage-document-actions {
  justify-content: flex-end !important;
  align-self: center;
}

/* Pagos y filas similares conservan dos zonas, pero permiten wrap real. */
.stage-payment-row,
.stage-capability-row,
.stage-milestone-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}
.stage-payment-actions {
  justify-content: flex-end !important;
}

/* Las tres tarjetas del proyecto mantienen la misma base visual aunque una
   tenga CTA y otra solamente estado/texto. */
.stage-project-summary {
  align-items: stretch !important;
}
.stage-project-summary .stage-panel {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-width: 0 !important;
}
.stage-project-summary .stage-panel > :last-child:is(.button, .btn, a.button, a.btn),
.stage-project-summary .stage-panel > .stage-action-stack:last-child {
  margin-top: auto !important;
  align-self: flex-start;
}

/* CONTENEDORES REALES. Un panel puede ser estrecho aunque el viewport sea
   grande. Esto evita que una pantalla de escritorio con dos columnas vuelva
   a producir solapamientos dentro de cada tarjeta. */
.stage-period-docs,
.stage-document-list,
.stage-payment-list,
.stage-capability-list,
.stage-milestone-list {
  container-type: inline-size;
}

@container (max-width: 560px) {
  .stage-document-row,
  .stage-payment-row,
  .stage-capability-row,
  .stage-milestone-row {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .stage-document-actions,
  .stage-payment-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.75rem), 1fr));
    justify-content: stretch !important;
    align-self: stretch !important;
  }

  .stage-document-actions > :where(button, .button, .btn, a.button, a.btn),
  .stage-payment-actions > :where(button, .button, .btn, a.button, a.btn) {
    width: 100% !important;
  }
}

/* Fallback por viewport para navegadores sin container queries y para móvil. */
@media (max-width: 760px) {
  .stage-document-row,
  .stage-payment-row,
  .stage-capability-row,
  .stage-milestone-row {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .stage-document-actions,
  .stage-payment-actions,
  .stage-action-stack,
  .stage-quote-decision,
  .form-actions,
  .card-actions,
  .table-actions,
  .document-actions,
  .payment-actions {
    width: 100% !important;
    justify-content: stretch !important;
  }

  :where(
    .stage-document-actions,
    .stage-payment-actions,
    .stage-action-stack,
    .stage-quote-decision,
    .form-actions,
    .card-actions,
    .table-actions,
    .document-actions,
    .payment-actions
  ) > :where(button, .button, .btn, a.button, a.btn, input[type="submit"], input[type="button"]) {
    flex: 1 1 9rem !important;
    width: auto;
  }

  .stage-project-summary .stage-panel > :last-child:is(.button, .btn, a.button, a.btn) {
    width: 100% !important;
    align-self: stretch !important;
  }

  .continuity-review .button {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  :where(
    .stage-document-actions,
    .stage-payment-actions,
    .stage-action-stack,
    .stage-quote-decision,
    .form-actions,
    .card-actions,
    .table-actions,
    .document-actions,
    .payment-actions
  ) > :where(button, .button, .btn, a.button, a.btn, input[type="submit"], input[type="button"]) {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}