/*
 * CS Integrador Portal · UI hardening global v1.1.73
 * Objetivo: evitar superposiciones, desbordes y asimetrías en botones/acciones
 * sin alterar colores ni lógica funcional existente.
 */

:root {
  --ui-action-gap: .625rem;
  --ui-action-min-height: 40px;
  --ui-action-small-min-height: 36px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; }
body { overflow-x: hidden; }

img, svg, video, canvas, iframe { max-width: 100%; }
input, select, textarea, button { min-width: 0; max-width: 100%; }

/* Los controles de acción conservan la apariencia existente, pero ganan una
   caja estable y un texto capaz de adaptarse a anchos estrechos. */
:where(
  button,
  .button,
  .btn,
  a.button,
  a.btn,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
) {
  min-height: var(--ui-action-min-height);
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.button-small, .btn-small, .btn-sm, button.button-small, button.btn-sm) {
  min-height: var(--ui-action-small-min-height);
}

/* Contenedores de acciones conocidos en el portal. No se fuerza ancho en
   escritorio: solo wrap + separación simétrica. */
:where(
  .actions,
  .action-group,
  .cta-actions,
  .cta-button-row,
  .commercial-capability-actions,
  .service-focus-actions,
  .quote-decision,
  .section-inline-cta,
  .button-group,
  .form-actions,
  .card-actions,
  .table-actions,
  .document-actions,
  .payment-actions,
  .toolbar-actions,
  .modal-actions,
  .stage-action-stack,
  .stage-payment-actions,
  .stage-document-actions,
  .stage-quote-decision
) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-action-gap);
  min-width: 0;
}

:where(
  .actions,
  .action-group,
  .cta-actions,
  .cta-button-row,
  .commercial-capability-actions,
  .service-focus-actions,
  .quote-decision,
  .section-inline-cta,
  .button-group,
  .form-actions,
  .card-actions,
  .table-actions,
  .document-actions,
  .payment-actions,
  .toolbar-actions,
  .modal-actions,
  .stage-action-stack,
  .stage-payment-actions,
  .stage-document-actions,
  .stage-quote-decision
) > :where(button, .button, .btn, a.button, a.btn, input[type="submit"], input[type="button"], input[type="reset"]) {
  flex: 0 1 auto;
}

/* Evita que contenido largo obligue a un grid/flex a invadir la columna de
   acciones. Especialmente importante para nombres de archivo y referencias. */
:where(
  .stage-project-head,
  .stage-project-title,
  .stage-panel,
  .stage-panel-head,
  .stage-project-summary,
  .stage-project-summary .stage-panel,
  .stage-route-card,
  .stage-capability-row,
  .stage-milestone-row,
  .stage-payment-row,
  .stage-document-row,
  .stage-period-head,
  .stage-period-body,
  .stage-period-columns,
  .stage-period-docs,
  .stage-form-grid,
  .stage-upload-grid,
  .stage-repeater-row
) > * {
  min-width: 0;
}

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

/* Corrección específica del escenario mostrado: el nombre del documento ya
   no puede ocupar físicamente la zona de Descargar/Eliminar. */
.stage-document-row {
  grid-template-columns: minmax(0, 1fr) max-content;
}
.stage-document-row > :first-child { min-width: 0; overflow: hidden; }
.stage-document-actions {
  justify-content: flex-end;
  align-self: center;
}

/* Encabezados con importe/estado: permiten wrap ordenado sin superposición. */
.stage-period-head,
.stage-panel-head,
.stage-project-head {
  min-width: 0;
}
.stage-period-head > :last-child,
.stage-panel-head > :last-child,
.stage-project-head > :last-child {
  max-width: 100%;
}
.stage-status-pill { flex: 0 0 auto; }

/* Simetría vertical de las tres tarjetas del proyecto. */
.stage-project-summary .stage-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.stage-project-summary .stage-panel > :last-child:is(.button, .btn, a.button, a.btn) {
  margin-top: auto;
  align-self: flex-start;
}

/* Formularios y campos dentro de grids: un campo largo no amplía la tarjeta. */
:where(.stage-form-grid, .stage-upload-grid, .stage-repeater-row) :where(label, input, select, textarea) {
  min-width: 0;
  max-width: 100%;
}

/* Tablas: cuando el contenido no puede comprimirse, el desplazamiento queda
   dentro de su contenedor y no rompe el viewport. */
:where(.table-responsive, .table-wrap, .responsive-table, .data-table-wrap) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
:where(.table-responsive, .table-wrap, .responsive-table, .data-table-wrap) table {
  max-width: none;
}

/* Contenido textual largo habitual del portal. */
:where(
  .file-name,
  .document-name,
  .document-title,
  .payment-reference,
  .request-reference,
  .license-reference,
  td,
  th
) {
  overflow-wrap: anywhere;
}

/* Tablet / móvil */
@media (max-width: 760px) {
  :where(
    .actions,
    .action-group,
    .cta-actions,
    .cta-button-row,
    .commercial-capability-actions,
    .service-focus-actions,
    .quote-decision,
    .section-inline-cta,
    .button-group,
    .form-actions,
    .card-actions,
    .table-actions,
    .document-actions,
    .payment-actions,
    .toolbar-actions,
    .modal-actions,
    .stage-action-stack,
    .stage-payment-actions,
    .stage-document-actions,
    .stage-quote-decision
  ) {
    width: 100%;
    justify-content: stretch;
  }

  :where(
    .actions,
    .action-group,
    .cta-actions,
    .cta-button-row,
    .commercial-capability-actions,
    .service-focus-actions,
    .quote-decision,
    .section-inline-cta,
    .button-group,
    .form-actions,
    .card-actions,
    .table-actions,
    .document-actions,
    .payment-actions,
    .toolbar-actions,
    .modal-actions,
    .stage-action-stack,
    .stage-payment-actions,
    .stage-document-actions,
    .stage-quote-decision
  ) > :where(button, .button, .btn, a.button, a.btn, input[type="submit"], input[type="button"], input[type="reset"]) {
    flex: 1 1 10rem;
    min-width: 0;
  }

  .stage-document-row,
  .stage-payment-row,
  .stage-capability-row,
  .stage-milestone-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .stage-document-actions,
  .stage-payment-actions {
    justify-content: stretch;
    align-self: stretch;
  }

  .stage-period-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .stage-period-head > :last-child {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .7rem;
    align-items: center;
  }

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

/* Teléfonos estrechos: las acciones dejan de competir por ancho y se apilan
   simétricamente. */
@media (max-width: 480px) {
  :where(
    .actions,
    .action-group,
    .cta-actions,
    .cta-button-row,
    .commercial-capability-actions,
    .service-focus-actions,
    .quote-decision,
    .section-inline-cta,
    .button-group,
    .form-actions,
    .card-actions,
    .table-actions,
    .document-actions,
    .payment-actions,
    .toolbar-actions,
    .modal-actions,
    .stage-action-stack,
    .stage-payment-actions,
    .stage-document-actions,
    .stage-quote-decision
  ) > :where(button, .button, .btn, a.button, a.btn, input[type="submit"], input[type="button"], input[type="reset"]) {
    flex-basis: 100%;
    width: 100%;
  }

  .stage-panel,
  .stage-project-head,
  .stage-period-body {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
}