feat(clinical-docs): expand writing canvas and optimize height for insurance auth and referral modals

lib/features/insurance_auth/presentation/views/insurance_auth_modal_view.dart

@@ -159,12 +159,15 @@ class _InsuranceAuthModalViewState extends State<InsuranceAuthModalView> {
   @override
   Widget build(BuildContext context) {
     final formattedDate = DateFormat('dd/MM/yyyy').format(DateTime.now());
+    final mediaQuery = MediaQuery.sizeOf(context);
+    final modalHeight = (mediaQuery.height * 0.90).clamp(650.0, 780.0);
+    final modalWidth = (mediaQuery.width * 0.90).clamp(840.0, 920.0);
 
     return Observer(
       builder: (_) {
         return MedicalModalDialog(
-          maxWidth: 820,
+          maxWidth: modalWidth,
-          maxHeight: 650,
+          maxHeight: modalHeight,
           title: 'Autorización De Seguro (ARS)',
           titleIcon: Container(
             padding: const EdgeInsets.all(8),
@@ -271,17 +274,71 @@ class _InsuranceAuthModalViewState extends State<InsuranceAuthModalView> {
               ],
             ),
           ),
-          child: SingleChildScrollView(
+          child: LayoutBuilder(
-            padding: const EdgeInsets.all(20),
+            builder: (context, constraints) {
-            child: Column(
+              final isCompact = constraints.maxHeight < 460;
+
+              final surgeryField = TextField(
+                controller: _surgeryController,
+                maxLines: isCompact ? 3 : null,
+                minLines: isCompact ? 2 : null,
+                expands: !isCompact,
+                textAlignVertical: TextAlignVertical.top,
+                style: const TextStyle(fontSize: 13, height: 1.4),
+                decoration: InputDecoration(
+                  labelText: 'La cirugía de: *',
+                  hintText: 'Especifique el procedimiento quirúrgico o intervención (ej. Ureterolitotomía endoscópica láser, Biopsia de próstata...)',
+                  floatingLabelBehavior: FloatingLabelBehavior.always,
+                  filled: true,
+                  fillColor: Colors.white,
+                  contentPadding: const EdgeInsets.all(12),
+                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
+                  enabledBorder: OutlineInputBorder(
+                    borderRadius: BorderRadius.circular(8),
+                    borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
+                  ),
+                  focusedBorder: OutlineInputBorder(
+                    borderRadius: BorderRadius.circular(8),
+                    borderSide: const BorderSide(color: AppColors.primary, width: 1.5),
+                  ),
+                ),
+              );
+
+              final diagnosisField = TextField(
+                controller: _diagnosisController,
+                maxLines: isCompact ? 3 : null,
+                minLines: isCompact ? 2 : null,
+                expands: !isCompact,
+                textAlignVertical: TextAlignVertical.top,
+                style: const TextStyle(fontSize: 13, height: 1.4),
+                decoration: InputDecoration(
+                  labelText: 'Diagnóstico: *',
+                  hintText: 'Diagnóstico principal, patología o hallazgo clínico que justifica la cirugía...',
+                  floatingLabelBehavior: FloatingLabelBehavior.always,
+                  filled: true,
+                  fillColor: Colors.white,
+                  contentPadding: const EdgeInsets.all(12),
+                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
+                  enabledBorder: OutlineInputBorder(
+                    borderRadius: BorderRadius.circular(8),
+                    borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
+                  ),
+                  focusedBorder: OutlineInputBorder(
+                    borderRadius: BorderRadius.circular(8),
+                    borderSide: const BorderSide(color: AppColors.primary, width: 1.5),
+                  ),
+                ),
+              );
+
+              final bodyContent = Column(
                 crossAxisAlignment: CrossAxisAlignment.stretch,
                 children: [
                   // Membrete Informativo del Médico
                   Container(
-                  padding: const EdgeInsets.all(14),
+                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                     decoration: BoxDecoration(
                       color: const Color(0xFFF8FAFC),
-                    borderRadius: BorderRadius.circular(12),
+                      borderRadius: BorderRadius.circular(10),
                       border: Border.all(color: const Color(0xFFE2E8F0)),
                     ),
                     child: Column(
@@ -292,7 +349,7 @@ class _InsuranceAuthModalViewState extends State<InsuranceAuthModalView> {
                               : 'Dr. Luis A. Castro Sosa',
                           textAlign: TextAlign.center,
                           style: const TextStyle(
-                          fontSize: 18,
+                            fontSize: 17,
                             fontWeight: FontWeight.w700,
                             color: AppColors.textPrimary,
                             letterSpacing: -0.3,
@@ -304,7 +361,7 @@ class _InsuranceAuthModalViewState extends State<InsuranceAuthModalView> {
                             _configStore.especialidad.toUpperCase(),
                             textAlign: TextAlign.center,
                             style: const TextStyle(
-                            fontSize: 11.5,
+                              fontSize: 11,
                               fontWeight: FontWeight.w600,
                               color: AppColors.primary,
                               letterSpacing: 0.5,
@@ -312,21 +369,21 @@ class _InsuranceAuthModalViewState extends State<InsuranceAuthModalView> {
                           ),
                         ],
                         if (_configStore.descripEspecialidad.isNotEmpty) ...[
-                        const SizedBox(height: 2),
+                          const SizedBox(height: 1),
                           Text(
                             _configStore.descripEspecialidad.toUpperCase(),
                             textAlign: TextAlign.center,
                             style: const TextStyle(
-                            fontSize: 10,
+                              fontSize: 9.5,
                               color: AppColors.textMuted,
                             ),
                           ),
                         ],
-                      const SizedBox(height: 4),
+                        const SizedBox(height: 3),
                         Text(
                           'Fecha: $formattedDate',
                           style: const TextStyle(
-                          fontSize: 11,
+                            fontSize: 10.5,
                             fontWeight: FontWeight.w500,
                             color: AppColors.textSecondary,
                           ),
@@ -334,7 +391,7 @@ class _InsuranceAuthModalViewState extends State<InsuranceAuthModalView> {
                       ],
                     ),
                   ),
-                const SizedBox(height: 16),
+                  const SizedBox(height: 10),
 
                   // Fila 1: Señores ARS y Paciente (Favor autorizar al Sr. a)
                   Row(
@@ -368,7 +425,7 @@ class _InsuranceAuthModalViewState extends State<InsuranceAuthModalView> {
                                 filled: true,
                                 fillColor: Colors.white,
                                 prefixIcon: const Icon(Icons.security_rounded, size: 18, color: AppColors.primary),
-                              contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+                                contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                                 border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
                                 enabledBorder: OutlineInputBorder(
                                   borderRadius: BorderRadius.circular(8),
@@ -397,7 +454,7 @@ class _InsuranceAuthModalViewState extends State<InsuranceAuthModalView> {
                             filled: true,
                             fillColor: Colors.white,
                             prefixIcon: const Icon(Icons.person_outline_rounded, size: 18, color: AppColors.primary),
-                          contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+                            contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                             border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
                             enabledBorder: OutlineInputBorder(
                               borderRadius: BorderRadius.circular(8),
@@ -413,57 +470,15 @@ class _InsuranceAuthModalViewState extends State<InsuranceAuthModalView> {
                       ),
                     ],
                   ),
-                const SizedBox(height: 14),
+                  const SizedBox(height: 10),
 
                   // Campo: La cirugía de:
-                TextField(
+                  if (isCompact) surgeryField else Expanded(flex: 1, child: surgeryField),
-                  controller: _surgeryController,
+                  const SizedBox(height: 10),
-                  maxLines: 3,
-                  style: const TextStyle(fontSize: 13, height: 1.4),
-                  decoration: InputDecoration(
-                    labelText: 'La cirugía de: *',
-                    hintText: 'Especifique el procedimiento quirúrgico o intervención (ej. Ureterolitotomía endoscópica láser, Biopsia de próstata...)',
-                    floatingLabelBehavior: FloatingLabelBehavior.always,
-                    filled: true,
-                    fillColor: Colors.white,
-                    contentPadding: const EdgeInsets.all(12),
-                    border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
-                    enabledBorder: OutlineInputBorder(
-                      borderRadius: BorderRadius.circular(8),
-                      borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
-                    ),
-                    focusedBorder: OutlineInputBorder(
-                      borderRadius: BorderRadius.circular(8),
-                      borderSide: const BorderSide(color: AppColors.primary, width: 1.5),
-                    ),
-                  ),
-                ),
-                const SizedBox(height: 14),
 
                   // Campo: Diagnóstico:
-                TextField(
+                  if (isCompact) diagnosisField else Expanded(flex: 1, child: diagnosisField),
-                  controller: _diagnosisController,
+                  const SizedBox(height: 10),
-                  maxLines: 3,
-                  style: const TextStyle(fontSize: 13, height: 1.4),
-                  decoration: InputDecoration(
-                    labelText: 'Diagnóstico: *',
-                    hintText: 'Diagnóstico principal, patología o hallazgo clínico que justifica la cirugía...',
-                    floatingLabelBehavior: FloatingLabelBehavior.always,
-                    filled: true,
-                    fillColor: Colors.white,
-                    contentPadding: const EdgeInsets.all(12),
-                    border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
-                    enabledBorder: OutlineInputBorder(
-                      borderRadius: BorderRadius.circular(8),
-                      borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
-                    ),
-                    focusedBorder: OutlineInputBorder(
-                      borderRadius: BorderRadius.circular(8),
-                      borderSide: const BorderSide(color: AppColors.primary, width: 1.5),
-                    ),
-                  ),
-                ),
-                const SizedBox(height: 14),
 
                   // Fila 3: Bajo Anestesia y Días de ingreso
                   Row(
@@ -480,7 +495,7 @@ class _InsuranceAuthModalViewState extends State<InsuranceAuthModalView> {
                             filled: true,
                             fillColor: Colors.white,
                             prefixIcon: const Icon(Icons.vaccines_outlined, size: 18, color: AppColors.primary),
-                          contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+                            contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                             border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
                             enabledBorder: OutlineInputBorder(
                               borderRadius: BorderRadius.circular(8),
@@ -507,7 +522,7 @@ class _InsuranceAuthModalViewState extends State<InsuranceAuthModalView> {
                             filled: true,
                             fillColor: Colors.white,
                             prefixIcon: const Icon(Icons.hotel_outlined, size: 18, color: AppColors.primary),
-                          contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+                            contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                             border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
                             enabledBorder: OutlineInputBorder(
                               borderRadius: BorderRadius.circular(8),
@@ -524,7 +539,20 @@ class _InsuranceAuthModalViewState extends State<InsuranceAuthModalView> {
                     ],
                   ),
                 ],
-            ),
+              );
+
+              if (isCompact) {
+                return SingleChildScrollView(
+                  padding: const EdgeInsets.all(16),
+                  child: bodyContent,
+                );
+              }
+
+              return Padding(
+                padding: const EdgeInsets.fromLTRB(20, 14, 20, 16),
+                child: bodyContent,
+              );
+            },
           ),
         );
       },

lib/features/referrals/presentation/views/department_referral_modal_view.dart

@@ -103,12 +103,15 @@ class _DepartmentReferralModalViewState extends State<DepartmentReferralModalVie
   @override
   Widget build(BuildContext context) {
     final formattedDate = DateFormat('dd/MM/yyyy').format(DateTime.now());
+    final mediaQuery = MediaQuery.sizeOf(context);
+    final modalHeight = (mediaQuery.height * 0.90).clamp(650.0, 780.0);
+    final modalWidth = (mediaQuery.width * 0.90).clamp(840.0, 920.0);
 
     return Observer(
       builder: (_) {
         return MedicalModalDialog(
-          maxWidth: 820,
+          maxWidth: modalWidth,
-          maxHeight: 650,
+          maxHeight: modalHeight,
           title: 'Referir a Departamento',
           titleIcon: Container(
             padding: const EdgeInsets.all(8),
@@ -215,86 +218,16 @@ class _DepartmentReferralModalViewState extends State<DepartmentReferralModalVie
               ],
             ),
           ),
-          child: SingleChildScrollView(
+          child: LayoutBuilder(
-            padding: const EdgeInsets.all(20),
+            builder: (context, constraints) {
-            child: Column(
+              final isCompact = constraints.maxHeight < 420;
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              children: [
-                // Membrete Informativo del Médico
-                Container(
-                  padding: const EdgeInsets.all(14),
-                  decoration: BoxDecoration(
-                    color: const Color(0xFFF8FAFC),
-                    borderRadius: BorderRadius.circular(12),
-                    border: Border.all(color: const Color(0xFFE2E8F0)),
-                  ),
-                  child: Column(
-                    children: [
-                      Text(
-                        _configStore.nombreDoctor.isNotEmpty
-                            ? _configStore.nombreDoctor
-                            : 'Dr. Luis A. Castro Sosa',
-                        textAlign: TextAlign.center,
-                        style: const TextStyle(
-                          fontSize: 18,
-                          fontWeight: FontWeight.w700,
-                          color: AppColors.textPrimary,
-                          letterSpacing: -0.3,
-                        ),
-                      ),
-                      if (_configStore.especialidad.isNotEmpty) ...[
-                        const SizedBox(height: 2),
-                        Text(
-                          _configStore.especialidad.toUpperCase(),
-                          textAlign: TextAlign.center,
-                          style: const TextStyle(
-                            fontSize: 11.5,
-                            fontWeight: FontWeight.w600,
-                            color: AppColors.primary,
-                            letterSpacing: 0.5,
-                          ),
-                        ),
-                      ],
-                      if (_configStore.descripEspecialidad.isNotEmpty) ...[
-                        const SizedBox(height: 2),
-                        Text(
-                          _configStore.descripEspecialidad.toUpperCase(),
-                          textAlign: TextAlign.center,
-                          style: const TextStyle(
-                            fontSize: 10,
-                            color: AppColors.textMuted,
-                          ),
-                        ),
-                      ],
-                      const SizedBox(height: 4),
-                      Text(
-                        'Fecha: $formattedDate',
-                        style: const TextStyle(
-                          fontSize: 11,
-                          fontWeight: FontWeight.w500,
-                          color: AppColors.textSecondary,
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-                const SizedBox(height: 16),
 
-                const Text(
+              final textField = TextField(
-                  'Detalle del Referimiento a Departamento:',
-                  style: TextStyle(
-                    fontSize: 13,
-                    fontWeight: FontWeight.w700,
-                    color: AppColors.textPrimary,
-                  ),
-                ),
-                const SizedBox(height: 8),
-
-                // Área de texto multilínea idéntica a ScrolledText de AlfaMedical
-                TextField(
                 controller: _referralController,
-                  maxLines: 12,
+                maxLines: isCompact ? 10 : null,
-                  minLines: 9,
+                minLines: isCompact ? 5 : null,
+                expands: !isCompact,
+                textAlignVertical: TextAlignVertical.top,
                 style: const TextStyle(fontSize: 13.5, height: 1.5, color: AppColors.textPrimary),
                 decoration: InputDecoration(
                   hintText: 'Redacte el referimiento a departamento...',
@@ -311,10 +244,99 @@ class _DepartmentReferralModalViewState extends State<DepartmentReferralModalVie
                     borderSide: const BorderSide(color: AppColors.primary, width: 1.5),
                   ),
                 ),
+              );
+
+              final bodyContent = Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  // Membrete Informativo del Médico
+                  Container(
+                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+                    decoration: BoxDecoration(
+                      color: const Color(0xFFF8FAFC),
+                      borderRadius: BorderRadius.circular(10),
+                      border: Border.all(color: const Color(0xFFE2E8F0)),
+                    ),
+                    child: Column(
+                      children: [
+                        Text(
+                          _configStore.nombreDoctor.isNotEmpty
+                              ? _configStore.nombreDoctor
+                              : 'Dr. Luis A. Castro Sosa',
+                          textAlign: TextAlign.center,
+                          style: const TextStyle(
+                            fontSize: 17,
+                            fontWeight: FontWeight.w700,
+                            color: AppColors.textPrimary,
+                            letterSpacing: -0.3,
+                          ),
+                        ),
+                        if (_configStore.especialidad.isNotEmpty) ...[
+                          const SizedBox(height: 2),
+                          Text(
+                            _configStore.especialidad.toUpperCase(),
+                            textAlign: TextAlign.center,
+                            style: const TextStyle(
+                              fontSize: 11,
+                              fontWeight: FontWeight.w600,
+                              color: AppColors.primary,
+                              letterSpacing: 0.5,
+                            ),
+                          ),
+                        ],
+                        if (_configStore.descripEspecialidad.isNotEmpty) ...[
+                          const SizedBox(height: 1),
+                          Text(
+                            _configStore.descripEspecialidad.toUpperCase(),
+                            textAlign: TextAlign.center,
+                            style: const TextStyle(
+                              fontSize: 9.5,
+                              color: AppColors.textMuted,
+                            ),
+                          ),
+                        ],
+                        const SizedBox(height: 3),
+                        Text(
+                          'Fecha: $formattedDate',
+                          style: const TextStyle(
+                            fontSize: 10.5,
+                            fontWeight: FontWeight.w500,
+                            color: AppColors.textSecondary,
+                          ),
                         ),
                       ],
                     ),
                   ),
+                  const SizedBox(height: 12),
+
+                  const Text(
+                    'Detalle del Referimiento a Departamento:',
+                    style: TextStyle(
+                      fontSize: 13,
+                      fontWeight: FontWeight.w700,
+                      color: AppColors.textPrimary,
+                    ),
+                  ),
+                  const SizedBox(height: 8),
+
+                  // Área de texto multilínea que se expande para rellenar todo el espacio inferior
+                  if (isCompact) textField else Expanded(child: textField),
+                ],
+              );
+
+              if (isCompact) {
+                return SingleChildScrollView(
+                  padding: const EdgeInsets.all(16),
+                  child: bodyContent,
+                );
+              }
+
+              return Padding(
+                padding: const EdgeInsets.fromLTRB(20, 14, 20, 16),
+                child: bodyContent,
+              );
+            },
+          ),
         );
       },
     );

lib/features/referrals/presentation/views/doctor_referral_modal_view.dart

@@ -102,12 +102,15 @@ class _DoctorReferralModalViewState extends State<DoctorReferralModalView> {
   @override
   Widget build(BuildContext context) {
     final formattedDate = DateFormat('dd/MM/yyyy').format(DateTime.now());
+    final mediaQuery = MediaQuery.sizeOf(context);
+    final modalHeight = (mediaQuery.height * 0.90).clamp(650.0, 780.0);
+    final modalWidth = (mediaQuery.width * 0.90).clamp(840.0, 920.0);
 
     return Observer(
       builder: (_) {
         return MedicalModalDialog(
-          maxWidth: 820,
+          maxWidth: modalWidth,
-          maxHeight: 650,
+          maxHeight: modalHeight,
           title: 'Referir a Doctor (a)',
           titleIcon: Container(
             padding: const EdgeInsets.all(8),
@@ -214,86 +217,16 @@ class _DoctorReferralModalViewState extends State<DoctorReferralModalView> {
               ],
             ),
           ),
-          child: SingleChildScrollView(
+          child: LayoutBuilder(
-            padding: const EdgeInsets.all(20),
+            builder: (context, constraints) {
-            child: Column(
+              final isCompact = constraints.maxHeight < 420;
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              children: [
-                // Membrete Informativo del Médico
-                Container(
-                  padding: const EdgeInsets.all(14),
-                  decoration: BoxDecoration(
-                    color: const Color(0xFFF8FAFC),
-                    borderRadius: BorderRadius.circular(12),
-                    border: Border.all(color: const Color(0xFFE2E8F0)),
-                  ),
-                  child: Column(
-                    children: [
-                      Text(
-                        _configStore.nombreDoctor.isNotEmpty
-                            ? _configStore.nombreDoctor
-                            : 'Dr. Luis A. Castro Sosa',
-                        textAlign: TextAlign.center,
-                        style: const TextStyle(
-                          fontSize: 18,
-                          fontWeight: FontWeight.w700,
-                          color: AppColors.textPrimary,
-                          letterSpacing: -0.3,
-                        ),
-                      ),
-                      if (_configStore.especialidad.isNotEmpty) ...[
-                        const SizedBox(height: 2),
-                        Text(
-                          _configStore.especialidad.toUpperCase(),
-                          textAlign: TextAlign.center,
-                          style: const TextStyle(
-                            fontSize: 11.5,
-                            fontWeight: FontWeight.w600,
-                            color: AppColors.primary,
-                            letterSpacing: 0.5,
-                          ),
-                        ),
-                      ],
-                      if (_configStore.descripEspecialidad.isNotEmpty) ...[
-                        const SizedBox(height: 2),
-                        Text(
-                          _configStore.descripEspecialidad.toUpperCase(),
-                          textAlign: TextAlign.center,
-                          style: const TextStyle(
-                            fontSize: 10,
-                            color: AppColors.textMuted,
-                          ),
-                        ),
-                      ],
-                      const SizedBox(height: 4),
-                      Text(
-                        'Fecha: $formattedDate',
-                        style: const TextStyle(
-                          fontSize: 11,
-                          fontWeight: FontWeight.w500,
-                          color: AppColors.textSecondary,
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-                const SizedBox(height: 16),
 
-                const Text(
+              final textField = TextField(
-                  'Detalle de la Interconsulta / Referimiento:',
-                  style: TextStyle(
-                    fontSize: 13,
-                    fontWeight: FontWeight.w700,
-                    color: AppColors.textPrimary,
-                  ),
-                ),
-                const SizedBox(height: 8),
-
-                // Área de texto multilínea idéntica a ScrolledText de AlfaMedical
-                TextField(
                 controller: _referralController,
-                  maxLines: 12,
+                maxLines: isCompact ? 10 : null,
-                  minLines: 9,
+                minLines: isCompact ? 5 : null,
+                expands: !isCompact,
+                textAlignVertical: TextAlignVertical.top,
                 style: const TextStyle(fontSize: 13.5, height: 1.5, color: AppColors.textPrimary),
                 decoration: InputDecoration(
                   hintText: 'Redacte el referimiento médico...',
@@ -310,10 +243,99 @@ class _DoctorReferralModalViewState extends State<DoctorReferralModalView> {
                     borderSide: const BorderSide(color: AppColors.primary, width: 1.5),
                   ),
                 ),
+              );
+
+              final bodyContent = Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  // Membrete Informativo del Médico
+                  Container(
+                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+                    decoration: BoxDecoration(
+                      color: const Color(0xFFF8FAFC),
+                      borderRadius: BorderRadius.circular(10),
+                      border: Border.all(color: const Color(0xFFE2E8F0)),
+                    ),
+                    child: Column(
+                      children: [
+                        Text(
+                          _configStore.nombreDoctor.isNotEmpty
+                              ? _configStore.nombreDoctor
+                              : 'Dr. Luis A. Castro Sosa',
+                          textAlign: TextAlign.center,
+                          style: const TextStyle(
+                            fontSize: 17,
+                            fontWeight: FontWeight.w700,
+                            color: AppColors.textPrimary,
+                            letterSpacing: -0.3,
+                          ),
+                        ),
+                        if (_configStore.especialidad.isNotEmpty) ...[
+                          const SizedBox(height: 2),
+                          Text(
+                            _configStore.especialidad.toUpperCase(),
+                            textAlign: TextAlign.center,
+                            style: const TextStyle(
+                              fontSize: 11,
+                              fontWeight: FontWeight.w600,
+                              color: AppColors.primary,
+                              letterSpacing: 0.5,
+                            ),
+                          ),
+                        ],
+                        if (_configStore.descripEspecialidad.isNotEmpty) ...[
+                          const SizedBox(height: 1),
+                          Text(
+                            _configStore.descripEspecialidad.toUpperCase(),
+                            textAlign: TextAlign.center,
+                            style: const TextStyle(
+                              fontSize: 9.5,
+                              color: AppColors.textMuted,
+                            ),
+                          ),
+                        ],
+                        const SizedBox(height: 3),
+                        Text(
+                          'Fecha: $formattedDate',
+                          style: const TextStyle(
+                            fontSize: 10.5,
+                            fontWeight: FontWeight.w500,
+                            color: AppColors.textSecondary,
+                          ),
                         ),
                       ],
                     ),
                   ),
+                  const SizedBox(height: 12),
+
+                  const Text(
+                    'Detalle de la Interconsulta / Referimiento:',
+                    style: TextStyle(
+                      fontSize: 13,
+                      fontWeight: FontWeight.w700,
+                      color: AppColors.textPrimary,
+                    ),
+                  ),
+                  const SizedBox(height: 8),
+
+                  // Área de texto multilínea que se expande para rellenar todo el espacio inferior
+                  if (isCompact) textField else Expanded(child: textField),
+                ],
+              );
+
+              if (isCompact) {
+                return SingleChildScrollView(
+                  padding: const EdgeInsets.all(16),
+                  child: bodyContent,
+                );
+              }
+
+              return Padding(
+                padding: const EdgeInsets.fromLTRB(20, 14, 20, 16),
+                child: bodyContent,
+              );
+            },
+          ),
         );
       },
     );