// Empty state for non-dashboard modules
const Placeholder = ({ title, description }) => (
  <div className="main">
    <div className="page-head">
      <div>
        <h1 className="page-title">{title}</h1>
        <div className="page-subtitle">{description}</div>
      </div>
    </div>
    <div className="card" style={{ padding: 60, textAlign: 'center' }}>
      <div style={{
        width: 56, height: 56, borderRadius: 14,
        background: 'var(--navy-50)', color: 'var(--navy-800)',
        display: 'grid', placeItems: 'center', margin: '0 auto 16px'
      }}>
        <IconRocket size={26} />
      </div>
      <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 6 }}>Módulo en construcción</div>
      <div className="muted" style={{ fontSize: 13.5, maxWidth: 420, margin: '0 auto' }}>
        Este es un avance del Dashboard de Atica SOMOS. Los demás módulos están en diseño y se irán
        habilitando en próximas iteraciones.
      </div>
    </div>
  </div>
);
window.Placeholder = Placeholder;