function DashboardGhost() {
  var fakeRows = [
    { id: 'SR-4821', nombre: 'Contrato de Servicios', estado: 'pendiente', firmante: 'María González', fecha: '15-05-2026' },
    { id: 'SR-4820', nombre: 'Mandato Judicial', estado: 'firmado', firmante: 'Carlos Muñoz', fecha: '14-05-2026' },
    { id: 'SR-4819', nombre: 'Poder Simple', estado: 'pendiente', firmante: 'Ana López', fecha: '14-05-2026' },
    { id: 'SR-4818', nombre: 'Escritura Pública', estado: 'firmado', firmante: 'Pedro Soto', fecha: '13-05-2026' },
    { id: 'SR-4817', nombre: 'Contrato Laboral', estado: 'rechazado', firmante: 'Luis Rojas', fecha: '13-05-2026' },
    { id: 'SR-4816', nombre: 'Finiquito', estado: 'firmado', firmante: 'Rosa Díaz', fecha: '12-05-2026' },
    { id: 'SR-4815', nombre: 'Declaración Jurada', estado: 'pendiente', firmante: 'Jorge Vargas', fecha: '12-05-2026' },
    { id: 'SR-4814', nombre: 'Acuerdo Confidencial', estado: 'expirado', firmante: 'Claudia Ríos', fecha: '11-05-2026' },
    { id: 'SR-4813', nombre: 'Contrato de Arriendo', estado: 'firmado', firmante: 'Felipe Torres', fecha: '11-05-2026' },
    { id: 'SR-4812', nombre: 'Carta de Despido', estado: 'pendiente', firmante: 'Daniela Mora', fecha: '10-05-2026' },
    { id: 'SR-4811', nombre: 'Mandato Especial', estado: 'firmado', firmante: 'Andrés Pinto', fecha: '10-05-2026' },
    { id: 'SR-4810', nombre: 'Patrocinio y Poder', estado: 'expirado', firmante: 'Carmen Vega', fecha: '09-05-2026' },
  ];

  return (
    <div className="lg-ghost">
      <header className="lg-ghost-header">
        <div className="lg-ghost-brand">
          <div className="lg-ghost-mark">
            <svg width="20" height="20" viewBox="0 0 22 22" fill="none">
              <rect x="1.5" y="1.5" width="19" height="19" rx="3" stroke="currentColor" strokeWidth="1.4"/>
              <path d="M6 13.5c2-4 4-4 5-4s2 3 5-2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
            </svg>
          </div>
          <div>
            <div className="lg-ghost-name">Firma Electrónica</div>
            <div className="lg-ghost-sub">Panel de Gestión</div>
          </div>
        </div>
        <div className="lg-ghost-btn">Actualizar</div>
      </header>

      <div className="lg-ghost-metrics">
        <GhostMetric k="Total" v={47}/>
        <GhostMetric k="Pendientes" v={18} tone="pending"/>
        <GhostMetric k="Firmados" v={24} tone="signed"/>
        <GhostMetric k="Rechazados" v={3} tone="rejected"/>
        <GhostMetric k="Expirados" v={2} tone="expired"/>
      </div>

      <div className="lg-ghost-filters">
        <div className="lg-ghost-search">Buscar…</div>
        <div className="lg-ghost-select">Estado: Todos</div>
        <div className="lg-ghost-select">Firmante: Todos</div>
        <div className="lg-ghost-select">Desde</div>
        <div className="lg-ghost-select">Hasta</div>
      </div>

      <div className="lg-ghost-table">
        <div className="lg-ghost-thead">
          <div>ID</div><div>Documento</div><div>Estado</div><div>Firmante</div><div>Creado</div><div>Acciones</div>
        </div>
        {fakeRows.map(function(d) {
          return (
            <div key={d.id} className="lg-ghost-row">
              <div className="lg-ghost-id">{d.id}</div>
              <div><div className="lg-ghost-name-t">{d.nombre}</div></div>
              <div><span className={'lg-ghost-pill ' + d.estado}>{d.estado}</span></div>
              <div className="lg-ghost-signer">{d.firmante}</div>
              <div className="lg-ghost-date">{d.fecha}</div>
              <div className="lg-ghost-actions">
                <span className="lg-ghost-iconbtn"/>
                <span className="lg-ghost-iconbtn primary"/>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function GhostMetric(props) {
  return (
    <div className={'lg-ghost-metric tone-' + (props.tone || 'ink')}>
      <div className="lg-ghost-metric-k">{props.k}</div>
      <div className="lg-ghost-metric-v">{props.v}</div>
    </div>
  );
}