/* Ajustes móviles no invasivos para los formularios y tablas CAPEX. */
@media (max-width: 640px) {
  html,
  body,
  #root {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  main,
  main > *,
  form,
  form > *,
  .grid > *,
  .flex > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Los selectores Radix traían w-fit: el texto largo excedía la celda. */
  [data-slot="select-trigger"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  [data-slot="select-value"] {
    display: block !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  input,
  select,
  textarea {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }

  /* Encabezados con acciones: en móvil la acción baja a una segunda línea. */
  .flex.items-start.justify-between.gap-4 {
    flex-wrap: wrap;
  }

  .flex.items-start.justify-between.gap-4 > .flex.gap-2 {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .flex.items-start.justify-between.gap-4 > .flex.gap-2 > button {
    max-width: 100%;
  }

  /* Las matrices siguen siendo legibles mediante desplazamiento dentro de la tarjeta. */
  div.overflow-x-auto {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: 0.75rem;
  }

  th,
  td {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  h1,
  h2,
  h3,
  p,
  label {
    overflow-wrap: anywhere;
  }
}