  // --- DATSTAGE CONFIG ---
  const datastageModels = [
    {"model":"Registro500","fields":["id","patente","pedimento","seccion_aduanera","consecutivo_remesa","numero_seleccion","fecha_inicio_reconocimiento","hora_inicio_reconocimiento","fecha_fin_reconocimiento","hora_fin_reconocimiento","fraccion","secuencia_fraccion","clave_documento","tipo_operacion","grado_incidencia","fecha_seleccion","organizacion","consulta","datastage","created_at","updated_at"],"filters":{"patente":"1234","pedimento":"5678901","seccion_aduanera":"001","fecha_seleccion":"2023-01-03","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro501","fields":["id","patente","pedimento","seccion_aduanera","tipo_operacion","clave_documento","seccion_aduanera_entrada","curp_contribuyente","rfc","curp_agente_a"],"filters":{"patente":"1234","pedimento":"5678901","seccion_aduanera":"001","tipo_operacion":"IMPORT","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro502","fields":["id","patente","pedimento","seccion_aduanera","tipo_operacion","clave_documento","fecha_pago_real","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","pedimento":"5678901","fecha_pago_real":"2023-01-01","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro503","fields":["id","patente","pedimento","seccion_aduanera","tipo_operacion","clave_documento","fecha_pago_real","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","pedimento":"5678901","fecha_pago_real":"2023-01-01","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro504","fields":["id","patente","pedimento","seccion_aduanera","num_contenedor","tipo_contenedor","fecha_pago_real","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","pedimento":"5678901","num_contenedor":"CONT001","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro505","fields":["id","pedimento","seccion_aduanera","fecha_facturacion","numero_factura","termino_facturacion","moneda_facturacion","valor_dolares","valor_moneda_extranjera","pais_facturacion","entidad_fed_facturacion","indent_fiscal_proveedor","proveedor_mercancia","calle_proveedor","num_interior_proveedor","num_exterior_proveedor","cp_proveedor","municipio_proveedor","fecha_pago_real","organizacion","created_by","consulta","datastage","patente"],"filters":{"pedimento":"5678901","numero_factura":"FAC001","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro506","fields":["id","patente","pedimento","seccion_aduanera","tipo_fecha","fecha_operacion","fecha_validacion_pago_r","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","fecha_operacion":"2023-01-01","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro507","fields":["id","patente","pedimento","seccion_aduanera","clave_caso","identificador_caso","tipo_pedimento","complemento_caso","fecha_validacion_pago_r","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","clave_caso":"CASO001","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro508","fields":["id","patente","pedimento","seccion_aduanera","institucion_emisora","numero_cuenta","folio_constancia","fecha_constancia","tipo_cuenta","clave_garantia","valor_unitario_titulo","total_garantia","cantidad_unidades","titulos_asignados","fecha_pago_real","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","institucion_emisora":"IE01","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro509","fields":["id","patente","pedimento","seccion_aduanera","clave_contribucion","tasa_contribucion","tipo_tasa","tipo_pedimento","fecha_pago_real","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","clave_contribucion":"CC01","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro510","fields":["id","patente","pedimento","seccion_aduanera","clave_contribucion","tasa_contribucion","tipo_tasa","tipo_pedimento","fecha_pago_real","organizacion","created_by","datastage","consulta","forma_pago","importe_pago"],"filters":{"patente":"1234","clave_contribucion":"CC01","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro511","fields":["id","patente","pedimento","seccion_aduanera","secuencia_observacion","observaciones","tipo_pedimento","fecha_validacion_pago_r","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","secuencia_observacion":"OBS01","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro512","fields":["id","patente","pedimento","seccion_aduanera","patente_aduanal_orig","pedimento_original","seccion_aduanera_desp_orig","documento_original","fecha_operacion_orig","fraccion_original","unidad_medida","mercancia_descargada","tipo_pedimento","fecha_pago_real","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","patente_aduanal_orig":"PAO01","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro520","fields":["id","patente","pedimento","seccion_aduanera","indent_fiscal_destinatario","nombre_destinatario_mercancia","calle_destinatario","num_interior_destinatario","num_exterior_destinatario","cp_destinatario","municpio_destinatario","pais_destinatario","fecha_pago_real","organizacion","created_at","consulta","datastage"],"filters":{"patente":"1234","indent_fiscal_destinatario":"IFD01","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro551","fields":["id","patente","pedimento","seccion_aduanera","fraccion","secuencia_fraccion","subdivision_fraccion","descripcion_mercancia","precio_unitario","valor_aduana","valor_comercial","valor_dolares","cantidad_um_comercial","unidad_medida_comercial","cantidad_um_tarifa","unidad_medida_tarifa","valor_agregado","clave_vinculacion","metodo_valorizacion","codigo_mercancia_producto","marca_mercancia_producto","modelo_mercancia_producto","pais_origen_destino","pais_comprador_vendedor","entidad_fed_origen","entidad_fed_comprador","entidad_fed_vendedor","tipo_operacion","clave_documento","fecha_pago_real","organizacion","created_by","consulta","datastage","entidad_fed_destino"],"filters":{"patente":"1234","fraccion":"FRAC001","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro552","fields":["id","patente","pedimento","seccion_aduanera","fraccion","secuencia_fraccion","vin_numero_serie","kilometraje_vehiculo","fecha_pago_real","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","fraccion":"FRAC001","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro553","fields":["id","patente","pedimento","seccion_aduanera","fraccion","secuencia_fraccion","clave_permiso","firma_descargo","numero_permiso","valor_comercial_dolares","cantidad_mum_tarifa","fecha_pago_real","organizacion","created_by","datastage","consulta"],"filters":{"patente":"1234","fraccion":"FRAC001","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro554","fields":["id","patente","pedimento","seccion_aduanera","fraccion","secuencia_fraccion","clave_caso","identificador_caso","complemento_caso","fecha_pago_real","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","fraccion":"FRAC001","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro555","fields":["id","patente","pedimento","seccion_aduanera","fraccion","secuencia_fraccion","institucion_emisora","numero_cuenta","folio_constancia","fecha_constancia","clave_garantia","valor_unitario_titulo","total_garantia","cantidad_unidades_medida","titulos_asignados","fecha_pago_real","organizacion","datastage","created_by","consulta"],"filters":{"patente":"1234","fraccion":"FRAC001","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro556","fields":["id","patente","pedimento","seccion_aduanera","clave_contribucion","tasa_contribucion","tipo_tasa","fecha_pago_real","organizacion","created_by","consulta","datastage","fraccion","secuencia_fraccion"],"filters":{"patente":"1234","clave_contribucion":"CC01","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro557","fields":["id","patente","pedimento","seccion_aduanera","fraccion","secuencia_fraccion","clave_contribucion","forma_pago","importe_pago","fecha_pago_real","organizacion","created_by","datastage","consulta"],"filters":{"patente":"1234","fraccion":"FRAC001","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro558","fields":["id","patente","pedimento","seccion_aduanera","fraccion","secuencia_fraccion","secuencia_observacion","observaciones","fecha_pago_real","organizacion","created_by","datastage","consulta"],"filters":{"patente":"1234","fraccion":"FRAC001","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"RegistroSel","fields":["id","patente","pedimento","seccion_aduanera","consecutivo_remesa","numero_seleccion","fecha_seleccion","hora_seleccion","semaforo_fiscal","clave_documento","tipo_operacion","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","consecutivo_remesa":"REM001","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro701","fields":["id","patente","pedimento","seccion_aduanera","clave_documento","fecha_pago","pedimento_anterior","patente_anterior","seccion_aduanera_anterior","documento_anterior","fecha_operacion_anterior","pedimento_original","patente_aduanal_orig","seccion_aduanera_desp_orig","fecha_pago_real","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","pedimento_anterior":"PEDANT01","organizacion":1,"datastage":1},"type":"excel"},
    {"model":"Registro702","fields":["id","patente","pedimento","seccion_aduanera","clave_contribucion","forma_pago","importe_pago","tipo_pedimento","fecha_pago_real","organizacion","created_by","consulta","datastage"],"filters":{"patente":"1234","clave_contribucion":"CC01","organizacion":1,"datastage":1},"type":"excel"}
  ];

  const [selectedModel, setSelectedModel] = useState('');
  const [filterValues, setFilterValues] = useState({});

  // Obtiene el modelo seleccionado
  const currentModel = datastageModels.find(m => m.model === selectedModel);

  // Actualiza los filtros dinámicamente
  const handleFilterChange = (key, value) => {
    setFilterValues(prev => ({ ...prev, [key]: value }));
  };
import React, { useState } from "react";

// Animación fade-in/slide-up para bloques
const fadeInSlideUp = `@keyframes fadein-slideup {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}`;
if (typeof document !== 'undefined' && !document.getElementById('fadein-slideup-reportes')) {
  const style = document.createElement('style');
  style.id = 'fadein-slideup-reportes';
  style.innerHTML = fadeInSlideUp;
  document.head.appendChild(style);
}

export default function Reportes() {
  const [tipoReporte, setTipoReporte] = useState('');
  const [fechaInicio, setFechaInicio] = useState('');
  const [fechaFin, setFechaFin] = useState('');

  // Datos de ejemplo
  const reportes = [
    { id: 1, nombre: 'Reporte de usuarios activos', tipo: 'Usuarios', fecha: '2025-08-07', estado: 'Completado' },
    { id: 2, nombre: 'Análisis de documentos procesados', tipo: 'Documentos', fecha: '2025-08-06', estado: 'Procesando' },
    { id: 3, nombre: 'Resumen de procesos aduaneros', tipo: 'Procesos', fecha: '2025-08-05', estado: 'Completado' },
    { id: 4, nombre: 'Estadísticas generales del sistema', tipo: 'General', fecha: '2025-08-04', estado: 'Completado' },
    { id: 5, nombre: 'Reporte de expedientes', tipo: 'Documentos', fecha: '2025-08-03', estado: 'Error' },
  ];

  const getEstadoBadge = (estado) => {
    const styles = {
      'Completado': 'bg-emerald-100 text-emerald-800 border-emerald-200',
      'Procesando': 'bg-yellow-100 text-yellow-800 border-yellow-200',
      'Error': 'bg-red-100 text-red-800 border-red-200'
    };
    return styles[estado] || 'bg-gray-100 text-gray-800 border-gray-200';
  };

  const limpiarFiltros = () => {
    setTipoReporte('');
    setFechaInicio('');
    setFechaFin('');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 p-4 lg:p-6">
      <div className="max-w-7xl mx-auto">
        {/* Sección Datastage */}
        <div className="mb-8 animate-fadein-slideup opacity-0" style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.01s forwards' }}>
          <div className="bg-white/80 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100/50 p-6">
            <h2 className="text-xl font-bold text-blue-900 mb-4">Reportes Datastage</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {/* Selector de modelo */}
              <div>
                <label className="block text-xs font-semibold text-gray-700 mb-1">Tabla / Modelo</label>
                <select
                  value={selectedModel}
                  onChange={e => {
                    setSelectedModel(e.target.value);
                    setFilterValues({});
                  }}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
                >
                  <option value="">Selecciona una tabla</option>
                  {datastageModels.map(m => (
                    <option key={m.model} value={m.model}>{m.model}</option>
                  ))}
                </select>
              </div>

              {/* Campos del modelo */}
              <div>
                <label className="block text-xs font-semibold text-gray-700 mb-1">Campos disponibles</label>
                <div className="flex flex-wrap gap-2">
                  {currentModel ? currentModel.fields.map(f => (
                    <span key={f} className="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-mono border border-blue-200">{f}</span>
                  )) : <span className="text-gray-400 italic">Selecciona un modelo</span>}
                </div>
              </div>

              {/* Filtros dinámicos */}
              <div>
                <label className="block text-xs font-semibold text-gray-700 mb-1">Filtros</label>
                {currentModel ? (
                  <form className="space-y-2">
                    {Object.keys(currentModel.filters).map(key => (
                      <div key={key}>
                        <label className="block text-xs text-gray-600 mb-0.5">{key}</label>
                        <input
                          type="text"
                          value={filterValues[key] ?? ''}
                          onChange={e => handleFilterChange(key, e.target.value)}
                          className="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-blue-500"
                          placeholder={String(currentModel.filters[key])}
                        />
                      </div>
                    ))}
                  </form>
                ) : <span className="text-gray-400 italic">Selecciona un modelo para ver filtros</span>}
              </div>
            </div>
          </div>
        </div>
        {/* Header principal */}
        <div className="mb-6 animate-fadein-slideup opacity-0" style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s forwards' }}>
          <div className="bg-white/80 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100/50 p-6 lg:p-8">
            <div className="flex items-start space-x-4">
              <div className="p-3 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl shadow-lg flex-shrink-0">
                <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
              </div>
              <div>
                <h1 className="text-2xl lg:text-3xl font-bold text-gray-900 mb-1">
                  Centro de Reportes
                </h1>
                <p className="text-gray-600">
                  Consulta, genera y descarga reportes relacionados con el sistema aduanero
                </p>
                <div className="mt-3">
                  <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                    📊 {reportes.length} reportes disponibles
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Panel de filtros mejorado */}
        <div className="mb-6 animate-fadein-slideup opacity-0" style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s forwards' }}>
          <div className="bg-white/80 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100/50">
            <div className="px-6 py-4 border-b border-gray-200/50">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl">
                  <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                  </svg>
                </div>
                <h2 className="text-xl font-bold text-gray-900">Filtros de búsqueda</h2>
              </div>
            </div>
            <div className="p-6">
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-4">
                {/* Tipo de reporte */}
                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">Tipo de reporte</label>
                  <select
                    value={tipoReporte}
                    onChange={(e) => setTipoReporte(e.target.value)}
                    className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
                  >
                    <option value="">Todos los tipos</option>
                    <option value="General">General</option>
                    <option value="Usuarios">Usuarios</option>
                    <option value="Documentos">Documentos</option>
                    <option value="Procesos">Procesos</option>
                  </select>
                </div>
                
                {/* Fecha inicio */}
                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">Fecha inicio</label>
                  <input
                    type="date"
                    value={fechaInicio}
                    onChange={(e) => setFechaInicio(e.target.value)}
                    className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
                  />
                </div>
                
                {/* Fecha fin */}
                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">Fecha fin</label>
                  <input
                    type="date"
                    value={fechaFin}
                    onChange={(e) => setFechaFin(e.target.value)}
                    className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
                  />
                </div>
                
                {/* Botón filtrar */}
                <div className="flex items-end">
                  <button className="w-full inline-flex items-center justify-center px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white text-sm font-medium rounded-lg transition-all duration-200 transform hover:scale-105 shadow-lg">
                    <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    Filtrar
                  </button>
                </div>

                {/* Botón limpiar */}
                <div className="flex items-end">
                  <button
                    onClick={limpiarFiltros}
                    className="w-full px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
                  >
                    Limpiar filtros
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Sección de resultados */}
        <div className="bg-white/80 backdrop-blur-xl shadow-xl rounded-2xl border border-blue-100/50 animate-fadein-slideup opacity-0"
          style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.25s forwards' }}>
          
          {/* Header de la sección */}
          <div className="px-6 py-4 border-b border-gray-200/50">
            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
              <div>
                <div className="flex items-center gap-3 mb-2">
                  <div className="p-2 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl">
                    <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                  </div>
                  <h2 className="text-xl font-bold text-gray-900">Reportes disponibles</h2>
                </div>
                <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                  📋 {reportes.length} reportes encontrados
                </span>
              </div>
              
              {/* Botón descargar masivo */}
              <div className="flex flex-col sm:flex-row gap-2">
                <button className="inline-flex items-center justify-center px-4 py-2 bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 text-white text-sm font-medium rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg">
                  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                  Descargar Excel
                </button>
                
                <button className="inline-flex items-center justify-center px-4 py-2 bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white text-sm font-medium rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg">
                  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
                  </svg>
                  Nuevo Reporte
                </button>
              </div>
            </div>
          </div>

          {/* Contenido de reportes */}
          <div className="p-6">
            {/* Vista Desktop - Tabla */}
            <div className="hidden lg:block">
              <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gradient-to-r from-blue-500 to-blue-700">
                    <tr>
                      <th className="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">ID</th>
                      <th className="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Nombre del Reporte</th>
                      <th className="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Tipo</th>
                      <th className="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Fecha</th>
                      <th className="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Estado</th>
                      <th className="px-4 py-3 text-center text-xs font-bold text-white uppercase tracking-wider">Acciones</th>
                    </tr>
                  </thead>
                  <tbody className="bg-white/50 divide-y divide-gray-100">
                    {reportes.map((reporte, index) => (
                      <tr key={reporte.id} className="hover:bg-blue-50 transition-all duration-200">
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                          #{reporte.id.toString().padStart(3, '0')}
                        </td>
                        <td className="px-4 py-3 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">{reporte.nombre}</div>
                        </td>
                        <td className="px-4 py-3 whitespace-nowrap">
                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                            {reporte.tipo}
                          </span>
                        </td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
                          {new Date(reporte.fecha).toLocaleDateString('es-ES', {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric'
                          })}
                        </td>
                        <td className="px-4 py-3 whitespace-nowrap">
                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getEstadoBadge(reporte.estado)}`}>
                            {reporte.estado}
                          </span>
                        </td>
                        <td className="px-4 py-3 whitespace-nowrap text-center">
                          <div className="flex justify-center space-x-2">
                            <button className="inline-flex items-center p-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
                              title="Ver reporte">
                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                              </svg>
                            </button>
                            <button className="inline-flex items-center p-2 border border-blue-300 shadow-sm text-sm font-medium rounded-lg text-blue-700 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
                              title="Descargar">
                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                              </svg>
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Vista Mobile - Cards */}
            <div className="lg:hidden space-y-4">
              {reportes.map((reporte, index) => (
                <div 
                  key={reporte.id} 
                  className="bg-white/80 backdrop-blur-xl rounded-xl shadow-lg border border-gray-200/50 p-4 transition-all duration-200 hover:shadow-xl transform hover:scale-[1.02]"
                  style={{ animationDelay: `${index * 100}ms` }}
                >
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="text-xs font-medium text-gray-500">#{reporte.id.toString().padStart(3, '0')}</span>
                        <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border ${getEstadoBadge(reporte.estado)}`}>
                          {reporte.estado}
                        </span>
                      </div>
                      <h3 className="text-sm font-semibold text-gray-900 mb-1">
                        {reporte.nombre}
                      </h3>
                    </div>
                    <div className="flex space-x-1 ml-2">
                      <button className="p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
                        title="Ver reporte">
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                      </button>
                      <button className="p-2 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors"
                        title="Descargar">
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                      </button>
                    </div>
                  </div>
                  
                  <div className="space-y-2">
                    <div className="flex items-center justify-between text-xs text-gray-600">
                      <span className="inline-flex items-center px-2 py-1 rounded-full bg-gray-100 text-gray-800 font-medium">
                        {reporte.tipo}
                      </span>
                      <span className="flex items-center">
                        <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        {new Date(reporte.fecha).toLocaleDateString('es-ES', {
                          year: 'numeric',
                          month: 'short',
                          day: 'numeric'
                        })}
                      </span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
