/* FSM: el contenido se desplaza dentro del modal; las acciones no se recortan.
   Cargar después de los estilos compartidos y específicos de cada pantalla. */
.modal-bg {
  height: 100vh;
  height: 100dvh;
  padding: 16px;
  box-sizing: border-box;
}
.modal-bg > .modal {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  min-height: 0;
}
.modal-bg > .modal > .modal-hdr,
.modal-bg > .modal > .modal-footer {
  flex: 0 0 auto;
}
.modal-bg > .modal > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
}
.modal-bg > .modal > .modal-footer {
  flex-wrap: wrap;
}
#modalSeguimiento .modal-body {
  height: 420px;
}
#modalSeguimiento .modal-body > div,
#modalSeguimiento #divTareasOT,
#modalSeguimiento .tab-panel {
  min-height: 0;
}
#modalSeguimiento .modal-body > div:first-child > div:not(#divTareasOT),
#modalSeguimiento #seg-con-tarea > div:not(.tab-panel) {
  flex-shrink: 0;
}
#modalSeguimiento #seg-con-tarea > .tabs {
  margin-bottom: 0;
}
.ts-det {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
}
.ts-det-hd { flex: 0 0 auto; }
.ts-det-bd { min-height: 0; overflow-y: auto; }
.ts-det-row { gap: 12px; }
.ts-det-row span { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .modal-bg { padding: 8px; }
  .modal-bg > .modal {
    max-width: 100%;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .modal-bg > .modal > .modal-hdr,
  .modal-bg > .modal > .modal-footer { padding: 10px 12px; }
  #modalSeguimiento .modal-body {
    flex-direction: column;
    overflow-y: auto !important; /* sustituye el overflow:hidden del layout de dos columnas */
  }
  #modalSeguimiento .modal-body > div:first-child {
    width: 100% !important; /* sustituye los 280px del panel de tareas */
    max-height: 180px;
    flex: 0 0 auto;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border);
  }
  #modalSeguimiento .modal-body > div:last-child {
    flex: 0 0 auto !important;
  }
  #modalSeguimiento .tab-panel {
    overflow-y: visible !important; /* un solo scroll para el formulario en móvil */
  }
}

/* Gastos: fecha visible y acciones con la misma superficie de la fila. */
#modalGasto .ga-cantidad { text-align:center; }
#modalGasto .ga-fecha-celda { white-space:nowrap; }
#modalGasto .ga-acciones { text-align:center; width:80px; }
#modalGasto tbody .ga-acciones { background:inherit; box-shadow:none; }
#modalGasto .ga-acciones .btn { color:var(--et-danger); min-width:32px; min-height:32px; }

#modalGasto #ga-tbody td { background:var(--et-bg); }
#modalGasto thead .ga-acciones { background:var(--et-grid-hd-to) !important; }