Merge remote master into local master

Alinear tabla de pacientes, agregar modal de detalles completo y actualizar estilo de badge ambulatorio
fix: update section title from Mapa de Camas to Camas
2026-08-11 15:00:48 +00:00 · 2026-08-11 14:52:44 +00:00 · 2026-08-11 13:56:31 +00:00 · 2026-08-11 13:10:55 +00:00
12 changed files with 494 additions and 491 deletions
@@ -125,12 +125,9 @@ function AppContent() {
            pacientes={store.pacientes}
            internaciones={store.internaciones}
            camas={store.camas}
-            onAgregarCultivo={store.agregarCultivo}
-            onActualizarCultivo={store.actualizarCultivo}
-            onEliminarCultivo={store.eliminarCultivo}
            getPacienteById={store.getPacienteById}
            getInternacionActivaByPaciente={store.getInternacionActivaByPaciente}
-            canEdit={true}
+            canEdit={false}
          />
        );
      case 'historiaclinica': {
@@ -42,25 +42,27 @@ export function calcularEdad(fechaNacimiento?: string): string | number {
 export function isCamaFueraDeGrupo(
  cama: { numero: string; grupoId?: string; areaId?: string; sector?: string }
 ): boolean {
-  if (cama.sector === 'Fuera de Área') return true;
-  if (cama.sector === 'En Área') return false;
-  return computeSector(cama.numero) === 'Fuera de Área';
+  return computeSector(cama?.numero || '') === 'Fuera de Área';
 }

 export function computeSector(numero: string): "En Área" | "Fuera de Área" {
  if (!numero) return 'En Área';
-  const parts = String(numero).trim().split('-');
-  if (parts.length === 0) return 'En Área';
+  const cleanNumero = String(numero).trim();
+  // Format is XXX-YY (where XXX is room number, YY is bed number in room)
+  // Extract room number XXX (first part before hyphen if hyphen exists, or first 3 digits)
+  const parts = cleanNumero.split('-');
  const salaStr = parts[0].trim();
-  const salaNum = parseInt(salaStr, 10);
-  if (isNaN(salaNum)) return 'En Área';
  
-  // 3XX-YY where XX is odd (so the whole 3XX is odd)
-  if (salaStr.length === 3 && salaStr.startsWith('3') && salaNum % 2 !== 0) {
-    return 'Fuera de Área';
+  // Fuera de área rule 1: 3XX where XX is an odd number (e.g., 301, 303, 315, 399)
+  // salaStr length can be 3, starting with '3'
+  if (salaStr.length === 3 && salaStr.startsWith('3')) {
+    const xxNum = parseInt(salaStr.slice(1), 10);
+    if (!isNaN(xxNum) && xxNum % 2 !== 0) {
+      return 'Fuera de Área';
+    }
  }
  
-  // All those starting with 4
+  // Fuera de área rule 2: 4XX (starts with '4', regardless of digits XX)
  if (salaStr.startsWith('4')) {
    return 'Fuera de Área';
  }
@@ -1,11 +1,8 @@
 import { useState } from 'react';
-import { Microscope, Plus, Search, Calendar, AlertCircle, Trash2, CheckCircle2, Pencil } from 'lucide-react';
+import { Microscope, Search, Calendar, AlertCircle, CheckCircle2 } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import type { Cultivo, Paciente, Cama, Internacion } from '@/types';

@@ -16,12 +13,12 @@ interface CultivosProps {
  camas?: Cama[];
  patient?: Paciente;
  internacionId?: string;
-  onAgregarCultivo: (cultivo: Omit<Cultivo, 'id'>) => void;
+  onAgregarCultivo?: (cultivo: Omit<Cultivo, 'id'>) => void;
  onActualizarCultivo?: (id: string, datos: Partial<Cultivo>) => void;
-  onEliminarCultivo: (id: string) => void;
+  onEliminarCultivo?: (id: string) => void;
  getPacienteById?: (id: string) => Paciente | undefined;
  getInternacionActivaByPaciente?: (pacienteId: string) => Internacion | undefined;
-  canEdit: boolean;
+  canEdit?: boolean;
 }

 export function Cultivos({
@@ -30,33 +27,10 @@ export function Cultivos({
  internaciones = [],
  camas = [],
  patient,
-  internacionId,
-  onAgregarCultivo,
-  onActualizarCultivo,
-  onEliminarCultivo,
  getPacienteById,
-  getInternacionActivaByPaciente,
-  canEdit,
 }: CultivosProps) {
  const [busqueda, setBusqueda] = useState('');
  const [filtroEstado, setFiltroEstado] = useState<'todos' | 'NAF/Pendiente' | 'Parcial' | 'Positivo' | 'Negativo'>('todos');
-  const [dialogoNuevoAbierto, setDialogoNuevoAbierto] = useState(false);
-  const [dialogoParcialAbierto, setDialogoParcialAbierto] = useState(false);
-  const [dialogoDefinitivoAbierto, setDialogoDefinitivoAbierto] = useState(false);
-  const [cultivoSeleccionado, setCultivoSeleccionado] = useState<Cultivo | null>(null);
-  
-  const [pacienteSeleccionado, setPacienteSeleccionado] = useState<string>(patient?.id || '');
-  const [busquedaPaciente, setBusquedaPaciente] = useState('');
-  const [fechaToma, setFechaToma] = useState(new Date().toISOString().split('T')[0]);
-  const [protocolo, setProtocolo] = useState('');
-  const [tipoMuestra, setTipoMuestra] = useState<Cultivo['tipoMuestra']>('HMCx2');
-  const [observaciones, setObservaciones] = useState('');
-  
-  const [fechaResultado, setFechaResultado] = useState(new Date().toISOString().split('T')[0]);
-  const [estadoResultado, setEstadoResultado] = useState<Cultivo['estado']>('Positivo');
-  const [germen, setGermen] = useState('');
-  const [sensible, setSensible] = useState('');
-  const [resistente, setResistente] = useState('');

  const findPaciente = (pacienteId: string): Paciente | undefined => {
    if (patient && patient.id === pacienteId) return patient;
@@ -107,88 +81,25 @@ export function Cultivos({
    }
  };

-  const abrirNuevo = () => {
-    setCultivoSeleccionado(null);
-    setPacienteSeleccionado(patient?.id || '');
-    setBusquedaPaciente('');
-    setFechaToma(new Date().toISOString().split('T')[0]);
-    setProtocolo('');
-    setTipoMuestra('HMCx2');
-    setObservaciones('');
-    setDialogoNuevoAbierto(true);
-  };
-
-  const abrirParcial = (cultivo: Cultivo) => {
-    setCultivoSeleccionado(cultivo);
-    setGermen(cultivo.germen || '');
-    setSensible(cultivo.sensible || '');
-    setResistente(cultivo.resistente || '');
-    setDialogoParcialAbierto(true);
-  };
-
-  const abrirDefinitivo = (cultivo: Cultivo) => {
-    setCultivoSeleccionado(cultivo);
-    setFechaResultado(new Date().toISOString().split('T')[0]);
-    setEstadoResultado(cultivo.estado === 'Parcial' ? 'Positivo' : cultivo.estado);
-    setGermen(cultivo.germen || '');
-    setSensible(cultivo.sensible || '');
-    setResistente(cultivo.resistente || '');
-    setDialogoDefinitivoAbierto(true);
-  };
-
-  const guardarNuevo = () => {
-    const targetPac = patient || findPaciente(pacienteSeleccionado);
-    if (!protocolo.trim() || !targetPac) return;
-    const activeInter = getInternacionActivaByPaciente ? getInternacionActivaByPaciente(targetPac.id) : undefined;
-    const targetInternacionId = internacionId || activeInter?.id || '';
-
-    onAgregarCultivo({
-      pacienteId: targetPac.id,
-      internacionId: targetInternacionId,
-      fechaToma,
-      protocolo,
-      tipoMuestra,
-      observaciones: observaciones,
-      estado: 'NAF/Pendiente',
-    });
-    setDialogoNuevoAbierto(false);
-  };
-
-  const guardarParcial = () => {
-    if (!cultivoSeleccionado || !germen.trim()) return;
-    if (onActualizarCultivo) {
-      onActualizarCultivo(cultivoSeleccionado.id, {
-        estado: 'Parcial',
-        germen,
-        sensible: sensible,
-        resistente: resistente,
-      });
-    }
-    setDialogoParcialAbierto(false);
-  };
-
-  const guardarDefinitivo = () => {
-    if (!cultivoSeleccionado) return;
-    if (onActualizarCultivo) {
-      onActualizarCultivo(cultivoSeleccionado.id, {
-        estado: estadoResultado,
-        fechaResultado,
-        germen: cultivoSeleccionado.germen,
-        sensible: cultivoSeleccionado.sensible,
-        resistente: cultivoSeleccionado.resistente,
-      });
-    }
-    setDialogoDefinitivoAbierto(false);
-  };
-
  return (
-    <div className="space-y-4">
+    <div className="space-y-6 dark:text-white">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2.5">
+            <Microscope className="h-7 w-7 text-blue-600 dark:text-blue-400 shrink-0" />
+            Cultivos
+          </h1>
+          <p className="text-gray-500 dark:text-gray-400">Informe y registro de cultivos y muestras</p>
+        </div>
+      </div>
+
      <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
        <div className="flex-1 flex gap-2">
          <div className="relative flex-1">
            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
            <Input
-              placeholder="Buscar por protocolo, germen..."
+              placeholder="Buscar por protocolo, germen, paciente..."
              value={busqueda}
              onChange={(e) => setBusqueda(e.target.value)}
              className="pl-8"
@@ -207,12 +118,6 @@ export function Cultivos({
            </SelectContent>
          </Select>
        </div>
-        {canEdit && (
-          <Button onClick={abrirNuevo} size="sm">
-            <Plus className="h-4 w-4 mr-2" />
-            Nuevo Cultivo
-          </Button>
-        )}
      </div>

      <div className="space-y-3">
@@ -238,17 +143,17 @@ export function Cultivos({
                        }`} />
                      </div>
                      <div className="min-w-0">
-                        <div className="flex items-center gap-2">
-                          <h3 className="font-bold text-sm sm:text-base truncate">
-                            {pac ? `${pac.apellido}, ${pac.nombre}` : 'Paciente no encontrado'}
-                          </h3>
+                        <div className="flex items-center gap-2 flex-wrap">
                          {camaNombre && (
-                            <Badge variant="outline" className="text-xs shrink-0">
+                            <Badge variant="outline" className="text-xs shrink-0 font-semibold bg-blue-50 text-blue-700 dark:bg-blue-950/80 dark:text-blue-300 dark:border-blue-800">
                              {camaNombre}
                            </Badge>
                          )}
+                          <h3 className="font-bold text-sm sm:text-base truncate">
+                            {pac ? `${pac.apellido}, ${pac.nombre}` : 'Paciente no encontrado'}
+                          </h3>
                        </div>
-                        <div className="flex flex-wrap items-center gap-2 text-xs sm:text-sm text-gray-500">
+                        <div className="flex flex-wrap items-center gap-2 text-xs sm:text-sm text-gray-500 mt-1">
                          <span className="flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            {cultivo.fechaToma}
@@ -260,105 +165,81 @@ export function Cultivos({
                        </div>
                      </div>
                    </div>
-                  <div className="flex flex-wrap items-center gap-1 sm:gap-2 ml-auto sm:ml-0">
-                    {canEdit && onActualizarCultivo && cultivo.estado === 'NAF/Pendiente' && (
-                      <Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
-                        <CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
-                        <span className="hidden sm:inline">Definitivo</span>
-                      </Button>
-                    )}
-                    {canEdit && onActualizarCultivo && (cultivo.estado === 'Positivo' || cultivo.estado === 'Negativo') && (
-                      <Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
-                        <Pencil className="h-3 w-3 sm:h-4 sm:w-4" />
-                      </Button>
-                    )}
-                    {canEdit && onActualizarCultivo && cultivo.estado === 'Parcial' && (
-                      <Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirParcial(cultivo)}>
-                        <Pencil className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
-                        <span className="hidden sm:inline">Editar</span>
-                      </Button>
-                    )}
-                    {canEdit && (
-                      <Button size="sm" variant="outline" className="text-red-600 text-xs px-2 py-1" onClick={() => onEliminarCultivo(cultivo.id)}>
-                        <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
-                      </Button>
-                    )}
                  </div>
-                </div>

-                {cultivo.protocolo && (
-                  <p className="text-xs text-gray-500">
-                    Protocolo: {cultivo.protocolo}
-                  </p>
-                )}
-                {cultivo.observaciones && (
-                  <p className="text-sm text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-800 p-2 rounded">
-                    {cultivo.observaciones}
-                  </p>
-                )}
-
-                {cultivo.estado === 'Parcial' && cultivo.germen && (
-                  <div className="bg-orange-50 p-3 rounded-lg border border-orange-200">
-                    <p className="text-sm font-medium text-orange-800 flex items-center gap-2">
-                      <AlertCircle className="h-4 w-4" />
-                      PARCIAL - Germen: {cultivo.germen}
+                  {cultivo.protocolo && (
+                    <p className="text-xs text-gray-500">
+                      Protocolo: {cultivo.protocolo}
                    </p>
-                    {(cultivo.sensible || cultivo.resistente) && (
-                      <div className="mt-2 space-y-1">
-                        {cultivo.sensible && (
-                          <p className="text-xs text-orange-700">Sensible: {cultivo.sensible}</p>
-                        )}
-                        {cultivo.resistente && (
-                          <p className="text-xs text-orange-700">Resistente: {cultivo.resistente}</p>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                )}
-
-                {cultivo.estado === 'Positivo' && cultivo.germen && (
-                  <div className="bg-red-50 p-3 rounded-lg border border-red-200">
-                    <p className="text-sm font-medium text-red-800 flex items-center gap-2">
-                      <AlertCircle className="h-4 w-4" />
-                      Germen: {cultivo.germen}
+                  )}
+                  {cultivo.observaciones && (
+                    <p className="text-sm text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-800 p-2 rounded">
+                      {cultivo.observaciones}
                    </p>
-                    {cultivo.fechaResultado && (
-                      <p className="text-xs text-red-600 mt-1">
-                        Resultado: {cultivo.fechaResultado}
+                  )}
+
+                  {cultivo.estado === 'Parcial' && cultivo.germen && (
+                    <div className="bg-orange-50 p-3 rounded-lg border border-orange-200">
+                      <p className="text-sm font-medium text-orange-800 flex items-center gap-2">
+                        <AlertCircle className="h-4 w-4" />
+                        PARCIAL - Germen: {cultivo.germen}
                      </p>
-                    )}
-                    {(cultivo.sensible || cultivo.resistente) && (
-                      <div className="mt-2 space-y-2">
-                        {cultivo.sensible && (
-                          <div>
-                            <p className="text-xs font-medium text-green-700 mb-1">Sensible a:</p>
-                            <p className="text-sm text-green-800">{cultivo.sensible}</p>
-                          </div>
-                        )}
-                        {cultivo.resistente && (
-                          <div>
-                            <p className="text-xs font-medium text-red-700 mb-1">Resistente a:</p>
-                            <p className="text-sm text-red-800">{cultivo.resistente}</p>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                )}
+                      {(cultivo.sensible || cultivo.resistente) && (
+                        <div className="mt-2 space-y-1">
+                          {cultivo.sensible && (
+                            <p className="text-xs text-orange-700">Sensible: {cultivo.sensible}</p>
+                          )}
+                          {cultivo.resistente && (
+                            <p className="text-xs text-orange-700">Resistente: {cultivo.resistente}</p>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  )}

-                {cultivo.estado === 'Negativo' && (
-                  <div className="bg-green-50 p-3 rounded-lg border border-green-200">
-                    <p className="text-sm font-medium text-green-800 flex items-center gap-2">
-                      <CheckCircle2 className="h-4 w-4" />
-                      Cultivo Negativo
-                    </p>
-                  </div>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-        );
-      })}
+                  {cultivo.estado === 'Positivo' && cultivo.germen && (
+                    <div className="bg-red-50 p-3 rounded-lg border border-red-200">
+                      <p className="text-sm font-medium text-red-800 flex items-center gap-2">
+                        <AlertCircle className="h-4 w-4" />
+                        Germen: {cultivo.germen}
+                      </p>
+                      {cultivo.fechaResultado && (
+                        <p className="text-xs text-red-600 mt-1">
+                          Resultado: {cultivo.fechaResultado}
+                        </p>
+                      )}
+                      {(cultivo.sensible || cultivo.resistente) && (
+                        <div className="mt-2 space-y-2">
+                          {cultivo.sensible && (
+                            <div>
+                              <p className="text-xs font-medium text-green-700 mb-1">Sensible a:</p>
+                              <p className="text-sm text-green-800">{cultivo.sensible}</p>
+                            </div>
+                          )}
+                          {cultivo.resistente && (
+                            <div>
+                              <p className="text-xs font-medium text-red-700 mb-1">Resistente a:</p>
+                              <p className="text-sm text-red-800">{cultivo.resistente}</p>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {cultivo.estado === 'Negativo' && (
+                    <div className="bg-green-50 p-3 rounded-lg border border-green-200">
+                      <p className="text-sm font-medium text-green-800 flex items-center gap-2">
+                        <CheckCircle2 className="h-4 w-4" />
+                        Cultivo Negativo
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}

        {cultivosFiltrados.length === 0 && (
          <p className="text-center text-gray-500 py-8">
@@ -366,138 +247,6 @@ export function Cultivos({
          </p>
        )}
      </div>
-
-      {/* Dialog Nuevo Cultivo */}
-      <Dialog open={dialogoNuevoAbierto} onOpenChange={setDialogoNuevoAbierto}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Nuevo Cultivo</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            {!patient && (
-              <div className="space-y-2">
-                <Label>Paciente</Label>
-                <Input
-                  placeholder="Buscar paciente por nombre o DNI..."
-                  value={busquedaPaciente}
-                  onChange={(e) => setBusquedaPaciente(e.target.value)}
-                  className="mb-2 text-xs"
-                />
-                <Select value={pacienteSeleccionado} onValueChange={setPacienteSeleccionado}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Seleccionar paciente" />
-                  </SelectTrigger>
-                  <SelectContent className="max-h-60 overflow-auto">
-                    {pacientes
-                      .filter(p => !busquedaPaciente || `${p.apellido} ${p.nombre} ${p.dni}`.toLowerCase().includes(busquedaPaciente.toLowerCase()))
-                      .map(p => (
-                        <SelectItem key={p.id} value={p.id}>
-                          {p.apellido}, {p.nombre} (DNI: {p.dni})
-                        </SelectItem>
-                      ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            )}
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label>Fecha de Toma</Label>
-                <Input type="date" value={fechaToma} onChange={(e) => setFechaToma(e.target.value)} />
-              </div>
-              <div className="space-y-2">
-                <Label>Tipo de Muestra</Label>
-                <Select value={tipoMuestra} onValueChange={(v) => setTipoMuestra(v as Cultivo['tipoMuestra'])}>
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="HMCx2">HMCx2</SelectItem>
-                    <SelectItem value="HMCx1">HMCx1</SelectItem>
-                    <SelectItem value="Plaq.File">Plaq. File</SelectItem>
-                    <SelectItem value="Orina">Orina</SelectItem>
-                    <SelectItem value="Cateter">Cateter</SelectItem>
-                    <SelectItem value="Esputo">Esputo</SelectItem>
-                    <SelectItem value="LCR">LCR</SelectItem>
-                    <SelectItem value="Sangre">Sangre</SelectItem>
-                    <SelectItem value="Tejido">Tejido</SelectItem>
-                    <SelectItem value="Otro">Otro</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <Label>Protocolo</Label>
-              <Input value={protocolo} onChange={(e) => setProtocolo(e.target.value)} placeholder="Ej: P-2024-001" />
-            </div>
-            <div className="space-y-2">
-              <Label>Observaciones</Label>
-              <Input value={observaciones} onChange={(e) => setObservaciones(e.target.value)} />
-            </div>
-            <div className="flex justify-end gap-2">
-              <Button variant="outline" onClick={() => setDialogoNuevoAbierto(false)}>Cancelar</Button>
-              <Button onClick={guardarNuevo}>Guardar</Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* Dialog Parcial */}
-      <Dialog open={dialogoParcialAbierto} onOpenChange={setDialogoParcialAbierto}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Resultado Parcial</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label>Germen</Label>
-              <Input value={germen} onChange={(e) => setGermen(e.target.value)} />
-            </div>
-            <div className="space-y-2">
-              <Label>Sensible a</Label>
-              <Input value={sensible} onChange={(e) => setSensible(e.target.value)} placeholder="Ej: Ampicilina" />
-            </div>
-            <div className="space-y-2">
-              <Label>Resistente a</Label>
-              <Input value={resistente} onChange={(e) => setResistente(e.target.value)} placeholder="Ej: Cefalosporinas" />
-            </div>
-            <div className="flex justify-end gap-2">
-              <Button variant="outline" onClick={() => setDialogoParcialAbierto(false)}>Cancelar</Button>
-              <Button onClick={guardarParcial}>Guardar</Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* Dialog Definitivo */}
-      <Dialog open={dialogoDefinitivoAbierto} onOpenChange={setDialogoDefinitivoAbierto}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Resultado Definitivo</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label>Fecha de Resultado</Label>
-              <Input type="date" value={fechaResultado} onChange={(e) => setFechaResultado(e.target.value)} />
-            </div>
-            <div className="space-y-2">
-              <Label>Estado</Label>
-              <Select value={estadoResultado} onValueChange={(v) => setEstadoResultado(v as Cultivo['estado'])}>
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="Positivo">Positivo</SelectItem>
-                  <SelectItem value="Negativo">Negativo</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex justify-end gap-2">
-              <Button variant="outline" onClick={() => setDialogoDefinitivoAbierto(false)}>Cancelar</Button>
-              <Button onClick={guardarDefinitivo}>Guardar</Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
    </div>
  );
 }
@@ -1,4 +1,5 @@
 import { 
+  LayoutDashboard,
  Bed, 
  Users, 
  ClipboardList, 
@@ -52,8 +53,11 @@ export function Dashboard({
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
-          <p className="text-gray-500 dark:text-gray-400">Resumen del servicio - Clinica Medica</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2.5">
+            <LayoutDashboard className="h-7 w-7 text-blue-600 dark:text-blue-400 shrink-0" />
+            Dashboard
+          </h1>
+          <p className="text-gray-500 dark:text-gray-400">Resumen del servicio - Clínica Médica</p>
        </div>
        <div className="flex items-center gap-2">
          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 dark:bg-green-900 dark:text-green-300 dark:border-green-700">
@@ -8,7 +8,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Badge } from '@/components/ui/badge';
 import { toast } from 'sonner';
 import type { Paciente, Cama, Grupo, Internacion } from '@/types';
-import { getNombreProfesional, calcularEdad } from '@/lib/utils';
+import { getNombreProfesional, calcularEdad, computeSector } from '@/lib/utils';
 import { useHospitalStore } from '@/hooks/useHospitalStore';

 interface EditIngresoProps {
@@ -343,7 +343,7 @@ export function EditIngreso({
                    onChange={(e) => setCamaInput(e.target.value)}
                  />
                  <p className="text-xs text-gray-500 mt-1">
-                    Esta cama será creada como "Fuera de área"
+                    {camaInput.trim() ? `Clasificación: ${computeSector(camaInput.trim())}` : 'Formato XXX-YY (Salas 3XX impares y 4XX son Fuera de Área)'}
                  </p>
                </div>
              )}
@@ -207,7 +207,10 @@ export function Evoluciones({
    <div className="space-y-6 dark:text-white overflow-x-hidden max-w-screen">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Evoluciones Diarias</h1>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2.5">
+            <FileText className="h-7 w-7 text-blue-600 dark:text-blue-400 shrink-0" />
+            Evoluciones Diarias
+          </h1>
          <p className="text-gray-500 dark:text-gray-400">Registro de evoluciones y signos vitales</p>
        </div>
        <Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
@@ -9,7 +9,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { Badge } from '@/components/ui/badge';
-import { Plus, Pencil, Trash2 } from 'lucide-react';
+import { Plus, Pencil, Trash2, UserCog } from 'lucide-react';

 const API_BASE = import.meta.env.VITE_API_URL || '/api';

@@ -177,7 +177,10 @@ export function GestionUsuarios() {
    <div className="space-y-4">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <div>
-          <h1 className="text-2xl font-bold dark:text-white">Gestión de Usuarios</h1>
+          <h1 className="text-2xl font-bold dark:text-white flex items-center gap-2.5">
+            <UserCog className="h-7 w-7 text-blue-600 dark:text-blue-400 shrink-0" />
+            Gestión de Usuarios
+          </h1>
          <p className="text-gray-500 dark:text-gray-400">Administrar usuarios del sistema</p>
        </div>
        <Button className="w-full sm:w-auto" onClick={() => { resetForm(); setDialogOpen(true); }}>
@@ -270,8 +270,8 @@ export function HistoriaClinica({
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">

        <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
-            <ClipboardList className="h-6 w-6 text-blue-600" />
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2.5">
+            <ClipboardList className="h-7 w-7 text-blue-600 dark:text-blue-400 shrink-0" />
            {cama?.numero || 'N/A'} - Historia Clínica
          </h1>
          <p className="text-gray-500 dark:text-gray-400">Módulo de Historia Clínica de Internación</p>
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ClipboardList, Plus, Search, LogOut, CheckCircle2, MoreHorizontal, FileText, Trash2 } from 'lucide-react';
+import { ClipboardList, Plus, Search, LogOut, CheckCircle2, MoreHorizontal, FileText, Trash2, Bed, User, Calendar, IdCard, Activity, CalendarDays, Clock, Settings } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -223,7 +223,10 @@ export function Internaciones({
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Internaciones</h1>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2.5">
+            <ClipboardList className="h-7 w-7 text-blue-600 dark:text-blue-400 shrink-0" />
+            Internaciones
+          </h1>
          <p className="text-gray-500 dark:text-gray-400">Gestión de internaciones en sala</p>
        </div>
        <Dialog open={dialogoNuevaAbierto} onOpenChange={setDialogoNuevaAbierto}>
@@ -412,15 +415,60 @@ export function Internaciones({
            <Table className="w-full min-w-max text-sm">
              <TableHeader>
                <TableRow>
-                  <TableHead>Cama</TableHead>
-                  <TableHead>Apellido</TableHead>
-                  <TableHead>Nombre</TableHead>
-                  <TableHead className="text-center">Edad</TableHead>
-                  <TableHead className="text-center">DNI</TableHead>
-                  <TableHead className="text-center">Estado</TableHead>
-                  <TableHead className="text-center">Fecha Ingreso</TableHead>
-                  <TableHead className="text-center">Duración</TableHead>
-                  <TableHead className="text-center w-[60px]">Acciones</TableHead>
+                  <TableHead>
+                    <div className="flex items-center gap-1.5">
+                      <Bed className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                      <span>Cama</span>
+                    </div>
+                  </TableHead>
+                  <TableHead>
+                    <div className="flex items-center gap-1.5">
+                      <User className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                      <span>Apellido</span>
+                    </div>
+                  </TableHead>
+                  <TableHead>
+                    <div className="flex items-center gap-1.5">
+                      <User className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                      <span>Nombre</span>
+                    </div>
+                  </TableHead>
+                  <TableHead className="text-center">
+                    <div className="flex items-center justify-center gap-1.5">
+                      <Calendar className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                      <span>Edad</span>
+                    </div>
+                  </TableHead>
+                  <TableHead className="text-center">
+                    <div className="flex items-center justify-center gap-1.5">
+                      <IdCard className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                      <span>DNI</span>
+                    </div>
+                  </TableHead>
+                  <TableHead className="text-center">
+                    <div className="flex items-center justify-center gap-1.5">
+                      <Activity className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                      <span>Estado</span>
+                    </div>
+                  </TableHead>
+                  <TableHead className="text-center">
+                    <div className="flex items-center justify-center gap-1.5">
+                      <CalendarDays className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                      <span>Fecha Ingreso</span>
+                    </div>
+                  </TableHead>
+                  <TableHead className="text-center">
+                    <div className="flex items-center justify-center gap-1.5">
+                      <Clock className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                      <span>Duración</span>
+                    </div>
+                  </TableHead>
+                  <TableHead className="text-center w-[60px]">
+                    <div className="flex items-center justify-center gap-1.5">
+                      <Settings className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                      <span className="sr-only">Acciones</span>
+                    </div>
+                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
@@ -3,7 +3,7 @@ import { Bed, CheckCircle2, Clock, Wrench, User, Plus, Trash, Edit2, Save, X } f
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { formatDateDDMMYYYY, getNombreProfesional, isCamaFueraDeGrupo } from '@/lib/utils';
+import { formatDateDDMMYYYY, getNombreProfesional, isCamaFueraDeGrupo, computeSector } from '@/lib/utils';

 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -181,7 +181,10 @@ export function MapaCamas({
    <div className="space-y-6 dark:text-white">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Mapa de Camas</h1>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2.5">
+            <Bed className="h-7 w-7 text-blue-600 dark:text-blue-400 shrink-0" />
+            Camas
+          </h1>
          <p className="text-gray-500 dark:text-gray-400">Gestión de camas del servicio</p>
        </div>
        <div className="flex items-center gap-2">
@@ -283,7 +286,7 @@ export function MapaCamas({
                      {getEstadoIcono(cama)}
                    </div>
                    <p className="font-bold text-sm sm:text-lg">{cama.numero}</p>
-                    <p className="text-xs opacity-75 truncate">{cama.grupoId ? grupoById[cama.grupoId] ?? 'Grupo desconocido' : 'Sin grupo'} - {cama.sector || 'En Área'}</p>
+                    <p className="text-xs opacity-75 truncate">{cama.grupoId ? grupoById[cama.grupoId] ?? 'Grupo desconocido' : 'Sin grupo'} - {computeSector(cama.numero)}</p>
                    <Badge variant="outline" className="mt-1 sm:mt-2 text-xs bg-white/50 dark:bg-gray-800 dark:text-gray-300">
                      {cama.tipo}
                    </Badge>
@@ -8,7 +8,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Badge } from '@/components/ui/badge';
 import { toast } from 'sonner';
 import type { Paciente, Cama, Grupo, Internacion } from '@/types';
-import { getNombreProfesional } from '@/lib/utils';
+import { getNombreProfesional, computeSector } from '@/lib/utils';
 import { useHospitalStore } from '@/hooks/useHospitalStore';

 interface NuevoIngresoProps {
@@ -162,7 +162,7 @@ export function NuevoIngreso({ pacientes, camas, grupos, onIniciarInternacion, o
            grupoId: grupoSeleccionado,
            tipo: 'General',
            estado: 'Ocupada',
-            sector: 'Fuera de Área'
+            sector: computeSector(numeroCama)
          });
        } else {
          toast.error('No se puede crear la cama');
@@ -381,7 +381,7 @@ export function NuevoIngreso({ pacientes, camas, grupos, onIniciarInternacion, o
                    onChange={(e) => setCamaInput(e.target.value)}
                  />
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                    Esta cama será creada como "Fuera de área"
+                    {camaInput.trim() ? `Clasificación: ${computeSector(camaInput.trim())}` : 'Formato XXX-YY (Salas 3XX impares y 4XX son Fuera de Área)'}
                  </p>
                </div>
              )}
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Users, Plus, Search, Edit2, Trash2, User, Calendar, Phone, Mail, Droplet, AlertTriangle, X, Save } from 'lucide-react';
+import { Users, Plus, Search, Edit2, Trash2, User, Calendar, Phone, AlertTriangle, X, Save, IdCard, Activity, Settings, ShieldCheck, MoreHorizontal, Eye } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -7,7 +7,9 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import type { Paciente } from '@/types';

 interface PacientesProps {
@@ -28,6 +30,9 @@ export function Pacientes({
  const [busqueda, setBusqueda] = useState('');
  const [dialogoAbierto, setDialogoAbierto] = useState(false);
  const [pacienteEditando, setPacienteEditando] = useState<Paciente | null>(null);
+  const [pacienteAEliminar, setPacienteAEliminar] = useState<Paciente | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [pacienteVerDetalle, setPacienteVerDetalle] = useState<Paciente | null>(null);

  // Formulario
  const [nombre, setNombre] = useState('');
@@ -142,7 +147,10 @@ export function Pacientes({
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Pacientes</h1>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2.5">
+            <Users className="h-7 w-7 text-blue-600 dark:text-blue-400 shrink-0" />
+            Pacientes
+          </h1>
          <p className="text-gray-500 dark:text-gray-400">Gestión de pacientes del hospital</p>
        </div>
        <Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
@@ -326,115 +334,157 @@ export function Pacientes({
        </CardContent>
      </Card>

-      {/* Lista de Pacientes */}
-      <div className="grid grid-cols-1 gap-4">
-        {pacientesFiltrados.map((paciente) => (
-          <Card key={paciente.id} className="hover:shadow-md transition-shadow">
-            <CardContent className="p-4">
-              <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
-                <div className="flex items-start gap-4">
-                  <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
-                    <User className="h-6 w-6 text-blue-600" />
-                  </div>
-                  <div>
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <h3 className="font-bold text-lg">
-                        {paciente.apellido}, {paciente.nombre}
-                      </h3>
-                      {estaInternado(paciente.id) && (
-                        <Badge className="bg-purple-100 text-purple-800">
-                          Internado
-                        </Badge>
-                      )}
-                    </div>
-                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-1 mt-2 text-sm text-gray-500">
-                      <div className="flex items-center gap-1">
-                        <span className="font-medium">DNI:</span> {paciente.dni}
+      {/* Tabla de Pacientes */}
+      {pacientesFiltrados.length > 0 ? (
+        <Card>
+          <CardContent className="p-0">
+            <div className="overflow-x-auto">
+              <Table className="w-full min-w-max text-sm">
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>
+                      <div className="flex items-center gap-1.5">
+                        <User className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                        <span>Apellido</span>
                      </div>
-                      <div className="flex items-center gap-1">
-                        <Calendar className="h-3 w-3" />
-                        {getEdad(paciente.fechaNacimiento)} años
+                    </TableHead>
+                    <TableHead>
+                      <div className="flex items-center gap-1.5">
+                        <User className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                        <span>Nombre</span>
                      </div>
-                      <div className="flex items-center gap-1">
-                        <span className="font-medium">Sexo:</span> {paciente.sexo}
+                    </TableHead>
+                    <TableHead>
+                      <div className="flex items-center gap-1.5">
+                        <IdCard className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                        <span>DNI</span>
                      </div>
-                      {paciente.grupoSanguineo && (
-                        <div className="flex items-center gap-1">
-                          <Droplet className="h-3 w-3" />
-                          {paciente.grupoSanguineo}
-                        </div>
-                      )}
-                    </div>
-                    <div className="flex flex-wrap gap-3 mt-2 text-sm text-gray-500">
-                      <div className="flex items-center gap-1">
-                        <Phone className="h-3 w-3" />
-                        {paciente.telefono}
+                    </TableHead>
+                    <TableHead>
+                      <div className="flex items-center gap-1.5">
+                        <Calendar className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                        <span>Edad</span>
                      </div>
-                      {paciente.email && (
-                        <div className="flex items-center gap-1">
-                          <Mail className="h-3 w-3" />
-                          {paciente.email}
-                        </div>
-                      )}
-                    </div>
-                    {(paciente.alergias || paciente.antecedentes) && (
-                      <div className="mt-2 flex flex-wrap gap-2">
-                        {paciente.alergias && (
-                          <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200">
-                            <AlertTriangle className="h-3 w-3 mr-1" />
-                            Alergias
-                          </Badge>
-                        )}
-                        {paciente.antecedentes && (
-                          <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
-                            Antecedentes
-                          </Badge>
-                        )}
+                    </TableHead>
+                    <TableHead>
+                      <div className="flex items-center gap-1.5">
+                        <Users className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                        <span>Sexo</span>
                      </div>
-                    )}
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleEditar(paciente)}
-                  >
-                    <Edit2 className="h-4 w-4" />
-                  </Button>
-                  <AlertDialog>
-                    <AlertDialogTrigger asChild>
-                      <Button variant="outline" size="sm" className="text-red-600 hover:bg-red-50">
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    </AlertDialogTrigger>
-                    <AlertDialogContent>
-                      <AlertDialogHeader>
-                        <AlertDialogTitle>¿Eliminar paciente?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                          Esta acción no se puede deshacer. Se eliminará permanentemente el paciente{' '}
-                          <strong>{paciente.apellido}, {paciente.nombre}</strong>.
-                        </AlertDialogDescription>
-                      </AlertDialogHeader>
-                      <AlertDialogFooter>
-                        <AlertDialogCancel>Cancelar</AlertDialogCancel>
-                        <AlertDialogAction
-                          onClick={() => onEliminar(paciente.id)}
-                          className="bg-red-600 hover:bg-red-700"
-                        >
-                          Eliminar
-                        </AlertDialogAction>
-                      </AlertDialogFooter>
-                    </AlertDialogContent>
-                  </AlertDialog>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      {pacientesFiltrados.length === 0 && (
+                    </TableHead>
+                    <TableHead>
+                      <div className="flex items-center gap-1.5">
+                        <ShieldCheck className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                        <span>Obra Social</span>
+                      </div>
+                    </TableHead>
+                    <TableHead>
+                      <div className="flex items-center gap-1.5">
+                        <Phone className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                        <span>Teléfono</span>
+                      </div>
+                    </TableHead>
+                    <TableHead>
+                      <div className="flex items-center gap-1.5">
+                        <Activity className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                        <span>Estado</span>
+                      </div>
+                    </TableHead>
+                    <TableHead className="w-[80px]">
+                      <div className="flex items-center gap-1.5">
+                        <Settings className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
+                        <span className="sr-only">Acciones</span>
+                      </div>
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {pacientesFiltrados.map((paciente) => {
+                    const internado = estaInternado(paciente.id);
+                    return (
+                      <TableRow key={paciente.id}>
+                        <TableCell className="font-medium text-gray-900 dark:text-white">
+                          <div className="flex items-center gap-2">
+                            <span>{paciente.apellido}</span>
+                            {paciente.alergias && (
+                              <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 text-xs px-1.5 py-0">
+                                <AlertTriangle className="h-2.5 w-2.5 mr-0.5" />
+                                Alergia
+                              </Badge>
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-gray-700 dark:text-gray-300">
+                          {paciente.nombre}
+                        </TableCell>
+                        <TableCell className="text-gray-600 dark:text-gray-400 font-mono">
+                          {paciente.dni}
+                        </TableCell>
+                        <TableCell className="text-gray-600 dark:text-gray-400">
+                          {getEdad(paciente.fechaNacimiento)}
+                        </TableCell>
+                        <TableCell className="text-gray-600 dark:text-gray-400">
+                          {paciente.sexo}
+                        </TableCell>
+                        <TableCell className="text-gray-600 dark:text-gray-400">
+                          {paciente.obraSocial || '-'}
+                        </TableCell>
+                        <TableCell className="text-gray-600 dark:text-gray-400">
+                          {paciente.telefono || '-'}
+                        </TableCell>
+                        <TableCell>
+                          {internado ? (
+                            <Badge className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300 border-purple-200">
+                              Internado
+                            </Badge>
+                          ) : (
+                            <Badge variant="outline" className="bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-300">
+                              Ambulatorio
+                            </Badge>
+                          )}
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center">
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" size="icon" className="h-8 w-8 p-0">
+                                  <MoreHorizontal className="h-4 w-4" />
+                                </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="end">
+                                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem onClick={() => setPacienteVerDetalle(paciente)}>
+                                  <Eye className="h-4 w-4 mr-2 text-teal-600 dark:text-teal-400" />
+                                  Detalles
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onClick={() => handleEditar(paciente)}>
+                                  <Edit2 className="h-4 w-4 mr-2 text-blue-600" />
+                                  Editar paciente
+                                </DropdownMenuItem>
+                                <DropdownMenuItem
+                                  className="text-red-600 focus:text-red-600 focus:bg-red-50 dark:focus:bg-red-950/50"
+                                  onClick={() => {
+                                    setPacienteAEliminar(paciente);
+                                    setDeleteDialogOpen(true);
+                                  }}
+                                >
+                                  <Trash2 className="h-4 w-4 mr-2" />
+                                  Eliminar
+                                </DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          </CardContent>
+        </Card>
+      ) : (
        <div className="text-center py-12 text-gray-400">
          <Users className="h-16 w-16 mx-auto mb-4 opacity-50" />
          <p className="text-lg">
@@ -448,6 +498,150 @@ export function Pacientes({
          )}
        </div>
      )}
+
+      {/* Dialogo de confirmacion de eliminacion */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>¿Eliminar paciente?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Esta acción no se puede deshacer. Se eliminará permanentemente el paciente{' '}
+              <strong>{pacienteAEliminar?.apellido}, {pacienteAEliminar?.nombre}</strong>.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setPacienteAEliminar(null)}>Cancelar</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (pacienteAEliminar) {
+                  onEliminar(pacienteAEliminar.id);
+                  setPacienteAEliminar(null);
+                }
+              }}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              Eliminar
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Dialogo de detalles del paciente */}
+      <Dialog open={!!pacienteVerDetalle} onOpenChange={(open) => { if (!open) setPacienteVerDetalle(null); }}>
+        <DialogContent className="max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-xl">
+              <User className="h-5 w-5 text-teal-600 dark:text-teal-400" />
+              Detalles del Paciente
+            </DialogTitle>
+          </DialogHeader>
+          {pacienteVerDetalle && (
+            <div className="space-y-4 pt-1">
+              <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg space-y-3 border border-gray-100 dark:border-gray-800">
+                <div className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                  {pacienteVerDetalle.apellido || '—'}, {pacienteVerDetalle.nombre || '—'}
+                </div>
+                <div className="grid grid-cols-2 gap-3 text-sm">
+                  <div>
+                    <span className="text-gray-500 dark:text-gray-400 block text-xs">DNI</span>
+                    <span className="font-mono font-medium text-gray-800 dark:text-gray-200">{pacienteVerDetalle.dni || 'Sin especificar'}</span>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 dark:text-gray-400 block text-xs">Sexo</span>
+                    <span className="font-medium text-gray-800 dark:text-gray-200">{pacienteVerDetalle.sexo || 'Sin especificar'}</span>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 dark:text-gray-400 block text-xs">Fecha de Nacimiento</span>
+                    <span className="font-medium text-gray-800 dark:text-gray-200">
+                      {pacienteVerDetalle.fechaNacimiento ? `${pacienteVerDetalle.fechaNacimiento} (${getEdad(pacienteVerDetalle.fechaNacimiento)})` : 'Sin especificar'}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 dark:text-gray-400 block text-xs">Grupo Sanguíneo</span>
+                    <span className="font-medium text-gray-800 dark:text-gray-200">{pacienteVerDetalle.grupoSanguineo || 'Sin especificar'}</span>
+                  </div>
+                  <div className="col-span-2">
+                    <span className="text-gray-500 dark:text-gray-400 block text-xs">Estado Actual</span>
+                    {internaciones.some(i => i.pacienteId === pacienteVerDetalle.id && i.activa) ? (
+                      <Badge className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300 border-purple-200 mt-0.5">
+                        Internado
+                      </Badge>
+                    ) : (
+                      <Badge variant="outline" className="bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-300 mt-0.5">
+                        Ambulatorio
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* Informacion de contacto, filiación y cobertura */}
+              <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300 px-1">
+                <div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
+                  <span className="text-gray-500 dark:text-gray-400">Historia Clínica:</span>
+                  <span className="font-mono font-medium">{pacienteVerDetalle.historiaClinica || 'Sin especificar'}</span>
+                </div>
+                <div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
+                  <span className="text-gray-500 dark:text-gray-400">Obra Social:</span>
+                  <span className="font-medium">{pacienteVerDetalle.obraSocial || 'Sin especificar'}</span>
+                </div>
+                <div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
+                  <span className="text-gray-500 dark:text-gray-400">Nacionalidad:</span>
+                  <span>{pacienteVerDetalle.nacionalidad || 'Sin especificar'}</span>
+                </div>
+                <div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
+                  <span className="text-gray-500 dark:text-gray-400">Teléfono:</span>
+                  <span>{pacienteVerDetalle.telefono || 'Sin especificar'}</span>
+                </div>
+                <div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
+                  <span className="text-gray-500 dark:text-gray-400">Email:</span>
+                  <span>{pacienteVerDetalle.email || 'Sin especificar'}</span>
+                </div>
+                <div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
+                  <span className="text-gray-500 dark:text-gray-400">Dirección:</span>
+                  <span>{pacienteVerDetalle.direccion || 'Sin especificar'}</span>
+                </div>
+              </div>
+
+              {/* Sección Clínica */}
+              <div className="space-y-3 pt-2">
+                <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Información Clínica
+                </h4>
+                <div>
+                  <span className="text-xs text-gray-500 dark:text-gray-400 block mb-1 font-medium">
+                    Medicación Habitual
+                  </span>
+                  <p className="bg-gray-50 dark:bg-gray-800/60 p-2.5 rounded border border-gray-100 dark:border-gray-800 text-xs text-gray-800 dark:text-gray-200 min-h-[38px] whitespace-pre-wrap">
+                    {pacienteVerDetalle.medicacionHabitual || 'Sin medicación habitual registrada'}
+                  </p>
+                </div>
+                <div>
+                  <span className="text-xs text-gray-500 dark:text-gray-400 block mb-1 font-medium">
+                    Antecedentes Médicos
+                  </span>
+                  <p className="bg-gray-50 dark:bg-gray-800/60 p-2.5 rounded border border-gray-100 dark:border-gray-800 text-xs text-gray-800 dark:text-gray-200 min-h-[38px] whitespace-pre-wrap">
+                    {pacienteVerDetalle.antecedentes || 'Sin antecedentes registrados'}
+                  </p>
+                </div>
+                <div>
+                  <span className="text-xs text-red-600 dark:text-red-400 block mb-1 font-medium flex items-center gap-1">
+                    <AlertTriangle className="h-3 w-3" />
+                    Alergias
+                  </span>
+                  <p className={`p-2.5 rounded border text-xs min-h-[38px] whitespace-pre-wrap ${
+                    pacienteVerDetalle.alergias 
+                      ? 'bg-red-50 dark:bg-red-950/30 border-red-200/60 dark:border-red-800/40 text-red-900 dark:text-red-200' 
+                      : 'bg-gray-50 dark:bg-gray-800/60 border-gray-100 dark:border-gray-800 text-gray-500 dark:text-gray-400'
+                  }`}>
+                    {pacienteVerDetalle.alergias || 'Sin alergias registradas'}
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
    </div>
  );
 }
Author	SHA1	Message	Date
snlavaise	d6ac73f79f	Merge remote master into local master	2026-08-11 15:00:48 +00:00
snlavaise	f0b995f046	Alinear tabla de pacientes, agregar modal de detalles completo y actualizar estilo de badge ambulatorio	2026-08-11 14:52:44 +00:00
snlavaise	d17ba39b2d	fix: update section title from Mapa de Camas to Camas	2026-08-11 13:56:31 +00:00
snlavaise	a17deb815e	feat: make side panel Cultivos section read-only and place bed badge on the left	2026-08-11 13:10:55 +00:00