/* El modal comparte el alto disponible entre encabezado y contenido real.
   No calcular el cuerpo restando un encabezado de altura fija: puede envolver. */
@media screen {
  dialog {
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  #detail-dialog {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow: hidden;
  }

  #detail-dialog[open] {
    display: flex;
    flex-direction: column;
  }

  #detail-dialog > .dialog-head {
    flex: 0 0 auto;
    min-width: 0;
    max-height: 45vh;
    max-height: 45dvh;
    overflow-y: auto;
    gap: 12px;
  }

  #detail-dialog .dialog-head > div { min-width: 0; }
  #detail-dialog .dialog-head h2 { overflow-wrap: anywhere; }
  #detail-dialog .dialog-head > button { flex-shrink: 0; }

  #detail-dialog > #dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: #64748b #f1f5f9;
    scroll-padding-block: 16px;
  }

  #dialog-body::-webkit-scrollbar { width: 12px; }
  #dialog-body::-webkit-scrollbar-track { background: #f1f5f9; }
  #dialog-body::-webkit-scrollbar-thumb {
    background: #64748b;
    border: 3px solid #f1f5f9;
    border-radius: 8px;
  }

  #origin-cut-form > .dialog-actions,
  #finish-cut-form > .dialog-actions {
    /* Pie en flujo: no superponer acciones a campos editables al enfocar. */
    position: static;
    flex-wrap: wrap;
    padding-block: 12px;
    background: var(--panel, #fff);
    border-top: 1px solid var(--line, #e2e8f0);
  }

  @media (max-width: 640px) {
    #origin-cut-form > .dialog-actions button,
    #finish-cut-form > .dialog-actions button {
      flex: 1 1 130px;
      min-height: 44px;
    }
  }

}